How New CSS Is Changing Everything About Graphic Design on the Web

Transcript

1. How New CSS Is Changing
   Everything About Graphic
   Design on the Web
   W3C Publishing Summit
   @jenSimmons
   

   View Slide

2. @jensimmons
   

   View Slide

3. Layout & The Web
   

   View Slide

4. Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
   

   View Slide

5. View Slide

6. drawing by Dave Ellis
   novolume.co.uk
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. The web wasn’t
    always like this
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. What Happened?
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. CSS Floats
    

    View Slide

41. View Slide

42. The Official Timeline of Web Page Layout
    The
    No-Layout
    Layout
    Table-based
    Layouts
    Hand-coded
    Float Layouts
    Framework
    Layouts Amazing
    Future!
    

    View Slide

43. 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

44. This new CSS
    changes everything
    in web layout.
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. Hot metal composition: Pasteup ::
    Floats : CSS Grid
    

    View Slide

49. labs.jensimmons.com
    

    View Slide

50. 1.
    

    View Slide

51. View Slide

52. View Slide

53. 2.
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. photo by Brad Frost, 2012, CC BY 2.0
    

    View Slide

60. View Slide

61. 3.
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. 4.
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. 5.
    

    View Slide

76. labs.jensimmons.com/2017/01-008.html
    

    View Slide

77. labs.jensimmons.com/2017/01-008.html
    

    View Slide

78. labs.jensimmons.com/2017/01-008.html
    

    View Slide

79. Tools
    

    View Slide

80. CSS Shapes
    

    View Slide

81. View Slide

82. img {
    float: left;
    shape-outside: circle();
    }
    

    View Slide

83. img {
    width: 200px;
    margin: 0 1.5em 0.5em 0;
    float: left;
    }
    

    View Slide

84. img {
    width: 200px;
    margin: 0 1.5em 0.5em 0;
    float: left;
    shape-outside: circle();
    }
    There is a prefix: -webkit-shape-outside: circle();
    *
    

    View Slide

85. img {
    max-width: 600px;
    float: left;
    margin-left: -26%;
    shape-outside:polygon(
    nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3%
    14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%,
    74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%,
    92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%,
    -5.6% 101.25%
    );
    }
    

    View Slide

86. View Slide

87. Initial Letter
    

    View Slide

88. View Slide

89. View Slide

90. p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    initial-letter: 4;
    }
    

    View Slide

91. Viewport Units
    

    View Slide

92. labs.jensimmons.com/2017/01-008.html
    

    View Slide

93. View Slide

94. Viewport Units
    50vmin
    100vh
    

    View Slide

95. Viewport Units
    50vh
    25vh
    50vw
    25vh
    50vw
    !at dang “fold”
    

    View Slide

96. Fixed Size
    

    View Slide

97. Responsive Web Design
    

    View Slide

98. The New CSS Layout
    

    View Slide

99. Object Fit
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. img {
     width: 50%;
     height: 400px;
     object-fit: cover;
     }
     

     View Slide

105. View Slide

106. View Slide

107. Writing Mode
     

     View Slide

108. View Slide

109. inline direction
     When I’m writing or reading this is the way the characters flow
     

     View Slide

110. 
     
     
     
     block
     flow
     direction
     

     View Slide

111. Acharacter orientation
     

     View Slide

112. block
     direction
     inline direction
     Acharacter orientation
     

     View Slide

113. SYSTEMS LIKE LATIN
     block
     direction
     inline direction
     Acharacter
     orientation
     

     View Slide

114. View Slide

115. HAN-BASED SYSTEMS
     block
     direction
     inline direction
     *Chinese, Japanese, Korean & more
     

     View Slide

116. View Slide

117. HAN-BASED SYSTEMS
     block
     direction
     inline direction
     block
     direction
     inline direction
     *Chinese, Japanese, Korean & more
     

     View Slide

118. THREE OPTIONS FOR WRITING-MODE
     writing-mode:
     vertical-lr;
     writing-mode:
     vertical-rl;
     toggle w/
     `dir` attribute
     in HTML +
     unicode
     writing-mode:
     horizontal-tb;
     

     View Slide

119. TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE
     block
     direction
     inline direction
     writing-mode:
     sideways-lr;
     block
     direction
     inline direction
     writing-mode:
     sideways-rl;
     creates a horizontal typographic mode
     only
     A
     A
     

     View Slide

120. chenhuijing.com/zh-type
     

     View Slide

121. View Slide

122. h1:nth-child(2) {
     writing-mode: vertical-rl;
     }
     

     View Slide

123. CSS Grid
     

     View Slide

124. Grid
     

     View Slide

125. .container {
     display: grid;
     grid-template-columns:
     1fr 1fr 1fr 1fr;
     grid-template-rows:
     1fr 1fr 1fr 1fr;
     }
     .item {
     grid-row: 1 / 3;
     grid-column: 2 / 4;
     }
     1 2 3 4
     1
     2
     3
     4
     5
     grid-row: 1 / 3;
     grid-column: 2 / 4;
     5
     

     View Slide

126. Rows *and* Columns
     

     View Slide

127. View Slide

128. ROWS!!!!!!!!!!!
     

     View Slide

129. View Slide

130. White Space
     

     View Slide

131. “
     THE VIGNELLI CANON
     Great designs can be achieved
     without the use of the grid, but the
     grid is a very useful tool to
     guarantee results.
     Ultimately the most important tool is
     the management of the white space
     in layouts. It is the white space that
     makes the layout sing. Bad layouts
     have no space left for breathing —
     every little space is covered by a
     cacophony of type sizes, images,
     and screaming titles.
     

     View Slide

132. View Slide

133. The Vignelli Canon
     

     View Slide

134. View Slide

135. View Slide

136. Overlap
     

     View Slide

137. View Slide

138. View Slide

139. Tracks don’t have to all
     be the same size.
     

     View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. from alistapart.com/article/content-out-layout
     

     View Slide

145. The New Flexibility
     

     View Slide

146. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr;
     1fr 1fr
     100px 1fr
     minmax(40ch, 65ch)
     

     View Slide

147. View Slide

148. “pixel perfect ”
     

     View Slide

149. What happens when parts of
     the content / interface are ‘missing’?
     Or are shorter / longer
     than ‘ideal’?
     

     View Slide

150. Design the flexibility model.
     

     View Slide

151. For more…
     

     View Slide

152. View Slide

153. nightly.mozilla.org
     

     View Slide

154. labs.jensimmons.com
     

     View Slide

155. jensimmons.com
     

     View Slide

156. Modern Layouts: 

     Getting Out of Our Ruts
     Revolutionize Your Page: 

     Real Art Direction on the Web
     2015
     2016
     available on jensimmons.com
     

     View Slide

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

     View Slide