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

<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

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