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

Guardian Responsive Design, SmashingConf 2013

Andy Hume
December 29, 2013
580

Guardian Responsive Design, SmashingConf 2013

Andy Hume

December 29, 2013
Tweet

Transcript

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

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

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

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

    visitors Source: ABC NRS PADD Sunday, December 29, 13
  6. New mobile site New responsive client-side architecture New server-side app

    architecture Project goals Sunday, December 29, 13
  7. 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
  8. 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
  9. The architecture CONTENT CMS TOOLS EDITORIAL TOOLS WRITE API RESPONSIVE

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

    WEBSITE IPAD APP IPHONE ANDROID WINDOWS PHONE READ API Sunday, December 29, 13
  11. @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
  12. @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
  13. PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO

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

    BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Sunday, December 29, 13
  15. 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
  16. 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
  17. 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