Guardian Responsive Design, SmashingConf 2013

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