future web layouts with chris mills

FutureLayouts

Thursday, 14 March 13

Find me...

✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills


mailto:[email protected]




http://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 */}


Media queries


matchMedia

✴ matchMedia = media queries inside script

✴ For IE<10 and Opera Presto, polyfill github.com/paulirish/matchMedia.js/


http://github.com/paulirish/matchMedia.js/

http://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">


Better


@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 viewportand @ viewport








Flexbox


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


Gives you


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


Gives you


But there’s more

article { flex: 3 2 400px;}

/* flex-grow shares out positive spaceflex-shrink shares out overflow reductionflex-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; justify-content: center; }

nav ul { display: flex; flex-flow: row wrap; justify-content: center; width: 80%;}


Making awesome

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


http://dev.opera.com/articles/view/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);}


Gives you


Controlling columnbreaks

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


Gives you


Column-spanning headings

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


Gives you


Can also specifycolumn width

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


Gives you Thursday, 14 March 13

Not so great at other things

✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layouts


http://dev.opera.com/articles/view/css3-multi-column-layout/

More on Multi-col






Grids


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 gridcontents

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


http://24ways.org/2012/css3-grid-layout/




Regions


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="text-container"></div> <div class="image-container"> ... </div> <div class="text-container"></div></div><div class="text-overflow"></div>


Specify where toflow 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 onCSS 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


Thanks!


Find me...

✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills








Photo credits

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


http://www.flickr.com/photos/adifans/4265441265/






future web layouts with chris mills

Technology

media screen

media queriesthursday

media queriesmedia

media queries insidescript

limited devices

css support didnt

centering stuff figure

web means designer