Guardian Responsive Design, SmashingConf 2013

Transcript

1. RESPONSIVE
   DESIGN
   @andyhume
   SmashingConf, Freiburg, 2013
   REAL LIFE
   Sunday, December 29, 13
   

   View Slide

2. Sunday, December 29, 13
   

   View Slide

3. Sunday, December 29, 13
   

   View Slide

4. Sunday, December 29, 13
   

   View Slide

5. 2001 2002 2004 2006 2008 2010 2012 2013
   424,132
   191,182
   Source: ABC
   Sunday, December 29, 13
   

   View Slide

6. 2001 2002 2004 2006 2008 2010 2012 2013
   424,132
   191,182
   Guardian print circulation
   Source: ABC
   Sunday, December 29, 13
   

   View Slide

7. 2001 2002 2004 2006 2008 2010 2012 2013
   3,451,746
   2,281,301
   424,132
   191,182
   UK print circulation
   Source: ABC
   Sunday, December 29, 13
   

   View Slide

8. 2001 2002 2004 2006 2008 2010 2012 2013
   Source: ABC NRS PADD
   Sunday, December 29, 13
   

   View Slide

9. 2001 2002 2004 2006 2008 2010 2012 2013
   Guardian mobile visitors
   Source: ABC NRS PADD
   Sunday, December 29, 13
   

   View Slide

10. New mobile site
    Project goals
    Sunday, December 29, 13
    

    View Slide

11. New mobile site
    New responsive client-side architecture
    Project goals
    Sunday, December 29, 13
    

    View Slide

12. New mobile site
    New responsive client-side architecture
    New server-side app architecture
    Project goals
    Sunday, December 29, 13
    

    View Slide

13. New mobile site
    New responsive client-side architecture
    New server-side app architecture
    New responsive site at www.theguardian.com
    Project goals
    Sunday, December 29, 13
    

    View Slide

14. New mobile site
    New responsive client-side architecture
    New server-side app architecture
    New responsive site at www.theguardian.com
    Project goals
    Sunday, December 29, 13
    

    View Slide

15. The architecture
    CONTENT
    Sunday, December 29, 13
    

    View Slide

16. The architecture
    CONTENT
    CMS
    TOOLS
    EDITORIAL
    TOOLS
    WRITE API
    Sunday, December 29, 13
    

    View Slide

17. The architecture
    CONTENT
    CMS
    TOOLS
    EDITORIAL
    TOOLS
    WRITE API
    RESPONSIVE
    WEBSITE
    IPAD APP
    IPHONE
    ANDROID
    WINDOWS PHONE
    READ API
    Sunday, December 29, 13
    

    View Slide

18. The architecture
    CONTENT
    CMS
    TOOLS
    EDITORIAL
    TOOLS
    WRITE API
    RESPONSIVE
    WEBSITE
    IPAD APP
    IPHONE
    ANDROID
    WINDOWS PHONE
    READ API
    Sunday, December 29, 13
    

    View Slide

19. Performance
    Mobile first
    Resilience
    Sunday, December 29, 13
    

    View Slide

20. Mobile first
    Sunday, December 29, 13
    

    View Slide

21. m.guardian
    Silo for responsive work
    But...
    Redirect performance
    SEO complexity
    Sunday, December 29, 13
    

    View Slide

22. Mobile first design
    Simplify
    Prioritise
    Sunday, December 29, 13
    

    View Slide

23. Mobile first design
    Simplify
    Prioritise
    Stealth redesign
    Sunday, December 29, 13
    

    View Slide

24. Mobile first development
    Core HTML content first
    Core styles first
    Sunday, December 29, 13
    

    View Slide

25. @if(isModernBrowser) {
    
    }
    CUTTING THE MUSTARD
    http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/
    Browser support
    Sunday, December 29, 13
    

    View Slide

26. @if(isModernBrowser) {
    
    }
    CUTTING THE MUSTARD
    http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/
    Cutting the mustard
    var guardian = {
    isModernBrowser: (
    ‘querySelector’ in document &&
    ‘addEventListener’ in window &&
    ‘localStorage’ in window
    )
    };
    Sunday, December 29, 13
    

    View Slide

27. HTML 4 HTML 5
    Sunday, December 29, 13
    

    View Slide

28. HTML 4 HTML 5
    Sunday, December 29, 13
    

    View Slide

29. http://www.flickr.com/photos/freefoto/2231356418/
    Performance
    Sunday, December 29, 13
    

    View Slide

