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.

Transcript

2. how we built the responsive site
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
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
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
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
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
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>
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
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