Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Scale and adapt : A story of how we built Resp...

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. Screen Size Capability Smart phones desktop small big tablets Net

    books TVs e-readers feature phones it’s complicated .. Connection speed? Resolution? input method?
  2. Even  Google  [is]  not  rich  enough   to  support  all

     of  the  different   mobile  pla:orms... “ ” Vic  Gundotra,  VP  of  engineering  at  Google
  3. 287  requests                

             transferred   2.5MB
  4. Responsive’s little dirty secrets Shrinking  large  images  client  side Media

     queries  download  all  css Download  content  only  to  hide Download  enormous  JS  libraries  
  5. client side detection server side client server WURFL User  agent

      sniffing client server XHR Feature detecTon
  6. 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-
  7. 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 ~
  8. good browser? it cuts the mustardtm if( 'querySelector' in document

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

     libraries Most  browsers  will  sTll  pass Reduces  dev  Tme  on  new  features
  10. images Dynamic resizing <!-- Core image which will be replaced

    --> <img src="http://domain.com/200/foo.jpg" class="image-replace">
  11. images Dynamic resizing <!-- Placeholder image for variable size -->

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

       @include  hidpi  {        background-­‐image:  url('logo_x2.png');        background-­‐size:  250px  188px;    } }
  15. css keeping it maintainable @if $tablet or $compact {  

     #logo  {        @include  hidpi(logo);    } } git.io/hidpi
  16. 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
  17. Testing Quality Assurance Manual  tesTng  -­‐  20  devices Automated  tesTng

     -­‐  selenium  remote Sandbox  tesTng  -­‐  proxy  local  gem Remote  Debugging