30. Real time performance
    Sunday, December 29, 13
    

    View Slide

31. Real time performance
    Sunday, December 29, 13
    

    View Slide

32. Real time performance
    Sunday, December 29, 13
    

    View Slide

33. Real time performance
    Sunday, December 29, 13
    

    View Slide

34. Real time performance
    Sunday, December 29, 13
    

    View Slide

35. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, December 29, 13
    

    View Slide

36. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, December 29, 13
    

    View Slide

37. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, December 29, 13
    

    View Slide

38. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, December 29, 13
    

    View Slide

39. Content Enhancement Leftovers
    Sunday, December 29, 13
    

    View Slide

40. Content Enhancement Leftovers
    Sunday, December 29, 13
    

    View Slide

41. Content Enhancement Leftovers
    Sunday, December 29, 13
    

    View Slide

42. Content Enhancement Leftovers
    DOMContentReady event
    Sunday, December 29, 13
    

    View Slide

43. Content Enhancement Leftovers
    DOMContentReady event Load event
    Sunday, December 29, 13
    

    View Slide

44. Content
    Sunday, December 29, 13
    

    View Slide

45. Sunday, December 29, 13
    

    View Slide

46. http://www.flickr.com/photos/spacemanbob/1084139169/
    Web fonts
    Sunday, December 29, 13
    

    View Slide

47. FONT LOADING
    Progressive enhancement
    Sunday, December 29, 13
    

    View Slide

48. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Sunday, December 29, 13
    

    View Slide

49. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Supports WOFF
    Sunday, December 29, 13
    

    View Slide

50. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Supports WOFF
    localStorage available
    Sunday, December 29, 13
    

    View Slide

51. PRE-RENDER
    CUT THE
    MUSTARD?
    NO FONTS SHOW FONTS
    NO
    NO
    SUPPORT WOFF?
    FONTS IN
    STORAGE?
    NO
    Sunday, December 29, 13
    

    View Slide

52. POST-RENDER
    STORAGE
    AVAILABLE?
    NO FONTS SHOW FONTS
    NO
    DOWNLOAD FONTS:
    BASE64 ENCODED
    IN JSON
    CACHE FONTS
    IN STORAGE
    Sunday, December 29, 13
    

    View Slide

53. Resilience
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Sunday, December 29, 13
    

    View Slide

54. Resilience
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Sunday, December 29, 13
    

    View Slide

55. Resilience
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Sunday, December 29, 13
    

    View Slide

56. http://www.flickr.com/photos/the_jorr/325224175/
    Unreliable
    Sunday, December 29, 13
    

    View Slide

57. http://www.flickr.com/photos/vpickering/6824364286/
    Resilient
    Sunday, December 29, 13
    

    View Slide

58. Progressive enhancement
    So, the conclusion is that
    this is the best way to
    deal with this. Yay us.
    Next, how do we do that.
    http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement
    Sunday, December 29, 13
    

    View Slide

59. Content Enhancement Leftovers
    Sunday, December 29, 13
    

    View Slide

60. Content Enhancement Leftovers
    Sunday, December 29, 13
    

    View Slide

61. http://www.webpagetest.org/result/130908_K2_796/7/details/
    Sunday, December 29, 13
    

    View Slide

62. http://www.webpagetest.org/result/130908_K2_796/
    Sunday, December 29, 13
    

    View Slide

63. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    Sunday, December 29, 13
    

    View Slide

64. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    iPhone 4, iOS 5.1
    Sunday, December 29, 13
    

    View Slide

65. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    3G (1.6Mps, 300ms RTT)
    iPhone 4, iOS 5.1
    Sunday, December 29, 13
    

    View Slide

66. Progressive enhancement
    So, the conclusion is that
    this is the best way to
    deal with this. Yay us.
    Next, how do we do that.
    http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement
    Sunday, December 29, 13
    

    View Slide

67. Thank-you!
    http://lanyrd.com/sccxwy
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Sunday, December 29, 13
    

    View Slide

68. These people actually built it...
    @grantklopper @patrickhamann
    Ordered by volume of commits on Github
    (because that’s how you measure developers).
    https://github.com/guardian/frontend
    @dtrainvsquincy @commuterjoy
    @mattandrews
    @kaelig
    @stephanfowler
    @gudaithi
    @kungpochicken
    @GidsG Kay Salami
    Sunday, December 29, 13
    

    View Slide