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.

Transcript

1. TOM MASLEN
   

   View Slide

2. PART 1
   1997: A TERRIBLE YEAR FOR HUMANITY
   

   View Slide

3. HTML 48KB
   9 IMAGES 46KB
   HOWEVER: BBC NEWS WAS RELEASED IN 1997
   

   View Slide

4. THIS IS VERY DIFFERENT TO NOW
   

   View Slide

5. JS & CSS
   362
   IMAGES
   492
   HTML
   35
   153 HTTP REQUESTS
   889kb DOWNLOADED
   

   View Slide

6. 1997
   SOLUTION:
   94KB DOWNLOAD
   < 10 HTTP REQUESTS
   2012
   PROBLEM:
   SLOW INTERNET
   CONNECTION
   PROBLEM:
   MANY BROWSERS TO
   SUPPORT
   SOLUTION:
   889KB DOWNLOAD
   153 HTTP REQUESTS
   

   View Slide

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
   

   View Slide

8. MAKING WEBPAGES IS LIKE HAVING A PARTY
   IE7
   FIREFOX
   OPERA
   IE9
   SAFARI
   IE8
   CHROME
   GOOD GUESTS
   BAD GUESTS
   

   View Slide

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
   

   View Slide

10. WE SUPPORT MANY DEVICES
    USING MANY PRODUCTS
    OTHER ISSUES IN 2012:
    

    View Slide

11. DESKTOP WEBSITE
    

    View Slide

12. MOBILE WEBSITE
    

    View Slide

13. IPHONE APP
    

    View Slide

14. IPAD APP
    

    View Slide

15. ANDROID PHONE APP
    

    View Slide

16. ANDROID TABLET
    APP
    

    View Slide

17. BBC NEWS ALSO HAS FOREIGN
    LANGUAGE SITES: RUSSIAN
    

    View Slide

18. LEFT TO RIGHT LANGUAGE
    SUPPORT: ARABIC
    

    View Slide

19. MANY, MANY SITES
    

    View Slide

20. EVEN KLINGON (JOKE)
    

    View Slide

21. BROADBAND
    GPRS EDGE 3G 4G
    DEVICE EXPLOSION
    OTHER ISSUES IN 2012:
    DIVERSE CONNECTION SPEEDS
    

    View Slide

22. SCREEN SIZE
    CAPABILITY
    MOBILE
    DESKTOP
    SCREEN SIZE EQUALS
    CAPABILITY
    THE OLD MODEL:
    

    View Slide

23. SCREEN SIZE
    CAPABILITY
    MOBILE
    DESKTOP
    BROKEN
    SCREEN SIZE EQUALS
    CAPABILITY
    THE OLD MODEL:
    

    View Slide

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
    

    View Slide

25. BBC NEWS MOVED TO
    C.D.N. DURING JAPANESE
    TSUNAMI
    

    View Slide

26. INTERNET PROVIDER
    ALL RESPONSES
    ARE THE SAME
    CACHED CDN
    THE C.D.N. PROBLEM
    

    View Slide

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:
    

    View Slide

28. IMPOSSIBLE SITUATION
    MANY BROWSERS
    TO SUPPORT
    UNLIMITED NUMBER OF DEVICES
    VARIABLE
    DOWNLOAD
    SPEEDS
    HUGE RANDOM
    SPIKES OF TRAFFIC
    

    View Slide

29. PART 2
    SOLVING YOUR GIANT
    MONKEY PROBLEM
    

    View Slide

30. SCREEN SIZE
    CAPABILITY
    MOBILE
    DESKTOP
    SCREEN SIZE EQUALS
    CAPABILITY
    BROKEN
    

    View Slide

31. WHAT IS
    MOBILE?
    

    View Slide

32. THIS IS MOBILE
    

    View Slide

33. THIS IS MOBILE
    

    View Slide

34. THIS IS NOT
    MOBILE!
    

    View Slide

35. MOBILE IS THE
    JOURNEY
    

    View Slide

36. 2012
    MOBILE &
    TABLET
    ONLY
    RESPONSIVE
    WEBSITE
    

    View Slide

37. PROGRESSIVE
    ENHANCEMENT
    FLUID LAYOUTS
    #rwd
    TAKING
    PERFORMANCE
    SERIOUSLY
    +
    +
    =
    

    View Slide

38. PROGRESSIVE
    ENHANCEMENT
    ELEMENTS OF #rwd
    

    View Slide

39. CORE
    EXPERIENCE
    All browsers
    Simple layout
    XHTML + CSS2-ish
    Fast
    Modern browsers only
    Complex layout
    HTML5, CSS3 & JS
    Functional
    JAVASCRIPT
    EXPERIENCE
    PROGRESSIVE ENHANCEMENT
    

    View Slide

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
    

    View Slide

