Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development

The Blog

Is It Adaptive or Responsive Web Design?

Posted on 12/03/12 in blog, development about , , , ,

There seems to be a lot of confusion in the industry among both us web folk and clients about the differences between adaptive and responsive web design. I’ve even seen someone go so far as to say they’re both the same thing. They’re not. For the most part, clients could care less what way you go about mobile – as long as it works for them. However, there’s a major difference between the two, both in terms of coding and in terms of future-proofing the site.

The sort end of it: adaptive design works with device widths or viewports, responsive works through any width. Here’s good example of an adaptive site and a responsive site.  The easiest way to tell if a site is adaptive or responsive is to start resizing your browser. If the site continuously reflows: it’s responsive. If the site stays the same and then jumps to different layouts at certain points: it’s adaptive.

While adaptive design is quicker and easier to implement, it’s generally a bad practice to go about. It caters to today’s devices only and doesn’t make provisions for new devices with different widths that may be released tomorrow. Responsive on the other hand, works with every width between the smallest and largest versions. While this means much more work on the developer’s part to ensure there are no breakpoints within the site, it also means the website is much more likely to work properly on any new device.

Responsive design does NOT have breakpoints set specifically to today’s devices. It’s breakpoints are set to when the site actually breaks in design. Adaptive on the other hand, is based on actual device widths. Responsive and adaptive web design are all about CSS and media queries. The addition of JS to help this along, while not a good practice for other reasons, does not define what adaptive and responsive web design are. It’s all about the CSS in this point and time. Everything else a developer uses just helps one of these one.

While adaptive design is not the ideal way to go, it has it uses. If a client comes to you and wants a mobile friendly site, but doesn’t want to pay for an entire recoding, it ‘s better to make the site work at today’s current viewports than to try and force the site to be fully responsive. Also, sometimes the client’s budget doesn’t allow for a full responsive site. Other than those scenarios though, there shouldn’t be any reason to implement this.

The difference between the two are clear. Adaptive is in reaction to devices – responsive is in anticipation of devices.

Amber Weinberg specializes in clean and semantic HTML5, CSS3, responsive and WordPress development. She has over 15 years of coding experience and is super cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Like this post? Please share it on Twitter or Facebook.

  • The adaptive design is my work, I finished up the site and a few weeks after the company wanted the site to look better on mobile devices. Given the fact it was already live we decided it was perhaps a better idea to drop an adaptive stylesheet over rather than re-code te entire site.

  • Yep, that’s what I mentioned above, how adaptive is the best way to go if you have to “bolt on” mobile to an existing site.

  • gcarterIT

    Great article. Appreciate the examples which let to me “touch and feel” what you’re talking about.

  • Wayne Speir

    Thanks for clearing that up for me! Perfect timing as I’m doing a site that I meant to be responsive but was really doing adaptive.

    BTW – This post doesn’t show up in your blog.

  • Wayne Speir

    And as soon as I say it doesn’t show up in your blog it does! What power I have. I promise to use it only for good. 🙂

  • As I see it from your examples: adaptive design is just bad responsive design. They are basically the same.

  • Richard Dale

    How can you read all of this and then say that they are basically the same, they are not the same at all Will.

    Responsive designs rely on fluid grids where adaptive designs just rearrange the content at specific break points.

  • I think the basic is same

  • Rachel

    Just to play the devil’s advocate, is adaptive design really so bad if it’s based on widths where the site would break, rather than widths of specific devices? It should still work just fine on future devices, and could save time and the client money with basically the same result?

  • Rachel

    I guess the article doesn’t really go into percentages much, but I was under the impression that responsive design is based almost entirely on percentages that work across all browsers, rather than using break points at all.

  • That’s right, but breakpoints in responsive design are used in media queries to fix something that goes out of alignment. For example, even though this site uses percentages, Have 2 columns on something small like the iPhone would mean that the sidebar would be itty bitty – so at the point that it starts becoming unreadable (around a 500px screen width or so), I put in a MQ to make the main content and sidebar areas 100%. The 500px was a breakpoint (or break in a usable design).

  • The problem becomes when a device comes out that’s halfway between those breakpoints. For example, when the iPad came out, the iPhone sized layout would be much too small, and it’s possible that the desktop much too large. So then you have to either live with that, or go and code another breakpoint/layout for that device. Coding it responsively meant that it would’ve worked properly from the beginning.

  • Just wondered what you guys are doing with regards to clients paying for RWD. It costs more to develop a Responsive site than it does a fixed with one.

    Do you just charge extra and make all your sites Responsive or do you explain what it is and let the client decide?

    So far I’ve been explaining RWD to clients and letting them decide whether or not they want to pay for it.

    Unsurprisingly no client has said yes but then I guess they never will really want to spend more than they have to.

    Whether I should change my process on this I’m not sure…

    My problem with RWD design is that on tablets I think a well designed fixed width site works totally fine. It really comes into its own at phone size screens but then you kinda think well wouldn’t a separate mobile experience perhaps be better than just a reorganisation of a design.

    I went on Kwik Fits website http://www.kwik-fit.com this other day whilst I was in the car parked up looking for a local store that had in stock the spare tyre I needed for my car. It was saturday afternoon about 3.45pm and time was running out if I wanted to get hold of one during the weekend.

    I accessed their site using my iPhone and it was such a great experience. Well designed and really tidy. The first thing it did was take me straight to the find a store section. Didn’t use Geo Location but you can’t have everything. The only other feature was a contact and back to full site. Every local store neatly laid out with a nice call button perfect! Incidentally their main site is fixed width and pretty poor but that just illustrates my point that sometimes a site designed specifically for the smallest screens that are typically used on the move is sometimes better than a Responsive site. (might be just stating the obvious there)

    To do RWD properly is a real game changer though IMO, it really does require a completely fresh approach to designing websites. I’m just so used to having a look around online, sketching a few ideas and then jumping into Photoshop and creating a 980px wide design.

    I know everyone talks about designing for mobile first and then content out and all that I just find it hard to do. I always tend to think of the design first.

    I’m just about to start a new project and I’m determined to just design some basic style guides using the http://styletil.es philosophy get some client feedback and get into HTML and CSS ASAP and see how I go designing more in the browser.

    Cheers Amber for writing this post and prompting this discussion.

  • I definitely charge for responsive design and have yet had a client turn it down – perhaps you should look into how you’re explaining it to them?

  • Richard dale

    Yes you may have a point but you’re not trying to sell it to businesses based in Yorkshire, never like parting with their cash.

  • Then stop selling to businesses based in Yorkshire 🙂

  • Richard dale

    I’ve freelanced for nearly five years now and nearly all my clients are local companies I just find that’s how I get my work via word of mouth.

    I wasn’t been entirely serious anyway as I’m sure you guessed. You were nearer the mark with how I sell it to them.

    Cheers for advice.

  • SusanESM

    Nice explanation. But I think both of your examples are responsive now, yes?