Revolutionize Your Page — early summer 2016

Demo, links and more at http://labs.jensimmons.com

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.
33. div { width: 400px; padding: 25px; } What is the size of the <div> box? Internet Explorer: 400px Everyone else: 450px
34. div { width: 400px; padding: 25px; } What is the calculated size of the box? Everyone: 400px
39. Layout shouldn’t be a multiple choice question.
40. Separate tooling needs from the design process.
42. Layout
47. Amazing Future
48. Amazing future! The No-layout Layout Table-based Layouts Hand-coded Float Layouts The Official Timeline of the Evolution of Web Page Layout 3rd-Party Framework Layouts
49. labs.jensimmons.com
50. Big Pieces & Little Pieces
51. Initial Letter
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; margin-top: 1em; // bug fix }
55. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; margin-top: 1em; // bug fix -webkit-initial-letter: 4; initial-letter: 4; }
56. @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; margin-top: 1em; // bug fix -webkit-initial-letter: 4; initial-letter: 4; } }
57. Feature Queries
58. @supports (property:value) { // a bunch of CSS }
59. // layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology }
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
67. img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
69. img { width: 50%; height: 400px; object-fit: cover; }
72. Clip Path
76. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%); }
77. img { clip-path: polygon(24% 3%, 98% 4%, 80% 79%, 98% 95%, 46% 100%, 3% 84%); }
78. CSS Shapes
79. img { float: left; shape-outside: circle(); }
80. 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%); }
83. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges
84. Big Pieces
85. Flexbox CSS Grid
89. Flexbox
98. Multicolumn
100. CSS Grid Layout
102. 1 2 3 4 5 7 6 8 9 10 11 12 13 grid-auto-flow: dense;
105. 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;
108. nightly.mozilla.org
109. Behind a flag Chrome Chrome Canary Opera Opera Developer Safari Technical Preview Just Works Firefox Firefox 
 Dev Edition Firefox 
 Nightly IE Edge In Progress
110. https://github.com/mozilla/css-grid-inspector
112. How Now?
114. Progressive Enhancement & The Nature of CSS
115. 60% 40%
116. 95% 5%
117. 88% 12%
118. 100% 0%
123. www.layout.land
124. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons