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.

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

Erik Runyon

October 09, 2012
Tweet

More Decks by Erik Runyon

Other Decks in Technology

Transcript

  1. Rebuilding a university
    homepage to be "responsive".
    Twice.
    In less than a year.
    Erik Runyon | @erunyon | #heweb12 | #UAD11

    View full-size slide

  2. who am i?
    Erik Runyon
    Manager of Interactive Development
    University Communications: Web
    University of Notre Dame

    View full-size slide

  3. we’re all #highered

    View full-size slide

  4. What We’ll Cover
    I. Quick Overview of RWD
    II. Our Responsive Path
    III. 2011 Redesign
    IV. 2012 Redesign
    V. Responsible Responsive

    View full-size slide

  5. I. Quick Overview of RWD

    View full-size slide

  6. Responsive Web Design
    http://www.alistapart.com/articles/responsive-web-design/

    View full-size slide

  7. http://www.abookapart.com/products/responsive-web-design

    View full-size slide

  8. What is RWD?
    Fluid Grids
    Flexible Images (media)
    Media Queries

    View full-size slide

  9. Why RWD (and mobile)
    Matter

    View full-size slide

  10. 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%

    View full-size slide

  11. Talks at #heweb12 that
    mention RWD in the description
    10

    View full-size slide

  12. II. Our Responsive Path

    View full-size slide

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

    View full-size slide

  14. // 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 full-size slide

  15. Winter 2009
    m.nd.edu released

    View full-size slide

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

    View full-size slide


  17. /**************************************************************************
    @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 full-size slide

  18. III. 2011 Redesign

    View full-size slide

  19. June 2011 Redesign Goals
    •Unify the interface
    •Replace Flash carousel with feature story image
    •Mobile friendly (Adaptive design)

    View full-size slide

  20. /**************************************************************************
    @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 full-size slide

  21. Summer 2011
    Adaptive, NO WAIT... RESPONSIVE!!!

    View full-size slide

  22. Winter 2011
    New department

    View full-size slide

  23. New Boss
    New Website

    View full-size slide

  24. IV. 2012 Redesign

    View full-size slide

  25. “It’s not Notre Dame enough”

    View full-size slide

  26. “It’s not Notre Dame enough”
    Make Lou cry

    View full-size slide

  27. 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

    View full-size slide

  28. Mobile First
    What does that even mean?

    View full-size slide

  29. Mobile first is
    NOT
    hiding content

    View full-size slide

  30. “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 full-size slide

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

    View full-size slide

  32. progressive/on-request loading

    View full-size slide

  33. One during load, one after
    everything else is done
    downloading

    View full-size slide

  34. Long homepage
    is long

    View full-size slide

  35. 3 iPhone screens tall
    and 12% the size

    View full-size slide

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

    View full-size slide

  37. context can dictate content

    View full-size slide

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

    View full-size slide

  39. RESS Tools
    http://www.flickr.com/photos/dipster1/1403240351/

    View full-size slide

  40. 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 full-size slide

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

    View full-size slide

  42. 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

    View full-size slide

  43. V. Responsible Responsive

    View full-size slide

  44. we have a problem

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  48. 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)

    View full-size slide

  49. “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 full-size slide

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

    View full-size slide

  51. 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

    View full-size slide

  52. 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

    View full-size slide

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

    View full-size slide

  54. RWD is Not Mobile Friendly

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. What We’re Doing Wrong

    View full-size slide

  58. Images larger than they should be

    View full-size slide

  59. Bloated Carousel Plugin

    View full-size slide

  60. RWD is Not Mobile Friendly

    View full-size slide

  61. RWD is Not Mobile Friendly
    but the web is

    View full-size slide

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

    View full-size slide

  63. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

    View full-size slide

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

    View full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

  67. 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

    View full-size slide

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

    View full-size slide