8: On Responsive Web Design

On 21 June 2011 by Derek J. Kinsman

On Responsive Web Design Lead Image

The current buzz phrase of the web design world. This post is largely my take on it. I have yet to receive my copy of Responsive Web Design by Ethan Marcotte and published by A Book Apart. I have however read the original blog post and a slew of other people blogging about responsive web design (which I don’t feel like link baiting this post so just Google it). Also, Adrian Unger just wrote a really good post about this topic, that’s the one post I choose to link to. So, go read it, I’ll wait. No no, take your time. I’m not in a hurry. Okay, you’re back, right, moving on…

Right now responsive web design means to pretty much wrap a few different media queries around some different layouts so that your website fits properly on any screen. That’s it. That’s all people want to do with it. All the tutorials, articles, tweets and everything else I’ve read about it can be summed up with “make it fit horizontally while maintaining a usable but slightly different experience.” Well fuck that I say.

1 — Personally I don’t think you completely control the experience. At best you’re hoping for the same experience you have in mind while building it. Your brand should never have different experiences. Ever. Get that into your head. Your. Brand. Should. Never. Have. Different. Experiences. What it can have is different methods of interaction. Those methods of interaction shouldn’t affect the perceived experience. But they should enhance the way you interact with whatever it is you’re interacting with on whatever device you happen to be using.

2 — Why are we only using responsive design to change the width and size of things based on the screen dimensions?  That’s not very interesting. Perhaps it’s a limitation of the @media { … } query. Responsive Web Design used to exist before Ethan wrote about it. We used to do all manner of things from user agent sniffing and doing crazy things with Apache mod_rewrite. But the famous web folk have said we can’t do that anymore. We should run a bunch of javascript to do browser feature detection. Or build it for our browser of choice and hack a bunch of fallbacks together. Well why not use responsive design to not just screen dimensions but devices, models, hardware, everything. That way what you can do is really build for specific devices. Use web interfaces when it’s appropriate for that. Use mobile sites if there’s no native app. Build native apps. I would rather build for a device than for a resolution. Could you imagine building something like one of the Google Chrome experiments knowing full well that with IE9+ you get hardware acceleration. But you could re-engineer parts of it for devices and browsers that don’t support hardware acceleration (OSX, FF, Webkit) and maybe reduce the number of polygons. Or do a network detection and serve up a bandwidth light version (like what Netflix does when it’s streaming content).

Actually, Netflix is probably the best example of responsive design yet. They have native apps for a variety of devices and on top of that they stream specific files to you depending on your bandwidth (smaller files for mobile devices, full 5.1 1080i HD files for PS3, 1080i for Xbox, probably 720p for AppleTV). That’s responsive design. Not changing the width of your website so you don’t have horizontal scrolling. That’s exactly what I want when I think about responsive design. I don’t want the design to adapt when I resize a browser (that’s handy, but less not bang on). I want the whole system to respond to the technology that’s serving it up.


This was just a short one. I don’t dislike the idea of responsive web design. I just think @media { … } queries are extremely short sighted. I think we can do much more with the concept. It just requires a few more pieces of technology. And a few famous people getting over CSS.


8: On Responsive Web Design

Written by Derek J. Kinsman

Published on 21 June 2011

Filed under Housekeeping.

Add this to Twitter, Facebook, Google, StumbleUpon, Digg, MySpace, Email, Print.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>