Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Guardian Responsive Design, SmashingConf 2013

Andy Hume
December 29, 2013
440

Guardian Responsive Design, SmashingConf 2013

Andy Hume

December 29, 2013
Tweet

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/[email protected]/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/[email protected]/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