The problem of responsive images

The problem of responsive images as part of an overall responsive web design is a tricky one. Something I had to wrestle with in a recent project, with not entirely satisfactory results. Jason Grigsby’s “part 1” article introducing the issues is a great place to start if you’re thinking seriously about this (and you should be if you are doing any responsive design).

Update: Almost immediately, here’s Jason’s “part 2” article on the current range of solutions (both good and not so good) to the responsive image problem.


“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.”

Andy Clarke


“I’m self-actualised, without the stamp of approval from any guild, curriculum authority, or academic institution. I’m web taught. Colleague taught. Empirically taught. Tempered by over fifteen years of failed experiments on late nights with misbehaving browsers. I learnt how to create venues because none existed. I learnt what music to play for the people I wanted at the event, and how to keep them entertained when they arrived. I empathised, failed, re-empathised, and did it again. I make sites that work. That’s my certificate. That’s my validation.”

Jon Tan

Responsive Globe

I’ve just been having a quick look round the newly unveiled Boston Globe website. It’s a responsive design. Responsive in the sense that the page reconfigures itself depending on the type of device it is being viewed on. It’s an approach close to my heart as I’ve been working on a similarly enabled website for the past 6 months. The one thing that has consistently struck me is the feeling of capability you get from a responsive site. Fixed-width sites seem clunky and ancient by comparison.

The Medium Comes Of Age

Two most interesting points in this presentation by Jeffrey Zeldman.

  1. Understanding (if not writing) HTML and its semantic structures and rules is a fundamental, non-negotiable skill that all web designers need to have.
  2. Responsive Design is a tool to enable a small-screen strategy, but a mobile strategy (which should incorporate consideration of screen size and content display) is something larger and more complex.