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
   

   View Slide

2. Everything You Know
   About Web Design
   Just Changed
   Jen Simmons
   An Event Apart Seattle
   April 2018
   

   View Slide

3. View Slide

4. W T F ?
   – Jen Simmons
   ”Everything about web design 

   just changed.”
   

   View Slide

5. View Slide

6. We need more art.

   Real graphic design.
   

   View Slide

7. That’s not
   how the web
   works.
   

   View Slide

8. Creating Killer Websites
   David Siegel, 1996
   

   View Slide

9. Changing Approaches
   to Web Page Layout
   

   View Slide

10. Simple HTML
    It ’s !e web!
    

    View Slide

11. View Slide

12. Flow
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. Tables for
    Layout
    We n"d a#!
    

    View Slide

17. View Slide

18. Creating Killer
    Websites

    David Siegel, 1996
    

    View Slide

19. Creating Killer
    Websites

    David Siegel, 1996
    

    View Slide

20. Creating Killer
    Websites

    David Siegel, 1996
    

    View Slide

21. Creating Killer
    Websites

    David Siegel, 1996
    

    View Slide

22. Creating Killer
    Websites

    David Siegel, 1996
    

    View Slide

23. Creating Killer
    Websites

    David Siegel, 1996
    

    View Slide

24. Flash
    We n"d a#!
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. CSS
    It ’s !e web!
    

    View Slide

31. View Slide

32. Designing with Web
    Standards

    Jeffrey Zeldman, 2003
    HTML
    Table Layout 

    code
    HTML
    web
    standards
    for CSS
    

    View Slide

33. Semantic Markup
    

    View Slide

34. Designing with Web
    Standards

    Jeffrey Zeldman, 2003
    

    View Slide

35. Fluid Layouts
    It ’s !e web!
    

    View Slide

36. View Slide

37. View Slide

38. Fluid Columns
    

    View Slide

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

    View Slide

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

    View Slide

41. View Slide

42. Fixed-sized Content
    

    View Slide

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

    View Slide

44. 2010
    Ethan Marcotte
    AEA 2010
    

    View Slide

45. View Slide

46. Fluid Images & Media
    Media Queries
    

    View Slide

47. 2010
    Ethan Marcotte
    AEA 2010
    

    View Slide

48. Responsive Web Design 

    has been about so much
    more than layout.
    

    View 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
    

    View Slide

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.
    

    View Slide

51. But let’s do 

    talk about
    layout.
    

    View Slide

52. 1995
    2000
    2005
    2010
    2015
    2020
    Flow-only
    HTML Tables
    Flash
    Fluid
    Fixed
    Responsive
    Abspos
    

    View Slide

53. Intrinsic Web Design
    

    View Slide

54. Flexible Images
    Flexible images
    or Fixed images,

    your choice
    

    View Slide

55. Flexible (Faux) Column Grid
    Real Grid
    Rows & Columns

    Fixed, fluid, content-sized
    

    View Slide

56. Media Queries
    Media Queries, as needed
    

    View Slide

57. Create set of layouts for different screens.
    Design a 

    flexibility model 

    for your system of content.
    

    View Slide

58. Intrinsic Web Design
    

    View Slide

59. 1. Mix Fluid with Fixed
    

    View Slide

60. Images
    

    View Slide

61. Fixed Images, 

    like pre-RWD
    

    View Slide

62. View Slide

63. Fluid Images, 

    like RWD
    

    View Slide

64. View Slide

65. Fluid, vertically
    

    View Slide

66. View Slide

67. Set width & height
    

    View Slide

68. View Slide

69. Tracks
    

    View Slide

70. Better way to squish
    fluid grids
    

    View Slide

71. View Slide

72. main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 0 2rem;
    }
    img {
    width: 300px;
    }
    

    View Slide

73. Mix fixed and fluid
    

    View Slide

74. View Slide

75. 2. Four Stages of Squish
    

    View Slide

76. View Slide

77. Fixed
    Fluid
    & Adaptive
    & Responsive
    

    View Slide

78. fixed
    FR units
    minmax()
    auto
    

    View Slide

79. min-content sizing
    

    View Slide

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
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. fixed
    FR units
    minmax()
    auto
    

    View Slide

87. 2. Four Stages of Squish
    

    View Slide

88. 3. Truly 2-D Layout
    

    View Slide

89. Rows and columns
    

    View Slide

90. 200px minmax() 2fr 1fr auto
    auto
    1fr
    2fr
    100px
    

    View Slide

91. White space
    

    View Slide

92. 200px minmax() 2fr 1fr auto
    auto
    1fr
    2fr
    100px
    

    View Slide

93. youtube.com/layoutland
    

    View Slide

94. Can set heights
    and widths
    

    View Slide

95. Setting heights…
    

    View Slide

96. 3. Truly 2-D Layout
    

    View Slide

97. 4. Nested Contexts
    

    View Slide

98. Flow
    Flexbox formatting context
    Grid formatting context
    Multicolumn formatting context
    

    View Slide

99. Flow block formatting context
    Flexbox formatting context
    Grid formatting context
    Multicolumn formatting context
    

    View Slide

100. View Slide

101. nightly.mozilla.org
     

     View Slide

102. 4. Nested Contexts
     

     View Slide

103. 5. Ways to Contract 

     and Expand
     

     View Slide

104. Shrink / Grow
     (aka, Squish)
     

     View Slide

105. Wrap, reflow
     

     View Slide

106. Add / remove
     whitespace
     

     View Slide

107. Slide one thing
     behind another.
     Overlap.
     

     View Slide

108. View Slide

109. minmax(0, 40ch)
     1fr 1fr
     auto
     1fr
     2fr
     1fr
     auto
     20%
     

     View Slide

110. 5. Ways to Contract 

     and Expand
     

     View Slide

111. 6. Media Queries,

     as needed
     

     View Slide

112. View Slide

113. Intrinsic Web Design
     

     View Slide

114. 1. Fluid & fixed
     2. Stages of Squishiness
     3. Rows & Columns
     4. Nested Contexts
     5. Ways Expand & Contract
     6. Media Queries, as needed
     

     View Slide

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

     View Slide

116. View Slide

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
     

     View Slide

118. labs.jensimmons.com
     

     View Slide

119. youtube.com/
     layoutland
     

     View Slide

120. jensimmons.com
     @jensimmons
     layout.land
     labs.jensimmons.com
     Thanks!
     

     View Slide