Mathieu Bouchard

Thoughts on responsive design

I thought I invented the technique known as Responsive Design sometime mid last year (2011). Then one of my co-workers came across an article on alistapart showing the same technique, pre-dating me over a year... oh well, so it seems I was on the right track at least! And the term "Responsive Design" sure sounds better than "MOB Layout".

I've worked with the technique quite a bit since, and I've recently come to the conclusion that the approach is actually pretty bad. What kindled these feelings is probably the recent warnings concerning the use of the -webkit prefix to the exclusion of others. The problem has to do with targetting the devices of today, potentially breaking on the devices of tomorrow.

Responsive design is a great concept, but the way we're approaching it (i.e. using media queries that target specific pixel dimensions) is where I have an issue. Where do these pixel dimensions come from? I'll tell you: typical screen sizes for smartphones, tablets and PC's. That's not sustainable. Bad, bad, bad.

If we're to do responsive design properly, our media queries should never make any assumptions as to the target device. Ideally, no media queries whatsoever. But it's just not that easy. The reason for this is that we're importing old ideals and attempting to patch Responsive Design on top of them.

What I'd like to see is a reinvention of how we approach websites entirely, especially from the content creation and UX design perspective. We need to put our websites together completely differently. The traditional header+nav, followed by hero-spot, followed by 2/3 content and 1/3 right-rail, then a (fat) footer and some copyright text... typical website... that's what needs to be reinvented.

We need to discard the old concepts, as great as they are on the desktop, because they need to work on far more mediums than they used to. We can't make real progress if we're dragging along desktop concepts.

As I think more deeply about the subject and come up with potential solutions, I'll post again. Stay tuned.