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

Guardian Responsive Design, SmashingConf 2013

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Andy Hume Andy Hume
December 29, 2013
6
690

Guardian Responsive Design, SmashingConf 2013

Avatar for Andy Hume

Andy Hume

December 29, 2013
Tweet

More Decks by Andy Hume

See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
Avatar for Andy Hume andyhume
2
1.2k
Building for performance and resilience
Avatar for Andy Hume andyhume
5
1.2k
Architecting resilient front ends
Avatar for Andy Hume andyhume
3
900
Web Fonts as a Progressive Enhancement, Ampersand 2013
Avatar for Andy Hume andyhume
2
810
Anatomy of a responsive page load, WhiskyWeb 2013
Avatar for Andy Hume andyhume
10
1.9k
Breaking News & Breaking Software, SyncConf 2013
Avatar for Andy Hume andyhume
0
320
Anatomy of a responsive page load, Responsive Day Out 2013
Avatar for Andy Hume andyhume
23
3.3k
Responsive Guardian
Avatar for Andy Hume andyhume
21
1.2k
CSS for grown ups: maturing best practises, SXSW 2012
Avatar for Andy Hume andyhume
101
47k

Featured

See All Featured
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
780
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
330
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
190
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
72
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
230
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k

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