41. if (
    ) {
    JAVASCRIPT
    'querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window
    WE GAVE IT A NAME:
    

    View Slide

42. MAKING WEBPAGES IS LIKE HAVING A PARTY
    JS EXPERIENCE
    CHROME
    IE9 SAFARI
    OPERA
    FIREFOX
    IE7
    IE8
    EVERYONE IS INVITED...
    

    View Slide

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
    

    View Slide

44. Link to
    nav at
    bottom
    of page
    CORE EXPERIENCE
    

    View Slide

45. JAVASCRIPT EXPERIENCE
    

    View Slide

46. JAVASCRIPT EXPERIENCE
    

    View Slide

47. CORE
    EXPERIENCE
    JAVASCRIPT
    EXPERIENCE
    DEVELOPMENT CONCEPT:
    

    View Slide

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
    

    View Slide

49. #rwd REQUIREMENT:
    SUPPORT BROAD
    RANGE OF DEVICES
    

    View Slide

50. QUESTION:
    HOW DO YOU GIVE THE SAME CONTENT TO
    DEVICES WITH MASSIVELY DIFFERENT CAPABILITIES?
    ANSWER:
    YOU DON’T
    

    View Slide

51. DEVELOPMENT CONCEPT:
    AJAX CONTENT IN TO
    ENHANCE PAGE
    

    View Slide

52. /news
    Link to
    weather
    site
    CORE EXPERIENCE
    

    View Slide

53. JAVASCRIPT EXPERIENCE
    ENTER ZIP CODE OR (IF
    SUPPORT) USE GEOLOCATION
    WEATHER LINK REPLACED WITH
    WEATHER WIDGET BY JAVASCRIPT
    

    View Slide

54. JAVASCRIPT EXPERIENCE
    WEATHER LINK REPLACED WITH
    WEATHER WIDGET BY JAVASCRIPT
    PERSONALISED DATA PERSISTS
    WHEN YOU COME BACK
    

    View Slide

55. /news
    Link to
    /news/popular/read
    /news/popular/read
    CORE EXPERIENCE
    

    View Slide

56. JAVASCRIPT EXPERIENCE
    

    View Slide

57. JAVASCRIPT EXPERIENCE
    

    View Slide

58. TAKING
    PERFORMANCE
    SERIOUSLY
    ELEMENTS OF #rwd
    

    View Slide

59. IE8
    MAKING WEBPAGES IS LIKE HAVING A PARTY
    WE WANT GUESTS TO
    HAVE A GOOD TIME
    

    View Slide

60. IE8
    MAKING WEBPAGES IS LIKE HAVING A PARTY
    BUT GIVE THEM TOO MUCH
    AND IT GETS OUT OF HAND...
    

    View Slide

61. IE8
    MAKING WEBPAGES IS LIKE HAVING A PARTY
    YOU NEVER KNOW
    WHAT MIGHT HAPPEN
    

    View Slide

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
    

    View Slide

63. DEVELOPMENT CONCEPT:
    MAKE THE PAGE USABLE
    WITHIN 10 SECONDS
    

    View Slide

64. 10
    SECONDS
    ON GPRS
    SOMEWHERE BETWEEN
    65KB
    AND
    100KB
    ==
    

    View Slide

65. CORE EXPERIENCE
    CORE EXPERIENCE
    REQUESTS 8
    DOWNLOAD 67KB
    JS EXPERIENCE
    JS EXPERIENCE
    REQUESTS 18
    DOWNLOAD 124KB
    IMAGES NOT INCLUDED
    

    View Slide

66. DEVELOPMENT CONCEPT:
    DO NOT BLOCK THE
    RENDERING OF THE PAGE
    

    View Slide

67. 1
    2
    3
    4
    5
    6
    7
    8
    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
    

    View Slide

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
    2
    3
    4
    5
    6
    7
    8
    9
    10
    styles.css
    DOM READY
    TO USE
    script1.js
    script2.js
    SCRIPTS RUN
    

    View Slide

69. USE AN AMD LIBRARY TO
    ASYNCHRONOUSLY LOAD YOUR JS FILES
    PRO TIP:
    1
    2
    3
    4 <br/>5 if(cutsTheMustard()) {<br/>6 var s = document.createElement(‘script’);<br/>7 s.src = ‘curl.js’;<br/>8 s.onload = function() {<br/>9 require(‘script1.js’);<br/>10 require(‘script2.js’);<br/>11 };<br/>12 document.head.insertBefore(s, document.head.childNodes[0]);<br/>13 }<br/>14
    15
    16
    17
    

    View Slide

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
    

    View Slide

71. LOAD YOUR AMD LIBRARY ASYNCHRONOUSLY
    TOO!
    PRO TIP:
    1
    2
    3
    4 <br/>5 if(cutsTheMustard()) {<br/>6 var s = document.createElement(‘script’);<br/>7 s.src = ‘curl.js’;<br/>8 s.onload = function() {<br/>9 require(‘script1.js’);<br/>10 require(‘script2.js’);<br/>11 };<br/>12 s.async = true;<br/>13 document.head.insertBefore(s, document.head.childNodes[0]);<br/>14 }<br/>15
    16
    17
    18
    

    View Slide

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
    

    View Slide

73. DEVELOPMENT CONCEPT:
    ONLY DOWNLOAD WHAT
    YOU ARE GOING TO USE
    

    View Slide

74. DO NOT DOWNLOAD AN IMAGE...
    PRO TIP:
    

    View Slide

75. DO NOT DOWNLOAD AN IMAGE THEN
    REPLACE IT WITH ANOTHER ONE
    PRO TIP:
    INCREASES RENDERING
    TIME
    WASTES BANDWIDTH
    WASTES USER’S MONEY
    

    View Slide

76. 
    
    
    data-src=”/images/204/picture.jpg” />
    Roth rebukes Wikipedia over edit
    span>
    
    Renowned author Philip Roth...
    
    
    CORE EXPERIENCE
    

    View Slide

77. JAVASCRIPT EXPERIENCE
    

    View Slide

78. JAVASCRIPT EXPERIENCE
    

    View Slide

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);
    
    

    View Slide

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
    

    View Slide

