Responsive Web Design (IV) Responsive Images.

11 January 2012 15:03 | Comments: 0 | Categories:

From the Cloud Four Blog

Best looking solution to emerge at the moment is Adaptive Images by Matt Wilcox.  More about the thinking behind it.

He starts:

So you've been building some responsive designs and you've been working through your checklist of things to do:

  • You started with the content and designed around it, with mobile in mind first.
  • You've gone liquid and there's nary a px value in sight; % is your weapon of choice now.
  • You've baked in a few media queries to adapt your layout and tweak your design at different window widths.
  • You've made your images scale to the container width using the Fluid Image technique.
  • You've even done the same for your video's using a nifty bit of JavaScript.

You've done a good job so pat yourself on the back. But there's still a problem, and it's as tricky as it is important: image resolutions.

HTML has an <img> problem...

He links to Essential considerations for crafting quality media queries - useful reading.

And this is a great slideshow/presentation. Rethinking the Mobile Web.


Started with Adaptive Images and checking his source find links to HTML5 Boilerplate. Read round that and decide to use it.  But start with initializr which generates the required files, plus includes a bit of HTML/CSS for a real page.

Then for CSS, take a look at LESS CSS and kick-start with less elements. There's also a Dreamweaver extension to compile a less file into a css file. [These are instructions for making a .less extension recognised by Dreamweaver, but when I came to do it, it was already done.]

Enough reading and tool collection. Now to make it work.

Implementation notes.


Seems to work best at the root level. Certainly the www.domain to domain code didn't work in a subfolder.

Added two more useful bits.

# index.html to /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*index\.html\ HTTP/
RewriteRule ^(.*)index\.html$ /$1 [R=301,L]

# index.php to /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*index\.php\ HTTP/
RewriteRule ^(.*)index\.php$ /$1 [R=301,L]

No Comments

Closed for comments.