Practical approaches to building responsive websites
@andyhumeMultipack Presents •12th November 2011DESIGNRESPONSIVE
View Slide
From now on, instead of talking aboutmaking a site accessible, I'm going totalk about keeping it accessible.“Jeremy Keith
TRY NOT TO BREAK IT?THE WEB WORKS
RESPONSIVENESS?WHAT BROKE.container {width: 960px;}
SEMANTIC HTMLSTEPS[0]
OOCSSSTEPS[1]Loosely couple content styling from layout styling
CORE.CSSSTEPS[4].product .title {font-size: 1em;}@media screen and (min-width: 60em) {.product .title {font-size: 1.4em;}}Keep modules together
SELECTOR QUERIES?STEPS[4]Content hereAdapt content based on container widthhttps://github.com/ahume/selector-queries
SELECTOR QUERIES?STEPS[4].product img {max-width: 100%;}.product.wide img { // greater than 400pxfloat: left;margin-right: 1em;max-width: auto;}Adapt content based on container widthhttps://github.com/ahume/selector-queries
NAVIGATIONSTEPS[2]
ADDING LAYOUTSTEPS[3]media="screen and (min-width:40em)">Loosely couple content styling from layout styling
IE <9STEPS[5]Send full ‘desktop’ layoutmedia="screen and (min-width:40em)">
IE <9STEPS[5]Send full ‘desktop’ layout - but not to mobilemedia="screen and (min-width:40em)">
IE <9STEPS[5]Send full ‘desktop’ layout - or notmedia="screen and (min-width:40em)">
IE <9STEPS[5]Polyfill media querieshttps://github.com/scottjehl/Respond
VIEWPORTSTEPS[6]Set layout viewport width to the device width
VIEWPORTSTEPS[6]W3C Syntax: coming soonhttp://dev.w3.org/csswg/css-device-adapt/@viewport {width: device-width;zoom: 1.0;}
IMAGESSTEPS[7]Shrinkingimg {max-width: 100%;}
RESPONSIVE IMAGESSTEPS[7]Small image by defaultDon’t download both
RESPONSIVE IMAGESSTEPS[7]Client-side solutionshttps://github.com/filamentgroup/Responsive-Imageshttps://github.com/ahume/Responsive-Imageshttps://github.com/allmarkedup/responsive-images-alt
RESPONSIVE IMAGESSTEPS[7]Here and now? src.sencha.io
RESPONSIVE IMAGESSTEPS[7]Here and now? Image replacement.logo {background-image: url(logo-large.png);}.logo img {position: absolute; left: -9999px;}
SVGSTEPS[8]Same approaches to support as responsive images
ENHANCING CONTENTSTEPS[9]What’s core content?
ENHANCING CONTENTSTEPS[9]
ENHANCING CONTENTSTEPS[9]if ($(document).width() > 640) {! $.get('path/to/html', function(data) {! ! $('[role="complementary"]').append(data);! });}What’s core content?
WHAT ELSE?BandwidthTouchIndividual user behaviour
THE END@andyhumeMultipack Presents •12th November 2011