Responsive Design and Adaptive Design are both ways of designing websites for different devices so that the content can be viewed easily – without all the pinching and zooming and straining our eyes.
I’ve seen a few websites in recent months that have been presented as ‘responsive’ when, on closer inspection, they are actually ‘adaptive’ and I think it’s important to establish the difference.
Websites designed using Adaptive Design are designed for a number of discrete device widths. For example:
- A mobile phone at 320px x 568px
- A tablet at 768px x 1024px
- A desktop screen at 1280px x 800px
The website would have 3 discrete layouts and each one would look beautiful at its respective size.
Websites designed using Responsive Design are designed for all devices.
Why should you care?
When you design or redesign your website, you might choose either approach – Adaptive or Responsive – and when your new site goes live, you will be very happy with the results regardless of the approach you chose, but here’s the thing…
Let’s say that you decide to use an Adaptive Design approach and you choose to optimise your website for an iPhone 5S, iPad 4 and a desktop computer with a 1200px x 800px resolution. Your site will look great on these devices and possibly even some others as well.
But what happens 6 months from now when someone releases a new device that has a wider device width than the iPhone, but smaller than the iPad?
Well, if you’ve gone for the Adaptive Design approach, your customers will see the mobile layout of your site with a couple of huge gaps either side of the content. For a while, that’s going to be fine, but it highlights a problem with the Adaptive Design approach that the Responsive Design approach doesn’t suffer from – Adaptive Design isn’t future-proof.
You simply can’t predict the exact device widths that are going to exist in a few months time. In fact, there are already so many different device sizes in mobile and tablet that picking just 3 layouts to design for is hard enough. Luckily, there is a better way.
Focus on content – not device widths
The Responsive Design approach doesn’t concern itself with arbitrary device widths – Responsive Design is fluid and cares first and foremost about content.
In a mobile-first approach to website design, you design your site for the smallest device first. Your designer will be focusing on questions like:
- Is the important content easily accessible?
- Is the content easy to read?
- Is the site easy to navigate on this device?
These aren’t questions about device width, they are about content, functionality and how you present your information.
As the project continues and they consider how the website will look on wider devices, they will continue to ask themselves these key questions and whenever the answer is “No”, they will redesign or tweak until the answer is “Yes” again. The tweak might be as simple as to increase the font size or as complicated as redesigning the navigation.
The process will continue until an appropriate maximum width has been reached. The result will be a website design that looks and works great on every device regardless of its width.
I believe that Responsive Design beats Adaptive Design hands down. It carries all the same benefits without the downside of having a potential ‘use by’ date.
By designing your website for your content instead of arbitrary device widths, you can be confident that the website you design now will be ready for the next generation of tablet, phone and computer sizes before anyone has even decided what they are going to be.