1Monday, 20 May 13

how we built the

responsive site

2Monday, 20 May 13

3Monday, 20 May 13

Screen Size

Capa

bility

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

deviceEXP

LOSION

EXPLOSIONEXPLOSION

6Monday, 20 May 13

7Monday, 20 May 13

8Monday, 20 May 13

9Monday, 20 May 13

Screen Size

Capa

bility

mobiles desktop

small big

b okEr N

10Monday, 20 May 13

Screen Size

Capa

bility Smart

phones

desktop

small big

tablets

Net books

TVse-readersfeature

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

THeweb

13Monday, 20 May 13

client side

detectionserver side

client

server WURFL

User  agent  sniffing

client

server

XHR

FeaturedetecGon

14Monday, 20 May 13

responsiveDESIGN

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’sdirty

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

trashrubbish

filler

conten

tnonsense

crap

poppycock

garbage baloneytw

addle

tom

foolery

tripejQuery.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-Slider.js jQuery-Confirm-Dialog.js

24Monday, 20 May 13

conten

t25Monday, 20 May 13

Mobile first +

progressive enhancement

Crappy

26Monday, 20 May 13

27Monday, 20 May 13

We split devices into good and bad

coreexperience

enhancedexperience

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

*

Performance36Monday, 20 May 13

287  requests2.5MB  transferred

37Monday, 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

10SECONDS ON GPRS

100KB~42Monday, 20 May 13

*

images43Monday, 20 May 13

images are big

JS & CSS362

IMAGES492

HTML35

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

images Dynamic resizing

<!-- Core image which will be replaced --><img src="http://domain.com/200/foo.jpg" class="image-replace">

47Monday, 20 May 13

images Dynamic 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 queries50Monday, 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.csstablet.css

compact.css

stylesheetLoader.init({ 'compact': '(max-width: 640px)', 'tablet' : '(min-width: 641px)', 'wide' : '(min-width: 1056px)'});

JSStylesheet

loader

52Monday, 20 May 13

*

complexity53Monday, 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

*

Hiding60Monday, 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����������� ������������������  waking����������� ������������������  the����������� ������������������  radio!

70Monday, 20 May 13

*

testing71Monday, 20 May 13

Manual  tes<ng72Monday, 20 May 13

Automated  tests

PhantomJS  -­‐  fast

WebDriver  -­‐  real

73Monday, 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.js "http://foo.com" > foo.har

https://code.google.com/p/harstorage/

76Monday, 20 May 13

Perf testsHttp Archive (HAR)

DOH!

77Monday, 20 May 13

Protec<ng  the  servers

78Monday, 20 May 13

We Cache nearly everything

79Monday, 20 May 13

Front-­‐end

contextannotations

Load Balancer

Service

Varnish

Cache-C

ontrol:

max-ag

e=12

0

80Monday, 20 May 13

varnishcontext aware

Some  personalisaGons

Country  of  user

What  device  they  are  on

81Monday, 20 May 13

varnishhit / miss ratios

doh!82Monday, 20 May 13

100m

80m

60m

40m

20m

0mJan 2011AD Apr 2011AD

CDNFTW!

losecontext

83Monday, 20 May 13

84Monday, 20 May 13

remember

the little guy85Monday, 20 May 13

we’re always looking for great talent to join us, get in touch!

@jcleveley

86Monday, 20 May 13