Revolutionize Your Page: Real Art Direction on the Web

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities. She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page —any page.

Transcript

1. Revolutionize Your Page: Real Art Direction 
 on the Web Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons
2. art direction
4. brand
6. conversation
9. ART DIRECTION
10. Art Direction
18. Art Direction
19. Editorial Design
20. “ ” The vast majority of editorial [design] has at its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
21. “ ” The vast majority of editorial [design] has at its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
23. “ ” The vast majority of editorial [design] has at its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
28. drawing by Dave Ellis novolume.co.uk
30. Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
36. Layout shouldn’t be a multiple choice question.
37. Separate tooling needs from the design process.
39. Don’t make a framework out of CSS Grid. CSS Grid is a framework — built right into the browser.
40. Layout Design
46. Amazing Future
47. The Official Timeline of the Evolution of Web Page Layout
48. labs.jensimmons.com
49. Big Pieces & Little Pieces
50. Initial Letter
53. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
54. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
55. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } }
56. Feature Queries
57. @supports (property:value) { // a bunch of CSS }
58. // layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology }
59. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
60. Viewport Units
61. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh; } h1 { margin: auto; }
62. 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
63. 25vw 50vh that dang “fold”
64. Object Fit
69. img { width: 50%; height: 400px; object-fit: cover; }
72. Clip Path
78. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%); }
79. CSS Shapes
80. img { float: left; shape-outside: circle(); }
81. img.grapes { float: left; shape-outside: polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%, 0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%); }
84. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges
85. Big Pieces
86. Flexbox Multicolumn CSS Grid
90. Flexbox
99. Multicolumn
101. CSS Grid Layout
109. css-tricks.com/snippets/css/a-guide-to-flexbox
110. Alignment
111. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
112. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
113. flexboxdefense.com flexboxfroggy.com
116. Many Ways to Use 
 CSS Grid
117. 1 2 3 4 5 6 grid-column: 1 / 2; grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;
123. Place each item into a specific cell/area Let the browser place everything using autoplacement algorithm
126. body { background: #F0F0F0; } main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } figure { margin: 0; } img { display: block; width: 100%; box-shadow: -1px 0px 0px rgba(0,0,0,0.06); }
127. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
128. 11 8 9 10 7 6 5 1 2 3 4 auto placement algorithm
129. 13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;
144. When? / Where?
146. Behind a flag Just Works On Its Way Chrome Chrome Canary Opera Opera Developer Firefox Firefox 
 Dev Edition Safari Technical Preview Firefox 
 Nightly Edge Safari
147. IE old spec in IE10+ -ms-* prefix
148. nightly.mozilla.org
149. addons.mozilla.org/addon/css-grid-inspector
151. Process
152. Choose one of the following: B. C. A. D. E.
153. 1. Organize Content.
154. 2. Create HTML file, 
 set source order.
155. 3. Sketch Ideas for Page Layout.
156. 4. Design a 
 custom grid.
161. 5. Apply CSS. Write your own layout.
162. 1. Organize content. 2. Create HTML file, 
 set source order. 3. Sketch ideas for 
 page layout. 4. Design a custom grid. 5. Apply CSS. Write 
 your own layout code.
163. How Now?
165. Works Doesn’t work
166. Use It Don’t Use It
167. Works Doesn’t work Use It Don’t Use It
168. Works Doesn’t work Use It Don’t Use It
169. Works Doesn’t work Use It Don’t Use It
170. Works Doesn’t work Use It Don’t Use It Fired.
171. Works Doesn’t work Use It Don’t Use It Fired.
172. Works Doesn’t work Use It Don’t Use It Fired. ✔
173. Works Doesn’t work Use It Don’t Use It
174. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
175. X Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
176. Progressive Enhancement & The Nature of CSS
177. 65% 35%
178. 95% 5%
179. 88% 12%
180. 100% 0%
181. 30-45% without 55-70% with CSS Grid Spring 2017
182. jensimmons.com/ presentation/ progressing-our- layouts
183. jensimmons.com/ presentation/ modern-layouts- getting-out-our- ruts
184. LABS.JENSIMMONS.COM
186. www.layout.land
187. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons