Everything You Know About Web Design Just Changed Jen Simmons An Event Apart Seattle April 2018
Slide 1
Slide 2
Slide 3
– Jen Simmons ”Everything about web design just changed.” W T F ?
Slide 4
Slide 5
We need more art. Real graphic design.
Slide 6
That’s not how the web works.
Slide 7
Creating Killer Websites David Siegel, 1996
Slide 8
Changing Approaches
to Web Page Layout
Slide 9
Simple HTML It’s the web!
Slide 10
Slide 11
Flow
Slide 12
Slide 13
Slide 14
Slide 15
Tables for Layout We n " d a
!
Slide 16
1996
Slide 17
Creating Killer Websites David Siegel, 1996
Slide 18
Creating Killer Websites David Siegel, 1996
Slide 19
Creating Killer Websites David Siegel, 1996
Slide 20
Creating Killer Websites David Siegel, 1996
Slide 21
Creating Killer Websites David Siegel, 1996
Slide 22
Creating Killer Websites David Siegel, 1996
Slide 23
Flash We n " d a
!
Slide 24
1984
Slide 25
Slide 26
2000
Slide 27
Slide 28
Slide 29
CSS It ’ s ! e web!
Slide 30
2003
Slide 31
Designing with Web
Standards
Jeffrey Zeldman, 2003
HTML
Table Layout
code
HTML
web
standards
for CSS
Slide 32
Semantic Markup
Slide 33
Designing with Web Standards Jeffrey Zeldman, 2003
Slide 34
Fluid Layouts It ’ s ! e web!
Slide 35
Slide 36
Slide 37
Fluid Columns
Slide 38
We n " d a
! It ’ s ! e web!
Slide 39
Fixed-Width Layouts We n " d a
!
Slide 40
Slide 41
Fixed-sized Content
Slide 42
Responsive Web Design It ’ s ! e web!
Slide 43
2010 Ethan Marcotte AEA 2010
Slide 44
Slide 45
Fluid Images & Media Media Queries
Slide 46
2010 Ethan Marcotte AEA 2010
Slide 47
Responsive Web Design has been about so much more than layout.
Slide 48
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
Slide 49
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.
Slide 50
But let’s do talk about
layout.
Slide 51
1995 2000 2005 2010 2015 2020 Flow-only HTML Tables Flash Fluid Fixed Responsive Intrinsic Abspos
Slide 52
Intrinsic Web Design
Slide 53
Flexible Images Flexible images
or Fixed images, your choice
Slide 54
Flexible (Faux) Column Grid Real Grid Rows & Columns Fixed, fluid, content-sized
Slide 55
Media Queries Media Queries, as needed
Slide 56
Create set of layouts for different screens. Design a flexibility model for your system of content .
Slide 57
Intrinsic Web Design
Slide 58
Mix Fluid with Fixed
Slide 59
Images
Slide 60
Fixed Images, like pre-RWD
Slide 61
Slide 62
Fluid Images, like RWD
Slide 63
Slide 64
Fluid, vertically
Slide 65
Slide 66
Set width & height
Slide 67
Slide 68
Tracks
Slide 69
Better way to squish fluid grids
Slide 70
Slide 71
main { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 0 2rem; }
img { width: 300px; }
Slide 72
Mix fixed and fluid
Slide 73
Slide 74
Four Stages of Squish
Slide 75
Slide 76
Fixed Fluid & Adaptive & Responsive
Slide 77
fixed FR units minmax() auto
Slide 78
min-content sizing
Slide 79
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
Slide 80
Slide 81
Slide 82
Slide 83
Slide 84
Slide 85
fixed FR units minmax() auto
Slide 86
Four Stages of Squish
Slide 87
Truly 2-D Layout
Slide 88
Rows and columns
Slide 89
200px minmax() 2fr 1fr auto auto 1fr 2fr 100px
Slide 90
White space
Slide 91
200px minmax() 2fr 1fr auto auto 1fr 2fr 100px
Slide 92
youtube.com/layoutland
Slide 93
Can set heights
and widths
Slide 94
Setting heights…
Slide 95
Truly 2-D Layout
Slide 96
Nested Contexts
Slide 97
Flow
Flexbox
formatting context
Grid formatting context
Multicolumn formatting context
Slide 98
Flow
block formatting context
Flexbox formatting context
Grid formatting context
Multicolumn formatting context
Slide 99
Slide 100
nightly.mozilla.org
Slide 101
Nested Contexts
Slide 102
Ways to Contract and Expand
Slide 103
Shrink / Grow (aka, Squish)
Slide 104
Wrap, reflow
Slide 105
Add / remove whitespace
Slide 106
Slide one thing
behind another.
Overlap.
Slide 107
Slide 108
minmax(0, 40ch ) 1fr 1fr auto 1fr 2fr 1fr auto 20%
Slide 109
Ways to Contract and Expand
Slide 110
Media Queries, as needed
Slide 111
Slide 112
Intrinsic Web Design
Slide 113
Fluid & fixed 2. Stages of Squishiness
Rows & Columns 4. Nested Contexts 5. Ways Expand & Contract 6. Media Queries, as needed
Slide 114
We n " d a
! It ’ s ! e web!
Slide 115
Slide 116
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
Slide 117
labs.jensimmons.com
Slide 118
youtube.com / layoutland
Slide 119
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
