Where we’ve been

Jen recapped the previous eras of web design/layout: Basic HTML with flow layout, CSS, tables for layout, Flash, absolute positioning, fluid columns, floats, fixed-width layouts, then Responsive Web Design.

Enter Intrinsic Web Design

Jen coined the phrase Intrinsic Design to describe the whole system of layout including new and old techniques, and how all these pieces fit together in a brand new way.

Here are some distinguishing features (PS thanks to Adactio’s notes for help with the definition):

  • RWD has flexible images. Intrinsic web design has flexible images or fixed images.
  • Intrinsic design has nested formatting contexts (e.g. flex within grid).
  • RWD has fluid columns. Intrinsic web design has fluid columns and rows (it's two-dimensional).
  • RWD uses media queries. Intrinsic web design doesn’t necessarily need them. For example we can combine different length units (e.g. minmax() with auto) in grid layouts to set stages of squishiness.

Here’s a common layout implemented using various intrinsic design techniques.


When considering layout for different parts of a page we can now use combinations of: CSS Grid, Flexbox, Flow (just letting inline and block elements do their normal thing), and Multi Column.

CSS Grid allows us to do Responsive Web Design better.

In the era of Intrinsic Web Design we don’t just tell things how to look; we can program a flexibility model.

Methods for contracting and expanding

New possibilities for flexibility

Changes in how we use the viewport

  • we can now consider the bottom edge of the viewport
  • we can now program to all four edges of the viewport
  • Some techniques available: vertical centring, vertical viewport units, rows

Nested contexts

Jen regularly chooses to use grid at the layout level and flex at the component level. (This reminded me of Eric Meyer’s advice to set rules for which layout tool to use when).

Here’s another example illustrating flex for component layout nested within a grid layout for the container. (NB this also quite nicely accommodates both long and tall images)

My next actions

  • Watch Jen’s layoutland videos which explain many of the layout techniques she showed in her slides (the Jan Tschichold -style poster layout with angled text was particularly nice).
  • Try out Jen’s CSS Grid Training Exercises.
  • Check Jen’s Labs.
  • Use the order CSS property within Flex and Grid components for sequencing an element in the best way in the HTML structure but making it appear in a different sequence. Good for, for example, positioning the image element of a media object.
  • Remember to use Firefox Nightly, especially when working with Grid. It has great Grid Inspector Tools.