Everything You Know About
Web Design Just Changed
Jen Simmons
An Event Apart Boston
June 2018

2020

NOW2015

2010

2005

2000

1995

THE WAY LAYOUT WORKS ON THE WEB

BEFORE RESPONSIVE

2020

NOW

2015

2010

2005

2000

1995

RESPONSIVE

2020

NOW2015

2010

2005

2000

1995

We need more art.
Real graphic
design.

That’s not
how theweb works.

2020

NOW

2015

2010

2005

2000

1995

Attempts to Solve
Web Page Layout

Simple HTMLIt ’s !e web!

2020

NOW2015

2010

2005

2000

1995

HTMLFlowWe n"d a#!

Tables forLayout

2020

NOW2015

2010

2005

2000

1995

FLOW-ONLYHTML TABLES

1996

Creating Killer Websites
David Siegel, 1996

“Like the painters of Russia’s avant grade in the ‘20s,
we felt like pirates. I received flaming threats frompeople who said I didn’t understand the Web, I wasruining the information… because I didn’t
understand the power of the medium. I fired backwith more pages. I made it clear we were not going togo away. If the Puritans wanted a fight, we would giveit to them.”– David Siegal, 1996

Creating Killer
WebsitesDavid Siegel, 1996

Creating Killer
WebsitesDavid Siegel, 1996

Creating Killer
WebsitesDavid Siegel, 1996

We n"d a#!

Flash

2020

NOW

2015

2010

2005

2000

1995

FLOW-ONLYHTML TABLES
FLASH

2000

Flash Web DesignHillman Curtis, 2000

1984CSS
It ’s !e web!

2003

HTMLwebstandards
for CSSHTML
Table Layout
code
Designing with Web
Standards
Jeffrey Zeldman, 2003

Designing with Web
Standards
Jeffrey Zeldman, 2003

Semantic Markup

Separation of Concerns

HTML = content + interface
CSS = styling look & layout

Absolute
Positioning
It ’s !e web!

1984

2020

NOW

2015

2010

2005

2000

1995

ABSPOS

FLOW-ONLYHTML TABLES
FLASHFluid Layouts
using Floats
It ’s !e web!

2020

NOW2015

20102005

2000

1995

ABSPOS

FLOW-ONLYHTML TABLES
FLASH
FLUID

Fluid Columns

It ’s !e web!

We n"d a#!

We n"d a#!

Fixed-WidthLayouts
using Floats

Fixed-sized Content

FLOW-ONLY

ABSPOSHTML TABLES
FLASH
FLUID

2020

NOW

2015

2010

2005

2000

1995

FIXED

Responsive
Web Design
It ’s !e web!

2010

Ethan Marcotte
AEA 2010

FLOW-ONLY

ABSPOSHTML TABLES
FLASH
FLUID
FIXED

ADAPTIVE

2020

NOW

2015

2010

2005

2000

1995

RESPONSIVE

Fluid Images & MediaMedia Queries

2010

Ethan Marcotte
AEA 2010

Responsive Web Design
has been about so much morethan layout.

One Web. No desktop v mobile web.
There is no mobile context.
Unknown / inﬁnite sizes of screens.
Design / develop Mobile ﬁrst.
Truncation is not a content strateg
One content system to serve all.
One design system to serve all.
Responsive images.
Performance.

One Web. No desktop v mobile web.
There is no mobile context.
Unknown / inﬁnite sizes of screens.
Design / develop Mobile ﬁrst.
Truncation is not a content strateg
One content system to serve all.
One design system to serve all.
Responsive images.
Performance.

YES.

Let’s dotalk about layout.

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

Flow
Overflow
FloatsBlock
InlineInline-block
Display: table
MarginNegative margins
Padding
Positioning& everything else in CSSFlow (with writing modes)
CSS Grid
FlexboxMulticolumn

Flexbox
CSS Grid
Flow
Multicolumn

CSS GridResponsive Web Design*now more better.

FLOW-ONLY

ABSPOSHTML TABLES
FLASH
FLUID
FIXED2020

NOW

2015

2010

2005

2000

1995

RESPONSIVE

It ’s !e web!

We n"d a#!

Intrinsic Web Design

“ intrinsic : belonging to theessential nature orconstitution of a thing .”— Merriam-Webster

The new reality ofIntrinsic Web Design

1.
2.
3.

Contracting & Expanding
Flexibility
Viewport

