An Event Apart: “Everything You Know About Web Design Just Changed”

Jen Simmons speaking at An Event Apart Seattle 2018 on April 2, 2018.

2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.

Notes

  • There has been a fight going on for a long time between art and the web
    • We need more art, real graphic design
    • That’s not how the web works
  • We want the art, but we need to be practical about the limitations
  • Models of web page layout — 5 major inflection points in the past 25 years
    • Simple HTML
      • Flow layout — the only thing available at the start of the web
      • Tables for layout — Creating Killer Websites by David Siegel (1996) started this era
    • Flash
      • Flash Web Design by Hillman Curtis (2000)
      • You either got the entire experience or none of the experience
      • CSS, Semantic markup — we started going back to standards after Designing With Web Standards by Jeffrey Zeldman (2003)
    • Fluid layouts
      • Fluid columns
      • Putting columns next to each other looked like a grid
    • Fixed-width layouts
      • Fixed-sized content
      • A bit more control over the design
    • Responsive web design
      • Fluid images and media, media queries
      • Back to fluid layouts
      • A response to the mobile phone
      • Responsive Web Design has been about so much more than layout
  • Differences between Intrinsic Web Design and Responsive Web Design
    • RWD:
      • Flexible images
      • Flexible (faux) column grid
      • Media queries
      • Create set of layouts for different screens
    • IWD:
      • Flexible images or fixed images, your choice
      • Real grid — rows and columns — fixed, fluid, content-sized
      • Media queries, as needed
      • Design a flexibility model for your system of content
  • Intrinsic Web Design
    1. Mix fluid with fixed
      • Images
        • Fixed images, like pre-RWD
        • Fluid images, like RWD
        • Fluid, vertically
        • Set width and height
      • Tracks
        • Better way to squish fluid grids
        • Mix fixed and fluid
    2. Four stages of squish:
      1. Fixed
      2. fr units (fluid)
      3. minmax() (fluid until fixed)
      4. auto (a return to flow)
    3. Truly 2-D layout
      • Rows and columns
      • White space
      • Can set heights and widths
    4. Nested contexts
      • Flow
      • Flexbox (formatting context)
      • Grid (formatting context)
      • Multicolumn (formatting context)
    5. Ways to contract and expand
      • Shrink/grow (a.k.a. squish)
      • Wrap, reflow
      • Add/remove whitespace
      • Slide one thing behind another — overlap
    6. Media queries, as needed
  • Intrinsic Web Design
    1. Fluid & fixed
    2. Stages of Squishiness
    3. Rows & Columns
    4. Nested Contexts
    5. Ways Expand & Contract
    6. Media Queries, as needed

Speaker Links and Resources

Related Links