Responsive vs. Adaptive Web Design
When making the transition to building responsive or adaptive websites, the hardest part can be getting started. Here are some things to think about.
There are two common keywords that are becoming more and more talked about in the world of web design, responsive and adaptive. If you are planning on a new website, knowing these terms and their differences is important. It will give you an idea of what is possible and what a designer like me can give you for your new website.
Understanding the Differences
A responsive web site design uses CSS media queries to resize and rearrange the pages elements based on the size of your browser. Those accessing the page from a laptop or a PC will get the full-sized version. Those on tablets and mobile devices (iPhone or Android) see a different arrangement. This type of web design is easier to implement and support than adaptive design.
Before responsive web design, most websites dealt with tablets and smart phones by offering a sandboxed version of the site designed for the smaller browser size. This limited options available to those users since most of these special designs tried to reduce bandwidth use and didn't cater to the large number of device resolutions we now have to deal with.
Here is a good quote to summarize:
There’s still a lot of resistance, though. That’s why the idea of creating separate silos for “mobile” devices is initially so appealing. But that approach won’t scale: it’s just not practical to spend equal time and effort crafting different endpoints for iPhone, Android, Palm, Kindle, iPad, etc. The solution is to either reject part of your potential audience and concentrate only on a subset of users like, say, just iPhone users …or you can embrace responsive design. The first option is the cure that kills the patient. The second option might seem intimidating at first, but it’s going to become increasingly accepted. Inevitable, even.
Adaptive web design, on the other hand, is an enhancement of responsive design as I see it. With this type of design, the website detects the accessing device's identity. With that information, the website activates or deactivates functionality. It also rearranges elements the same as responsive design. By creating a unique combination of features based on device type, the user gets all the functionality their device can handle.
The Key Differences
There are many differences between the two, but here are some of the most important:
- Responsive design changes based on the browser window size while adaptive design changes due to rules based on device capabilities.
- Responsive design offers the same elements to every user independent of device while adaptive design offers different elements to users based on their accessing device.
- Responsive design runs from media queries while adaptive design often uses advanced scripts to detect device and present functions.
Responsive design works only with the layout of the browser window. It uses media queries through CSS to get information and to change the website in response. Adaptive design uses scripts to detect the device and to make certain elements available to the browser based on that information. People accessing an adaptive design website from two different devices may see something very different because their device is so different in capability.
You can look at responsive design as a simpler version of adaptive design. Some also call it a subset of adaptive. No matter how you look at it though, both have their advantages and disadvantages to your website. At a high level, I see responsive web design being the popular approach for marketing based websites whereas adaptive will likely grow to be a bigger part of product type sites that need much more intricate UI functionality.
Pros and Cons
One of the advantages of responsive design is that it is easy to implement compared to adaptive design. It is one solution for all devices. There is no need to worry about multiple device scripts and keeping them updated. A disadvantage of responsive design is the fact that not all elements will work on all devices. So, most responsive designs begin with designing for the most restricted devices first. I have begun to implement this into my design process, working from the mobile version up to the full desktop version of the site from the start.
A major advantage of adaptive design is the fact it offers content geared towards the user's device. That way, it is the richest experience possible and gives a good impression. A big disadvantage to adaptive design is the complexity of creating scripts for many devices. It is not for the faint of heart, which again leads me to believe adaptive principles will be more focused towards product interfaces with more development to build the backend.
Websites should respond to how the user is accessing it. Both responsive and adaptive web design addresses the challenges presented by so many devices. Choosing the design depends on your individual needs. Either way all new web design projects these days should include discussion about how you will reach your mobile audience with these new solutions.
Do you agree or disagree? I'd love to hear your thoughts and how you approach your design projects with consideration of adaptive or responsive design options!
Photo Credit
The website shown in the top image is from: http://mattkersley.com/responsive/. Definitely worth checking out, it is nice way to get a quick look at your responsive breakpoints for different resolutions. Also, the love backdrop is a poolside oasis in the sunny state of Arizona.
What do you think?
Do you have any questions or comments (positive or negative!) about this article? Don't be shy, I'd love to hear from you, ping me on Twitter.
Tweet @Simpson