Modern Layouts: Getting Out of Our Ruts

A presentation at An Event Apart Austin 2015 in October 2015 in Austin, TX, USA by Jen Simmons

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

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

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

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

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

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

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

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

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

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

Working Draft Last Call Candidate   Recommendation Proposed   Recommendation Recommendation CSS Flexible Box Layout, Level 1
May 14, 2015
w3.org/TR/css-flexbox-1

Working Draft Last Call Candidate   Recommendation Proposed   Recommendation Recommendation CSS Grid Layout, Level 1 March 17, 2015
w3.org/TR/css-grid-1

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

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.

(*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

Jen Simmons
@jensimmons

1 / 213

In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we can better design for the true medium at hand. This talk features practical examples of what's newly possible, along with access to a code repo for you to play with later.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Modern Layouts: Getting Out of Our Ruts

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Resources

Demo for this talk

Code for this talk

The Original Pizzahut.com

Space Jam

Microsoft’s 1994 homepage

BBC News Politics 97

The September Issue

All Websites Look the Same by Dave Ellis

Can I Use

Adobe’s CSS Shapes Gallery at CodePen

CSS Shapes Extension for Chrome

Tutorial on how to use the CSS Shapes Extension by Razvan Caliman (who created it)

The Web Ahead 81: Changing the Shapes with Sara Soueidan

Opera Mini

Multicolumn layout in the wild: Tim Berner’s Lee article

“Judy Blume Knows All Your Secrets,” NYTimes Magazine Cover Sheet example

Jen’s Experiment with Viewport Units

CSS Trick’s Complete Guide to Flexbox

Flexbox running on Chrome Dev Site

Rachel Andrew on CSS Grid

Mark Boulton on The Web Ahead, episode 9

Nathan Ford’s article on layout

Gridset App

Karen McGrane’s Adapting Ourselves to Adaptive Content

Bill Cunningham New York