81. DEVELOPMENT CONCEPT:
    AVOID DOM REDRAWS AS
    MUCH AS POSSIBLE
    

    View Slide

82. USE
    FADE IN/OUT EFFECT
    INSTEAD OF
    GROW UP/DOWN EFFECT
    PRO TIP:
    BATCH PROCESS
    ELEMENT INSERTIONS
    PRO TIP:
    

    View Slide

83. FLUID LAYOUTS
    ELEMENTS OF #rwd
    

    View Slide

84. MAKING WEBPAGES IS LIKE HAVING A PARTY
    IE7
    MOBILE WEB BROWSERS
    IE8
    MOBILE IE
    IE9
    SAFARI
    OPERA
    FIREFOX
    CHROME
    

    View Slide

85. EVERY PHONE IS
    DIFFERENT
    

    View Slide

86. iOS
    4x3 aspect ratio
    

    View Slide

87. Android
    16x9 aspect ratio
    

    View Slide

88. SIXTH DEVELOPMENT CONCEPT:
    DESIGN FOR INTERACTION
    BEHAVIOURS, NOT DEVICES
    

    View Slide

89. USE CSS MEDIA QUERIES TO
    DEFINE YOUR
    INTERACTION BEHAVIOURS...
    WIDE
    1056px +
    COMPACT
    320px - 640px
    TABLET
    641px - 1055px
    

    View Slide

90. IMAGE 50% TEXT 50%
    COLUMN 100%
    ... THEN SCALE YOUR INTERFACE TO
    FIT INDIVIDUAL FORM FACTORS
    TABLET
    641px - 1055px
    

    View Slide

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
    

    View Slide

92. WHITE SPACE ISSUES APPEAR WITH
    OUR SCALING INTERFACE
    WHITE
    SPACE
    

    View Slide

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; }
    }
    

    View Slide

94. EQUAL
    WHITE
    SPACE
    

    View Slide

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
    

    View Slide

96. PART 3
    AN INCONVENIENT TRUTH
    

    View Slide

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
    

    View Slide

98. JACKOB NIELSEN IS NOT A
    GREAT DESIGNER, BUT...
    

    View Slide

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
    

    View Slide

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
     

     View Slide

101. “Good mobile user experience requires a
     different design than what's needed to
     satisfy desktop users.”
     WE AGREE:
     

     View Slide

102. MANY BROWSERS TO SUPPORT
     UNLIMITED NUMBER OF DEVICES
     VARIABLE DOWNLOAD SPEEDS
     HUGE RANDOM SPIKES OF TRAFFIC
     IMPOSSIBLE
     SITUATION
     

     View Slide

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
     

     View Slide

104. 320KB
     1092KB
     2008 2012
     AVERAGE TOTAL DOWNLOAD SIZES
     3306KB
     2016?
     WE CANNOT LET
     THIS HAPPEN
     

     View Slide

105. MOVE SWIFTLY
     

     View Slide

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/
     

     View Slide