Revolutionize Your Page: Real Art Direction on the Web
A presentation at An Event Apart Orlando: Special Edition 2016 in in Orlando, FL, USA by Jen Simmons
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
!
e 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
“
”
!
e 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
“
”
!
e 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.
Layout shouldn’t be a multiple choice question.
Separate tooling needs from the design process.
Don’t make a framework out of CSS Grid. CSS Grid is a framework —
built right into the browser.
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;
}
p::first-letter {
color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;
-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;
-webkit-initial-letter: 4; initial-letter: 4; }
}
Feature Queries
@supports (property:value) { // a bunch of CSS
}
// layout using old-tech nology @supports (display:grid) { // overrides to undo old layout
// layout using new-technology
}
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Viewport Units
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
25vw
50vh
that
dang
“fold”
Object Fit
img { width: 50%; height: 400px; object-fit: cover; }
Clip Path
img { clip-path: polygon(0% 0%,
100% 3%, 98% 99%, 3% 93%); }
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 Multicolumn CSS Grid
Flexbox
Multicolumn
CSS Grid Layout
css-tricks.com/snippets/css/a-guide-to-flexbox
Alignment
From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
flexboxdefense.com flexboxfroggy.com
Many Ways to Use CSS Grid
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;
Place
each item
into a specific
cell/area
Let the browser
place everything
using
autoplacement
a
lgorithm
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); }
main { display: grid; grid-template-columns:
repeat(auto-fit, minmax(280px, 1fr)); }
13 11 8 9 10 7 6 5 1 2 3 4 12 auto placement algorithm
13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;
When? / Where?
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
IE old spec in IE10+ -ms-* prefix
nightly.mozilla.org
addons.mozilla.org/addon/css-grid-inspector
Process
Choose one of the following: B. C. A. D. E.
Organize Content.
Create HTML file, set source order.
Sketch Ideas for Page Layout.
Design a custom grid.
Apply CSS. Write your own layout.
Organize content. 2. Create HTML file, set source order. 3. Sketch ideas for page layout. 4. Design a custom grid. 5. Apply CSS. Write your own layout code.
How Now?
Works
Doesn’t
work
Use It Don’t Use It
Works
Doesn’t
work
Use It
Don’t
Use It
Works
Doesn’t
work
Use It
Don’t
Use It
Works
Doesn’t
work
Use It
Don’t
Use It
Works
Doesn’t
work
Use It
Don’t
Use It
Fired.
Works
Doesn’t
work
Use It
Don’t
Use It
Fired.
Works
Doesn’t
work
Use It
Don’t
Use It
Fired.
✔
Works
Doesn’t
work
Use It
Don’t
Use It
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It
X
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It
Progressive Enhancement & The Nature of CSS
65% 35%
95% 5%
88% 12%
100% 0%
30-45% without 55-70% with CSS Grid Spring 2017
jensimmons.com/ presentation/ progressing-our- layouts
jensimmons.com/ presentation/ modern-layouts- getting-out-our- ruts
LABS.JENSIMMONS.COM
www.layout.land
Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons
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.
for free. You
can too.
Video
Buzz and feedback
Here’s what was said about this presentation on social media.
