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

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