Guardian Responsive Design, SmashingConf 2013

Ded01cdab114abe4ec13511e4c25b9bb?s=47 Andy Hume
December 29, 2013
360

Guardian Responsive Design, SmashingConf 2013

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

December 29, 2013
Tweet

Transcript

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

    29, 13
  2. Sunday, December 29, 13

  3. Sunday, December 29, 13

  4. Sunday, December 29, 13

  5. 2001 2002 2004 2006 2008 2010 2012 2013 424,132 191,182

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

    Guardian print circulation Source: ABC Sunday, December 29, 13
  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
  8. 2001 2002 2004 2006 2008 2010 2012 2013 Source: ABC

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

    visitors Source: ABC NRS PADD Sunday, December 29, 13
  10. New mobile site Project goals Sunday, December 29, 13

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

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

    architecture Project goals Sunday, December 29, 13
  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
  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
  15. The architecture CONTENT Sunday, December 29, 13

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

    December 29, 13
  17. The architecture CONTENT CMS TOOLS EDITORIAL TOOLS WRITE API RESPONSIVE

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

    WEBSITE IPAD APP IPHONE ANDROID WINDOWS PHONE READ API Sunday, December 29, 13
  19. Performance Mobile first Resilience Sunday, December 29, 13

  20. Mobile first Sunday, December 29, 13

  21. m.guardian Silo for responsive work But... Redirect performance SEO complexity

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

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

    13
  24. Mobile first development Core HTML content first Core styles first

    Sunday, December 29, 13
  25. @if(isModernBrowser) { <script src="app.js" async defer></script> } CUTTING THE MUSTARD

    http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ Browser support Sunday, December 29, 13
  26. @if(isModernBrowser) { <script src="app.js" async defer></script> } 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
  27. HTML 4 HTML 5 Sunday, December 29, 13

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

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

  30. Real time performance Sunday, December 29, 13

  31. Real time performance Sunday, December 29, 13

  32. Real time performance Sunday, December 29, 13

  33. Real time performance Sunday, December 29, 13

  34. Real time performance Sunday, December 29, 13

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

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

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

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

  39. Content Enhancement Leftovers Sunday, December 29, 13

  40. Content Enhancement Leftovers Sunday, December 29, 13

  41. Content Enhancement Leftovers Sunday, December 29, 13

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

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

    13
  44. Content Sunday, December 29, 13

  45. Sunday, December 29, 13

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

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

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

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

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

    available Sunday, December 29, 13
  51. PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO

    SUPPORT WOFF? FONTS IN STORAGE? NO Sunday, December 29, 13
  52. POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:

    BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Sunday, December 29, 13
  53. Resilience http://www.flickr.com/photos/kayaker1204/4319542459/ Sunday, December 29, 13

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

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

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

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

  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
  59. Content Enhancement Leftovers Sunday, December 29, 13

  60. Content Enhancement Leftovers Sunday, December 29, 13

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

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

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

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

    Sunday, December 29, 13
  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
  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
  67. Thank-you! http://lanyrd.com/sccxwy @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike

    cc Sunday, December 29, 13
  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