1Monday, 20 May 13

how we built the responsive
site 2Monday, 20 May 13

3Monday, 20 May 13

Screen Size Capability mobiles desktop
small big It used to be simple .. 4Monday, 20 May 13

we built www. & m.
desktop =rich UX mobile =fast UX 5Monday, 20 May 13

device EXPLOSION EXPLOSION EXPLOSION 6Monday,
20 May 13

7Monday, 20 May 13

8Monday, 20 May 13

9Monday, 20 May 13

Screen Size Capability mobiles desktop
small big b okEr N 10Monday, 20 May 13

Screen Size Capability Smart phones
desktop small big tablets Net books TVse-readers feature phones it’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 Google 12Monday, 20 May 13

THe web 13Monday, 20 May
13

client side detection server side
client server WURFL User agent sniffing client server XHR Feature detecGon 14Monday, 20 May 13

responsive DESIGN 15Monday, 20 May
13

16Monday, 20 May 13

“Users don’t give a s**t
if your site is responsive” Brad Frost 17Monday, 20 May 13

responsive’s dirty secrets 18Monday, 20
May 13

* Browser support 19Monday, 20
May 13

20Monday, 20 May 13

21Monday, 20 May 13

Build a simpleweb page 22Monday,
20 May 13

speedthe core experience is fast
1 HTML document 1 image for the first story 2 CSS requests 2 branding images 1 stats web bug 7 requests 30kb~ 23Monday, 20 May 13

trash rubbish filler content nonsense
crap poppycock garbage baloney twaddletomfoolery tripe jQuery.js jQueryUI.js Uniform.js jTextTranslate.js TopUp.js TipTip.js FullCalendar.js grid.js Uploadify.js Elastic.js Contactable.js MarkItUp.js Autotab.js jExpand.js jBreadCrumb.js Vertical-Scroll-Menu.js Compact- News-Previewer.js Pull-Out-Content- Panel.js Mega-Drop-Down-Menu.js Apple-like-Retina-Effect.js Simple- Accordion.js gMap.js Stylish-Content- 24Monday, 20 May 13

content
25Monday, 20 May 13

Mobile first + progressive enhancement
Crappy 26Monday, 20 May 13

27Monday, 20 May 13

We split devices into good
and bad core experience enhanced experience 28Monday, 20 May 13

good browser?it cuts the mustardtm
29Monday, 20 May 13

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

good browser?it cuts the mustardtm
Avoids downloading large DOM libraries Most browsers will sGll pass Reduces dev Gme on new features 31Monday, 20 May 13

/news Link to weather site
CORE EXPERIENCE 32Monday, 20 May 13

ENHANCED EXPERIENCE 33Monday, 20 May
13

YESTERDAY 7 8 BB OS5
(MANGO) 1.6 TOMORROW 11 29 69 iOS 8 TODAY 10 BB OS6+ (WEBKIT) 2.1+ iOS 6 9 34Monday, 20 May 13

35Monday, 20 May 13

* Performance 36Monday, 20 May
13

287 requests 2.5MB transferred 37Monday,
20 May 13

requests
transferred ? 287 2.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 feature 41Monday,
20 May 13

10SECONDS ON GPRS 100KB ~
42Monday, 20 May 13

* images 43Monday, 20 May
13

imagesare big JS & CSS
362 IMAGES 492 HTML 35 44Monday, 20 May 13

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

Core image Hidden divs 46Monday,
20 May 13

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

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

16k
49Monday, 20 May 13

* media queries 50Monday, 20
May 13

Mediaqueries View port size rather
than content element Browsers download all style sheets* 51Monday, 20 May 13

wide.css cssLoad what you need
core.css tablet.css compact .css stylesheetLoader.init({ 'compact': '(max-width: 640px)', 'tablet' : '(min-width: 641px)', 'wide' : '(min-width: 1056px)' }); JS Stylesheet loader 52Monday, 20 May 13

* complexity 53Monday, 20 May
13

Simplify Simplify Simplify 54Monday, 20
May 13

Render on serverkeep it simple.
Non-­‐JS devices can view content Keep templates in one place JS rendering engines are slooooooow TranslaGons are much easier on the server 55Monday, 20 May 13

Tool up!a helping hand Curl.js
56Monday, 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 dependencies Asynchronous calls Swap out implementaGons AMD 58Monday, 20 May 13

59Monday, 20 May 13

* Hiding 60Monday, 20 May
13

Hidden content 61Monday, 20 May
13

Loaded content 62Monday, 20 May
13

63Monday, 20 May 13

64Monday, 20 May 13

Loadingstrategies Include Post Batch 65Monday,
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