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/

Erik Runyon
PRO

May 20, 2013
Tweet

More Decks by Erik Runyon

Other Decks in Education

Transcript

  1. Rebuilding a university
    homepage to be "responsive".
    Twice.
    In less than a year.
    Erik Runyon | @erunyon | HighEdWeb MI, May 2013

    View Slide

  2. who am i?
    Erik Runyon
    Director of Web Communications
    University of Notre Dame

    View Slide

  3. i’m from

    View Slide

  4. i work at

    View Slide

  5. we’re all #highered

    View Slide

  6. What We’ll Cover
    I. Why RWD Matters
    II. Our Path to Responsive
    III. 2011 Redesign
    IV. 2012 Redesign
    V. Responsible Responsive

    View Slide

  7. I. Why RWD (and mobile)
    Matters

    View Slide

  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%

    View Slide

  9. View Slide

  10. January 7, 2013
    BCS Bowl Game

    View Slide

  11. January 7, 2013
    BCS Bowl Game

    View Slide

  12. So yeah…
    …mobile matters

    View Slide

  13. II. Our Path to Responsive

    View Slide

  14. View Slide

  15. View Slide

  16. 2008
    Basic mobile and Webkit support added
    (iPhone and later Android)

    View Slide

  17. // IN THE HEAD OF THE DOCUMENT


    // 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);
    }

    View Slide

  18. View Slide

  19. View Slide

  20. Winter 2009
    m.nd.edu released

    View Slide

  21. Spring 2011
    First “Adaptive” design released
    magazine.nd.edu

    View Slide


  22. /**************************************************************************
    @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) {}

    View Slide

  23. III. 2011 Redesign

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. 36 KB
    2.2 MB (1.7 MB Flash)

    View Slide

  28. View Slide

  29. June 2011 Redesign Goals
    •Replace Flash carousel with feature story image
    •Train internal audience to go elsewhere
    •Mobile friendly (Adaptive design)

    View Slide

  30. View Slide

  31. View Slide

  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) {}

    View Slide

  33. Summer 2011
    Our first responsive ND.edu

    View Slide

  34. done

    View Slide

  35. Winter 2011
    New department

    View Slide

  36. New Boss
    New Website

    View Slide

  37. IV. 2012 Redesign

    View Slide

  38. View Slide

  39. View Slide

  40. Goals
    • Design from mobile to HD
    • Build mobile first using RWD
    • Keep mobile experience fast
    • Maintain content parity
    • Finish in eight weeks

    View Slide

  41. Mobile First
    What does that even mean?

    View Slide

  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

    View Slide

  43. mobile first @mq
    1. Global
    2. Screen
    3. @media queries as needed
    4. Hi-res/retina specific
    5. Print (yes, print)

    View Slide

  44. hiding content
    NOT
    a mobile strategy

    View Slide

  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/

    View Slide

  46. RESS
    (responsive design + server-side components)
    lukew.com/ff/entry.asp?1392

    View Slide

  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)

    View Slide

  48. UA-Parser
    github.com/tobie/ua-parser

    View Slide

  49. Long homepage
    is long

    View Slide

  50. Long homepage
    is long

    View Slide

  51. 2.something iPhone screens tall
    and 12% the size

    View Slide

  52. http://weedygarden.net/2012/05/a-case-for-ress/

    View Slide

  53. View Slide

  54. View Slide

  55. context can dictate content

    View Slide

  56. on-request loading

    View Slide

  57. Six location features
    1.5 MB
    Five News features
    289 KB

    View Slide

  58. V. Responsible Responsive

    View Slide

  59. we have a problem

    View Slide

  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

    View Slide

  61. http://www.flickr.com/photos/specialkrb/4045683750/
    dial-up 56Kbps
    edge 384Kbps
    3g 1.2Mbps

    View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. Erik’s personal Bermuda
    Triangle of AT&T suckage

    View Slide

  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)

    View Slide

  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/

    View Slide

  68. http://bit.ly/highered-rwd

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  72. Dedicated Mobile vs. RWD
    45 schools
    Dedicated mobile 184KB
    RWD 1.37 MB

    View Slide

  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

    View Slide

  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

    View Slide

  75. RWD is Not Mobile Friendly

    View Slide

  76. Blame the implementation,
    not the technique
    - Tim Kadlec
    http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/

    View Slide

  77. Same content(ish)
    Different experience
    http://weedygarden.net/2012/05/a-case-for-ress/

    View Slide

  78. RWD is Not Mobile Friendly
    but the web is
    and RWD CAN be

    View Slide

  79. http://www.alistapart.com/articles/dao/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  83. thank you

    View Slide

  84. erik runyon
    @erunyon
    weedygarden.net
    speakerdeck.com/erunyon
    questions?

    View Slide