Everything About Web Design Just Changed

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
April 02, 2018

Everything About Web Design Just Changed

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

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

April 02, 2018
Tweet

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
  3. None
  4. W T F ? – Jen Simmons ”Everything about web

    design 
 just changed.”
  5. None
  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!

  11. None
  12. Flow

  13. None
  14. None
  15. None
  16. Tables for Layout We n"d a#!

  17. 1996

  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#!

  25. 1984

  26. None
  27. 2000

  28. None
  29. None
  30. CSS It ’s !e web!

  31. 2003

  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!

  36. None
  37. None
  38. Fluid Columns

  39. We n"d a#! It ’s !e web!

  40. Fixed-Width Layouts We n"d a#!

  41. None
  42. Fixed-sized Content

  43. Responsive Web Design It ’s !e web!

  44. 2010 Ethan Marcotte AEA 2010

  45. None
  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

  62. None
  63. Fluid Images, 
 like RWD

  64. None
  65. Fluid, vertically

  66. None
  67. Set width & height

  68. None
  69. Tracks

  70. Better way to squish fluid grids

  71. None
  72. main { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 0 2rem;

    } img { width: 300px; }
  73. Mix fixed and fluid

  74. None
  75. 2. Four Stages of Squish

  76. None
  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
  81. None
  82. None
  83. None
  84. None
  85. None
  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
  100. None
  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.

  108. None
  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

  112. None
  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!

  116. None
  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!