MODERN LAYOUTS  Getting Out of Our Ruts THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons An Event Apart 2015

The most prominent result from the new eyetracking studies is not actually new.  We simply confirmed for the umpteenth time that banner blindness is real.  —Jakob Nielsen, August 20, 2007, Banner Blindness: Old and New Findings

A C B A C B A C B A C B

drawing by Dave Ellis novolume.co.uk

The medium shapes
the medium.

?

There’s a world of Graphic Design older than the web.

vogue.com

Layout should
serve the content. 

MAGAZINE S

CSS Shapes

<h1>Jeremy Keith</h1> <img src=“jeremykeith.jpg"> <p>Jeremy Keith lives in Brighton, England where he makes websites with the splendid design agency Clearleft. </p>

img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle(); }

Working Draft Last Call Candidate 
 Recommendation Proposed 
 Recommendation Recommendation CSS Shapes, L evel 1 March 20, 2014 w3.org/TR/css-shapes-1

shape-outside: circle(); shape-outside: ell ipse(); shape-outside: border-box; shape-outside: inset(0px round 
 120px) border-box; shape-outside: url(http:// 
 example.com/image.jpg); shape-margin: 30px;

labs.thewebahead.net

github.com/jensimmons/thelayoutsahead

img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: ellipse(50% 50%);
}

img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

Shapes Level 1 —   NOW! shape-outside: foo(); Shapes Level 2 —   Later shape-inside : foo();

2 .

main { transform: 
 rotate(-10deg); }

h1 { transform: 
 rotate(-90deg); }

h1 { float: left; padding-bottom: 200px; transform: 
 rotate(-45deg); shape-outside: 
 polygon(nonzero, -58px 80.55%, 75.95% -70px, 89.55% -33.65%, -13.4% 121.45%); }

main { width: 300px; } @media (min-width: 500px) { main { background: red; transform: rotate(-10deg); }
} @media (min-width: 700px) { main { background: green; transform: rotate(-20deg); }
} @media (min-width: 900px) { main { width: 400px; background: blue; transform: rotate(-30deg); }
}

transform: rotate

Working Draft Last Call Candidate 
 Recommendation Proposed 
 Recommendation Recommendation CSS Transforms, L evel 1 Nov 26, 2013 w3.org/TR/css-transforms-1

3 .

Multiple Column Layout

article { max-width: 500px; margin: 0 auto; }

article { column-count: 2; column-gap: 2em; }

article { // column-count: 2; column-width: 200px; column-gap: 2em; }

img { width: 100%; } article { column-width: 200px; column-gap: 2em;
column-rule: 
 1px solid #444; }

Working Draft Last Call Candidate 
 Recommendation Proposed 
 Recommendation Recommendation CSS Multicolumn Layout April 12, 2011 w3.org/TR/css3-multicol

CSS Regions

4 .

<main role="main"> <img src="../images/GraceHopper.jpg"> <div> <h1>Grace Hopper</h1> <p>Grace Murray Hopper (December 9, 1906 – January 1, 1992) was an American computer scientist and United States Navy rear admiral. A pioneer in the field, she was one of the first programmers of the Harvard Mark I computer, and invented the first compiler for a computer programming language...</p> </div> </main>

img { float: left; margin-right: 2em; width: 50%; } div { padding: 2em; }

img { float: left; margin-right: 2em; // width: 50%; height: 100vh; } div { padding: 2em; }

img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }

<header > <h1>Full-height “Cover Sheets” are the new Splash Page</h1 > </header> <p>Lorum ipsum article content…</p>

header { border: 20px solid #000; background: yellow; padding: 3em 6em;

} h1 {

font-size: 10vw; margin-top: 0; text-align: center; }

header { border: 20px solid #000; background: yellow;

padding: 3em 6em;
height: 100vh; } h1 {

font-size: 10vw; margin-top: 0; text-align: center; }

Viewport Units

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

Working Draft Last Call Candidate 
 Recommendation Proposed 
 Recommendation Recommendation CSS Values and Units,
L evel 3 July 30, 2013 w3.org/TR/css3-values

5 .

header { border: 20px solid #000; background: yellow; min- height: 100vh;

padding: 3em 6em;
} h1 {

font-size: 10vw; margin: 0; text-align: center; }

header { border: 20px solid #000; background: yellow; min- height: 100vh;

padding: 3em 6em;
} h1 {

font-size: 10vw; margin: 0; text-align: center; }

header { border: 20px solid #000; background: yellow; min- height: 100vh; } h1 {

font-size: 10vw; margin: 0; }

header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; } h1 {

font-size: 10vw; margin: auto; }

header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; } h1 {

font-size: 10vw; margin: auto; }

header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; align-items: center; justify-content: center; } h1 {

font-size: 10vw; // margin: auto ; }

header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; align-items: flex-end; justify-content: flex-end; } h1 {

font-size: 10vw; margin: 0 ; }

Flexbox

Working Draft Last Call Candidate 
 Recommendation Proposed 
 Recommendation Recommendation CSS Flexible Box Layout, Level 1

May 14, 2015

w3.org/TR/css-flexbox-1

6 .

CSS Grid Layout

Working Draft Last Call Candidate 
 Recommendation Proposed 
 Recommendation Recommendation CSS Grid Layout, Level 1 March 17, 2015

w3.org/TR/css-grid-1

from gridbyexample.com

Old School
Floats

Dynamic Grids

When?

When Can I Use This
in Production? (aka on a Real Website)

Why Did You Tell Me About 
 All This Stuff 
 I Totally Can’t Use Yet?

Do Websites Need To Look Exactly The Same in Every Browser?

DoWebsitesNeedToLook 
 ExactlyTheSameinEvery 
 Browser.com

Progressive
Enhancement

When Can I Use This? Later

Shapes Level 2 Grid Layout Exclusions Uncertain
Regions What Was That 
 You Mumbled?

Fragmentation Figures Overflow (???…) Last Fall

Shapes Level 1 Flexbox Viewport Units 5 Years Ago
Rotation Multicolumn Layout Dynamic Grids (odd numbers of columns, 
 ratio grids)

Hardest part is changing our thinking, not our CSS.

Magazine s
and
The Web

Translate.

 Don’t Transfer.

(*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to Adaptive Content .)

The most dangerous phrase in the language is ‘We’ve always done it this way.’ 
 — Grace Hopper

One Last S tory

?

THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you! Mozilla Designer Advocate