Revolutionize Your Page — View Source Conf

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 new CSS properties 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
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.
23. Amazing Future
24. The Official Timeline of the Evolution of Web Page Layout
25. labs.jensimmons.com
26. Initial Letter
29. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
30. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
31. @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; } }
32. Feature Queries
33. @supports (property:value) { // a bunch of CSS }
34. // layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology }
35. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
36. Viewport Units
37. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh; } h1 { margin: auto; }
38. 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
39. 25vw 50vh that dang “fold”
40. Object Fit
45. img { width: 50%; height: 400px; object-fit: cover; }
46. Multicolumn Flexbox CSS Grid
47. CSS Grid Layout
52. css-tricks.com/snippets/css/a-guide-to-flexbox
53. Alignment
54. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
57. Many Ways to Use 
 CSS Grid
63. Place each item into a specific cell/area Let the browser place everything using autoplacement algorithm
66. 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); }
67. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
68. 11 8 9 10 7 6 5 1 2 3 4 auto placement algorithm
69. 13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;
83. When? / Where?
85. 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
86. nightly.mozilla.org
87. addons.mozilla.org/addon/css-grid-inspector
89. How Now?
91. Works Doesn’t work
92. Use It Don’t Use It
93. Works Doesn’t work Use It Don’t Use It
94. Works Doesn’t work Use It Don’t Use It
95. Works Doesn’t work Use It Don’t Use It
96. Works Doesn’t work Use It Don’t Use It Fired.
97. Works Doesn’t work Use It Don’t Use It Fired.
98. Works Doesn’t work Use It Don’t Use It Fired. ✔
99. Works Doesn’t work Use It Don’t Use It
100. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
101. X Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
102. Progressive Enhancement & The Nature of CSS
103. 95% 5%
104. 88% 12%
105. 100% 0%
106. jensimmons.com/ presentation/ progressing-our- layouts
107. jensimmons.com/ presentation/ modern-layouts- getting-out-our- ruts
108. jensimmons.com/ presentation/ revolutionize-your- page-real-art- direction-web
109. LABS.JENSIMMONS.COM
111. www.layout.land
112. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons