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. 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