$30 off During Our Annual Pro Sale. View Details »

Building theguardian.com

Building theguardian.com

Over the last two years Patrick has been developing the Guardian’s new responsive platform. This talk will be a deep-dive case study into the issues they’ve had to overcome whilst building a website that is accessed by over 7000 different devices from 105 million unique users.

As more and more organizations are adopting Responsive design in their approach to delivering cross-platform Web products. We will learn how – by prioritising the delivery of content – the Guardian can now break the news to their users within 1000’s of milliseconds. What were the mistakes they made along the way? How do you change culture within a 193 year old media organisation? What tools they use to monitor their systems and measure success over time? And discuss what future browser technologies they will use to stay ahead-of-the-game.

This talk was originally presented at Smashing Conference Whistler 2014.

Patrick Hamann

December 11, 2014
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. Building theguardian.com
    @patrickhamann - Smashing Conf - December 2014

    View Slide

  2. View Slide

  3. next.theguardian.com

    View Slide

  4. View Slide

  5. 115million
    !

    View Slide

  6. "
    #
    $ 7000

    View Slide

  7. View Slide

  8. Setting a budget
    https://flic.kr/p/eHsirY

    View Slide

  9. 1. Build modular and decoupled systems, not sites.
    2. Design features for access first, agnostic of device.
    3. Embrace the unpredictable nature of the web.
    4. Every feature must be measurable.

    View Slide

  10. Build modular systems

    View Slide

  11. View Slide

  12. You think you’re redesigning the website,
    but actually you’re redesigning the news room.
    — Nick Haley, Director of UX, The Guardian

    View Slide

  13. Section
    A
    B
    C
    D
    E
    A
    B
    C
    Article

    View Slide

  14. Section
    A
    B
    C
    D
    E
    A
    B
    C
    Article
    D

    View Slide

  15. Organisations which design systems… are
    constrained to produce designs which are
    copies of the communication structures of
    these organisations.
    — M. Conway

    View Slide

  16. Sections
    News
    Sport
    Comment is free
    Tech
    Business

    View Slide

  17. Sections
    News
    Sport
    Comment is free
    Tech
    Business
    Blended
    Headlines
    Highlights
    Popular
    In depth
    People

    View Slide

  18. 1
    Item

    View Slide

  19. 1 2 3
    Slice

    View Slide

  20. 1 2 3
    4 5 6 7
    Container

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. item-three-q item-q
    item-q
    item-q
    item-q
    item-q
    btn

    View Slide

  26. 24px / 28px
    14px / 18px
    20px / 24px-q
    18px / 24px
    14px / 18px
    18px / 24px
    18px / 24px 18px / 24px
    14px / 18px
    12px / 16px
    12px / 16px

    View Slide

  27. 24px / 28px
    14px / 18px
    20px / 24px-q
    18px / 24px
    14px / 18px
    18px / 24px
    18px / 24px 18px / 24px
    14px / 18px
    12px / 16px
    12px / 16px
    header 4
    headline 1
    header 2
    header 3
    headline 1
    header 3
    header 3 header 3
    headline 1
    data 3
    data 3

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. http://github.com/guardian/guss-typography

    View Slide

  32. http://github.com/sass-mq

    View Slide

  33. item-quater

    View Slide

  34. item-quater
    fs-header(2)
    fs-data(3)
    gs-span(3)
    gs-height(6)
    colour($c-feature-main)

    View Slide

  35. 1. Build modular and decoupled systems, not sites.
    2. Design features for access first, agnostic of device.
    3. Embrace the unpredictable nature of the web.
    4. Every feature must be measurable.

    View Slide

  36. Design for access first

    View Slide

  37. We don't have any non-JavaScript users
    No, all your users are non-JS while they're
    downloading your JS.

    Jake Archibald — Google

    View Slide

  38. Credit: BBC Responsive News – Tom Maslen | http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

    View Slide

  39. View Slide

  40. User
    Content API
    Popular Comments
    Article
    DB
    DB

    View Slide

  41. https://flic.kr/p/77ZtUH

    View Slide

  42. User
    Content API
    Popular Comments
    Article
    DB
    DB

    View Slide

  43. Final progressively
    enhanced page
    Initial page payload

    View Slide

  44. `
    Interface Informative Decorative
    Vector (SVG)

    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Credit: Paul Robert Lloyd – This is for Everyone https://speakerdeck.com/paulrobertlloyd/this-is-for-everyone-ldnia-number-4?slide=38

    View Slide

  45. View Slide

  46. View Slide


  47. (75%)
    (90%)
    (90%)

    (75%)

    View Slide

  48. 1. Build modular and decoupled systems, not sites.
    2. Design features for access first, agnostic of device.
    3. Embrace the unpredictable nature of the web.
    4. Every feature must be measurable.

    View Slide

  49. Embrace unpredictability

    View Slide

  50. View Slide

  51. Progressive enhancement is about
    resilience as much as it is about
    inclusiveness. 

    @bradwright — Government Digital Service

    View Slide

  52. Source: Google - Pagespeed Insights

    View Slide

  53. Request page
    Network
    Render
    GET html
    Build DOM
    response
    Build CSSOM Render page
    GET css
    GET js
    response
    response
    idle idle
    Async
    Render blocking
    Run JS
    Source: Google - Web Fundamentals

    View Slide

  54. Request page
    Network
    Render
    GET html
    Build DOM
    response
    Build CSSOM Render page
    GET css
    GET js
    response
    response
    idle idle
    Async
    Render blocking
    Run JS

    View Slide

  55. Popular content ✘
    Sharing

    Comments ✘
    Related content

    Commercial components ✘
    Article

    View Slide

  56. WTF%$?!

    View Slide

  57. View Slide

  58. 0.9 1.0 1.1 1.2
    0.9 1.0 1.1 1.2

    View Slide

  59. Is modern browser?
    Requet with
    Request with
    CSS in localStorage? localStorage space?
    Request with AJAX
    cache in
    localStorage
    inject into

    View Slide

  60. Load time First byte Start render Visually complete
    3.366s 0.204s 1.113s 3.700s
    Before
    After
    Load time First byte Start render Visually complete
    3.017s 0.262s 0.759s 2.00s

    View Slide

  61. https://github.com/addyosmani/critical
    http://ngxpagespeed.com/
    Penthouse
    https://github.com/pocketjoso/penthouse

    View Slide

  62. Story of my life

    View Slide

  63. What does the future hold?

    View Slide

  64. http/2

    View Slide


  65. &
    HTML
    "
    &
    CSS

    "
    HTTP/1.1
    '
    HTML & CSS

    "
    HTTP/2 Server push

    View Slide

  66. service worker
    ServiceWorker

    View Slide

  67. ServiceWorker

    " &

    View Slide

  68. ServiceWorker

    " &
    &

    View Slide

  69. 1. Build modular and decoupled systems, not sites.
    2. Design features for access first, agnostic of device.
    3. Embrace the unpredictable nature of the web.
    4. Every feature must be measurable.

    View Slide

  70. Measure everything

    View Slide

  71. If it moves, graph it!

    — Laurie Denness, Etsy

    View Slide

  72. assets radiator

    View Slide

  73. window.performance.timing

    View Slide

  74. window.performance.mark('foo-bar')

    View Slide

  75. speedcurve

    View Slide

  76. View Slide

  77. View Slide

  78. What does the future hold?

    View Slide

  79. Resource Timing

    View Slide

  80. Beacon API

    View Slide

  81. 1. Build modular and decoupled systems, not sites.
    2. Design features for access first, agnostic of device.
    3. Embrace the unpredictable nature of the web.
    4. Every feature must be measurable.

    View Slide

  82. Lessons

    View Slide

  83. Design is not a service.
    Designers have to sit in the team.


    View Slide

  84. The network is intrinsically unreliable,
    defend against it.


    View Slide

  85. Deliver core content first,

    then progressively enhance the extras.


    View Slide

  86. Set a performance budget.

    Measure, optimise & repeat!


    View Slide

  87. Thank you.
    Questions?
    @patrickhamann - Smashing Conf - December 2014
    github.com/guardian/frontend
    (
    bit.ly/smashing-guardian
    )

    View Slide