Everything You Know
About Web Design
Just Changed
Jen Simmons
An Event Apart Seattle
April 2018

Everything You Know
About Web Design
Just Changed
Jen Simmons
An Event Apart Seattle
April 2018

?
FWT”Everything about web design
just changed.”– Jen Simmons

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 HTMLIt ’s !e web!

Flow

We n"d a#!

Tables forLayout

1996

Creating KillerWebsites
David Siegel, 1996

Creating KillerWebsites
David Siegel, 1996

Creating Killer
WebsitesDavid Siegel, 1996

Creating Killer
WebsitesDavid Siegel, 1996

Creating Killer
WebsitesDavid Siegel, 1996

Creating Killer
WebsitesDavid Siegel, 1996

We n"d a#!

Flash1984

2000CSS
It ’s !e web!

2003

HTMLwebstandards
for CSSHTML
Table Layout
code
Designing with Web
Standards
Jeﬀrey Zeldman, 2003

Semantic Markup

Designing with Web
Standards
Jeﬀrey Zeldman, 2003

Fluid Layouts
It ’s !e web!

Fluid Columns

It ’s !e web!

We n"d a#!

We n"d a#!

Fixed-WidthLayouts

Fixed-sized Content

Responsive Web
DesignIt ’s !e web!2010Ethan Marcotte
AEA 2010

Fluid Images & MediaMedia Queries

2010

Ethan Marcotte
AEA 2010

Responsive Web Design
has been about so much
more than layout.

WHAT’S M?
MOBILE STRATEGYONE WEB
M DOT WEBSITE?
SCREEN SIZE?
UNKNOWN
M CONTEXT?
NO SUCH THINGDESKTOP & MOBILE ORG REORGBUT CONTENT WON’T FIT TRUNCTHINK SINGLE COLUMN / M FIRSTMANY SYSTEMS HEADLESS CMSIMAGES BIG RESPONSIVE IMAGESWHAT’S M?
MOBILE STRATEGYONE WEB
M DOT WEBSITE?
SCREEN SIZE?
UNKNOWN
M CONTEXT?
NO SUCH THINGDESKTOP & MOBILE ORG REORGBUT CONTENT WON’T FIT TRUNCTHINK SINGLE COLUMN / M FIRSTMANY SYSTEMS HEADLESS CMSIMAGES BIG RESPONSIVE IMAGES

YES.

But let’s dotalk aboutlayout.

Flow-onlyHTML Tables

Abspos

Flash

Fluid
Fixed2020

2015

2010

2005

2000

1995

Responsive

Intrinsic Web Design

Flexible Images
Flexible images
or Fixed images,
your choiceFlexible (Faux) Column Grid

Real Grid
Rows & Columns
Fixed, ﬂuid, content-sizedMedia Queries

Media Queries, as neededCreate set of layouts for diﬀerent screens.

Design a
ﬂexibility modelfor 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 & heightTracks

Better way to squish
ﬂuid grids

main {display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 0 2rem;}img {width: 300px;}

Mix ﬁxed and ﬂuid

2. Four Stages of Squish

Fixed
Fluid& Adaptive& Responsive

ﬁxedFR units
minmax()automin-content sizing

This is a sentencewith words.

wrapped content,
shaped by container

This is a sentence with words.

max-content

This is asentencewithwords.

min-contentﬁxed
FR unitsminmax()auto2. Four Stages of Squish3. Truly 2-D Layout

Rows and columns

200px
100px

auto

1fr

2fr

minmax()

2fr

1fr

auto

White space

200px
100px

auto

1fr

2fr

minmax()

2fr

1fr

auto

youtube.com/layoutland

Can set heights
and widths

Setting heights…

3. Truly 2-D Layout

4. 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

4. Nested Contexts

5. Ways to Contractand Expand

Shrink / Grow(aka, Squish)

Wrap, reﬂow

Add / remove
whitespaceSlide one thing
behind another.
Overlap.

1fr
20%

2fr

auto
auto

1fr

minmax(0, 40ch)

1fr

5. Ways to Contractand Expand

6. Media Queries,
as needed

Intrinsic Web Design1. Fluid & ﬁxed
2. Stages of Squishiness
3. Rows & Columns
4. Nested Contexts
5. Ways Expand & Contract
6. Media Queries, as neededIt ’s !e web!

We n"d a#!

CSS Grid
Flexbox
Alignment
Writing Modes
Multicolumn
Viewport Units
Transforms
Object Fit
Clip-path
Masking
Shape-outside
Initial-letter

Flow
FloatsBlock
InlineInline-block
Display: table
MarginNegative margins
Padding
everything else
in CSS

labs.jensimmons.com

youtube.com/
layoutland

Thanks!

jensimmons.com@jensimmonslayout.land

labs.jensimmons.com