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
   

   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