Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
PRO

May 20, 2013
Tweet

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%
  9. None
  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

  14. None
  15. None
  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); }
  18. None
  19. None
  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

  24. None
  25. None
  26. None
  27. 36 KB 2.2 MB (1.7 MB Flash)

  28. None
  29. June 2011 Redesign Goals •Replace Flash carousel with feature story

    image •Train internal audience to go elsewhere •Mobile friendly (Adaptive design)
  30. None
  31. None
  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

  38. None
  39. None
  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/

  53. None
  54. None
  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

  62. None
  63. None
  64. None
  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?