Everything About Web Design Just Changed

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!