Revolutionize Your Page (40min, Fall 2016)

All the links for more information, along with a video of this presentation, are at: http://jensimmons.com/presentation/revolutionize-your-page-real-art-direction-web

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
11. Editorial Design
12. “ ” 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
13. “ ” 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
15. “ ” 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
20. drawing by Dave Ellis novolume.co.uk
22. Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
28. Layout shouldn’t be a multiple choice question.
29. Separate tooling needs from the design process.
31. Layout Design
37. Amazing Future
38. The Official Timeline of the Evolution of Web Page Layout
39. labs.jensimmons.com
40. Big Pieces & Little Pieces
41. Initial Letter
44. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
45. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
46. @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; } }
47. Feature Queries
48. @supports (property:value) { // a bunch of CSS }
49. // layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology }
50. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
51. Viewport Units
52. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh; } h1 { margin: auto; }
53. 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
54. 25vw 50vh that dang “fold”
55. Object Fit
60. img { width: 50%; height: 400px; object-fit: cover; }
61. Clip Path Masking CSS Shapes
62. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%); }
63. img { float: left; shape-outside: circle(); }
64. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges
65. Big Pieces
66. Multicolumn Flexbox CSS Grid
67. Flexbox
73. CSS Grid Layout
80. Alignment
81. css-tricks.com/snippets/css/a-guide-to-flexbox
82. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
83. flexboxdefense.com flexboxfroggy.com
86. Many Ways to Use 
 CSS Grid
87. 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;
93. Place each item into a specific cell/area Let the browser place everything using autoplacement algorithm
96. 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); }
97. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
98. 11 8 9 10 7 6 5 1 2 3 4 auto placement algorithm
99. 13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;
114. When? / Where?
116. 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
117. nightly.mozilla.org
118. addons.mozilla.org/addon/css-grid-inspector
120. How Now?
122. Works Doesn’t work
123. Use It Don’t Use It
124. Works Doesn’t work Use It Don’t Use It
125. Works Doesn’t work Use It Don’t Use It
126. Works Doesn’t work Use It Don’t Use It
127. Works Doesn’t work Use It Don’t Use It Fired.
128. Works Doesn’t work Use It Don’t Use It Fired.
129. Works Doesn’t work Use It Don’t Use It Fired. ✔
130. Works Doesn’t work Use It Don’t Use It
131. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
132. X Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
133. Progressive Enhancement & The Nature of CSS
134. 60% 40%
135. 95% 5%
136. 88% 12%
137. 100% 0%
138. jensimmons.com/ presentation/ progressing-our- layouts
139. jensimmons.com/ presentation/ modern-layouts- getting-out-our- ruts
140. jensimmons.com/ presentation/ revolutionize-your- page-real-art- direction-web
141. LABS.JENSIMMONS.COM
143. www.layout.land
144. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons