Future Web Layouts with Chris Mills

Future
Layouts
Thursday, 14 March 13

Find me...
✴ cmills@opera.com/cmills@w3.org
✴ @chrisdavidmills
✴ slideshare.net/chrisdavidmills

In the early days
✴ We thought the Web was print
✴ Limited device landscape meant
limited outlook
✴ Limited toolset

Print means
✴ Designer has full control
✴ Technologies will be supported
✴ Canvases are fixed

Web means
✴ Designer has less control
✴ Technologies won’t necessarily be
supported
✴ Canvases are variable

Limited devices...
✴ We had desktops and laptops
✴ Of around 480 x 320, 640 x 480...
✴ ...or 800 x 600 if you were really
posh
✴ (We’ve come a long way since
then)

...means limited outlook
✴ Designing for the page
✴ Fixed, inflexible designs
✴ Mobile needed a separate site?
✴ WAP was a good idea?

Limited toolset
✴ We didn’t have a good toolset for
layout
✴ CSS came along soon after...
✴ ..but CSS support didn’t
✴ So we got into HTML tables and
spacer GIFs

Consistent CSS support
✴ Was very welcome...
✴ Still didn’t give us much in the way
of layout

CSS2 gave us
✴ floats: limiting, and kind of abused.
✴ positioning: feh.
✴ margins, padding: pfffff.
✴ borders.
✴ meh.

We still have problems
At this point, there was still a raft of
design problems that were absurdly
difficult to solve on the web.

What about
✴ Centering stuff?
✴ Same height columns?
✴ Flexible multiple columns?
✴ Complex floats?
✴ Shrinkwrapping contents?
✴ etc.

Centering stuff™
<figure>
<div>
<img src="../base-styles/grim-
north.jpg" alt="A map of the North of
England">
<figcaption>Figure 1.1: It's grim up
North.</figcaption>
</div>
</figure>

Centering stuff™
figure {
text-align: center;
}
figure div {
display: inline-block;
...
}

Same height columns

Same height columns
✴ We can fix this with faux columns
✴ Or JavaScript
✴ But really? Should we need to?

Fortunately we have
A New Hope

New tools on the horizon
✴ CSS WG + browser vendors
✴ Hard at work

Media queries

Media queries
✴ Same content, different layouts
✴ Polyfills/fixed layouts for old IE

Media queries
media="screen and (max-width: 480px)"
@media screen and (max-width: 480px) {
/* do amazing stuff for
narrow screens */
}

Media queries
/* Mobile first - make your mobile layout
the default... */
@media screen and (min-width: 481px) {
/* ...then do amazing stuff for
wider screens */
}

matchMedia
✴ matchMedia = media queries inside
script
✴ For IE<10 and Opera Presto, polyfill
github.com/paulirish/matchMedia.js/

matchMedia example
if (window.matchMedia("(min-width:
480px)").matches) {
/* Do stuff for wider screens */
} else {
/* Do stuff for narrow screens */
}

http://dev.opera.com/articles/view/
love-your-devices-adaptive-web-
design-with-media-queries-viewport-
and-more/
More on Media queries

viewport/CSS
device
adaptation

Mobile browsers lie
✴ About viewport width
✴ Some also lie about the resolution
✴ So media queries alone don’t cut it

Mobile misbehavior

Viewport
<meta name="viewport"
content="width=device-width">

@viewport
✴ Because viewport is more of a
style thing
✴ Specify viewport inside the
@viewport rule
✴ Opera Presto, IE10, WebKit

Viewport
@viewport {
width: device-width;
}

http://dev.opera.com/articles/view/an-
introduction-to-meta-viewport-and-
viewport/
More on viewport
and @ viewport

Flexbox rocks
✴ Allows easy flexible layouts
✴ Content reordering
✴ Same height columns
✴ Cure for cancer?
✴ Chrome, Opera Presto, FF, IE (old
syntax)

An example
<section>
<nav> ... </nav>
<article> ... </article>
<article> ... </article>
</section>

An example
section {
display: flex;
}

Gives you

