Rebuilding a university homepage to be "responsive". Twice. In less than a year.

HighEdWeb MI regional conference: http://mi.highedweb.org/

Transcript

1. Rebuilding a university homepage to be "responsive". Twice. In less than a year. Erik Runyon | @erunyon | HighEdWeb MI, May 2013
2. who am i? Erik Runyon Director of Web Communications University of Notre Dame
3. i’m from
4. i work at
5. we’re all #highered
6. What We’ll Cover I. Why RWD Matters II. Our Path to Responsive III. 2011 Redesign IV. 2012 Redesign V. Responsible Responsive
7. I. Why RWD (and mobile) Matters
8. 2010 ND.edu 2.6% Admissions 3.6% Game Day 7.18% 2011 ND.edu 4.37% Admissions 8.76% Game Day 26.09% 2012 ND.edu 13.3% Admissions 17.7% Game Day 44.92%
10. January 7, 2013 BCS Bowl Game
11. January 7, 2013 BCS Bowl Game
12. So yeah… …mobile matters
13. II. Our Path to Responsive
16. 2008 Basic mobile and Webkit support added (iPhone and later Android)
17. // IN THE HEAD OF THE DOCUMENT <link href="webkit.css" media="only screen and (max-width: 480px)" rel="stylesheet" type="text/css" /> <link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" /> // IN THE JS (IMMEDIATELY FOLLOWING CSS) if( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/webOS/i))) { ! // REMOVES ALL STYLESHEETS ... ! for (var k=0;k < document.styleSheets.length; k++) { ! ! if (document.styleSheets[k].href != null && document.styleSheets[k].href.lastIndexOf("webkit") == -1) { ! ! ! document.styleSheets[k].disabled = true; ! ! } ! } ! window.scrollTo(0,1); }
20. Winter 2009 m.nd.edu released
21. Spring 2011 First “Adaptive” design released magazine.nd.edu
22. <meta name="viewport" content="width=device-width; initial-scale=1.0;"> /************************************************************************** @media queries **************************************************************************/ /* iPad landscape ----------- */ @media only screen and (min-width:801px) and (max-width:1100px) {} /* iPad portrait ----------- */ @media only screen and (max-width:768px) {} /* Mid-Size Tablets (Galaxy Tab) (portrait) ----------- */ @media only screen and (max-width:591px) and (orientation:portrait) {} /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) {} /* Smartphones (portrait) ----------- */ @media only screen and (min-width:320px) and (max-width:380px) {}
23. III. 2011 Redesign
27. 36 KB 2.2 MB (1.7 MB Flash)
29. June 2011 Redesign Goals •Replace Flash carousel with feature story image •Train internal audience to go elsewhere •Mobile friendly (Adaptive design)
32. /************************************************************************** @media queries **************************************************************************/ /* Tablets landscape */ @media only screen and (max-width:1100px) {} /* Tablets portrait */ @media only screen and (max-width:800px) {} /* Mid-Size Tablets */ @media only screen and (max-width:600px) {} /* Smartphones (landscape) */ @media only screen and (max-width:480px) {} /* Smartphones (portrait) */ @media only screen and (max-width:320px) {}
33. Summer 2011 Our first responsive ND.edu
34. done
35. Winter 2011 New department
36. New Boss New Website
37. IV. 2012 Redesign
40. Goals • Design from mobile to HD • Build mobile first using RWD • Keep mobile experience fast • Maintain content parity • Finish in eight weeks
41. Mobile First What does that even mean?
42. “The absence of support for @media queries is in fact the first @media query” @bryanrieger slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
43. mobile first @mq 1. Global 2. Screen 3. @media queries as needed 4. Hi-res/retina specific 5. Print (yes, print)
44. hiding content NOT a mobile strategy
45. hidden content still gets downloaded http://bradfrostweb.com/blog/mobile/bdconf-guy-podjarny-presents- performance-implication-of-mobile-design/ http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
46. RESS (responsive design + server-side components) lukew.com/ff/entry.asp?1392
47. http://www.flickr.com/photos/dipster1/1403240351/ WURFL: wurfl.sourceforge.net (free for non-commercial) 51degrees.mobi: 51degrees.mobi (free “Lite” version) Device Atlas: deviceatlas.com (pay service) OpenDDR: openddr.org (free)
48. UA-Parser github.com/tobie/ua-parser
49. Long homepage is long
50. Long homepage is long
51. 2.something iPhone screens tall and 12% the size
52. http://weedygarden.net/2012/05/a-case-for-ress/
55. context can dictate content
56. on-request loading
57. Six location features 1.5 MB Five News features 289 KB
58. V. Responsible Responsive
59. we have a problem
60. news.cnet.com/2100-1038_3-5172107.html nytimes.com/2005/06/21/technology/21iht-broad.html flickr.com/photos/foolswisdom/108953458/lightbox/ Broadband began to overtake dial-up in 2004* * In major U.S. Cities
61. http://www.flickr.com/photos/specialkrb/4045683750/ dial-up 56Kbps edge 384Kbps 3g 1.2Mbps
65. Erik’s personal Bermuda Triangle of AT&T suckage
66. http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “The size of the average web page of the top 1000 websites has more than tripled since 2008. In the past five years from 2008 to late 2012 the average web page grew from 312K to 1114K, over 3.5 times larger” - websiteoptimization.com (Nov 11, 2012) In the past 18 months, the average web page has grown by 50% — from 702 KB in November 2010 to 1042 KB on May 1, 2012. At this rate, the average page will hit 2 MB by 2015. - webperformancetoday.com (May 24, 2012)
67. “Out of the 106 sites I reviewed, 64 of them had mobile sites that were less than ten percent smaller than the desktop version. Twenty-six of the sites had mobile web sites that were larger than the desktop equivalent.” @grigs http://www.uie.com/articles/mobile_first_rwd/
68. http://bit.ly/highered-rwd
69. averages for #highered RWD sites 106 sites sampled at full size requests: 59 size: 1.6 MB Sites used to generate these stats: http://bit.ly/highered-rwd
70. averages for #highered RWD sites 106 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests: 55 size: 1.48 MB Sites used to generate these stats: http://bit.ly/highered-rwd
71. averages for #highered RWD sites > 1 MB = 61 > 2 MB = 24 > 3 MB = 12 > 4 MB = 4 Sites used to generate these stats: http://bit.ly/highered-rwd
72. Dedicated Mobile vs. RWD 45 schools Dedicated mobile 184KB RWD 1.37 MB
73. averages for #highered RWD sites 106 sites sampled with iPhone UA and narrow screen (to simulate mobile) js: 12 files/216 KB css: 6 files/99 KB images: 30 files/1 MB (72% of page size) Sites used to generate these stats: http://bit.ly/highered-rwd
74. stand-outs * West Chester University wcupa.edu West Virginia University wvu.edu 21 requests | 340 KB 26 requests | 361 KB http://notredame.photoshelter.com/gallery-image/2012-Graduate-School-Ceremony/G0000QHnZV6vbKHg/I0000S5ossz793xo * Not including ND.edu in a veiled attempt at being humble
75. RWD is Not Mobile Friendly
76. Blame the implementation, not the technique - Tim Kadlec http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
77. Same content(ish) Different experience http://weedygarden.net/2012/05/a-case-for-ress/
78. RWD is Not Mobile Friendly but the web is and RWD CAN be
79. http://www.alistapart.com/articles/dao/
80. http://www.alistapart.com/articles/dao/ “...make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages.” John Allsopp @johnallsopp
81. http://www.alistapart.com/articles/dao/ “The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.” John Allsopp @johnallsopp
82. Summary RWD is simply Progressive Enhancement Building responsively requires planning We broke the web, and now we’re trying to “fix” it But it’s not easy, and it’s going to take time to get it right
83. thank you
84. erik runyon @erunyon weedygarden.net speakerdeck.com/erunyon questions?