Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scale and adapt : A story of how we built Responsive BBC News

jcleveley
November 19, 2012

Scale and adapt : A story of how we built Responsive BBC News

Life used to be easy. We created sites to work on a few browsers and when we had time we asked the new guy to build a half baked mobile version. Then the device explosion ruined our cozy happy dev life. My talk will discuss how BBC News met this challenge.

jcleveley

November 19, 2012
Tweet

More Decks by jcleveley

Other Decks in Technology

Transcript

  1. how we built the
    responsive site

    View full-size slide

  2. Screen Size
    Capability
    mobiles desktop
    small big
    It used to be simple ..

    View full-size slide

  3. we built www. & m.
    desktop =rich UX
    mobile =fast UX

    View full-size slide

  4. device EXPLOSION
    EXPLOSION
    EXPLOSION

    View full-size slide

  5. Screen Size
    Capability
    mobiles desktop
    small big
    b okE
    r N

    View full-size slide

  6. Screen Size
    Capability
    Smart
    phones
    desktop
    small big
    tablets
    Net books
    TVs
    e-readers
    feature
    phones
    it’s complicated ..
    Connection speed? Resolution? input method?

    View full-size slide

  7. Mobile will overtake desktop

    View full-size slide

  8. Even  Google  [is]  not  rich  enough  
    to  support  all  of  the  different  
    mobile  pla:orms...


    Vic  Gundotra,  VP  of  engineering  at  Google

    View full-size slide

  9. responsive
    DESIGN

    View full-size slide

  10. “Users don’t give a s**t
    if your site is responsive”
    Brad  Frost

    View full-size slide

  11. 287  requests
    2.5MB  transferred

    View full-size slide

  12. 287  requests
                             transferred  
    2.5MB

    View full-size slide

  13. things can get out of hand

    View full-size slide

  14. Responsive’s
    little dirty secrets
    Shrinking  large  images  client  side
    Media  queries  download  all  css
    Download  content  only  to  hide
    Download  enormous  JS  libraries  

    View full-size slide

  15. Performance  is  a  feature

    View full-size slide

  16. 10
    SECONDS
    ON GPRS
    100KB
    ~

    View full-size slide

  17. How  we  built  
    the  site

    View full-size slide

  18. client side
    detection
    server side
    client
    server WURFL
    User  agent  
    sniffing
    client
    server
    XHR
    Feature
    detecTon

    View full-size slide

  19. initial markup
    Everyone gets
    the same

    View full-size slide

  20. Mobile first
    +
    progressive enhancement

    View full-size slide

  21. trash
    rubbish
    filler
    content
    nonsense
    crap
    poppycock
    garbage baloney
    twaddle tomfoolery
    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-

    View full-size slide

  22. Text
    un  problème

    View full-size slide

  23. We split devices into
    good and bad
    core
    experience
    enhanced
    experience

    View full-size slide

  24. speed
    the 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   21kb
    ~

    View full-size slide

  25. good browser?
    it cuts the mustardtm

    View full-size slide

  26. good browser?
    it cuts the mustardtm
    if(
    'querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window
    ){
    // party time!
    }

    View full-size slide

  27. good browser?
    it cuts the mustardtm
    Avoids  downloading  large  DOM  libraries
    Most  browsers  will  sTll  pass
    Reduces  dev  Tme  on  new  features

    View full-size slide

  28. /news
    Link to
    weather
    site
    CORE EXPERIENCE

    View full-size slide

  29. ENHANCED EXPERIENCE

    View full-size slide

  30. Load what you need

    View full-size slide

  31. Responsive
    Images
    JS & CSS
    362
    IMAGES
    492
    HTML
    35

    View full-size slide

  32. Core  image

    View full-size slide

  33. images
    Dynamic resizing

    src="http://domain.com/200/foo.jpg"
    class="image-replace">

    View full-size slide

  34. Hidden  divs

    View full-size slide

  35. images
    Dynamic resizing

    data-src="http://domain.com/200/bar.jpg"
    class="delayed-image-load">

    View full-size slide

  36. wide.css
    css
    Load 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

    View full-size slide

  37. css
    keeping it maintainable
    #logo  {
       background-­‐image:  url('../images/logo.png');
    }
    @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.3),
                 (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  2.6/2),
                 (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.3),
                 (min-­‐device-­‐pixel-­‐ratio:  1.3),
                 (min-­‐resolution:  1.3dppx)  {
       #logo  {
           background-­‐image:  url('../images/logo_x2.png');
           -­‐webkit-­‐background-­‐size:  250px  188px;
           -­‐moz-­‐background-­‐size:  250px  188px;
           -­‐o-­‐background-­‐size:  250px  188px;
           background-­‐size:  250px  188px;
       }
    }

    View full-size slide

  38. css
    keeping it maintainable
    #logo  {
       background:  url('logo.png')  no-­‐repeat;
       @include  hidpi  {
           background-­‐image:  url('logo_x2.png');
           background-­‐size:  250px  188px;
       }
    }

    View full-size slide

  39. css
    keeping it maintainable
    #logo  {
       @include  hidpi(logo);
    }

    View full-size slide

  40. css
    keeping it maintainable
    @if $tablet or $compact {
       #logo  {
           @include  hidpi(logo);
       }
    }
    git.io/hidpi

    View full-size slide

  41. LAZY Load
    The illusion of speed

    View full-size slide

  42. ADAPT interface

    View full-size slide

  43. render on server
    keep it simple.
    Non-­‐JS  devices  can  view  content
    Keep  templates  in  one  place
    JS  rendering  engines  are  slooooooow
    TranslaTons  are  much  easier  on  the  server

    View full-size slide

  44. Testing
    Quality Assurance
    Manual  tesTng  -­‐  20  devices
    Automated  tesTng  -­‐  selenium  remote
    Sandbox  tesTng  -­‐  proxy  local  gem
    Remote  Debugging

    View full-size slide

  45. ProtecAng  the  servers

    View full-size slide

  46. We Cache nearly
    everything

    View full-size slide

  47. Front-­‐end
    context
    annotations
    Load
    Balancer
    Service
    Varnish
    Cache-Control:
    max-age=120

    View full-size slide

  48. varnish
    context aware
    Some  personalisaTons
    Country  of  user
    What  device  they  are  on

    View full-size slide

  49. varnish
    hit / miss ratios
    oh shit!

    View full-size slide

  50. 100m
    80m
    60m
    40m
    20m
    0m
    Jan 2011AD Apr 2011AD
    CDN
    FTW!
    lose
    context

    View full-size slide

  51. questions?
    @jcleveley

    View full-size slide