Building a University Website with RWD (Responsible Web Development)

Building a University Website with RWD (Responsible Web Development)

The web community is diving into responsive web design with reckless abandon. And though our intentions are good, our users may be suffering from our lack foresight. The sites we're building may look great on a smart-phone, but the megabytes of data we require them to download is resulting in less than stellar experiences. As developers, we need to take it upon ourselves to provide our users with a performant experience while at the same time providing access to all of the content and information they would expect while on a larger-screen device. This session will discuss the wide variety of issues a developer should consider while building a responsive site, including lessons learned while building the latest Notre Dame (nd.edu) homepage.

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon

June 12, 2012
Tweet

Transcript

  1. 2.
  2. 10.
  3. 11.
  4. 12.
  5. 14.

    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)
  6. 15.

    averages for #highered RWD sites 16 sites sampled with iPhone

    UA and narrow screen (to simulate mobile) requests: 64 size: 1.4MB Sites used to generate these stats: http://bit.ly/highered-rwd
  7. 16.

    stand-outs University of California, San Diego ucsd.edu Lynn University lynn.edu

    31 requests | 439kb 26 requests | 649kb http://notredame.photoshelter.com/gallery-image/2012-Graduate-School-Ceremony/G0000QHnZV6vbKHg/I0000S5ossz793xo
  8. 17.
  9. 21.
  10. 24.

    13 icons x 3 colors = 39 images or 39

    icons combined = 7kb and 1 request
  11. 25.

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio:

    3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icn {background-image:url(icons@2x.png); -moz-background-size:900px 1300px; -ie-background-size:900px 1300px; -o-background-size:900px 1300px; -webkit-background-size:900px 1300px; background-size:900px 1300px; } } http://bit.ly/JfHQOu
  12. 27.

    JS at the bottom http://developer.yahoo.com/performance/rules.html#js_bottom “While a script is downloading

    the browser won't start any other downloads, even on different hostnames.”
  13. 30.

    “The absence of support for @media queries is in fact

    the first @media query” @bryanrieger www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  14. 31.

    mobile first @mq 1. Global 2. Screen 3. @media queries

    as needed 4. Hi-res/retina specific 5. Print (yes, print)
  15. 37.
  16. 38.
  17. 40.

    http://bit.ly/PHPFeedCache $cache = new FeedCache('local.xml','http://example.com/feed.xml'); $data = simplexml_load_string($cache->get_data()); /** *

    1. If local file is valid, use it (defaults to 60 minutes) * 2. If it's not, try to cache it * 3. If that fails, use the local even if its expired */
  18. 46.
  19. 47.

    <?php 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
  20. 50.
  21. 51.

    touch device orientation/motion lowbandwidth (uses navigator.connection - Android 2.2+) copyright

    filamentgroupinc flickr.com/photos/filamentgroup/5149016958/