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

85a9fce93e576e9e99eed5a61a7e5c4a?s=47 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.

85a9fce93e576e9e99eed5a61a7e5c4a?s=128

jcleveley

November 19, 2012
Tweet

Transcript

  1. None
  2. how we built the responsive site

  3. None
  4. Screen Size Capability mobiles desktop small big It used to

    be simple ..
  5. we built www. & m. desktop =rich UX mobile =fast

    UX
  6. device EXPLOSION EXPLOSION EXPLOSION

  7. None
  8. Screen Size Capability mobiles desktop small big b okE r

    N
  9. Screen Size Capability Smart phones desktop small big tablets Net

    books TVs e-readers feature phones it’s complicated .. Connection speed? Resolution? input method?
  10. Mobile will overtake desktop

  11. None
  12. Even  Google  [is]  not  rich  enough   to  support  all

     of  the  different   mobile  pla:orms... “ ” Vic  Gundotra,  VP  of  engineering  at  Google
  13. responsive DESIGN

  14. None
  15. “Users don’t give a s**t if your site is responsive”

    Brad  Frost
  16. 287  requests 2.5MB  transferred

  17. 287  requests                

             transferred   2.5MB
  18. None
  19. things can get out of hand

  20. Responsive’s little dirty secrets Shrinking  large  images  client  side Media

     queries  download  all  css Download  content  only  to  hide Download  enormous  JS  libraries  
  21. Performance  is  a  feature

  22. 10 SECONDS ON GPRS 100KB ~

  23. How  we  built   the  site

  24. client side detection server side client server WURFL User  agent

      sniffing client server XHR Feature detecTon
  25. initial markup Everyone gets the same

  26. Mobile first + progressive enhancement

  27. 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-
  28. content

  29. Text un  problème

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

    experience
  31. None
  32. 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 ~
  33. good browser? it cuts the mustardtm

  34. good browser? it cuts the mustardtm if( 'querySelector' in document

    && 'localStorage' in window && 'addEventListener' in window ){ // party time! }
  35. good browser? it cuts the mustardtm Avoids  downloading  large  DOM

     libraries Most  browsers  will  sTll  pass Reduces  dev  Tme  on  new  features
  36. /news Link to weather site CORE EXPERIENCE

  37. ENHANCED EXPERIENCE

  38. Load what you need

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

  40. Core  image

  41. images Dynamic resizing <!-- Core image which will be replaced

    --> <img src="http://domain.com/200/foo.jpg" class="image-replace">
  42. Hidden  divs

  43. images Dynamic resizing <!-- Placeholder image for variable size -->

    <div data-src="http://domain.com/200/bar.jpg" class="delayed-image-load"> </div>
  44. None
  45. 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
  46. 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;    } }
  47. css keeping it maintainable #logo  {    background:  url('logo.png')  no-­‐repeat;

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

  49. css keeping it maintainable @if $tablet or $compact {  

     #logo  {        @include  hidpi(logo);    } } git.io/hidpi
  50. LAZY Load The illusion of speed

  51. ADAPT interface

  52. 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
  53. TesAng

  54. Testing Quality Assurance Manual  tesTng  -­‐  20  devices Automated  tesTng

     -­‐  selenium  remote Sandbox  tesTng  -­‐  proxy  local  gem Remote  Debugging
  55. None
  56. None
  57. None
  58. ProtecAng  the  servers

  59. We Cache nearly everything

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

  61. varnish context aware Some  personalisaTons Country  of  user What  device

     they  are  on
  62. varnish hit / miss ratios oh shit!

  63. 100m 80m 60m 40m 20m 0m Jan 2011AD Apr 2011AD

    CDN FTW! lose context
  64. questions? @jcleveley