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

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

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon

October 09, 2012
Tweet

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

  11. None
  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

  22. None
  23. June 2011 Redesign Goals •Unify the interface •Replace Flash carousel

    with feature story image •Mobile friendly (Adaptive design)
  24. None
  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

  42. None
  43. April 2012 Mobile first redesign http://weedygarden.net/2012/05/a-case-for-ress/

  44. None
  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

  50. None
  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

  56. None
  57. None
  58. None
  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

  71. None
  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?