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.

Transcript

1. Building theguardian.com @patrickhamann - Smashing Conf - December 2014
3. next.theguardian.com
5. 115million !
6. " # $ 7000
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
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
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
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
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
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
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%$?!
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
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 )