Since I first saw Simon Collison’s beautiful and responsive site ( http://colly.com/) I’ve been enamoured by the prospect of Responsive Web Design.
Some other great examples of RWD in action here: http://designmodo.com/responsive-design-examples/
A limitation in most Responsive Web Design implementations is due to it’s lack of control over the image elements of a site – though this is a limitation of CSS in it’s current form, rather than Responsive Design per se. CSS can control the background image elements for a layout, but not the foreground images.
For the majority of my retail clients the foreground images and other rich media elements are very much a pivotal aspect in their user’s experience – both in visual engagement, and in page load performance. It is their virtual shop front, and must allow for both an inspiring window display, and the ability to easily hold items up for closer inspection, without tripping over superfluous articles and displays standing in their way.
When it comes to ‘responsive images’ (a.k.a. Fluid Images) I really like Jeremy Keith’s concise perspective:
- The small image should be default.
- Don’t load images twice (in other words, don’t load the small images and the larger images).
It was also that post on Adactio that led me to the examples at http://www.monoliitti.com/images/ which I found most real-world usable, and last week I finally started to have some success with one technique using the <noscript and jQuery.
I plan to further explore the natural combination of Responsive Images and a capable Image Serving platform (such as Scene7) in some experiments that I am planning on running: