Future Web Layouts with Chris Mills
Upcoming SlideShare
Loading in...5
×
 

Future Web Layouts with Chris Mills

on

  • 1,769 views

We’ve been publishing documents, pages, apps, books and cat pictures on the Web for around 20 years now, so it is very surprising that we’ve never really had much in the way of easily manipulable, ...

We’ve been publishing documents, pages, apps, books and cat pictures on the Web for around 20 years now, so it is very surprising that we’ve never really had much in the way of easily manipulable, proper tools for creating web layouts. For years we relied on spacer gifs and horrible abuses of table markup, because nothing else had anything approaching cross browser support. Yes, we’ve had CSS for a long time, but positioning doesn’t have all the answers, and using floats for multiple columns is a hack. In 2012/2013, we are just starting to see proper layout tools for the web emerge and get support in browsers.

In this talk Chris Mills will take you through what’s available in the CSS3/4 layout specs, what can be used now in production projects, and what’s coming up on the horizon, including media queries, flexible box, multi-column layout, grids, regions, and more. Your cat pictures will never have looked better.

Statistics

Views

Total Views
1,769
Views on SlideShare
1,644
Embed Views
125

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 125

https://twitter.com 125

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Future Web Layouts with Chris Mills Future Web Layouts with Chris Mills Presentation Transcript

  • FutureLayoutsThursday, 14 March 13
  • Find me...✴ cmills@opera.com/cmills@w3.org✴ @chrisdavidmills✴ slideshare.net/chrisdavidmillsThursday, 14 March 13
  • In the early days✴ We thought the Web was print✴ Limited device landscape meantlimited outlook✴ Limited toolsetThursday, 14 March 13
  • Print means✴ Designer has full control✴ Technologies will be supported✴ Canvases are fixedThursday, 14 March 13
  • Web means✴ Designer has less control✴ Technologies won’t necessarily besupported✴ Canvases are variableThursday, 14 March 13
  • Limited devices...✴ We had desktops and laptops✴ Of around 480 x 320, 640 x 480...✴ ...or 800 x 600 if you were reallyposh✴ (We’ve come a long way sincethen)Thursday, 14 March 13
  • ...means limited outlook✴ Designing for the page✴ Fixed, inflexible designs✴ Mobile needed a separate site?✴ WAP was a good idea?Thursday, 14 March 13
  • Limited toolset✴ We didn’t have a good toolset forlayout✴ CSS came along soon after...✴ ..but CSS support didn’t✴ So we got into HTML tables andspacer GIFsThursday, 14 March 13
  • Consistent CSS support✴ Was very welcome...✴ Still didn’t give us much in the wayof layoutThursday, 14 March 13
  • CSS2 gave us✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.Thursday, 14 March 13
  • We still have problemsAt this point, there was still a raft ofdesign problems that were absurdlydifficult to solve on the web.Thursday, 14 March 13
  • What about✴ Centering stuff?✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴ etc.Thursday, 14 March 13
  • Centering stuff™<figure><div><img src="../base-styles/grim-north.jpg" alt="A map of the North ofEngland"><figcaption>Figure 1.1: Its grim upNorth.</figcaption></div></figure>Thursday, 14 March 13
  • Centering stuff™figure {text-align: center;}figure div {display: inline-block;...}Thursday, 14 March 13
  • Same height columnsThursday, 14 March 13
  • Same height columns✴ We can fix this with faux columns✴ Or JavaScript✴ But really? Should we need to?Thursday, 14 March 13
  • Fortunately we haveA New HopeThursday, 14 March 13
  • New tools on the horizon✴ CSS WG + browser vendors✴ Hard at workThursday, 14 March 13
  • Media queriesThursday, 14 March 13
  • Media queries✴ Same content, different layouts✴ Polyfills/fixed layouts for old IEThursday, 14 March 13
  • Media queriesmedia="screen and (max-width: 480px)"@media screen and (max-width: 480px) {/* do amazing stuff fornarrow screens */}Thursday, 14 March 13
  • Media queries/* Mobile first - make your mobile layoutthe default... */@media screen and (min-width: 481px) {/* ...then do amazing stuff forwider screens */}Thursday, 14 March 13
  • Media queriesThursday, 14 March 13
  • matchMedia✴ matchMedia = media queries insidescript✴ For IE<10 and Opera Presto, polyfillgithub.com/paulirish/matchMedia.js/Thursday, 14 March 13
  • matchMedia exampleif (window.matchMedia("(min-width:480px)").matches) {/* Do stuff for wider screens */} else {/* Do stuff for narrow screens */}Thursday, 14 March 13
  • http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/More on Media queriesThursday, 14 March 13
  • viewport/CSSdeviceadaptationThursday, 14 March 13
  • Mobile browsers lie✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut itThursday, 14 March 13
  • Mobile misbehaviorThursday, 14 March 13
  • Viewport<meta name="viewport"content="width=device-width">Thursday, 14 March 13
  • BetterThursday, 14 March 13
  • @viewport✴ Because viewport is more of astyle thing✴ Specify viewport inside the@viewport rule✴ Opera Presto, IE10, WebKitThursday, 14 March 13
  • Viewport@viewport {width: device-width;}Thursday, 14 March 13
  • http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/More on viewportand @ viewportThursday, 14 March 13
  • FlexboxThursday, 14 March 13
  • Flexbox rocks✴ Allows easy flexible layouts✴ Content reordering✴ Same height columns✴ Cure for cancer?✴ Chrome, Opera Presto, FF, IE (oldsyntax)Thursday, 14 March 13
  • An example<section><nav> ... </nav><article> ... </article><article> ... </article></section>Thursday, 14 March 13
  • An examplesection {display: flex;}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Rows and columnssection {display: flex;flex-direction: row;flex-wrap: nowrap;}/* flex-flow is shorthand for flex-direction/wrap */Thursday, 14 March 13
  • Main and cross axisThursday, 14 March 13
  • align items on main axissection {justify-content: center;}/* can take other values such as flex-start,flex-end, space-between and space-around */Thursday, 14 March 13
  • Thursday, 14 March 13
  • align items on cross axissection {align-items: stretch;}/* can take other values such as flex-start,flex-end, and center; */Thursday, 14 March 13
  • Thursday, 14 March 13
  • Ordering elements✴ Reorder child elements easily andquickly✴ Without screwing with the DOMThursday, 14 March 13
  • Ordinal groupsnav {order: 1;}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Flexing our muscle✴ The flex property✴ Set what proportion of availablespace child elements occupy✴ Unit-less proportion valuesThursday, 14 March 13
  • Flex propertynav {flex: 1;}article {flex: 3;}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • But there’s morearticle {flex: 3 2 400px;}/* flex-grow shares out positive spaceflex-shrink shares out overflow reductionflex-basis initially applied= CAN GET BLOODY COMPLICATED */Thursday, 14 March 13
  • A case studyThursday, 14 March 13
  • Placing the navsection {display: flex;flex-flow: row wrap;}nav {flex: 1 100%;}Thursday, 14 March 13
  • Flexible awesome nav!Thursday, 14 March 13
  • Making awesomenav {display: flex;justify-content: center;}nav ul {display: flex;flex-flow: row wrap;justify-content: center;width: 80%;}Thursday, 14 March 13
  • Making awesomenav ul li {flex: auto;min-width: 5rem;}Thursday, 14 March 13
  • http://dev.opera.com/articles/view/flexbox-basics/More on FlexboxThursday, 14 March 13
  • Multi-columnThursday, 14 March 13
  • Multi-col layouts✴ Break content into multi-col✴ Cut down on markup cruft✴ Specify column breaks, columnrules and heading span✴ Most modern browsers have thisThursday, 14 March 13
  • Great at some things<article>...</article>article {column-count: 2;column-gap: 1rem;column-rule: 2px solid rgba(0,0,255,0.25);}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Controlling columnbreaksarticle h2 {break-before: column;break-after: avoid-column;}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Column-spanningheadingsarticle h2 {break-after: avoid-column;column-span: all;}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Can also specifycolumn widtharticle {column-width: 20rem;column-gap: 2rem;}Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Not so great at otherthings✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layoutsThursday, 14 March 13
  • http://dev.opera.com/articles/view/css3-multi-column-layout/More on Multi-colThursday, 14 March 13
  • GridsThursday, 14 March 13
  • CSS grid layout✴ A proper grid system for the web✴ Completely remove content fromany layout concern✴ IE10 only at the moment✴ Spec in fluxThursday, 14 March 13
  • Define your gridbody {display: grid;grid-columns: 4% 20% 20% 12% 20% 20% 4%;grid-rows: 300px 450px 450px 450px 300px;}Thursday, 14 March 13
  • Define your gridcontentsheader {grid-column-position: 1;grid-row-position: 1;grid-column-span: 7;}Thursday, 14 March 13
  • Thursday, 14 March 13
  • http://24ways.org/2012/css3-grid-layout/ (out of date syntax, but givesgood overview)More on gridsThursday, 14 March 13
  • RegionsThursday, 14 March 13
  • CSS regions✴ Turn containers into vessels toflow content into✴ Flexible complex layouts✴ IE10 and Chrome Canary only at themomentThursday, 14 March 13
  • Put your content in aseparate block<article class="content"><h2>Introduction</h2><p>Hello, dear readers...</article>Thursday, 14 March 13
  • Then create your layoutblocks<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>Thursday, 14 March 13
  • Specify where toflow it into.content {-webkit-flow-into: article;}.text-container, .text-overflow {-webkit-flow-from: article;}Thursday, 14 March 13
  • A little something Icooked upThursday, 14 March 13
  • Exclusions andshapesThursday, 14 March 13
  • CSS exclusions✴ Create really complex floats✴ Flow content around (and inside)complex shapes✴ Chrome Canary/IE only at themomentThursday, 14 March 13
  • Thursday, 14 March 13
  • Position your exclusion<article class="content"><header>...</header>...</article>header {position: absolute;etc.}Thursday, 14 March 13
  • Then exclude it!header {position: absolute;etc.wrap-flow: both;/* Can also take values of start, end,minimum, maximum, clear */}Thursday, 14 March 13
  • Different effectsTextboth start endminimum maximum clearThursday, 14 March 13
  • Shape your exclusionshape-inside: rectangle(0, 0, 100%, 100%,25%, 25%);shape-inside: polygon( ... )shape-outside: polygon( ... )Thursday, 14 March 13
  • shape inside/outsideThursday, 14 March 13
  • My examples...✴ ...didn’t work✴ Apparently wrap-flow is in IE10✴ and shape-inside/outside inChrome Canary...Thursday, 14 March 13
  • A note onCSS unitsThursday, 14 March 13
  • ✴ rem units used throughout myexamples✴ size relative to the root (html) font-size, not the parent font size.✴ Much easier mathsremsThursday, 14 March 13
  • ✴ Percentage of viewport size✴ 1vw = 1% of viewport width✴ 1vh = 1% of viewport height✴ 1vmin = 1vw or 1vh, whatever issmallestvh, vw, and vminThursday, 14 March 13
  • ✴ Supported in IE10, FF, Chrome, iOS,Blackberry?✴ text-size relative to viewport =accessibility problem?vh, vw, and vminThursday, 14 March 13
  • New responsivecapabilitiesThursday, 14 March 13
  • Fallbacks andalternativesThursday, 14 March 13
  • ✴ A lot of this stuff doesn’t degradevery gracefully✴ Not a surprise, as layout is apretty big dealIn truthThursday, 14 March 13
  • So do we just wait until support iseverywhere and IE6-9 is destroyed?Thursday, 14 March 13
  • ✴ Intelligent alternatives via featuredetection✴ @supports: native featuredetection✴ Modernizr is still an excellentsolutionHell no!Thursday, 14 March 13
  • @supports/* Provide basic layout, e.g. with floats */@supports (display:flex) {/* Provide Flexbox layout for supportingbrowsers */}Thursday, 14 March 13
  • Modernizr<html lang="en-US" class="no-js"><head><script src="modernizr.js"></script></head>Thursday, 14 March 13
  • Modernizr<html class=" js flexbox canvas canvastextwebgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange historydraganddrop websockets rgba hsla multiplebgsbackgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimationscsscolumns cssgradients no-cssreflectionscsstransforms no-csstransforms3dcsstransitions fontface generatedcontentvideo audio ... ">Thursday, 14 March 13
  • Modernizr CSS.feature-no-regions .layout, .feature-no-regions .text-overflow {display: none;}.feature-no-regions .content {float: left;width: 48%;padding: 1%;}Thursday, 14 March 13
  • Fallback basic layoutThursday, 14 March 13
  • Modernizr JSfunction rotateForm() {if(Modernizr.cssanimations &&Modernizr.csstransforms3d) {form.setAttribute("class","form-rotate");form.style.left = "0rem";} else {back.style.zIndex = "5";}}Thursday, 14 March 13
  • Buy my book“Subtle” advertisementThursday, 14 March 13
  • Thanks!Thursday, 14 March 13
  • Find me...✴ cmills@opera.com/cmills@w3.org✴ @chrisdavidmills✴ slideshare.net/chrisdavidmillsThursday, 14 March 13
  • Photo credits✴ Star wars adidas posters byDorothy Tang: http://www.flickr.com/photos/adifans/4265441265/Thursday, 14 March 13