1.

1.

Ways to Contractand Expand SpaceWrap & Reflow

Enlarge / Shrink

Add / RemoveWhitespace

Slide / Overlap

1.

Ways to Contractand Expand SpaceWrap & Reflow

Enlarge / shrink

Add / Remove whitespace
Slide / Overlap

YOUTUBE.COM/
LAYOUTLAND

2.

2. New Possibilities
for FlexibilityImagesFixed Images

Fluid Images

Fluid, verticallySet the width & heightObject Fit

object-fit: cover;

YOUTUBE.COM/
LAYOUTLAND

Fixed-size
Fluid horizontally
Fluid vertically
Set width & height + Object Fit

Columns

Responsive Web Design
everything shrinks andgrows at the same rate%

fixed%FR unitsminmax()automin-content sizing

This is a sentencewith words.

wrapped content,
shaped by container

This is a sentence with words.

max-content

This is asentence
withwords.

min-content

This is asentence
withwords.

Set width in percent — 25%
creates overflow

CSS isawesome

CSS isawesome

1fr track1fr = minmax(min-content, 1fr)
can instead use minmax(0,1fr)fixed%
FR unitsminmax()
autoRows

1fr
20%

2fr

auto
auto

1frminmax(0, 40ch)

1fr

YOUTUBE.COM/
LAYOUTLAND

2. New Possibilities
for Flexibility

Programming
Flexibility ModelPAINTINGDIGITAL REPRESENTATIO N
PRINTED ITEMYO UR SUGGESTIO NS IN CSS
BRO WSER, USER, CO NDITIO NS
WEB PAGE

LAYO UT ALGO RITHM
YO UR SUGGESTIO NS IN CSS
BRO WSER, USER, CO NDITIO NSWEB PAGE

Programming
Flexibility Model3.

3. Change in how weuse the ViewportFluidabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr
stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl
mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh
ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde
fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab
cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy
zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv
wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs
tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm
nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij
klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc
defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

abcdefghijklmnopqrstuvwxyzabcdefg
hijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcd
efghijklmnopqrstuvwxyzabcdefghijklm
nopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzab
cdefghijklmnopqrstuvwxyzabcdefghijk
lmnopqrstuvwxyzabcdefghijklmnopqrs
tuvwxyzabcdefghijklmnopqrstuvwxyza
bcdefghijklmnopqrstuvwxyzabcdefghij
klmnopqrstuvwxyzabcdefghijklmnopq
rstuvwxyzabcdefghijklmnopqrstuvwxy
zabcdefghijklmnopqrstuvwxyzabcdefg
hijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcd
efghijklmnopqrstuvwxyzabcdefghijklm
nopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzab
cdefghijklmnopqrstuvwxyzabcdefghijk
lmnopqrstuvwxyzabcdefghijklmnopqrs
tuvwxyzabcdefghijklmnopqrstuvwxyza
bcdefghijklmnopqrstuvwxyzabcdefghij
klmnopqrstuvwxyzabcdefghijklmnopq
rstuvwxyzabcdefghijklmnopqrs

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl
mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi
jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr
stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc
defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl
mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi
jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

Fixed-widthabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl
mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh
ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde
fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab
cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy
zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv
wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs
tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm
nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij
klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc
defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr
stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl
mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh
ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde
fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab
cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv
wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs
tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm
nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij
klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc
defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw
xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu
vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr
stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno
pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl
mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh
ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab
cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy
zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv
wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs
tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm
nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij
klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc
defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

FluidFixedResponsive!
dlofon!er e isIntrinsic

vertical centering
vertical viewport units
rows in CSS Gridlabs.jensimmons.com/2017/01-008.html

3fr

minmax(100px, 350px)

auto

auto
1fr

YOUTUBE.COM/
LAYOUTLAND

3. Change in how weuse the Viewport

3. Programming to
all four edges ofthe Viewport

Intrinsic Web DesignIt ’s !e web!

We n"d a#!

THE BIG WEB SHOW #176
ZELDMAN.COM

YOUTUBE.COM/
LAYOUTLAND
SUBSCRIBE BY
EMAIL ATLAYOUT.LAND

LABS.JENSIMMONS.COM

LABS.JENSIMMONS.COM

Thanks!

JENSIMMONS.COM@JENSIMMONSLAYOUT.LAND
LABS.JENSIMMONS.COM