Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Tom Maslen

September 25, 2012
Tweet

More Decks by Tom Maslen

Other Decks in Technology

Transcript

  1. PART 1
    1997: A TERRIBLE YEAR FOR HUMANITY

    View full-size slide

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

    View full-size slide

  3. THIS IS VERY DIFFERENT TO NOW

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

  8. 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 full-size slide

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

    View full-size slide

  10. DESKTOP WEBSITE

    View full-size slide

  11. MOBILE WEBSITE

    View full-size slide

  12. ANDROID PHONE APP

    View full-size slide

  13. ANDROID TABLET
    APP

    View full-size slide

  14. BBC NEWS ALSO HAS FOREIGN
    LANGUAGE SITES: RUSSIAN

    View full-size slide

  15. LEFT TO RIGHT LANGUAGE
    SUPPORT: ARABIC

    View full-size slide

  16. MANY, MANY SITES

    View full-size slide

  17. EVEN KLINGON (JOKE)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. PART 2
    SOLVING YOUR GIANT
    MONKEY PROBLEM

    View full-size slide

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

    View full-size slide

  28. WHAT IS
    MOBILE?

    View full-size slide

  29. THIS IS MOBILE

    View full-size slide

  30. THIS IS MOBILE

    View full-size slide

  31. THIS IS NOT
    MOBILE!

    View full-size slide

  32. MOBILE IS THE
    JOURNEY

    View full-size slide

  33. 2012
    MOBILE &
    TABLET
    ONLY
    RESPONSIVE
    WEBSITE

    View full-size slide

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

    View full-size slide

  35. PROGRESSIVE
    ENHANCEMENT
    ELEMENTS OF #rwd

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 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 full-size slide

  41. Link to
    nav at
    bottom
    of page
    CORE EXPERIENCE

    View full-size slide

  42. JAVASCRIPT EXPERIENCE

    View full-size slide

  43. JAVASCRIPT EXPERIENCE

    View full-size slide

  44. CORE
    EXPERIENCE
    JAVASCRIPT
    EXPERIENCE
    DEVELOPMENT CONCEPT:

    View full-size slide

  45. 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 full-size slide

  46. #rwd REQUIREMENT:
    SUPPORT BROAD
    RANGE OF DEVICES

    View full-size slide

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

    View full-size slide

  48. DEVELOPMENT CONCEPT:
    AJAX CONTENT IN TO
    ENHANCE PAGE

    View full-size slide

  49. /news
    Link to
    weather
    site
    CORE EXPERIENCE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. JAVASCRIPT EXPERIENCE

    View full-size slide

  54. JAVASCRIPT EXPERIENCE

    View full-size slide

  55. TAKING
    PERFORMANCE
    SERIOUSLY
    ELEMENTS OF #rwd

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. 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 full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide




  73. data-src=”/images/204/picture.jpg” />
    Roth rebukes Wikipedia over edit
    span>

    Renowned author Philip Roth...


    CORE EXPERIENCE

    View full-size slide

  74. JAVASCRIPT EXPERIENCE

    View full-size slide

  75. JAVASCRIPT EXPERIENCE

    View full-size slide

  76. 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 full-size slide

  77. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  80. FLUID LAYOUTS
    ELEMENTS OF #rwd

    View full-size slide

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

    View full-size slide

  82. EVERY PHONE IS
    DIFFERENT

    View full-size slide

  83. iOS
    4x3 aspect ratio

    View full-size slide

  84. Android
    16x9 aspect ratio

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. 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 full-size slide

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

    View full-size slide

  90. 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 full-size slide

  91. EQUAL
    WHITE
    SPACE

    View full-size slide

  92. 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 full-size slide

  93. PART 3
    AN INCONVENIENT TRUTH

    View full-size slide

  94. "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 full-size slide

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

    View full-size slide

  96. "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 full-size 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
    INCONVENIENT TRUTH:
    BAD DESIGN
    ADVICE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  100. 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 full-size slide

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

    View full-size slide

  102. MOVE SWIFTLY

    View full-size slide

  103. 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 full-size slide