Rows and columns
section {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* flex-flow is shorthand for flex-direction/
wrap */

Main and cross axis

align items on main axis
section {
justify-content: center;
}
/* can take other values such as flex-start,
flex-end, space-between and space-around */

align items on cross axis
section {
align-items: stretch;
}
/* can take other values such as flex-start,
flex-end, and center; */

Ordering elements
✴ Reorder child elements easily and
quickly
✴ Without screwing with the DOM

Ordinal groups
nav {
order: 1;
}

Flexing our muscle
✴ The flex property
✴ Set what proportion of available
space child elements occupy
✴ Unit-less proportion values

Flex property
nav {
flex: 1;
}
article {
flex: 3;
}

But there’s more
article {
flex: 3 2 400px;
}
/* flex-grow shares out positive space
flex-shrink shares out overflow reduction
flex-basis initially applied
= CAN GET BLOODY COMPLICATED */

A case study

Placing the nav
section {
display: flex;
flex-flow: row wrap;
}
nav {
flex: 1 100%;
}

Flexible awesome nav!

Making awesome
nav {
display: flex;
}
nav ul {
display: flex;
flex-flow: row wrap;
width: 80%;
}

Making awesome
nav ul li {
flex: auto;
min-width: 5rem;
}

flexbox-basics/
More on Flexbox

Multi-column

Multi-col layouts
✴ Break content into multi-col
✴ Cut down on markup cruft
✴ Specify column breaks, column
rules and heading span
✴ Most modern browsers have this

Great at some things
<article>...</article>
article {
column-count: 2;
column-gap: 1rem;
column-rule: 2px solid rgba(0,0,255,0.25);
}

Controlling column
breaks
article h2 {
break-before: column;
break-after: avoid-column;
}

Column-spanning
headings
article h2 {
break-after: avoid-column;
column-span: all;
}

Can also specify
column width
article {
column-width: 20rem;
column-gap: 2rem;
}

Not so great at other
things
✴ No proper multi-column layouts
✴ break properties are fiddly
✴ Only works for simple layouts

css3-multi-column-layout/
More on Multi-col

CSS grid layout
✴ A proper grid system for the web
✴ Completely remove content from
any layout concern
✴ IE10 only at the moment
✴ Spec in flux

Define your grid
body {
display: grid;
grid-columns: 4% 20% 20% 12% 20% 20% 4%;
grid-rows: 300px 450px 450px 450px 300px;
}

Define your grid
contents
header {
grid-column-position: 1;
grid-row-position: 1;
grid-column-span: 7;
}

http://24ways.org/2012/css3-grid-
layout/ (out of date syntax, but gives
good overview)
More on grids

CSS regions
✴ Turn containers into vessels to
flow content into
✴ Flexible complex layouts
✴ IE10 and Chrome Canary only at the
moment

Put your content in a
separate block
<article class="content">
<h2>Introduction</h2>
<p>Hello, dear readers...
</article>

Then create your layout
blocks
<div class="layout">
<div class="text-container"></div>
<div class="image-container">
...
</div>
</div>
<div class="text-overflow"></div>

Specify where to
flow it into
.content {
-webkit-flow-into: article;
}
.text-container, .text-overflow {
-webkit-flow-from: article;
}

A little something I
cooked up

Exclusions and
shapes

CSS exclusions
✴ Create really complex floats
✴ Flow content around (and inside)
complex shapes
✴ Chrome Canary/IE only at the
moment

Position your exclusion
<article class="content">
<header>
...
</header>
...
</article>
header {
position: absolute;
etc.
}

Then exclude it!
header {
position: absolute;
etc.
wrap-flow: both;
/* Can also take values of start, end,
minimum, maximum, clear */
}

Different effects
Text
both start end
minimum maximum clear

Shape your exclusion
shape-inside: rectangle(0, 0, 100%, 100%,
25%, 25%);
shape-inside: polygon( ... )
shape-outside: polygon( ... )

shape inside/outside

My examples...
✴ ...didn’t work
✴ Apparently wrap-flow is in IE10
✴ and shape-inside/outside in
Chrome Canary...

A note on
CSS units

✴ rem units used throughout my
examples
✴ size relative to the root (html) font-
size, not the parent font size.
✴ Much easier maths
rems

✴ Percentage of viewport size
✴ 1vw = 1% of viewport width
✴ 1vh = 1% of viewport height
✴ 1vmin = 1vw or 1vh, whatever is
smallest
vh, vw, and vmin

✴ Supported in IE10, FF, Chrome, iOS,
Blackberry?
✴ text-size relative to viewport =
accessibility problem?
vh, vw, and vmin

New responsive
capabilities

Fallbacks and
alternatives

✴ A lot of this stuff doesn’t degrade
very gracefully
✴ Not a surprise, as layout is a
pretty big deal
In truth

So do we just wait until support is
everywhere and IE6-9 is destroyed?

✴ Intelligent alternatives via feature
detection
✴ @supports: native feature
detection
✴ Modernizr is still an excellent
solution
Hell no!

@supports
/* Provide basic layout, e.g. with floats */
@supports (display:flex) {
/* Provide Flexbox layout for supporting
browsers */
}

Modernizr
<html lang="en-US" class="no-js">
<head>
<script src="modernizr.js"></script>
</head>

Modernizr
<html class=" js flexbox canvas canvastext
webgl no-touch geolocation postmessage no-
websqldatabase indexeddb hashchange history
draganddrop websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations
csscolumns cssgradients no-cssreflections
csstransforms no-csstransforms3d
csstransitions fontface generatedcontent
video audio ... ">

Modernizr CSS
.feature-no-regions .layout, .feature-no-
regions .text-overflow {
display: none;
}
.feature-no-regions .content {
float: left;
width: 48%;
padding: 1%;
}

Fallback basic layout

Modernizr JS
function rotateForm() {
if(Modernizr.cssanimations &&
Modernizr.csstransforms3d) {
form.setAttribute("class","form-rotate");
form.style.left = "0rem";
} else {
back.style.zIndex = "5";
}
}

Buy my book
“Subtle” advertisement

Photo credits
✴ Star wars adidas posters by
Dorothy Tang: http://
www.flickr.com/photos/adifans/
4265441265/

Future Web Layouts with Chris Mills

More Related Content

More from FITC

Recently uploaded

Future Web Layouts with Chris Mills