Responsive design is the new black, retooled as responsive design. The wide version.

The blog of Mr Simon Collison, retooled as responsive web design. The wide version., retooled as responsive design. The narrow version.

The blog of Mr Simon Collison, retooled as responsive web design. The narrow version.

See more versions in Mr Collison’s “Media Query Layouts” set on Flickr.

Read the article that started it all. Coming soon as a book by Mr Ethan Marcotte from A Book Apart. (The current A Book Apart book, Mr Jeremy Keith’s HTML5 For Web Designers, ships Friday. Mr Ethan Marcotte will be our guest this Thursday, June 24, on The Big Web Show. Synchronicity. It’s not just an LP by The Police. Kids, ask your parents.)

The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it.

Well, anyway, some of the cool ones are. See also the newly retooled-per-responsive-design Journal by Mr Hicks. Hat tip: Mr Stocks. I obviously have some work to do on this site. And you may on yours.

Seen any good responsive redesigns lately?

22 thoughts on “Responsive design is the new black

  1. Great article and concept. However I must say that going from 4 columns to 2 columns is an easy way to make a site responsive, or was that his intent from the begininng and he was just smart enough to design it that way from the begininng?

  2. The majority of the Russian web sites are with liquid design. And that’s since the end of the 90’s (trend started by Media queries are nice but the ways to do liquid design were here long before. The willingness of designers to use them wasn’t.

  3. Actually, I used Simon’s website as the guinea pig for an article I wrote for .net Magazine while Ethan was writing his. The articles comes out in next month’s issue & I gave the code to Colly to use and expound upon ;-) That, of course, by no means reduces the importance of Ethan’s piece and how awesome it is that he’ll be writing for A Book Apart.

  4. Certainly responsive design has jumped to the forefront of designers minds following the article on A List Apart which is great. I for one am planning a redesign based around media queries and am including it in all new designs from now on.

    As for great responsive designs, the Dconstruct site is a great example of what can be done. Well done Clearleft!

  5. I have been frantically trying to get my client work done so I have time to redesign my own sites using Mr. Marcottes’s techniques.
    Re: George/Liquid Design- media queries allow a lot more control over what is seen on different devices- for example, Simon Collison’s site never shows 3 columns wide, only 4 or 2, more aesthetically pleasing and fits with his defined grid, rather than a free-for-all, which sometimes happens with liquid design.
    Also, have you ever seen a liquid layout allow you to remove superfluous images (ie Simon Collison’s iPhone view). Media queries FTW methinks.

  6. Ooh, you’ve made my day. I’ve loved responsive layouts since 2006.

    I must credit Mr. Aaron Gustafson with getting me started with media queries. He contacted me a few months ago, having chosen my site as his sandbox for a forthcoming .net magazine article about responsive layouts. Aaron chose my site because the grid is so obvious, and he felt that it was ripe for some 4/2/1 column action. A few weeks later he sent me a new stylesheet, with the basic media queries set up. All I had to do was tweak and adapt the rules, and set up my content pages.

    That said, Ethan’s incredible article really resonated in my brian, and yesterday Mr Hicks gave me a further kick with his sublime retooling. Thus, I stayed up late to get this implemented.

    Bit buggy in places, but I’ll get there. I’m still testing it!

  7. All hail Aaron Gustafson, one of the most brilliant people it’s been my pleasure to work with, and the author of an upcoming A Book Apart book on progressive enhancement. (Hush-hush!)

    Thanks, Simon and Aaron for providing that backstory. And speaking of synchronicity, adaptive design via media queries is a theme of this year’s An Event Apart. Eric Meyer, Ethan Marcotte, and Andy Clarke all take a whack at it—and, initially, they did so with no knowledge that the others were so doing. Andy takes it the farthest, with totally different layouts for different devices, browser capabilities, and so on.

    That, in addition to the story we’ve just learned about Aaron and Simon and the sandbox, reaffirms the notion that responsive design is a concept whose time has come. (Of course the phenomenal sales of iPhone and Android, not to mention the sale of three million iPads in 80 days, would have told us that even if some of our best web designers hadn’t.)

  8. All hail Aaron Gustafson, one of the most brilliant people it’s been my pleasure to work with

    You say the nicest things ;-) The feeling is 100% mutual.

    Alright, enough of our bromance. Onward!

  9. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.

    You meant the 2000s, surely? In the 1990s *all* websites sucked by today’s standards.

  10. Liquid and scaleable is good, however it can become nasty on a high resolution monitor. Wikipedia is a good example of this, I think. I find I always need to resize my window from it’s normally wide setup so that the text doesn’t go on for 5 meters per line. A responsive layout using media queries and liquid styling is where it’s at.

    Now, to get a polished look without bugs that degrades gracefully on IE while progressively enhancing on cutting edge browsers? That looks great at 2560×1600, like nothing was wrong at 800×600 and readable with iPhone 4’s 960×640 326 ppi screen? Well, that’s still a lot of work up front and will require patience. However, it will be awesome once its figured out.

    But you are right. The cool kids are doing it.

  11. Hicks just redid his journal section similarly

    Yeah, that site was already mentioned in the article. :)

    But anyway, this is really interesting and it will only be a matter of time until a lot more websites start implementing it.

  12. This is great! I’ve been wondering when this kind of thing would start gaining traction. It solves so many problems having to do with multiple devices screen sizes and form factors. I think this is the future of web design. The A List Apart article is just what I was looking for.

  13. Love this direction… no one probably noticed but I’ve had some column switching [that I always intended to do more with, and then write up, but never did] on for some time now.

    The idea is great, and the outlined techniques are nice. Next big step is really working the technology into the larger scale site design and development and testing processes.

  14. All this responsive design is very cool. Too bad it doesn’t work on my work computer, currently locked into Safari 3.0.4 on OS X 10.4.11… :(

  15. Am I mental or has this concept been around for a long time? I thought standards based web development was always supposed to be ‘responsive’. I get that there are new tools at work here, but really, this is what should have been going on for some time now. I’ve been reading Zeldman off and on for some time (5 years or so! – how did those years pass so fast!?) and these basic concepts have been espoused all along. I’m glad all of these new devices and formats are pushing the agenda more now than ever, but I think we need to make sure that basic principles don’t get co-opted into some sort of neo-marketing speak. In other words, I hope we can keep the principles but ditch some of the new jargon; it doesn’t help when web developers need to constantly update their clients/bosses with the latest, greatest techn0-babble. But, yeah, in any case, I dig it!

  16. Am I mental or has this concept been around for a long time?

    You are not mental! This concept is as old as the web. But “responsive design” is a strategy and toolset for achieving this goal in aesthetically pleasing ways.

  17. I love this idea of ‘responsive design'; I think it’s a logical, intuitive way of ensuring that your website is optimized for all kinds of browser scenarios.

    What I dislike, though, is that this technique is only supported by the tip top latest browsers; rendering the time you’d spend on this quite obsolete for the average project.

  18. In varying degrees I’ve been doing stuff like responsive web design since 1999. Even back then I learned you could serve up multiple style sheets for different devices and even multiple potential ones for the same device. I did the best I could to create desktop browser versions, print versions, handheld versions, etc. of the same site. People don’t even give credit to the fact that Netscape 4 in 1999 allowed all this. I also used things like descendant and sibling selectors on Netscape 6 beginning in 2002 (before Firefox/Safari/Chrome, etc.) to progressively enhance pages.

    Anyways, very, very few people seemed to catch on to anything like this and very few companies I worked at cared at all that I was making their sites look good on multiple devices. The usual attitude from them was, “Make it look in IE/Netscape/Firefox EXACTLY the way it looks in the PSD to the pixel or you’re fired!!” and they couldn’t care about anything beyond that. So it was a little dismaying to say the least.

    Then several years went by, then some more years went by, and then I started to see people writing books about, “Hey! Didja know you can make your site look different depending on what device the user is viewing it on?!?! Let me show you how!” Sigh…

    Of course it’s all good for people to be finally catching on… And anything (like this blog entry) that helps propagate good web development ideas is a good thing… And I’m always trying to learn more and to keep my own skills and techniques up-to-date…

Comments are closed.