1Monday, 20 May 13

how we built theresponsive site2Monday,
20 May 13

3Monday, 20 May 13

Screen SizeCapabilitymobiles desktopsmall bigIt used
to be simple ..4Monday, 20 May 13

we built www. & m.desktop
=rich UXmobile =fast UX5Monday, 20 May 13

deviceEXPLOSIONEXPLOSIONEXPLOSION6Monday, 20 May 13

7Monday, 20 May 13

8Monday, 20 May 13

9Monday, 20 May 13

Screen SizeCapabilitymobiles desktopsmall bigb okEr
N10Monday, 20 May 13

Screen SizeCapabilitySmartphonesdesktopsmall bigtabletsNet booksTVse-readersfeaturephonesit’s complicated
..Connection speed? Resolution? input method?11Monday, 20 May 13

Even Google [is] not rich
enough to support all of the different mobile pla:orms...“”Vic Gundotra, VP of engineering at Google12Monday, 20 May 13

THeweb 13Monday, 20 May 13

client sidedetectionserver sideclientserver WURFLUser agent
sniffingclientserverXHRFeaturedetecGon14Monday, 20 May 13

responsiveDESIGN15Monday, 20 May 13

16Monday, 20 May 13

“Users don’t give a s**tif
your site is responsive”Brad Frost17Monday, 20 May 13

responsive’sdirtysecrets18Monday, 20 May 13

*Browser support19Monday, 20 May 13

20Monday, 20 May 13

21Monday, 20 May 13

Build a simpleweb page22Monday, 20
May 13

speedthe core experience is fast1
HTML document1 image for the first story2 CSS requests2 branding images1 stats web bug7 requests 30kb~23Monday, 20 May 13

trashrubbishfillercontentnonsensecrappoppycockgarbage baloneytwaddletomfoolerytripejQuery.js jQueryUI.js Uniform.jsjTextTranslate.js TopUp.js
TipTip.jsFullCalendar.js grid.js Uploadify.jsElastic.js Contactable.js MarkItUp.jsAutotab.js jExpand.js jBreadCrumb.jsVertical-Scroll-Menu.js Compact-News-Previewer.js Pull-Out-Content-Panel.js Mega-Drop-Down-Menu.jsApple-like-Retina-Effect.js Simple-Accordion.js gMap.js Stylish-Content- 24Monday, 20 May 13

content25Monday, 20 May 13

Mobile first+progressive enhancementCrappy26Monday, 20 May
13

27Monday, 20 May 13

We split devices intogood and
badcoreexperienceenhancedexperience28Monday, 20 May 13

good browser?it cuts the mustardtm29Monday,
20 May 13

good browser?it cuts the mustardtmif(querySelector
in document &&localStorage in window &&addEventListener in window){// party time!}30Monday, 20 May 13

good browser?it cuts the mustardtmAvoids
downloading large DOM librariesMost browsers will sGll passReduces dev Gme on new features31Monday, 20 May 13

/newsLink toweathersiteCORE EXPERIENCE32Monday, 20 May
13

ENHANCED EXPERIENCE33Monday, 20 May 13

YESTERDAY7 8BB OS5(MANGO)1.6TOMORROW112969iOS 8TODAY10BB OS6+(WEBKIT)2.1+iOS
6934Monday, 20 May 13

35Monday, 20 May 13

*Performance36Monday, 20 May 13

287 requests2.5MB transferred37Monday, 20 May
13

requests
transferred ?2872.5MB“86% sites same or larger than desktop”Guy Podjarny 38Monday, 20 May 13

39Monday, 20 May 13

how did it get to
this ?40Monday, 20 May 13

Performance is a feature41Monday, 20
May 13

10SECONDSON GPRS100KB~42Monday, 20 May 13

*images 43Monday, 20 May 13

imagesare bigJS & CSS362IMAGES492HTML3544Monday, 20
May 13

<img src="big-elephant.jpg">img {max-width: 100%;}100kb100kb45Monday, 20
May 13

Core imageHidden divs46Monday, 20 May
13

imagesDynamic resizing<!-- Core image which
will be replaced --><imgsrc="http://domain.com/200/foo.jpg"class="image-replace">47Monday, 20 May 13

imagesDynamic resizing<!-- Placeholder image for
variable size --><divdata-src="http://domain.com/200/bar.jpg"class="delayed-image-load"></div>48Monday, 20 May 13

16k49Monday, 20 May 13

*media queries50Monday, 20 May 13

MediaqueriesView port size rather than
content elementBrowsers download all style sheets*51Monday, 20 May 13

wide.csscssLoad what you needcore.csstablet.csscompact.cssstylesheetLoader.init({compact: (max-width:
640px),tablet : (min-width: 641px),wide : (min-width: 1056px)});JSStylesheetloader52Monday, 20 May 13

*complexity53Monday, 20 May 13

SimplifySimplifySimplify54Monday, 20 May 13

Render on serverkeep it simple.Non-­‐JS
devices can view contentKeep templates in one placeJS rendering engines are slooooooowTranslaGons are much easier on the server55Monday, 20 May 13

Tool up!a helping handCurl.js56Monday, 20
May 13

$rtl: true;// Flipped Sass -
flip.class {float: flip(left, right);}// Flipped Sass.class {#{$padding-left}: 8px;}57Monday, 20 May 13

define([domLibrary,deviceInspector],function($,deviceInspector){// module code});Define modules and
dependenciesAsynchronous callsSwap out implementaGonsAMD58Monday, 20 May 13

59Monday, 20 May 13

*Hiding 60Monday, 20 May 13

Hidden content61Monday, 20 May 13

Loadedcontent62Monday, 20 May 13

63Monday, 20 May 13

64Monday, 20 May 13

LoadingstrategiesInclude Post Batch65Monday, 20 May
13

66Monday, 20 May 13

<a href="/news/component/top-stories-promo"id="js-top-stories-promo"></a><script>require([loader], function(cl) {cl.register({});});</script>"selector":"#js-top-stories-promo","loadingStrategy":"batch","deviceGroups":["tablet","desktop"]67Monday, 20
May 13

68Monday, 20 May 13

LAZY LoadFalse economy?69Monday, 20 May
13

Avoid

waking

the

radio!70Monday, 20 May 13

*testing71Monday, 20 May 13

Manual tesng72Monday, 20 May 13

Automated testsPhantomJS -­‐ fastWebDriver -­‐
real73Monday, 20 May 13

UI regression tests74Monday, 20 May
13

page.viewportSize = {width: 320, height:
5000};compare -fuzz 20%-highlight-color blue#{base} #{compare} #{output}page.open(url, function() {page.render(image_name);});75Monday, 20 May 13

Perf testsHttp Archive (HAR)phantomjs netsniff.jshttp://foo.com
foo.harhttps://code.google.com/p/harstorage/76Monday, 20 May 13

Perf testsHttp Archive (HAR)DOH!77Monday, 20
May 13

Protecng the servers78Monday, 20 May
13

We Cache nearlyeverything79Monday, 20 May
13

Front-­‐endcontextannotationsLoadBalancerServiceVarnishCache-Control:max-age=12080Monday, 20 May 13

varnishcontext awareSome personalisaGonsCountry of userWhat
device they are on81Monday, 20 May 13

varnishhit / miss ratiosdoh! 82Monday,
20 May 13

100m80m60m40m20m0mJan 2011AD Apr 2011ADCDNFTW!losecontext83Monday, 20
May 13

84Monday, 20 May 13

rememberthe little guy85Monday, 20 May
13

we’re alwayslooking for greattalent to
join us,get in touch!@jcleveley86Monday, 20 May 13