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

The history of Notre Dames two responsive (RWD) homepages, how we got to where we are, and some yelling about building responsive sites responsibly.

For more info about the conference, context to the slides and to watch a recording, visit http://bit.ly/heweb12-wg

Transcript

1. Rebuilding a university homepage to be "responsive". Twice. In less than a year. Erik Runyon | @erunyon | #heweb12 | #UAD11
2. who am i? Erik Runyon Manager of Interactive Development University Communications: Web University of Notre Dame
3. i’m from
4. i work at
5. we’re all #highered
6. What We’ll Cover I. Quick Overview of RWD II. Our Responsive Path III. 2011 Redesign IV. 2012 Redesign V. Responsible Responsive
7. I. Quick Overview of RWD
8. Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/
9. http://www.abookapart.com/products/responsive-web-design
10. What is RWD? Fluid Grids Flexible Images (media) Media Queries
12. Why RWD (and mobile) Matter
13. 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 41.88%
14. Talks at #heweb12 that mention RWD in the description 10
15. II. Our Responsive Path
16. 2008 Basic mobile and Webkit (iPhone and later Android) support added
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); }
18. Winter 2009 m.nd.edu released
19. Spring 2011 First “Adaptive” design released magazine.nd.edu
20. <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) {}
21. III. 2011 Redesign
23. June 2011 Redesign Goals •Unify the interface •Replace Flash carousel with feature story image •Mobile friendly (Adaptive design)
25. /************************************************************************** @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) {}
26. Summer 2011 Adaptive, NO WAIT... RESPONSIVE!!!
27. wait what?
28. Winter 2011 New department
29. New Boss New Website
30. IV. 2012 Redesign
31. “It’s not Notre Dame enough”
32. “It’s not Notre Dame enough” Make Lou cry
33. Design • How will elements be presented on small screens? • How will elements be presented on giant screens? • How will design decisions impact performance? Development • Build mobile first • Keep mobile experience fast • Maintain content parity
34. Mobile First What does that even mean?
35. Mobile first is NOT hiding content
36. “The absence of support for @media queries is in fact the first @media query” @bryanrieger slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
37. mobile first @mq 1. Global 2. Screen 3. @media queries as needed 4. Hi-res/retina specific 5. Print (yes, print)
38. progressive/on-request loading
39. One during load, one after everything else is done downloading
40. Long homepage is long
41. 3 iPhone screens tall and 12% the size
43. April 2012 Mobile first redesign http://weedygarden.net/2012/05/a-case-for-ress/
45. context can dictate content
46. RESS (responsive design + server-side components) lukew.com/ff/entry.asp?1392
47. RESS Tools http://www.flickr.com/photos/dipster1/1403240351/
48. 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)
49. UA-Parser github.com/tobie/ua-parser
51. <?php require("UAParser.php"); $result = UA::parse(); /* * Some other generic boolean options */ print $result->isMobile; // return true if the browser met criteria of a mobile browser based on the user agent information print $result->isMobileDevice; // return true if the device met criteria of a mobile device based on the user agent information print $result->isTablet; // return true if the device was a tablet according to the user agent information print $result->isSpider; // return true if the device was a spider according to the user agent information print $result->isComputer; // return true if the device was a computer according to the user agent information print $result->isUIWebview; // return true if the user agent was from a uiwebview in iOS ?> UA-Parser
52. V. Responsible Responsive
53. we have a problem
54. 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
55. http://www.flickr.com/photos/specialkrb/4045683750/ dial-up 56Kbps edge 384Kbps 3g 1.2Mbps
59. Erik’s personal Bermuda Triangle of AT&T suckage
60. http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “Within the last eight years, the size of the average web page has more than septupled, and the number of external objects has more than tripled. While broadband users have experienced somewhat faster response times, dial-up users have been left behind.” - websiteoptimization.com (May 31, 2011) 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)
61. “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/
62. http://bit.ly/highered-rwd
63. averages for #highered RWD sites 34 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests: 55 size: 1.4MB Sites used to generate these stats: http://bit.ly/highered-rwd
64. #headdesk
65. averages for #highered RWD sites 34 sites sampled with iPhone UA and narrow screen (to simulate mobile) > 1MB = 15 > 2MB = 4 Sites used to generate these stats: http://bit.ly/highered-rwd
66. stand-outs * University of California, San Diego ucsd.edu West Virginia University wvu.edu 31 requests | 439kb 26 requests | 361kb http://notredame.photoshelter.com/gallery-image/2012-Graduate-School-Ceremony/G0000QHnZV6vbKHg/I0000S5ossz793xo * Not including ND.edu in a veiled attempt at being humble
67. RWD is Not Mobile Friendly
68. Blame the implementation, not the technique - Tim Kadlec http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
69. Same content(ish) Different experience http://weedygarden.net/2012/05/a-case-for-ress/
70. What We’re Doing Wrong
72. Images larger than they should be
73. Bloated Carousel Plugin
74. RWD is Not Mobile Friendly
75. RWD is Not Mobile Friendly but the web is
76. RWD is Not Mobile Friendly but the web is and RWD CAN be
77. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
78. http://www.alistapart.com/articles/dao/
79. 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
80. 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
81. Summary There’s no single right way to do RWD RWD is simply Progressive Enhancement 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
82. thank you
83. erik runyon @erunyon weedygarden.net speakerdeck.com/u/erunyon questions?