Modern Layouts: Getting Out of Our Ruts (40 mins)

Transcript

1. MODERN LAYOUTS
   Getting Out of Our Ruts THE WEB AHEAD

   thewebahead.net JEN SIMMONS @jensimmons Fall 2015
2. None
3. None
4. None
5. None
6. None
7. None
8. None
9. None
10. None
11. None
12. None
13. None
14. None

15. The most prominent result from the new eyetracking studies is

    not actually new.
    We simply confirmed for the umpteenth time that banner blindness is real.
    —Jakob Nielsen, August 20, 2007, Banner Blindness: Old and New Findings
16. None
17. None
18. None

19. A C B A C B A C B A

    C B
20. None
21. None
22. None
23. None

24. drawing by Dave Ellis novolume.co.uk

25. None
26. None
27. None
28. None
29. None
30. None
31. None
32. None
33. None
34. None
35. None
36. None
37. None
38. None
39. None

40. The medium shapes the medium.

41. ?

42. There’s a world of Graphic Design older than the web.

43. None
44. None
45. None
46. None
47. None
48. None

49. vogue.com

50. None
51. None
52. None
53. None
54. None
55. None
56. None
57. None
58. None

59. Layout should serve the content.
    

60. MAGAZINES

61. 1.

62. None
63. None
64. None

65. CSS Shapes

66. <h1>Jeremy Keith</h1> <img src=“jeremykeith.jpg"> <p>Jeremy Keith lives in Brighton, England

    where he makes websites with the splendid design agency Clearleft.</p>

67. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

68. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle();

    }

69. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Shapes, Level 1 March 20, 2014 w3.org/TR/css-shapes-1
70. None
71. None
72. None

73. shape-outside: circle(); shape-outside: ellipse(); shape-outside: border-box; shape-outside: inset(0px round
 120px)

    border-box; shape-outside: url(http://
 example.com/image.jpg); shape-margin: 30px;

74. labs.thewebahead.net

75. github.com/jensimmons/thelayoutsahead

76. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: ellipse(50% 50%); }

77. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

78. 1

79. None
80. None
81. None
82. None
83. None
84. None

85. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2

    — Later shape-inside: foo();
86. None

87. 2.

88. None
89. None
90. None

91. Multiple Column Layout

92. article { column-width: 200px; column-gap: 2em; }

93. None

94. img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 
 1px solid #444; }

95. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Multicolumn Layout April 12, 2011 w3.org/TR/css3-multicol
96. None

97. 3.

98. None
99. None
100. None
101. None

102. <main role="main"> <img src="../images/GraceHopper.jpg"> <div> <h1>Grace Hopper</h1> <p>Grace Murray Hopper

     (December 9, 1906 – January 1, 1992) was an American computer scientist and United States Navy rear admiral. A pioneer in the field, she was one of the first programmers of the Harvard Mark I computer, and invented the first compiler for a computer programming language...</p> </div> </main>

103. img { float: left; margin-right: 2em; width: 50%; } div

     { padding: 2em; }
104. None

105. img { float: left; margin-right: 2em; // width: 50%; height:

     100vh; } div { padding: 2em; }
106. None

107. img { float: left; margin-right: 2em; width: 50vw; height: 100vh;

     } h1 { font-size: 6vw; }
108. None

109. <header> <h1>Full-height “Cover Sheets” are the new Splash Page</h1> </header>

     <p>Lorum ipsum article content…</p>

110. header { border: 20px solid #000; background: yellow; padding: 3em

     6em; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }

111. header { border: 20px solid #000; background: yellow; padding: 3em

     6em; height: 100vh; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
112. None
113. None

114. Viewport Units

115. Anyplace you might use em, rem, %, px you can

     instead use: vh viewport height vw viewport width vmin smaller viewport number vmax larger viewport number

116. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

     Values and Units, Level 3 July 30, 2013 w3.org/TR/css3-values
117. None

118. 4.

119. None

120. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     padding: 3em 6em; } h1 { font-size: 10vw; margin: 0; text-align: center; }

121. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     padding: 3em 6em; } h1 { font-size: 10vw; margin: 0; text-align: center; }

122. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     } h1 { font-size: 10vw; margin: 0; }

123. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     display: flex; } h1 { font-size: 10vw; margin: auto; }

124. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     display: flex; } h1 { font-size: 10vw; margin: auto; }
125. None

126. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     display: flex; align-items: center; justify-content: center; } h1 { font-size: 10vw; // margin: auto; }

127. header { border: 20px solid #000; background: yellow; min-height: 100vh;

     display: flex; align-items: flex-end; justify-content: flex-end; } h1 { font-size: 10vw; margin: 0; }

128. Flexbox

129. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

     Flexible Box Layout, Level 1 May 14, 2015 w3.org/TR/css-flexbox-1
130. None
131. None
132. None
133. None
134. None
135. None

136. 5.

137. None

138. CSS Grid Layout

139. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

     Grid Layout, Level 1 March 17, 2015 w3.org/TR/css-grid-1
140. None

141. from gridbyexample.com

142. None

143. Old School Floats

144. Dynamic Grids

145. None
146. None
147. None
148. None
149. None

150. When?

151. When Can I Use This in Production? (aka on a

     Real Website)

152. Why Did You Tell Me About 
 All This Stuff

     
 I Totally Can’t Use Yet?

153. Do Websites Need To Look Exactly The Same in Every

     Browser?

154. DoWebsitesNeedToLook
 ExactlyTheSameinEvery
 Browser.com

155. None

156. Progressive Enhancement

157. None

158. When Can I Use This? Later Grid Layout Exclusions Shapes

     Level 2 Uncertain Regions More? Round Fragmentation Figures Overflow (???…) Last Fall Shapes Level 1 Flexbox Viewport Units 5 Years Ago Rotation Multicolumn Layout Dynamic Grids (odd numbers of columns, 
 ratio grids)

159. Hardest part is changing our thinking, not our CSS.

160. Reinventing Web Layout

161. None
162. None
163. None
164. None
165. None

166. Translate.
     Don’t Transfer.

167. None
168. None
169. None

170. (*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to

     Adaptive Content.)
171. None
172. None

173. The most dangerous phrase in the language is ‘We’ve always

     done it this way.’ 
 — Grace Hopper

174. One Last Story

175. None
176. None
177. None
178. None

179. ?

180. THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you! Mozilla

     Designer Advocate