Responsive Web Design and its Impact on Higher Ed

Erik Runyon, Director of Web Communications, University of Notre Dame

Runyon oversees the development of university web properties and sets development standards for University Communications. He is a staunch advocate of accessibility, semantics, the mobile experience, and data portability.

Erik can be found talking Web at WeedyGarden.net and conveying ND.edu specific information on the ND.edu blog. He can be found on Twitter at @erunyon.

Transcript

1. RWD and its Impact on HigherEd Erik Runyon @erunyon UW System IMC Conference June 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
8. What We’ll Cover I. Why Mobile Matters II. What is RWD? III. From Mobile to Responsive IV. RWD in HigherEd
9. I. Why Mobile Matters
10. 2010 ND.edu 2.6% Admissions 3.6% Game Day 7.2% 2011 ND.edu 4.4% Admissions 8.8% Game Day 26.1% 2012 ND.edu 12.5% Admissions 24.1% Game Day 37.9%
15. January 7, 2013 BCS Bowl Game
16. January 7, 2013 BCS Bowl Game
17. So yeah… …mobile matters
18. II. What is RWD?
19. http://alistapart.com/article/responsive-web-design
20. Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design… Ethan Marcotte
21. Fluid Grids 960px 260px 700px 100% 27% 83%
22. http://ryanswarts.com/responsive/plain/
23. Flexible Images img {max-width:100%;}
24. 100% 27% 83% 100% 27% 83%
25. Media Queries @media screen, projection {} @media print {} @media only screen and (max-width:30em) {} @media only screen and (min-width:30em) {} @media only screen and (min-width:30em) and (max-width:47em) {} @media only screen and (min-width:48em) and (max-height:37em) {}
26. 100% 27% 83% 100% 100% 100%
27. III. From Mobile to Responsive a Notre Dame story
31. 36 KB 2.2 MB (1.7 MB Flash)
32. “I wanted to share my opinion of the new ND web site with you - in a word, it's awful. Quite frankly, I am unable to find anything about the site that is positive. It is not clear why the change was made but the individual that came up with the idea should be fired along with the individual(s) that approved the change. Contrary to the old site - I make every effort to avoid using the new site.”
35. 2008 Basic mobile and Webkit support added (iPhone and later Android)
36. // 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); }
39. Winter 2009 m.nd.edu released
40. Spring 2011 First “Adaptive” design released magazine.nd.edu
41. <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) {}
42. June 2011 Redesign Goals •Replace Flash carousel with feature story image •Train internal audience to go elsewhere •Mobile friendly (Adaptive design)
45. /************************************************************************** @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) {}
46. Summer 2011 Our first responsive ND.edu
47. done
48. or so we thought
49. Winter 2011 New department
50. New Boss New Website
51. “It’s not Notre Dame enough”
54. “It’s not Notre Dame enough” Make Lou cry
55. Goals • Design from mobile to HD • Build mobile first using RWD • Keep mobile experience fast • Maintain content parity • Finish in eight weeks
56. Mobile First What does that even mean?
57. “The absence of support for @media queries is in fact the first @media query” @bryanrieger slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
58. mobile first @mq 1. Global 2. Screen 3. @media queries as needed 4. Hi-res/retina specific 5. Print (yes, print)
59. hiding content is NOT a mobile strategy
60. 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/
61. RESS (responsive design + server-side components) lukew.com/ff/entry.asp?1392
62. RESS (responsive design + server-side components) lukew.com/ff/entry.asp?1392 
    
63. Wait, isn’t browser detection evil?
64. GIF
65. http://wtfmobileweb.com/
66. http://wtfmobileweb.com/
67. http://wtfmobileweb.com/
68. http://wtfmobileweb.com/
69. http://wtfmobileweb.com/
70. http://wtfmobileweb.com/
71. http://wtfmobileweb.com/
72. http://xkcd.com/1174/ If I click 'no', I've probably given up on everything, so don't bother taking me to the page I was trying to go to. Just drop me on the homepage. Thanks.
73. be nice
74. 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)
75. UA-Parser github.com/tobie/ua-parser
76. Mobile-Detect github.com/serbanghita/Mobile-Detect
77. Long homepage is long
78. Long homepage is long
79. 2.something iPhone screens tall and 12% the size
80. http://weedygarden.net/2012/05/a-case-for-ress/
84. context can dictate content
85. on-request loading
86. Six location features 1.5 MB Five News features 289 KB
87. IV. RWD in HigherEd
88. we have a problem
89. 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
90. http://www.flickr.com/photos/specialkrb/4045683750/ dial-up 56Kbps edge 384Kbps 3g 1.2Mbps
94. Erik’s personal Bermuda Triangle of AT&T suckage
95. 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)
96. “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/
97. http://bit.ly/highered-rwd
98. averages for #highered RWD sites 128 sites sampled at full size requests: 61 size: 1.7 MB Sites used to generate these stats: http://bit.ly/highered-rwd
99. averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests: 57 size: 1.6 MB Sites used to generate these stats: http://bit.ly/highered-rwd
100. averages for #highered RWD sites > 1 MB = 82 > 2 MB = 32 > 3 MB = 17 > 4 MB = 6 Sites used to generate these stats: http://bit.ly/highered-rwd
101. Dedicated Mobile vs. RWD 48 schools Dedicated mobile 180 KB RWD 1.4 MB
102. averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) js: 12 files/227 KB css: 7 files/99 KB images: 32 files/1 MB (73% of page size) Sites used to generate these stats: http://bit.ly/highered-rwd
105. 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
106. RWD is Not Mobile Friendly
107. Blame the implementation, not the technique - Tim Kadlec http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
108. Same content(ish) Different experience http://weedygarden.net/2012/05/a-case-for-ress/
109. RWD is Not Mobile Friendly but the web is and RWD CAN be
110. What if your prospective students only have a mobile phone and a lousy connection?
111. http://www.alistapart.com/articles/dao/
112. 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
113. 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
114. Summary Learn from the mistakes/successes of others 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
115. erik runyon @erunyon weedygarden.net speakerdeck.com/erunyon thank you