…you need adaptive web design.
I now completely disagree with nigh-on all of the below. I’ve decided to leave this post for posterity, but I no longer stand by it.
The web has been abuzz recently over the advent of responsive web design. Pioneered mostly by Ethan Marcotte, the concept is fantastic. It truly is great and has changed how a lot of projects and builds take shape. Things don’t get much more efficient than a write-once view-many approach, and with the sharp rise in mobile and tablet devices it is proving very popular.
It is however, like most things, not without its downsides. This article by Jason Grigsby outlines some pretty valid points and this one by Kevin Suttle offers a very interesting insight into some problems with the build-once mentality.
My problem lies a little more closely to home, though. The theory and concept of responsive web design is great but I think there are two problems with its fundamentals:
- The name.
- The work that the name implies and leads to.
I much prefer the name adaptive web design. A website should not respond to changing surroundings, it should adapt to them once they’ve changed.
This difference is pretty subtle but very important. Responsive web design changes as the viewport does, adaptive changes once the viewport has.
The problem with calling it responsive web design is that by its very nature it implies that it offers feedback (or a response) to a user’s actions.
Responsive web design tends to use fluid layouts to cater for any possible resolution. Adaptive caters for a predefined but sensible array. If we consider possible resolutions we could come up with:
- Desktop—1024 and above (current industry standard)
- Legacy desktop—800×600
- Tablet—768 on the iPad
- Mobile—<480 on the iPhone
The benefit of knowing these presets (and any more that you might choose) is that you don’t need to rely on fluidity (which is generally harder to build); you can also make better use of grids like the 960GS (which offers 700px that will cater for both iPad and 800×600); you don’t need to worry about unsightly, overly-long measures (line-length) on larger resolutions in fluid designs; and finally, you generally just have better control over what you’re displaying when you have metered constraints.
Furthermore for me is the work involved in creating a layout that will accommodate someone who is browsing at a resolution of, say, 913px. Why spend time catering for such arbitrary resolutions? When I build I cater for desktop and tablet and mobile, but nowhere in between; you can’t be everything to everyone all the time, so why try?
Adaptive web design for me is a far better name and methodology than responsive design. Responsive implies, suggests and relies upon a site responding to changes as they happen. This to me is more work than is necessary. I much prefer working to adaptive web design—letting a website adapt to metered changes once they’ve happened—making my life a whole lot easier than building fluid layouts that will cater for anyone and everyone. If someone is browsing at a ‘non-standard’ resolution, I didn’t ought to have to go out of my way to support it. I choose a sensible preset of resolutions and work to that.
We didn’t have responsive web design a couple of years ago and we got by fine then. Don’t make extra work for yourselves just because you can…
I guess what it mainly boils down to is the name. Responsive just isn’t the right word for me unless you are making a truly responsive site that will cater any resolution possible; but then if you are doing that then I’d dare say that that’s not such a great idea from both a time and effort point of view…
That said, responsive web design is a great tool whether you’re using either method. I do think that adaptive is more sensible than responsive, but I’d never frown upon the latter. Any step toward more efficient and accessible builds is a win in my eyes. We just need to make sure we don’t lose sight of the goal—making money. Web design is a business, and wasting time is bad business…
Update:
Paul Gordon shares much the same opinion, but beat me to the publish button by a week or so…
By Harry Roberts on Monday, January 31st, 2011 in Web Development. Tags: CSS, HTML | 22 Comments »
+
Simon Wiffen said on 31 January, 2011 at 12:57 pm
Valid point though I can see both sides of the argument. As you said the adaptive method requires knowledge of the specific resolution points you want to target. The benefit of the responsive approach is that it’s more future-proof in that it allows for new steps to be introduced at a later date without you having to revisit these on your sites as they develop. (High-res iPad 2 for example)
That said, as you very rightly point out, what it *does* give you is the ability to deliver a tight, grid-controlled design that’s solid for each of these targets. This is very desirable obviously.
I personally prefer the adaptive approach as you’ve outlined, it seems like a great compromise for those of us wanting a good compromise of flexibility and control, but the responsive approach isn’t totally without benefit.
It’s about compromise and best balance as with a lot of things. For me, adaptive gives the best compromise at this moment in time. Nicely written.
Paul Gordon said on 31 January, 2011 at 1:05 pm
Zing! http://pgdev.posterous.com/adaptive-or-responsive-design
I wholeheartedly agree!
Brant Steen said on 31 January, 2011 at 1:12 pm
I agree with the first point that @Simon made. A big part of the goal of responsive design is to accommodate future resolutions, not just the popular ones now. This is especially important in the mobile environment. With Android gaining popularity in leaps and bounds, there really is no 100% stable screen size/resolution between device manufacturers. While it tends to “hover” around the iPhone resolution, it isn’t always dead on.
That said, I completely agree that certain resolutions are probably more important… i.e. the ones listed in this article. However, I see no reason that one can’t allow their design to flex a little between those points.
For example, if you have an upper width of 960px, and your next major design change is 800px, rather than leaving a horizontal scrollbar for 801px-959px, I would rather just have the 800px design be able to stretch/flex/accommodate for that range. Sure, it may look a little funny but probably not as funny as the horizontal scrollbar (my opinion, of course).
James Young said on 31 January, 2011 at 2:41 pm
I’ve seen a lot of talk about responsive layouts etc lately and I love the potential that comes with it but I’m not sure it’s ideal for all situations and that the holy grail “one true layout” exists any more now than it did when we had faux columns etc years back.
I’m watching and waiting to see how some of the big, content heavy sites such as CNN, BBC, Facebook, Flickr and even ones like Twitter direct themselves because currently they all serve mobile versions of their sites which offer tailored content rather than responsive layouts spitting out the same blocks of content one on top of the other.
I guess a lot of my reading and development work is with an eye on how it can implemented for our main client at work but despite quite a lot of searching, I’m still finding that many big sites are favouring more tailored content delivered via mobile specific sites than the responsive approach.
It think much like adding CSS3 gradients and shadows to everything, we’re still finding our feet with responsive design and in some cases there’s still scope to sit down and plan out how your audience will interact with a site and perhaps admit that a site that looks good on a 1900px widescreen monitor might not be so good on a phone or vice versa.
J.
Nico said on 31 January, 2011 at 4:48 pm
My colleague Peter wrote a blogpost called “All Hail The Adaptive Web” back in October. Check it out: http://blog.mobify.me/2010/10/27/all-hail-the-adaptable-web/
praveen said on 31 January, 2011 at 5:36 pm
Totally agree!
Greg Babula said on 1 February, 2011 at 12:33 am
Great read, its going to be interesting to see how all of this evolves in the next couple of years.
Personally I think that eventually there are going to be too many screen sizes for us to catch up with, time to start making some really fluid designs.
Eddie said on 1 February, 2011 at 4:14 pm
I think that any step towards a more efficient and accessible build is the correct action to take and that responsive web design is a very good tool to use.
Jeff said on 1 February, 2011 at 9:34 pm
Forgive me, but this post seems a bit pedantic.
Responsive web design is a useful tool. Experienced designers with good sense know that there is neither a magic bullet nor any substitute for understanding the user and designing accordingly. You wouldn’t drive a nail with a screwdriver, and RWD shouldn’t be used for every website.
Kevin Albrecht said on 2 February, 2011 at 9:04 am
Great read! In some points I truly agree with you – there are maybe 3 or 4 mayor formats (big screen, small screen, tablet, mobile). These should be supported in a special way.
But I can’t see a reason why the layout shouldn’t be flexible between these mayor formats. Maybe the layout won’t be perfect between these sizes, but better than getting a horizontal scrollbar or sth. like that.
And there’s one more thing: it’s not just about the layout, which should be responsive or adaptive – it’s about the content. Most of users have different goals when browsing with their pc than they have with their mobile phones. Not just the layout should be adaptive, the content should be too (just short text blocks for mobile, longer sections for bigger resolutions, etc.).
Ryan said on 5 February, 2011 at 3:24 pm
The changes in design that are coming everyday make the web such a fun tool to be a part of. By having your layout be fluid like this you are making sure that you are not missing out on potential business. With almost everyone having a smart phone these days, many times they are not even going to their computer anymore, just doing it right from their phone, so it is important to be able to convey your message to them as well.
tom bizannes said on 15 February, 2011 at 9:14 am
I question the 2 / 3 column approach and can see the one column becoming more normal with nav at top and other links and nav at the bottom. having a two col and one style does equal fluid and adaptive approaches.
awesomerobot said on 25 April, 2011 at 4:30 pm
The message in this article is a bit confusing, you start off saying that responsive is a dumb word to use – then you say that responsive web design is dumb because you can’t cater to everyone (so why bother?) – you continue to say responsive is a dumb word to use – and then you conclude by saying responsive web design is a great tool.
I think the quote from ALA from Paul Gordon’s article sums up the use of the word responsive quite well – “Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them.” – Responsive web design is how your content responds to the devices people are using to “pass” through it.
That being said, I’m also detecting a fundamental misunderstanding of how people use responsive web design – specifically here: “Furthermore for me is the work involved in creating a layout that will accommodate someone who is browsing at a resolution of, say, 913px.”
Responsive web design isn’t creating a layout for every possible resolution that exists – that’s just a silly assumption. When you create a website at 960px width, you’re not assuming that everyone who has their window set at 950px wide simply can’t view the site – are you? The same applies here. What you’re calling adaptive web design *is* responsive web design; just because some people use it differently than others doesn’t mean it’s a separate technology. Responsiveness in layout can be fluid, but there’s no specification that says it needs to be, so why feel the need to pin it as such?
Web designing said on 27 May, 2011 at 9:23 pm
Responsive web design and Adaptive web design both are totally different but the goal is same. It depends on our way of working style which is comfortable for us.
This is good post and i like it…
Isaac Lewis said on 12 June, 2011 at 4:04 am
I would tend to disagree.
Responsive web design allows for non-standard screen sizes, changes in layout from portrait to landscape, and resizing of the browser window. Although there are some additional design challenges when working with so many different sizes, there is something quite satisfying about resizing your browser and noticing that the entire page is following the change in real time.
On the other hand, meshing the two ideas gets you the best of both worlds. When you can have a fluid layout that also changes it’s configuration based on the screen size, then you have found a wonderful middle ground – a web page that not only will fill every screen size, but will also avoid those enormously wide text block widths. This page (http://bit.ly/jv4fB2) is a great example of this hybrid style.
Perhaps my thinking will change as time goes on, but for now I tend to side with the “responsive” camp.
Thank you very much for the well-thought out article… and the links to my friend Jason Grigsby – great guy!!
Peter Bergström said on 23 June, 2011 at 2:24 pm
Great article.
You people who complain about a scrollbar appearing (Brant, I´m looking at you :) ), at what site have you seen this?
Perfect example would be this: http://www.informationarchitects.jp/en/
* No scrollbars (of course)
* Text changes size
This is where I hope the adaptive way will head now: Actually considering the size of the screens, not just thinking “Ok, more screenspace, lets use the same sizes as before but pack more content into the browser”.
A bad example would be http://www.awwwards.com – when at max size (1440px width I think) – the content doesn’t change, it just packs more in.
/ Peter
Jonathan Schofield said on 7 July, 2011 at 2:21 pm
There are some valid points in this (especially with regard to optimising for mobile) and it’s good to provoke debate, but I disagree with the implied design sentiment.
As others have said, Responsive designs typically have your ’sensible array’ of resolutions built in as thresholds for styling anyway, but the key difference is that they flex in between those resolutions as well, and it’s really not that hard to do so elegantly.
Whether or not one regards a particular page state as ‘elegant’ of course depends upon whether one regards the _content_ as king or its _styling_.
And it is in this respect that I think Responsive design is the right approach philosophically. It encourages designs that are scalable and conceived for the web in all its plurality from the outset. The fact that it does have limitations as an approach doesn’t make it wrong headed.
Jeremy Keith said on 7 July, 2011 at 8:01 pm
I couldn’t disagree with you more when you say “We didn’t have responsive web design a couple of years ago and we got by fine then.”
We did not get by fine. We’ve been making device-specific websites for years—it just happens that the device was the desktop computer.
Now responsive design gives us the opportunity to build device-agnostic websites …which is what we should have been doing all along.
It may seem scary to design for the unknown (hence your desire to slot things into nicely pre-defined buckets of screen dimensions) but that’s the nature of the web. Embrace it.
klktrk said on 1 September, 2011 at 12:07 am
There is absolutely nothing responsive about responsive Web design, regardless of how fluid or step-less it is. The adjustments made in the view are not responses, they are adjustments/adaptations/flexible layout changes.
Since the data being worked with by the client is not in any way updated or added to, and it’s only the view that is changing, and since no new data is being fetched from the server, this is not a “response” at all, it’s only an adaptation to the client viewports’ needs.
This is why neither a stepped technique, nor a fluid technique of adjusting to client viewport needs should be called responsive, ever. There is no response, only a shuffling and resizing of existing data. Therefore, responsive is the wrong word.
jimi said on 27 January, 2012 at 10:12 pm
Come on, don’t be so picky and pedant… call it whatever you want, the result is the same.
Bleep Systems said on 7 February, 2012 at 12:28 pm
Hi. Interesting read however I’m not sure there needs to be so much debate about just a name :).
I think responsive design is a great ‘quick’ solution to the problem of many devices. Some sites are easier to design than others. For example blogs are easy but an ecommerce site a bit tougher.
We found that there is nearly always a UI solution but the problems come when you start hiding large chunks of redundant code for each different device. If you then are forced into sniffing devices and serving different content based on them – perhaps you should be looking at a mobile solution rather than a responsive / adaptive solution.
I wrote a post recently called ‘Solving a Responsive Design Navigation Problem’ – which you might find interesting. http://blog.bleepsystems.com/2012/solving-a-responsive-design-navigation-problem/
I present 3 simple ways to solve a navigation problem we were having.
Job Dahley said on 15 February, 2012 at 2:33 pm
It truly is great and has changed how a lot of projects and builds take shape. Things don’t get much more efficient than a write-once view-many approach, and with the sharp rise in mobile and tablet devices it is proving very popular. I totally agree with your statement.