A presentation at An Event Apart Seattle in in Seattle, WA, USA by Jen Simmons
Everything You Know About Web Design Just Changed Jen Simmons An Event Apart Seattle April 2018
– Jen Simmons ”Everything about web design just changed.” W T F ?
We need more art. Real graphic design.
That’s not how the web works.
Creating Killer Websites David Siegel, 1996
Changing Approaches
to Web Page Layout
Simple HTML It’s the web!
Flow
Tables for Layout We n " d a
!
1996
Creating Killer Websites David Siegel, 1996
Creating Killer Websites David Siegel, 1996
Creating Killer Websites David Siegel, 1996
Creating Killer Websites David Siegel, 1996
Creating Killer Websites David Siegel, 1996
Creating Killer Websites David Siegel, 1996
Flash We n " d a
!
1984
2000
CSS It ’ s ! e web!
2003
Designing with Web
Standards
Jeffrey Zeldman, 2003
HTML
Table Layout
code
HTML
web
standards
for CSS
Semantic Markup
Designing with Web Standards Jeffrey Zeldman, 2003
Fluid Layouts It ’ s ! e web!
Fluid Columns
We n " d a
! It ’ s ! e web!
Fixed-Width Layouts We n " d a
!
Fixed-sized Content
Responsive Web Design It ’ s ! e web!
2010 Ethan Marcotte AEA 2010
Fluid Images & Media Media Queries
2010 Ethan Marcotte AEA 2010
Responsive Web Design has been about so much more than layout.
IMAGES BIG MOBILE STRATEGY M DOT WEBSITE? ONE WEB WHAT’S M? RESPONSIVE IMAGES M CONTEXT? NO SUCH THING THINK SINGLE COLUMN
/ M FIRST DESKTOP & MOBILE ORG BUT CONTENT WON’T FIT TRUNC REORG MANY SYSTEMS HEADLESS CMS SCREEN SIZE? UNKNOWN PERFORMANCE BUDGET SPEED
IMAGES BIG MOBILE STRATEGY M DOT WEBSITE? ONE WEB WHAT’S M? RESPONSIVE IMAGES M CONTEXT? NO SUCH THING THINK SINGLE COLUMN
/ M FIRST DESKTOP & MOBILE ORG BUT CONTENT WON’T FIT TRUNC REORG MANY SYSTEMS HEADLESS CMS SCREEN SIZE? UNKNOWN PERFORMANCE BUDGET SPEED YES.
But let’s do talk about
layout.
1995 2000 2005 2010 2015 2020 Flow-only HTML Tables Flash Fluid Fixed Responsive Intrinsic Abspos
Intrinsic Web Design
Flexible Images Flexible images
or Fixed images, your choice
Flexible (Faux) Column Grid Real Grid Rows & Columns Fixed, fluid, content-sized
Media Queries Media Queries, as needed
Create set of layouts for different screens. Design a flexibility model for your system of content .
Intrinsic Web Design
Mix Fluid with Fixed
Images
Fixed Images, like pre-RWD
Fluid Images, like RWD
Fluid, vertically
Set width & height
Tracks
Better way to squish fluid grids
main { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 0 2rem; }
img { width: 300px; }
Mix fixed and fluid
Four Stages of Squish
Fixed Fluid & Adaptive & Responsive
fixed FR units minmax() auto
min-content sizing
This is a sentence with words. This is a sentence with words. This is a sentence with words. max-content wrapped content, shaped by container min-content
fixed FR units minmax() auto
Four Stages of Squish
Truly 2-D Layout
Rows and columns
200px minmax() 2fr 1fr auto auto 1fr 2fr 100px
White space
200px minmax() 2fr 1fr auto auto 1fr 2fr 100px
youtube.com/layoutland
Can set heights
and widths
Setting heights…
Truly 2-D Layout
Nested Contexts
Flow
Flexbox
formatting context
Grid formatting context
Multicolumn formatting context
Flow
block formatting context
Flexbox formatting context
Grid formatting context
Multicolumn formatting context
nightly.mozilla.org
Nested Contexts
Ways to Contract and Expand
Shrink / Grow (aka, Squish)
Wrap, reflow
Add / remove whitespace
Slide one thing
behind another.
Overlap.
minmax(0, 40ch ) 1fr 1fr auto 1fr 2fr 1fr auto 20%
Ways to Contract and Expand
Media Queries, as needed
Intrinsic Web Design
Fluid & fixed 2. Stages of Squishiness
Rows & Columns 4. Nested Contexts 5. Ways Expand & Contract 6. Media Queries, as needed
We n " d a
! It ’ s ! e web!
CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms
Object Fit
Clip-path
Masking
Shape-outside
Initial-letter
Flow
Floats
Block
Inline
Inline-block
Display: table
Margin
Negative margins
Padding
everything else
in CSS
labs.jensimmons.com
youtube.com / layoutland
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
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.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.