Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design

2b3837af1d68d0b71639e693c780386f?s=47 Tom Maslen
September 25, 2012

Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design

An in-depth presentation about the reasons for moving a global news website to a responsive codebase with examples of the development concepts that were followed.

2b3837af1d68d0b71639e693c780386f?s=128

Tom Maslen

September 25, 2012
Tweet

Transcript

  1. 5.

    JS & CSS 362 IMAGES 492 HTML 35 153 HTTP

    REQUESTS 889kb DOWNLOADED
  2. 6.

    1997 SOLUTION: 94KB DOWNLOAD < 10 HTTP REQUESTS 2012 PROBLEM:

    SLOW INTERNET CONNECTION PROBLEM: MANY BROWSERS TO SUPPORT SOLUTION: 889KB DOWNLOAD 153 HTTP REQUESTS
  3. 7.

    Chrome Safari Opera IE9 IE10 IE8 IE7 IE6 Firefox CAPABILITIES

    LEGACY MODERN W3C STANDARDS COMPLIANT LESS BUGGY FASTER RENDERING ENGINES HTML5 & CSS3 TODAY WE HAVE TO SUPPORT MANY BROWSERS
  4. 8.

    MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 FIREFOX OPERA

    IE9 SAFARI IE8 CHROME GOOD GUESTS BAD GUESTS
  5. 9.

    MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 FIREFOX OPERA

    IE9 SAFARI IE8 JQUERY MASK CHROME JQUERY MASK WE MAKE THEM BEHAVE USING MANY PLUGINS, E.G. JQUERY
  6. 14.
  7. 24.

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

    OTHER ISSUES IN 2012: AVG TRAFFIC: 20M USERS PER DAY 80M USERS IN ONE DAY
  8. 27.

    1997 SOLUTION: 94KB DOWNLOAD < 10 HTTP REQUESTS 2012 PROBLEM:

    SLOW INTERNET CONNECTION PROBLEM: MANY BROWSERS TO SUPPORT SOLUTION: 889KB DOWNLOAD 153 HTTP REQUESTS NOT ACTUALLY TRUE:
  9. 28.

    IMPOSSIBLE SITUATION MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES

    VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC
  10. 39.

    CORE EXPERIENCE All browsers Simple layout XHTML + CSS2-ish Fast

    Modern browsers only Complex layout HTML5, CSS3 & JS Functional JAVASCRIPT EXPERIENCE PROGRESSIVE ENHANCEMENT
  11. 40.

    if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage'

    in window && 'addEventListener' in window WE CHECK FOR THESE CAPABILITIES TO DETERMINE IF BROWSER IS WORTH GIVING JAVASCRIPT TO
  12. 41.

    if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage'

    in window && 'addEventListener' in window WE GAVE IT A NAME:
  13. 42.

    MAKING WEBPAGES IS LIKE HAVING A PARTY JS EXPERIENCE CHROME

    IE9 SAFARI OPERA FIREFOX IE7 IE8 EVERYONE IS INVITED...
  14. 43.

    MAKING WEBPAGES IS LIKE HAVING A PARTY JS EXPERIENCE CHROME

    IE9 SAFARI OPERA FIREFOX IE7 IE8 BUT ONLY NICE GUESTS CAN TALK TO NATALIE
  15. 48.

    Doesn’t cut the mustard Cuts the mustard IE6, IE7, IE8

    IE9, IE10 Firefox 3.5 and up Opera 10.5 and up Chrome 4 and up Safari 4 and up BBOS4, BBOS5 Opera Mini Mobile IE9 and below BBOS 6 and up Mobile Firefox Opera Mobile Mobile Safari Mobile IE9.5 Android 2.1 and up
  16. 50.

    QUESTION: HOW DO YOU GIVE THE SAME CONTENT TO DEVICES

    WITH MASSIVELY DIFFERENT CAPABILITIES? ANSWER: YOU DON’T
  17. 53.

    JAVASCRIPT EXPERIENCE ENTER ZIP CODE OR (IF SUPPORT) USE GEOLOCATION

    WEATHER LINK REPLACED WITH WEATHER WIDGET BY JAVASCRIPT
  18. 54.
  19. 60.

    IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY BUT GIVE

    THEM TOO MUCH AND IT GETS OUT OF HAND...
  20. 62.

    DO NOT TRUST WEB BROWSERS IE6, 7, 8 & 9

    ONLY LOADS THE FIRST 31 CSS FILES IN THE PAGE. 2.3MB PAGE SIZE LIMIT BBOS iOS 3 SAFARI 26KB LIMIT ON FILES IN CACHE
  21. 65.

    CORE EXPERIENCE CORE EXPERIENCE REQUESTS 8 DOWNLOAD 67KB JS EXPERIENCE

    JS EXPERIENCE REQUESTS 18 DOWNLOAD 124KB IMAGES NOT INCLUDED
  22. 67.

    1 <html> 2 <head> 3 <link href=”styles.css” /> 4 <script

    src=”script1.js”></script> 5 <script src=”script2.js”></script> 6 </head> 7 <!-- CONTENT --> 8 </html> DO NOT ADD JS FILES DIRECTLY INTO THE HEAD PRO TIP: html styles.css script1.js script2.js SECONDS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 DOM READY SCRIPTS RUN NOTE: LATENCY NOT SHOWN IN EXAMPLES
  23. 68.

    SECONDS 0 1 2 3 4 5 6 7 8

    9 10 11 12 13 14 15 16 17 18 19 20 21 ADDING FILES AT BOTTOM OF BODY IS BETTER html 1 <html> 2 <head> 3 <link href=”styles.css” /> 4 </head> 5 <body> 6 <!-- CONTENT --> 7 <script src=”script1.js”></script> 8 <script src=”script2.js”></script> 9 </body> 10 </html> styles.css DOM READY TO USE script1.js script2.js SCRIPTS RUN
  24. 69.

    USE AN AMD LIBRARY TO ASYNCHRONOUSLY LOAD YOUR JS FILES

    PRO TIP: 1 <html> 2 <head> 3 <link href=”styles.css” /> 4 <script> 5 if(cutsTheMustard()) { 6 var s = document.createElement(‘script’); 7 s.src = ‘curl.js’; 8 s.onload = function() { 9 require(‘script1.js’); 10 require(‘script2.js’); 11 }; 12 document.head.insertBefore(s, document.head.childNodes[0]); 13 } 14 </script> 15 </head> 16 <!-- CONTENT --> 17 </html>
  25. 70.

    DOWNLOAD INCLUDES IN PARALLEL html curl.js SECONDS 0 1 2

    3 4 5 6 7 8 9 10 11 12 13 14 15 style.css DOM READY TO USE script1.js script2.js SCRIPTS READY TO RUN
  26. 71.

    LOAD YOUR AMD LIBRARY ASYNCHRONOUSLY TOO! PRO TIP: 1 <html>

    2 <head> 3 <link href=”styles.css” /> 4 <script> 5 if(cutsTheMustard()) { 6 var s = document.createElement(‘script’); 7 s.src = ‘curl.js’; 8 s.onload = function() { 9 require(‘script1.js’); 10 require(‘script2.js’); 11 }; 12 s.async = true; 13 document.head.insertBefore(s, document.head.childNodes[0]); 14 } 15 </script> 16 </head> 17 <!-- CONTENT --> 18 </html>
  27. 72.

    DOWNLOAD INCLUDES IN PARALLEL SECONDS 0 1 2 3 4

    5 6 7 8 9 10 11 12 13 14 15 html curl.js style.css DOM READY TO USE script1.js script2.js SCRIPTS RUN
  28. 75.

    DO NOT DOWNLOAD AN IMAGE THEN REPLACE IT WITH ANOTHER

    ONE PRO TIP: INCREASES RENDERING TIME WASTES BANDWIDTH WASTES USER’S MONEY
  29. 76.

    <article> <div class=”article”> <a href=”story.html”> <div class=”delayed-image-load” data-src=”/images/204/picture.jpg” /> <span>Roth

    rebukes Wikipedia over edit</ span> </a> <p>Renowned author Philip Roth...</p> </div> </article> CORE EXPERIENCE
  30. 79.

    window.addEventListener('orientationchange', function() { news.pubsub.emit('imageEnhancer:resize'); }, false);  FOR ORIENTATION CHANGES,

    USE RESIZE EVENT INSTEAD OF ORIENTATION EVENT PRO TIP: window.addEventListener('resize', function() { news.pubsub.emit('imageEnhancer:resize'); }, false); 
  31. 80.

    TASK DESKTOP #rwd DOM Selection jQuery 30KB Micro JS lib

    “Qwery-mobile” 4KB Events jQuery 30KB Native JS 0KB Animations jQuery 30KB Native CSS Transitions 0KB ALL REQUESTS GZIPPED & MINIFIED
  32. 82.

    USE FADE IN/OUT EFFECT INSTEAD OF GROW UP/DOWN EFFECT PRO

    TIP: BATCH PROCESS ELEMENT INSERTIONS PRO TIP:
  33. 84.

    MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 MOBILE WEB

    BROWSERS IE8 MOBILE IE IE9 SAFARI OPERA FIREFOX CHROME
  34. 89.

    USE CSS MEDIA QUERIES TO DEFINE YOUR INTERACTION BEHAVIOURS... WIDE

    1056px + COMPACT 320px - 640px TABLET 641px - 1055px
  35. 90.

    IMAGE 50% TEXT 50% COLUMN 100% ... THEN SCALE YOUR

    INTERFACE TO FIT INDIVIDUAL FORM FACTORS TABLET 641px - 1055px
  36. 91.

    ABC HOWEVER... TEXT IN HTML DOES NOT SCALE SET TO

    50% OF BODY WITH 20px FONT-SIZE, THIS TEXT WILL BE 10px HIGH 10px HIGH
  37. 93.

    10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

    @media (max-width: 912px) { html { font-size: 11px; } } @media (max-width: 836px) { html { font-size: 10px; } } @media (max-width: 760px) { html { font-size: 9px; } } USE MEDIA QUERIES TO SCALE ROOT HTML FONT-SIZE FOR EACH INTERACTION BEHAVIOUR @media (min-width: 641px) and (max-width: 1055px) { html { font-size: 12px; } }
  38. 95.

    ELEMENTS OF #rwd: PROGRESSIVE ENHANCEMENT TAKE PERFORMANCE SERIOUSLY FLUID LAYOUTS

    DEVELOPMENT CONCEPTS: CUTTING THE MUSTARD AJAX CONTENT IN TO ENHANCE PAGE MAKE THE PAGE USABLE WITHIN 10 SECONDS AJAX CONTENT IN TO ENHANCE PAGE ONLY DOWNLOAD WHAT YOU ARE GOING TO USE AVOID DOM REDRAWS AS MUCH AS POSSIBLE DESIGN FOR INTERACTION BEHAVIOURS, NOT DEVICES
  39. 97.

    "Good mobile user experience requires a different design than what's

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN
  40. 99.

    "Good mobile user experience requires a different design than what's

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN INCONVENIENT TRUTH: GREAT USABILITY ADVICE
  41. 100.

    "Good mobile user experience requires a different design than what's

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN INCONVENIENT TRUTH: BAD DESIGN ADVICE
  42. 101.

    “Good mobile user experience requires a different design than what's

    needed to satisfy desktop users.” WE AGREE:
  43. 102.

    MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD

    SPEEDS HUGE RANDOM SPIKES OF TRAFFIC IMPOSSIBLE SITUATION
  44. 103.

    MOBILE FIRST WEBPAGE JAVASCRIPT APPLICATION TAKE PERFORMANCE SERIOUSLY AJAX SECONDARY

    CONTENT MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC THIS IS RESPONSIVE WEB DESIGN IMPOSSIBLE SITUATION FLUID LAYOUTS
  45. 106.

    BBC NEWS TEAM Kate Milner @kmilnr John Cleveley @jcleveley Julian

    Kirby David Blooman @dblooman Adrian Hall @ade_hall Dan Scotton @danscotton Kaelig @kaelig John Horth @orfy Matt Chadburn @commuterjoy Mark Hurrell @markhurrell Andrew Vos @AndrewVos Tom Maslen @tmaslen http://mobiletestingfordummies.tumblr.com/ http://blog.responsivenews.co.uk/