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()withauto) in grid layouts to set stages of squishiness.
Here’s a common layout implemented using various intrinsic design techniques.
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
- Wrap and reflow (not just simple HTML text elements – Jen’s example was a row of media objects laid out using responsive Grid)
- Enlarge/shrink (especially using viewport units; for example you could style
bodysuch that its margin and font-size are set invw) - Add or remove real whitespace (e.g. by explicit placement of items on a grid or vertical and horizontal centring using flex)
- Slide and overlap (grid items can be positioned so as to overlap)
New possibilities for flexibility
- Images: fixed-size; fluid horizontally; fluid vertically; set width & height + Object Fit (e.g. width: 100%, height: 50vw, object-fit: cover;). Object Fit works by auto-cropping an image to fit the available space. A photo of a person can be a good use case.
- Columns and Rows. Lengths (widths or heights) can be fixed, %, FR units (fraction of available space), minmax(), or a keyword such as auto, min-content, or max-content.
- Here’s an example of various flexibility settings combined in a row (also illustrating what Jen called the “stages of squish”!).
- Here’s an interesting grid layout with large image and overlapping, offset caption.
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
orderCSS 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.
