In his Building a University Website with RWD (Responsible Web Development) presentation at the Penn State Web Conference, Erik Runyon talked about the Web design and development considerations and techniques used on the new Notre Dame Web site.
- In 2004, broadband started to overtake dial-up connections in the United States. There are still some pockets where broadband is not available. Today’s mobile networks force us to yet again deal with bandwidth constraints: 384kps (EDGE network), 1.5mbs (3G).
- But we’ve been making our sites larger and larger. The average Web site today is over 1MB.
- Looking at the averages of higher education sites using responsive design: 64 requests and 1.4MB size. Some sites keep it lean but most don’t.
- You can have a good university Website without abusing the amount of content people have to download. Client and server side techniques can help.
- Size matters: pay attention to what you are sending to users. Mobile forces us to make sure we’re using bandwidth appropriately.
Client Side
- Compressing images can save bandwidth. JPGS for photographs can be compressed up to 80%. Use PNG (8bit if possible) for non-photographs.
- Pngmini.com, imageoptim.com both can cut down on file size of PNG images (up to 70% for images with transparent colors).
- Combine CSS and JS into as few files as possible. Put your CSS at the top of the page. Keep most of your Javascript at the bottom of the page. Exceptions include: Internet Explorer support for HTML5 and media queries. Keep these separate.
- Use image sprites to combine a number of images into one to save on http requests.
- Beware of limitations in pixel dimensions when serving large sprite files.
- The absence of a media query is your first media query. Use mobile styles first, then use the CSS cascade to enhance the design for larger sized screens.
- Progressive loading: bring in the images you need to render the page, then load additional images in the background using Ajax. Keep things light and add things in as needed.
Server Side
- Make sure that gzip is turned on. It can save lots of bandwidth. Cache third party API content locally to improve performance.
- RESS: using server to optimize components inside a responsive Web design. You can use: UA-parser or Detector to identify devices on the server and categorize them appropriately.
- Detector gives you access to Modernizer tests on the server. You can see which features are supported in the browser visiting your site.
- Through these techniques, we can know if the device is touch-enabled, orientation/motion, low-bandwidth, etc.
- This allows you to serve the most appropriate content to each device.
- Let context dictate content. Notre Dame site uses location to serve up most relevant tours based on where people are.
- For years, web developers were stuck in a 960 pixel and high bandwidth mental model. It’s time to get out of this mindset.
- Consider bandwidth like it’s 1999. Use progressive enhancement to build up from a core set of features.
Erik has posted his slides for this talk on SpeakerDeck.