Jen Simmons A n E vent A part D.C. July 2018 E verything Y ou K now A bout Web D esign Just Changed
Slide 1
Slide 2
THE WAY LAYOUT WORKS ON THE WEB 1995 2000 2005 2010 2015 2020 NOW
Slide 3
RESPONSIVE BEFORE RESPONSIVE 1995 2000 2005 2010 2015 2020 NOW
Slide 4
1995 2000 2005 2010 2015 2020 NOW
Slide 5
Slide 6
We need more art. R eal graphic design.
Slide 7
T h a t ’ s
not
ho w th e we b w orks .
Slide 8
1995 2000 2005 2010 2015 2020 A/ empts to Solve Web P age Layout NOW
Slide 9
Simp le H T ML It ’ s ! e web!
Slide 10
HTML 1995 2000 2005 2010 2015 2020 NOW
Slide 11
Slide 12
F low LESSON LEARNED
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Tables for Layout We n " d a
!
Slide 18
1995 2000 2005 2010 2015 2020 HTML TABLES FLOW-ONLY NOW
Slide 19
1996
Slide 20
Creating K iller Websites David Siegel, 1996
Slide 21
– David Siegal, 1996 Like the painters of Russia’s avant grade in the ‘20s, we felt like pirates. I received flaming threats from people who said I didn’t understand the Web, I was ruining the information… because I didn’t understand the power of the medium. I fired back with more pages. I made it clear we were not going to go away. If the Puritans wanted a fight, we would give it to them.” “
Slide 22
Creating K iller Websites D avid Siegel, 1996
Slide 23
Creating K iller Websites D avid Siegel, 1996
Slide 24
Creating Killer Websites David Siegel, 1996
Slide 25
Slide 26
F lash We n " d a
!
Slide 27
1995 2000 2005 2010 2015 2020 FLOW-ONLY HTML TABLES FLASH NOW
Slide 28
2 000
Slide 29
F lash Web D esign H illman Curtis, 2 000
Slide 30
1984
Slide 31
Slide 32
Slide 33
Slide 34
Slide 35
CSS It ’ s ! e web!
Slide 36
2 00 3
Slide 37
D
esigning with Web
Standards
Jeffrey Zeldman, 2
00
3
HTML
Table Layout
code
HTML
web
standards
for CSS
Slide 38
D esigning with Web Standards Jeffrey Zeldman, 2 00 3
Slide 39
Semantic Markup LESSON LEARNED
Slide 40
Separation of Concerns H TML = content + interface CSS = styling look & layout LESSON LEARNED
Slide 41
Abso l ut e Positionin g It ’ s ! e web!
Slide 42
1984
Slide 43
Slide 44
1995 2000 2005 2010 2015 2020 FLOW-ONLY HTML TABLES ABSPOS FLASH NOW
Slide 45
Fl uid La youts
usin g Fl o a ts It ’ s ! e web!
Slide 46
1995 2000 2005 2010 2015 2020 FLOW-ONLY HTML TABLES FLUID FLASH ABSPOS NOW
Slide 47
Slide 48
Slide 49
F luid Columns LESSON LEARNED
Slide 50
We n " d a
! It ’ s ! e web!
Slide 51
F ixed-Width Layouts using F loats We n " d a
!
Slide 52
Slide 53
F ixed-sized Content LESSON LEARNED
Slide 54
1995 2000 2005 2010 2015 2020 FLOW-ONLY HTML TABLES FLUID FIXED FLASH ABSPOS NOW
Slide 55
Re sponsi ve We b De si g n It ’ s ! e web!
Slide 56
2 0 1 0 Ethan Marcotte AEA 2010
Slide 57
1995 2000 2005 2010 2015 2020 FLOW-ONLY HTML TABLES FLUID FIXED RESPONSIVE FLASH ADAPTIVE ABSPOS NOW
Slide 58
Slide 59
F luid Images & Media Media Q ueries LESSON LEARNED
Slide 60
2 0 1 0 Ethan Marcotte AEA 2010
Slide 61
Responsive Web Design has been about so much more than layout.
Slide 62
Performance. One Web. No desktop v mobile web. Design / develop Mobile first. Truncation is not a content strateg Responsive images. There is no mobile context. One design system to serve all. Unknown / infinite sizes of screens. One content system to serve all.
Slide 63
Performance. One Web. No desktop v mobile web. Design / develop Mobile first. Truncation is not a content strateg Responsive images. There is no mobile context. One design system to serve all. Unknown / infinite sizes of screens. One content system to serve all. YES.
Slide 64
L et’s do tal k about layout.
Slide 65
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 66
F low (with writing modes)
CSS G rid F lexbox Multicolumn
Slide 67
F lexbox CSS G rid F low Multicolumn
Slide 68
CSS G rid
Slide 69
Responsive Web Design *now more better.
Slide 70
1995 2000 2005 2010 2015 2020 HTML TABLES FLUID FIXED RESPONSIVE FLOW-ONLY FLASH ABSPOS NOW
Slide 71
We n " d a
! It ’ s ! e web!
Slide 72
Intrinsic Web D esign
Slide 73
— Merriam-Webster intrinsic : belonging to the essential nature or constitution of a thing .” “
Slide 74
Slide 75
T he new reality of Intrinsic Web D esign
Slide 76
Contracting & E xpanding 2. F lexibility 3. Viewport
Slide 77
Slide 78
Ways to Contract and E xpand Space
Slide 79
Wrap & R eflow
Slide 80
Slide 81
Slide 82
Slide 83
E nlarge / Shrink
Slide 84
Slide 85
Slide 86
Slide 87
A
dd /
R
emove
Whitespace
Slide 88
Slide 89
Slide 90
Slide 91
Slide / O verlap
Slide 92
Slide 93
Slide 94
Slide 95
Ways to Contract and E xpand Space
Slide 96
Wrap & R eflow E nlarge / Shrink A dd / R emove Whitespace Slide / O verlap
Slide 97
YO UTUB E .C O M / L AY O UTL A ND
Slide 98
Slide 99
New P ossibilities for F lexibility
Slide 100
Images
Slide 101
F ixed Images
Slide 102
Slide 103
F luid Images
Slide 104
Slide 105
F luid, vertically
Slide 106
Slide 107
Set the width & height
Slide 108
Slide 109
O bject F it
Slide 110
object-fit: cover;
Slide 111
Slide 112
YO UTUB E .C O M / L AY O UTL A ND
Slide 113
F
ixed-size
F
luid horizontally
F
luid vertically
Set width & height +
O
bject
F
it
Slide 114
Columns
Slide 115
Responsive Web Design everything shrinks and grows at the same rate
Slide 116
Slide 117
%
Slide 118
fixed % F R units minmax() auto
Slide 119
min-content sizing
Slide 120
This is a sentence with words. max-content This is a sentence with words. wrapped content, shaped by container This is a sentence with words. min-content
Slide 121
This is a
sentence
with
words.
Set width in percent — 25%
creates overflow
Slide 122
CSS is awesome
Slide 123
CSS is awesome 1fr track
Slide 124
1fr = minmax(min-content, 1fr) can instead use minmax(0,1fr)
Slide 125
Slide 126
Slide 127
Slide 128
Slide 129
Slide 130
fixed % F R units minmax() auto
Slide 131
R ows
Slide 132
minmax( 0 , 4 0 ch) 1fr 1fr auto 1fr 2fr auto 2 0 %
Slide 133
Slide 134
YO UTUB E .C O M / L AY O UTL A ND
Slide 135
New P ossibilities for F lexibility
Slide 136
P rogramming F lexibility Model
Slide 137
P A INTIN G
Slide 138
PRINT E D IT E M DI G IT A L R E PR E S E NT A TI O N
Slide 139
W E B P AGE BR O WS E R, US E R, C O NDITI O NS YO UR SU GGE STI O NS IN CSS
Slide 140
W E B P AGE BR O WS E R, US E R, C O NDITI O NS YO UR SU GGE STI O NS IN CSS L AY O UT A L GO RIT H M
Slide 141
P rogramming F lexibility Model
Slide 142
Slide 143
Change in how we use the Viewport
Slide 144
Slide 145
F luid 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 jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs
Slide 146
F ixed-width abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs
Slide 147
F ixed R esponsive F luid !e r e i s
n o fo l d!
Slide 148
Intrinsic
Slide 149
vertical centering vertical viewport units rows
Slide 150
labs.jensimmons.com/2017/01-008.html
Slide 151
auto 1fr minmax(1 00 px, 35 0 px) auto 3fr
Slide 152
YO UTUB E .C O M / L AY O UTL A ND
Slide 153
Change in how we use the Viewport
Slide 154
P rogramming to all four edges of the Viewport
Slide 155
Intrinsic Web D esign
Slide 156
We n " d a
! It ’ s ! e web!
Slide 157
Slide 158
T HE BI G W E B S HO W #176 Z E LDM A N.C O M
Slide 159
YO UTUB E .C O M/ L AY O UTL A ND SUBSCRIB E BY EMAIL AT LAY O UT.LAND
Slide 160
LABS.JENSIMMONS.COM
Slide 161
LABS.JENSIMMONS.COM
Slide 162
Slide 163
J E NSIMM O NS.C O M @J E NSIMM O NS L AY O UT.L A ND L A BS.J E NSIMM O NS.C O M Th an k s !
