Revolutionize Your Page: Real Art Direction on the Web Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons art direction brand conversation ART DIRECTION Art Direction Art Direction Editorial Design Te 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 Te 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 Te 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 drawing by Dave Ellis novolume.co.uk Stephen Waller at Enhance Conf expressing how BORED he is with web design today. div { width: 400px; padding: 25px; } What is the size of the <div> box? Internet Explorer: 400px Everyone else: 450px div { width: 400px; padding: 25px; } What is the calculated size of the box? Everyone: 400px Layout shouldn’t be a multiple choice question. Separate tooling needs from the design process. Layout Design Amazing Future The Official Timeline of the Evolution of Web Page Layout labs.jensimmons.com Big Pieces & Little Pieces Initial Letter 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 } 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; } @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; } } Feature Queries @supports (property:value) { // a bunch of CSS } // layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology } Viewport Units <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh; } h1 { margin: auto; } 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 50vh 25vw that dang “fold” Object Fit img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; } img { width: 50%; height: 400px; object-fit: cover; } Clip Path img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%); } img { clip-path: polygon(24% 3%, 98% 4%, 80% 79%, 98% 95%, 46% 100%, 3% 84%); } CSS Shapes img { float: left; shape-outside: circle(); } 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%); } Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges Big Pieces Flexbox CSS Grid Flexbox Multicolumn CSS Grid Layout 1 2 3 4 5 6 1 grid-column: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-row: 1 / 2; 2 grid-column: 2 / 4; grid-row: 2 / 3; 3 grid-column: 3 / 5; grid-row: 3 / 5; 4 grid-column: 1 / 2; grid-row: 4 / 5; 5 1 2 3 auto placement algorithm 4 5 6 7 8 9 10 11 12 13 1 2 3 5 4 6 7 8 9 10 11 12 13 grid-auto-flow: dense; nightly.mozilla.org Behind a flag Just Works In Progress Chrome Chrome Canary Firefox Nightly Opera Edge Opera Developer Safari Technical Preview Firefox Firefox Dev Edition addons.mozilla.org/addon/css-grid-inspector How Now? Progressive Enhancement & The Nature of CSS 60% 40% 95% 5% 88% 12% 100% 0% www.layout.land Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons.