Revolutionize Your Page:
Real Art Direction
on the Web
Jen Simmonslabs.jensimmons.com
thewebahead.net@jensimmons

art direction

brandconversation

ART DIRECTION

Art DirectionArt Direction

Editorial Design

The vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentationof words (arranged into display and body text)
and visuals.

“”— Cath Caldwell & Yolanda Zappaterra
Editorial Design, page 8

The vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentationof words (arranged into display and body text)
and visuals.

“”— Cath Caldwell & Yolanda Zappaterra
Editorial Design, page 8

The vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentationof 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 choicequestion.

Separate tooling needsfrom the design process.

Don’t make a frameworkout 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-technology@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:vhvw
vmin
vmax

viewport heightviewport width
smaller viewport number
larger viewport number

50vh
25vw

thatdang”
dlof“

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

FlexboxMulticolumn
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

12

3

4

grid-column: 1 / 2;
grid-row: 1 / 2;

grid-column: 2 / 4;
grid-row: 2 / 3;

3
grid-column: 3 / 5;
grid-row: 3 / 5;

grid-column: 1 / 2;
grid-row: 4 / 5;

5

6
grid-column: 5 / 6;
grid-row: 1 / 2;

2

4

5

Placeeach item
into a specificcell/area

Let the browser
place everything
using
autoplacement
algorithm

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));}

182

3456910

11

auto placement
algorithm

712463

578

911

1210
13

grid-auto-flow: dense;When? / Where?

Just Works

Behind a flag

ChromeOn Its Way

ChromeCanaryFirefox
Nightly

Edge

Opera

Opera
Developer

FirefoxDev Edition

SafariFirefox

Safari TechnicalPreview

IE

old spec in IE10+-ms-* prefix

nightly.mozilla.org

addons.mozilla.org/addon/css-grid-inspector

ProcessChoose one of the following:
A.

C.

B.

D.

E.

1. Organize Content.

2. Create HTML file,
set source order.3. Sketch Ideas forPage Layout.

4.

Design acustom grid.

5. Apply CSS. Write
your own layout.

1.

Organize content.

2.

Create HTML file,
set source order.

3.

Sketch ideas forpage layout.

4.

Design a custom grid.

5.

Apply CSS. Write
your own layout code.

How Now?

Works

Doesn’twork

Don’t Use It
Use ItDon’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItFired.

Use ItWorks

Doesn’twork

Don’tUse It
Fired.

Use ItWorks

Doesn’twork

Don’tUse It✔

Use ItFired.
Works

Doesn’twork

Don’tUse ItUse ItWorks

Doesn’twork

Don’tUse ItUse It andDon’t Use It
Works and
Doesn’t Work

Don’tUse ItX

Use It andDon’t Use It
Works and
Doesn’t Work

Progressive
Enhancement &The Nature of CSS

65%

35%

95%

5%

88%

12%

100%

0%

7
102g
nirp
S
30-45% without

55-70% with CSS Gridjensimmons.com/
presentation/
progressing-ourlayouts

jensimmons.com/
presentation/
modern-layoutsgetting-out-ourruts

LABS.JENSIMMONS.COM

www.layout.land

Thanks!

Jen Simmonslabs.jensimmons.com
jensimmons.com
layout.land
thewebahead.net@jensimmons