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.

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