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.

276c149f793de9af4e98991ed52ff874?s=128

Patrick Hamann

December 11, 2014
Tweet

Transcript

  1. 2.
  2. 4.
  3. 7.
  4. 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.
  5. 11.
  6. 12.

    You think you’re redesigning the website, but actually you’re redesigning

    the news room. — Nick Haley, Director of UX, The Guardian
  7. 15.

    Organisations which design systems… are constrained to produce designs which

    are copies of the communication structures of these organisations. — M. Conway
  8. 18.
  9. 21.
  10. 22.
  11. 23.
  12. 24.
  13. 26.

    24px / 28px 14px / 18px 20px / 24px-q 18px

    / 24px 14px / 18px 18px / 24px 18px / 24px 18px / 24px 14px / 18px 12px / 16px 12px / 16px
  14. 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
  15. 28.
  16. 29.
  17. 30.
  18. 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.
  19. 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
  20. 39.
  21. 44.

    ` Interface Informative Decorative Vector (SVG)
 Icon font Bitmap (JPG,

    PNG) Bitmap (JPG, PNG) CSS image replacement <img src="" alt=""/> <div data-imgsrc=""/>
 CSS background Remove? Credit: Paul Robert Lloyd – This is for Everyone https://speakerdeck.com/paulrobertlloyd/this-is-for-everyone-ldnia-number-4?slide=38
  22. 45.
  23. 46.
  24. 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.
  25. 50.
  26. 51.

    Progressive enhancement is about resilience as much as it is

    about inclusiveness. 
 @bradwright — Government Digital Service
  27. 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
  28. 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
  29. 55.
  30. 56.
  31. 57.
  32. 59.

    Is modern browser? Requet with <link> Request with <link> CSS

    in localStorage? localStorage space? Request with AJAX cache in localStorage inject into <head>
  33. 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
  34. 64.
  35. 65.

     & HTML " & CSS  " HTTP/1.1 '

    HTML & CSS  " HTTP/2 Server push
  36. 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.
  37. 76.
  38. 77.
  39. 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.
  40. 82.
  41. 87.

    Thank you. Questions? @patrickhamann - Smashing Conf - December 2014

    github.com/guardian/frontend ( bit.ly/smashing-guardian )