After my talk for 1DevDayDetroit I did a little Q&A, and a question that came up a couple of times was “What is a case for an adaptive site vs. aresponsive site?” I would say that making that call comes down to your answers on two factors: budget and legacy.
Adaptive sites are great. Don’t let anyone tell you that full-fluid responsive is the only one true way. The average user is going to get it in the context that is appropriate for their device and that will be fine. For example, I built the berkleychopshop.com site (in the image at the top of this post) on an adaptive layout. It has a single column layout tailored to devices with a viewport of 499px and below, and another for devices 500px and above, and maxes out at 960px.
For clarity’s sake, I’d like to define a couple of terms: Responsive and Adaptive. A responsive design would be one that incorporated the following:
- A fluid, percent-based layout.
- Images that resize by themselves within that layout.
- The use of @media queries to determine the size of the viewport that the website is meant to respond to. (see mediaqueri.es )
Legacy & The Ballad of Johnny 1.0
The fact that you have a site to convert means that somebody had to build it. If that somebody was you or someone on your team then you probably have a good idea how it’s put together (for better or for worse :). Maybe you are inheriting the site from “Johnny 1.0” and he and his team may or may not have designed and developed it in a manner that will make it easy to convert. So in order to make an informed decision about version 2.0 you should have a really good idea of how flexible the site is now:
- Is there any table-based layout?
- Are container dimensions set high up the DOM by a master container (good) or individually down closer to the content (more work)?
- To what extent are images used for text in headlines, etc? (They could present a problem as columns get narrower)
- Are there a lot of images in backgrounds? (They don’t scale)
- More reasons I am not thinking of off the top of my head…
And now for a little browser squishing…
Your budget, whether time or money (and usually both), will let you know a lot about how responsive you should get. The more breakpoints you add, the more design you have to do, the more developing and debugging you have to do. You can speed things up by using a responsive template, you can simplify, but that may compromise some design features. It’s all a great balancing act. Although responsive can be built in without a lot of extra overhead, it probably won’t be so with the first project you attempt. So start small and get better.
* Individual mileage may vary