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
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 A Secret…
vh viewport height vw viewport width vmin smaller viewport number vmax larger viewport number 50vh that 25vw 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