HTML5 Offline Applications: ‘Donut Hole’ Caching

http://msdn.microsoft.com/en-us/magazine/hh561712.aspx

Watch Lucy grow up. A demo of responsive design with appropriate* image serving

Responsive Web Design has been around for ages and really faces two major issues which it must overcome in order to become a standard way of developing:

1. How do you only send the appropriate code to the browser? (It’s fine to set something as display:none, but it’s still downloaded, and
2. How do you handle images in different sizes?

This is an attempt to show one way of using CSS3 Media Queries to serve appropriate sized images to the client.

Background: Firstly you need to make sure that Responsive Design is appropriate for your project. Sometimes you just need to make multiple sites :( however in a lot of cases you just want your existing site to be viewable & usable on different devices (read: screen resolutions).
Our responsive design is based around a set of predefined width cut points. (320, 480, 720, 960, 1200). This covers our target audience.
Our css framework is based on 320 and up, 960 grid system, html5 boilerplate and blueprint.
When we do our design we start with the smaller sizes (320, 480) then work up from there (the Mobile First design)

What this demo is about:
What we’re showing here is a way of adding images to a layout using css (specifically, using the css background property), then using a bit of jQuery to move the background image to a foreground images so that it’s properly inline (and is selectable, printable etc.)

Have a look at the demo here: http://responsivelucy.tk/
Resize your browser to see how the different images are loaded. NOte that images are always shown at 100% actual size. So if you start with a small browser size (think mobile device) then only the small image will be loaded. If you start with a big browser window (think desktop) then the larger image will be loaded.
Note that in some resolutions we just use text instead of images (have a look at the header image)

Other things to look at:
Adaptive Images: does the image resizing automatically on the server.
25 jQuery Plugins to help with Responsive Layouts. Some useful scripts here.