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. Building theguardian.com @patrickhamann - Smashing Conf - December 2014

  2. None
  3. next.theguardian.com

  4. None
  5. 115million !

  6. " # $ 7000

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

  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.
  10. Build modular systems

  11. None
  12. You think you’re redesigning the website, but actually you’re redesigning

    the news room. — Nick Haley, Director of UX, The Guardian
  13. Section A B C D E A B C Article

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

    D
  15. Organisations which design systems… are constrained to produce designs which

    are copies of the communication structures of these organisations. — M. Conway
  16. Sections News Sport Comment is free Tech Business

  17. Sections News Sport Comment is free Tech Business Blended Headlines

    Highlights Popular In depth People
  18. 1 Item

  19. 1 2 3 Slice

  20. 1 2 3 4 5 6 7 Container

  21. None
  22. None
  23. None
  24. None
  25. item-three-q item-q item-q item-q item-q item-q btn

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

    / 24px 14px / 18px 18px / 24px 18px / 24px 18px / 24px 14px / 18px 12px / 16px 12px / 16px
  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
  28. None
  29. None
  30. None
  31. http://github.com/guardian/guss-typography

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

  33. item-quater

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

  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.
  36. Design for access first

  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
  38. Credit: BBC Responsive News – Tom Maslen | http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

  39. None
  40. User Content API Popular Comments Article DB DB

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

  42. User Content API Popular Comments Article DB DB

  43. Final progressively enhanced page Initial page payload

  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
  45. None
  46. None
  47. <div></div> (75%) <img /> (90%) <img /> (90%) <div></div> (75%)

  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.
  49. Embrace unpredictability

  50. None
  51. Progressive enhancement is about resilience as much as it is

    about inclusiveness. 
 @bradwright — Government Digital Service
  52. Source: Google - Pagespeed Insights

  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
  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
  55. Popular content ✘ Sharing ✘ Comments ✘ Related content ✘

    Commercial components ✘ Article ✔
  56. WTF%$?!

  57. None
  58. 0.9 1.0 1.1 1.2 0.9 1.0 1.1 1.2

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

    in localStorage? localStorage space? Request with AJAX cache in localStorage inject into <head>
  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
  61. https://github.com/addyosmani/critical http://ngxpagespeed.com/ Penthouse https://github.com/pocketjoso/penthouse

  62. Story of my life

  63. What does the future hold?

  64. http/2

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

    HTML & CSS  " HTTP/2 Server push
  66. service worker ServiceWorker

  67. ServiceWorker  " &

  68. ServiceWorker  " & &

  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.
  70. Measure everything

  71. If it moves, graph it!
 — Laurie Denness, Etsy

  72. assets radiator

  73. window.performance.timing

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

  75. speedcurve

  76. None
  77. None
  78. What does the future hold?

  79. Resource Timing

  80. Beacon API

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

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

    the team.

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


  85. Deliver core content first,
 then progressively enhance the extras.


  86. Set a performance budget.
 Measure, optimise & repeat!


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

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