Responsive design has become an immensely popular practice on the web, because of its utility for conforming websites to the width of the browser they are viewed on. The differences between the adaptive and responsive website design can be confusing, leading to many people not understanding what adaptive design is, or even understanding either concept. In reality, it’s actually best to use both concepts; in this article, I’ll be discussing the differences between the two and provide some recommendations on their use. So what are the differences between responsive and Adaptive Design?
Both responsive and adaptive website design have the same objective; provide a better user experience for consumers on all devices by allowing your website to adapt to their size, creating support and flexibility not available using the traditional method of creating separate mobile and tablet websites. The key difference between the two is that responsive web design is strictly handled client-side and focuses on conforming to browser dimensions, having the web browser requesting the website dictate the dimensions, and scaling them to meet varying widths using media queries (a CSS method to customize styling based on different media criteria, such as width and height). In contrast, adaptive web design is handled on the client or server-side, and focuses on delivering an experience to the user’s device. This is achieved by detecting various aspects of the user’s environment, such as their browser, operating system, or the actual device they are using. A common adaptive example would be in which the browser will tell the server what device is being used (often through user agents, which tell the server a specific device type, such as an Android or iPhone device). The web server will then present content pre-defined specifically for that device.
Despite aspiring to achieve the same goals, they both should be understood and implemented properly. An improper implementation of either concept will definitely increase page load times, and create a poor user experience. It’s also important to note that you could build a website using just one or the other, but there are plenty of reasons as to why you would want to use both; so, let’s take a closer look at them!
Responsive Web Design - Explanation and Recommendations
As mentioned above, responsive design is a client-side concept, so it gives all the heavy lifting to the browser to conform your website to varying widths. Responsive design is often used in conjunction with the term “fluid design”, because a responsive website will transform its layout as you start decreasing your browser’s width, without refreshing your page. In some ways, this makes development a little bit easier because you can quickly test different widths without even picking up a mobile device; however, keep in mind that any responsive websites must still be tested on different device types before reaching production.
The concept of responsive web design has been around for 10 years, but adoption rates didn’t really start picking up until about two or three years ago. Probably the biggest attribute to the popularity of responsive design was the creation of Bootstrap by Twitter in 2010, which is a responsive framework created with a concoction of jQuery plugins, CSS files, and media components that provide different visual effects for your website. Although Bootstrap is probably the most popular responsive framework out there, it’s worth noting that there are plenty of other options to choose from, it would be worth your time to review some of them before jumping on the Bootstrap bandwagon.
Most of the responsive design frameworks utilize what is called a grid system, which allows for flexibility in defining page layouts that are based on percentages, and can make these grid blocks stack on top of each other as the browser width narrows. Grid systems have been around for a while, but definitely gained more popularity with the advent of responsive design.
Implementing responsive design into a non-responsive website can be challenging. You can’t simply drop a responsive framework into your website and call it a day. HTML will always have to be re-structured to meet the responsive standards, which can be quite difficult on large, complex websites. Testing is also very tedious on a responsive website, since there are different breakpoints that must be accounted for in addition to the set of devices you decide to test on. Another consideration for responsive design is that percentage based layouts give less control over margins, so there is a little less control over the way the website will look. This issue is nothing major, but it is worth noting.
Probably the biggest caveat to using responsive design is that you can’t block content such as HTML, images, and scripts from loading with responsive-only techniques (aside from hiding the content with CSS, which isn’t appropriate for everything). This leaves larger images and potentially resource intensive scripts to continue to load and operate on smaller devices that have possible bandwidth and/or resource constraints compared to their desktop counterparts. For javascript that you don’t want to load, adaptive techniques may also be utilized, and in some cases you can scope the script so it will only run on the desired devices. The problem with loading content and images is solved by applying some adaptive design techniques, which I will cover next.
Adaptive Web Design - Explanation and Recommendations
Adaptive web design techniques focus more on website accessibility, taking a progressive enhancement approach and adapting the experience towards the user, rather than just the browser dimensions. An adaptive website will render content based on pre-defined screen sizes, and/or devices, rather than focusing on the browser dimensions. Methods for detecting browser type or version and adjusting functionality to meet that browser’s capabilities would also be considered an adaptive technique, which are more likely to be a client-side scripting solution like Modernizr. Probably one of the most popular adaptive frameworks, Modernizr is a javascript framework which removes most of the cross-browser limitations for supporting CSS3 and HTML5 standards (let’s face it, this is essentially for older Internet Explorer versions).
The ability to control what is loaded based on device-type is a valuable asset in the adaptive toolkit. Images can be loaded that meet the device resolution or device type, saving page load time and wasting less server resources. There are many great options out there for adaptive image handling that are free to use and relatively easy to implement. I was at a conference a few weeks ago and learned about a really awesome technique from Adaptive Images, which is great if you’re using a Linux/Apache/PHP environment. If not, there are plenty of other adaptive image solutions available on the web.
Another popular adaptive web design approach is to use device detection to serve completely different content/HTML based on server-side user agent detection. Using this concept can be an alternative to a responsive approach, or used as a primary solution to supporting all device types while using supplementary responsive design with media queries to enhance the user experience. Building an adaptive website this way is a matter of preference, since it may not be readily apparent that the site is made to adapt to device types. Responsive design has become so popular that users scaling their browser width and expecting the website to fully scale accordingly may be disappointed that it’s not quite as fluid as they had hoped (an example of this website type would be Steve Madden). From a web developer’s perspective, it also may be a hard sell to clients that don’t fully understand the concept. However, there are a few benefits to using this technique. Testing can be little bit easier because there little to no “break points” to support, creating less variables for layout issues at different widths. Additionally, the code base can be somewhat more manageable (if structured properly) since you have more control of creating different files or templates for each device (for example, setting up completely different files to present to mobile or tablet users). Websites that allow clients to manage their own content also will have more flexibility to define device-specific content using this method. One issue that should be brought to attention is that this technique may have some conflicts with caching or content delivery services, but they can be overcome with creative solutions (such as storing the device type in a cookie).
Adaptive web design has been around longer than you may have realized, and even commonly used, simple conditional statements in CSS to select based on browser type are an adaptive technique. Hopefully this explanation clarified what adaptive approaches are, and will help you decide what types you would like to implement on your website. I highly recommend researching the options available and finding the solution for your site.
CONCLUSION
In the argument of responsive vs. adaptive website design, it’s incorrect to assume that one is better than the other. Each approach has its own set of benefits and short-comings, and provide different solutions for different problems. The solution for most websites is to have a balance of both methods implemented, with the biggest choice being which techniques are best suited for your environment. This is definitely the best approach, leaving the choice of which one you will rely more on for supporting different device types: will you go with a fluid responsive website, or an adaptive website that responds to browser, device, or operating system types? Once you make your decision, you can then decide which techniques will help overcome each method’s deficiencies.
