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. Building a University Website with RWD (Responsible Web Development) Erik

    Runyon | @erunyon | #PSUWeb12
  2. who am i? Erik Runyon Manager of Interactive Development Wed

    Developer University of Notre Dame
  3. i’m from here…

  4. i work here…

  5. only one of them plays…

  6. we’re all #highered

  7. we have a problem

  8. 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
  9. http://www.flickr.com/photos/specialkrb/4045683750/ dial-up 56Kbps edge 384Kbps 3g 1.2Mbps

  10. None
  11. None
  12. None
  13. Erik’s personal Bermuda Triangle of AT&T suckage

  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)
  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
  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
  17. front-end

  18. size matters

  19. photos = jpg (~80% compression) graphics = png/svg (png8 if

    possible) NOT LOL’ing
  20. ImageAlpha on transparent PNGs compress all images pngmini.com imageoptim.com

  21. requests

  22. Combine CSS/JS

  23. Image Sprites

  24. 13 icons x 3 colors = 39 images or 39

    icons combined = 7kb and 1 request
  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
  26. CSS at the top JS at the bottom

  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.”
  28. two exceptions <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="/assets/js/respond.js"></script>

    <![endif]-->
  29. mobile first @mq

  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
  31. mobile first @mq 1. Global 2. Screen 3. @media queries

    as needed 4. Hi-res/retina specific 5. Print (yes, print)
  32. progressive/on-request loading

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

  34. especially important here

  35. server-side http://www.flickr.com/photos/40987321@N02/5580348753

  36. Performance starts on the server Apache 1: mod_gzip Apache 2:

    mod_deflate Nginx: HttpGzipModule
  37. None
  38. None
  39. http://bit.ly/PHPFeedCache

  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 */
  41. RESS (responsive design + server-side components) lukew.com/ff/entry.asp?1392

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

  43. 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)
  44. UA-Parser/Detector github.com/tobie/ua-parser detector.dmolsen.com

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

  46. None
  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
  48. Detector detector.dmolsen.com

  49. Detector uses Modernizer’s core tests to provide browser features on

    the server-side
  50. so what?

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

    filamentgroupinc flickr.com/photos/filamentgroup/5149016958/
  52. so what now?

  53. customize the experience

  54. let context dictate content

  55. go a little crazy

  56. erik runyon @erunyon weedygarden.net speakerdeck.com/u/erunyon