Everything About Web Design Just Changed

Presented at An Event Apart, Seattle, April 2, 2018.

Transcript

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