Everything You Know About Web Design Just Changed Jen Simmons View Source London October 2018
Slide 1
Slide 2
noti.st/jensimmons @jensimmons
Slide 3
Everything You Know About Web Design Just Changed & t u o y a L n g i s e D c i h p Gra Jen Simmons View Source London October 2018
Slide 4
2020 NOW 2015 2010 2005 2000 1995 THE WAY LAYOUT WORKS ON THE WEB
Slide 5
BEFORE RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE
Slide 6
2020 NOW 2015 2010 2005 2000 1995
Slide 7
Slide 8
We need more art. Real graphic design.
Slide 9
That’s not how the web works.
Slide 10
2020 NOW 2015 2010 2005 2000 1995 Attempts to Solve Web Page Layout
Slide 11
Simple HTML It ’s !e web!
Slide 12
2020 NOW 2015 2010 2005 2000 1995 HTML
Slide 13
Slide 14
LESSON LEARNE Flow
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
We n"d a#! Tables for Layout
Slide 20
2020 NOW 2015 2010 2005 2000 1995 FLOW-ONLY HTML TABLES
Slide 21
Creating Killer Websites David Siegel, 1996
Slide 22
Creating Killer Websites David Siegel, 1996
Slide 23
Creating Killer Websites David Siegel, 1996
Slide 24
Slide 25
We n"d a#! Flash
Slide 26
2020 NOW 2015 2010 2005 2000 1995 FLOW-ONLY HTML TABLES FLASH
Slide 27
Flash Web Design Hillman Curtis, 2000
Slide 28
1984
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
The Web It ’s !e web!
Slide 34
CSS It ’s !e web!
Slide 35
HTML web standards for CSS HTML Table Layout code Designing with Web Standards Jeffrey Zeldman, 2003
Slide 36
Designing with Web Standards Jeffrey Zeldman, 2003
Slide 37
LESSON LEARNE Semantic Markup
Slide 38
LESSON LEARNE Separation of Concerns HTML = content + interface CSS = visual look & layout
Slide 39
Layout in CSS? It ’s !e web!
Slide 40
Absolute Positioning It ’s !e web!
Slide 41
1984
Slide 42
Slide 43
2020 NOW 2015 2010 2005 2000 1995 ABSPOS FLOW-ONLY HTML TABLES FLASH
Slide 44
Fluid Layouts using Floats It ’s !e web!
Slide 45
Slide 46
Slide 47
LESSON LEARNE Fluid Columns
Slide 48
Slide 49
2020 NOW 2015 2010 2005 2000 1995 ABSPOS FLOW-ONLY HTML TABLES FLASH FLUID
Slide 50
It ’s !e web! We n"d a#!
Slide 51
We n"d a#! Fixed-Width Layouts using Floats
Slide 52
Slide 53
2006-10
Slide 54
Slide 55
LESSON LEARNE Fixed-sized Content
Slide 56
FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID 2020 NOW 2015 2010 2005 2000 1995 FIXED
Slide 57
Responsive Web Design It ’s !e web!
Slide 58
2010 Ethan Marcotte AEA 2010
Slide 59
FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID FIXED ADAPTIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE
Slide 60
Slide 61
LESSON LEARNE Fluid Images & Media Media Queries
Slide 62
Slide 63
drawing by Dave Ellis novolume.co.uk
Slide 64
CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path Masking Shape-outside Initial-letter Flow Overflow Floats Block Inline Inline-block Display: table Margin Negative margins Padding Positioning & everything else in CSS
Slide 65
Flow (with writing modes) CSS Grid Flexbox Multicolumn
Slide 66
Flexbox CSS Grid Flow Multicolumn
Slide 67
CSS Grid
Slide 68
Responsive Web Design *now more better.
Slide 69
FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID FIXED 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE
Slide 70
It ’s !e web! We n"d a#!
Slide 71
Intrinsic Web Design
Slide 72
“ intrinsic : belonging to the essential nature or constitution of a thing .” — Merriam-Webster
Slide 73
The new reality of Intrinsic Web Design
Slide 74
Contracting & Expanding Flexibility Viewport
Slide 75
Slide 76
Ways to Contract and Expand Space
Slide 77
Wrap & Reflow
Slide 78
Slide 79
Slide 80
Slide 81
Enlarge / Shrink
Slide 82
Slide 83
Slide 84
Slide 85
Slide 86
Add / Remove Whitespace
Slide 87
Slide 88
Slide 89
Slide 90
Slide 91
Slide / Overlap
Slide 92
Slide 93
Slide 94
Slide 95
Ways to Contract and Expand Space
Slide 96
Wrap & Reflow Enlarge / Shrink Add / Remove Whitespace Slide / Overlap
Slide 97
YOUTUBE.COM/ LAYOUTLAND
Slide 98
Slide 99
- New Possibilities for Flexibility
Slide 100
Columns
Slide 101
Responsive Web Design everything shrinks and grows at the same rate
Slide 102
Slide 103
%
Slide 104
fixed min-content, max-content % FR units minmax() auto
Slide 105
FR units
Slide 106
min-content sizing
Slide 107
This is a sentence with words. wrapped content, shaped by container This is a sentence with words. max-content This is a sentence with words. min-content
Slide 108
This is a sentence with words. Set width in percent — 25% creates overflow
Slide 109
CSS is awesome
Slide 110
Slide 111
CSS is awesome 1fr track
Slide 112
Slide 113
Slide 114
Slide 115
Slide 116
Slide 117
fixed min-content, max-content % FR units minmax() auto
Slide 118
Rows
Slide 119
1fr 20% 2fr auto auto 1fr minmax(0, 40ch) 1fr
Slide 120
Slide 121
YOUTUBE.COM/ LAYOUTLAND
Slide 122
- New Possibilities for Flexibility
Slide 123
Slide 124
- Change in how we use the Viewport
Slide 125
Slide 126
Fluid Fixed Responsive ! d l o f o n !er e is
Slide 127
Intrinsic
Slide 128
vertical centering vertical viewport units grid rows
Slide 129
labs.jensimmons.com/2017/01-008.html
Slide 130
minmax(100px, 350px) auto auto 1fr 100vh 3fr
Slide 131
YOUTUBE.COM/ LAYOUTLAND
Slide 132
- Change in how we use the Viewport
Slide 133
Intrinsic Web Design
Slide 134
It ’s !e web! We n"d a#!
Slide 135
Slide 136
THE BIG WEB SHOW #176 ZELDMAN.COM
Slide 137
SHOP TALK SHOW #328
Slide 138
YOUTUBE.COM/ LAYOUTLAND SUBSCRIBE BY EMAIL AT LAYOUT.LAND
Slide 139
LABS.JENSIMMONS.COM
Slide 140
LABS.JENSIMMONS.COM
Slide 141
Slide 142
Thanks! JENSIMMONS.COM @JENSIMMONS LAYOUT.LAND LABS.JENSIMMONS.COM
