Revolutionize Your Page at Design & Content 2016

presented at the Design & Content Conference in Vancouver

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 Design
47. Amazing Future
48. The Official Timeline of the Evolution of Web Page Layout
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
109. 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;
112. 11 8 9 10 7 6 5 1 2 3 4 auto placement algorithm
113. 13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;
118. nightly.mozilla.org
119. Behind a flag Chrome Chrome Canary Opera Opera Developer Safari Technical Preview Just Works Firefox Firefox 
 Dev Edition Firefox 
 Nightly Edge In Progress
120. addons.mozilla.org/addon/css-grid-inspector
122. How Now?
124. Progressive Enhancement & The Nature of CSS
125. 60% 40%
126. 95% 5%
127. 88% 12%
128. 100% 0%
133. www.layout.land
134. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons