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.

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

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon

May 20, 2013
Tweet

Transcript

  1. 1.

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

    than a year. Erik Runyon | @erunyon | HighEdWeb MI, May 2013
  2. 6.

    What We’ll Cover I. Why RWD Matters II. Our Path

    to Responsive III. 2011 Redesign IV. 2012 Redesign V. Responsible Responsive
  3. 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%
  4. 9.
  5. 14.
  6. 15.
  7. 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); }
  8. 18.
  9. 19.
  10. 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) {}
  11. 24.
  12. 25.
  13. 26.
  14. 28.
  15. 29.

    June 2011 Redesign Goals •Replace Flash carousel with feature story

    image •Train internal audience to go elsewhere •Mobile friendly (Adaptive design)
  16. 30.
  17. 31.
  18. 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) {}
  19. 34.
  20. 38.
  21. 39.
  22. 40.

    Goals • Design from mobile to HD • Build mobile

    first using RWD • Keep mobile experience fast • Maintain content parity • Finish in eight weeks
  23. 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
  24. 43.

    mobile first @mq 1. Global 2. Screen 3. @media queries

    as needed 4. Hi-res/retina specific 5. Print (yes, print)
  25. 53.
  26. 54.
  27. 62.
  28. 63.
  29. 64.
  30. 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)
  31. 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/
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 83.