Revolutionize Your Page: Real Art Direction on the Web

Presented at An Event Apart Boston

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
7. conversation
10. ART DIRECTION
11. Art Direction
19. Art Direction
20. Editorial Design
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
22. “ ” 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
24. “ ” 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
29. drawing by Dave Ellis novolume.co.uk
34. div { width: 400px; padding: 25px; } What is the calculated size of the box? Internet Explorer: 400px Everyone else: 450px
35. div { width: 400px; padding: 25px; } What is the calculated size of the box? Everyone: 400px
39. data from Microsoft, data.microsoftedge.com for more
41. Layout shouldn’t be a multiple choice question.
42. Separate tooling needs from the design process.
44. Layout
52. Amazing Future
53. Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The Official Timeline of the Evolution of Web Page Layout
54. labs.jensimmons.com
55. Big Pieces & Little Pieces
56. Initial Letter
59. p::first-letter { color: #FE742F; font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; margin-top: 1em; // bug fix }
60. p::first-letter { color: #ae4ea5; font-family:'Avenir'; font-weight: bold; margin-right: 0.5em; margin-left: -2em; -webkit-initial-letter: 4 1; initial-letter: 4 1; }
61. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter { color: #ae4ea5; font-family:'Avenir'; font-weight: bold; margin-right: 0.5em; margin-left: -2em; -webkit-initial-letter: 4 1; initial-letter: 4 1; } }
62. Feature Queries
63. @supports (property:value) { // a bunch of CSS }
64. // layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology }
65. Viewport Units
66. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh; } h1 { margin: auto; }
67. 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
69. Object Fit
71. img { width: 50%; height: 400px; object-fit: cover; }
72. img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
75. Clip Path
79. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%); }
80. img { clip-path: polygon(24% 3%, 98% 4%, 80% 79%, 98% 95%, 46% 100%, 3% 84%); }
81. CSS Shapes
82. img { float: left; shape-outside: circle(); }
83. img { float: left; shape-outside: ellipse(); }
84. 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%); }
87. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges
88. Big Pieces
89. Flexbox Grid Layout Alignment
93. Flexbox
100. Multicolumn
102. CSS Grid Layout
105. by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/
109. nightly.mozilla.org
114. Process
115. Choose one of the following: B. C. A. D. E.
116. 1. Organize Content.
117. 2. Create HTML file, 
 set source order.
118. 3. Sketch Ideas for Page Layout.
119. 4. Design a 
 custom grid.
124. 5. Apply CSS. Write your own layout.
125. 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.
126. How Now?
128. Works Doesn’t work
129. Use It Don’t Use It
130. Works Doesn’t work Use It Don’t Use It
131. Works Doesn’t work Use It Don’t Use It
132. Works Doesn’t work Use It Don’t Use It
133. Works Doesn’t work Use It Don’t Use It Fired.
134. Works Doesn’t work Use It Don’t Use It Fired.
135. Works Doesn’t work Use It Don’t Use It Fired. ✔
136. Works Doesn’t work Use It Don’t Use It
137. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
138. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It X
139. Progressive Enhancement & The Nature of CSS
148. www.layout.land
149. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons