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
PRO

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 Slide

  2. who am i?
    Erik Runyon
    Manager of Interactive Development
    University Communications: Web
    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. Quick Overview of RWD
    II. Our Responsive Path
    III. 2011 Redesign
    IV. 2012 Redesign
    V. Responsible Responsive

    View Slide

  7. I. Quick Overview of RWD

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

  12. Why RWD (and mobile)
    Matter

    View Slide

  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%

    View Slide

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

    View Slide

  15. II. Our Responsive Path

    View Slide

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

    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. Winter 2009
    m.nd.edu released

    View Slide

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

    View Slide


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

  21. III. 2011 Redesign

    View Slide

  22. View Slide

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

    View Slide

  24. View Slide

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

    View Slide

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

    View Slide

  27. wait
    what?

    View Slide

  28. Winter 2011
    New department

    View Slide

  29. New Boss
    New Website

    View Slide

  30. IV. 2012 Redesign

    View Slide

  31. “It’s not Notre Dame enough”

    View Slide

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

    View Slide

  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

    View Slide

  34. Mobile First
    What does that even mean?

    View Slide

  35. Mobile first is
    NOT
    hiding content

    View Slide

  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

    View Slide

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

    View Slide

  38. progressive/on-request loading

    View Slide

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

    View Slide

  40. Long homepage
    is long

    View Slide

  41. 3 iPhone screens tall
    and 12% the size

    View Slide

  42. View Slide

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

    View Slide

  44. View Slide

  45. context can dictate content

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

  50. View Slide

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

  52. V. Responsible Responsive

    View Slide

  53. we have a problem

    View Slide

  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

    View Slide

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

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

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

    View Slide

  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)

    View Slide

  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/

    View Slide

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

    View Slide

  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

    View Slide

  64. #headdesk

    View Slide

  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

    View Slide

  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

    View Slide

  67. RWD is Not Mobile Friendly

    View Slide

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

    View Slide

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

    View Slide

  70. What We’re Doing Wrong

    View Slide

  71. View Slide

  72. Images larger than they should be

    View Slide

  73. Bloated Carousel Plugin

    View Slide

  74. RWD is Not Mobile Friendly

    View Slide

  75. RWD is Not Mobile Friendly
    but the web is

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  82. thank you

    View Slide

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

    View Slide