Responsive and adaptive web design

Responsive and adaptive web design are both methods for creating multi-device friendly websites that work well on a variety of screen sizes. While responsive web design is recommended by Google and is the more popular of the two approaches, both of these methods for multi-device web design have their strengths and their weaknesses.

Let’s take a look at the differences between responsive and adaptive web design, specifically focusing on these key areas:

Ease of development
The level of control you have over the design
Breadth of device/screen support
How future friendly the solution is
Overall download speed and site performance
Some Definitions
Before we get into our side-by-side comparisons of responsive and adaptive web design, let’s take a moment to look at a high-level definition of these two approaches.

Responsive websites have a fluid layout that changes and adapts regardless of the screen size being used. Media queries allow responsive sites to even change “on the fly” if the browser is resized.

Adaptive design uses fixed sizes based on pre-determined breakpoints to deliver the most appropriate layout version for the screen size that is detected when the page first loads.

With those broad definitions in place, let’s turn to our key areas of focus.

Ease of Development

The most significant difference between responsive and adaptive web design is in the way that these solutions are applied to a website. Because responsive design creates a completely fluid layout, it is best used on projects where you are redesigning the site from the ground up. Trying to retrofit an existing website’s code to become responsive is often a grueling affair because you simply do not have the level of control that you would have if you were developing that code from scratch and taking responsive design into account for the earliest stages of that process. This means that when you retrofit a site to be responsive, you are forced to make compromises in order to stay within that existing codebase.

If you are working with an existing fixed-width website, an adaptive approach means you can leave the size that the site was designed for intact and add on additional adaptive breakpoints as needed. In some cases, if a project’s budget is small, and if it will only accommodate a small amount of development work, you may choose to only add new adaptive breakpoints for smaller screen/mobile-centric sizes. This means that you would allow larger screens to all use the same layout – perhaps a 960 breakpoint version which was what that site was likely originally designed for.

The upside to an adaptive approach is that you can better leverage an existing site’s code, but one of the downsides is that you are creating different layout templates for each breakpoint you choose to support. This which will have an impact on the workload required to develop and maintain this solution in the long-term.

Design Control
One of the strengths of responsive websites is that their fluidity allows them to adapt and support all screen sizes as opposed to only the pre-set breakpoints determined in an adaptive approach. The reality, however, is that responsive sites may look great at certain key screen sizes (typically sizes that correspond to popular devices available on the market), but the visual design often breaks down between those popular resolutions.

For instance, a site may look great at the wide-screen layout of 1400 pixels, the mid-screen size of 960 pixels, and the small screen look at 480 pixels, but what about the in-between states of these sizes? As a designer, you have little to no control over these in-between sizes and the visual look of the page at those sizes is often less than ideal.

With an adaptive website, you have much more design control over the various layouts being used because they are fixed sizes based on your established breakpoints. Those awkward in-between states are not a problem any longer because you have carefully designed each “look” (meaning each breakpoint’s display) that will be delivered to visitors.

As attractive as this level of design control may sound, you must be aware that it comes at a price. Yes, you have full control over the look of every breakpoint, but that means you must invest the design time required to design for each of those unique layouts. The more breakpoints you choose to design for, the more time you will need to spend on that process.

Breadth of Support
Both responsive and adaptive web design enjoy pretty robust support, especially in modern browsers.

Adaptive websites require either server side components or Javascript for screen size detection. Obviously, if an adaptive site requires Javascript, it means that a browser needs to have it enabled in order for that site to work correctly. That may not be a major concern to you since most people will have Javascript in their browsers, but any time a site has a critical dependency on anything, it should be noted.

Responsive websites and the media queries that power them will work well in all modern browsers. The only problems you will have are with the oldest versions of Internet Explorer since versions 8 and below do not support media queries. To work around this, a Javascript polyfill is often used, which means there is a dependency on Javascript here as well, at least for those antiquated versions of IE. Again, this may not be much a concern for you, especially if your site analytics show that you do not receive many visitors using those older browser versions.

Future Friendliness
The fluid nature of responsive websites gives them an advantage over adaptive sites when it comes to future-friendliness. This is because those responsive sites are not built to accommodate only a previously established set of breakpoints. They adapt to fit all screens, including those which may not actually be in the market today. This means that responsive sites will not need to be “fixed” if a new screen resolution suddenly becomes popular.

Looking at the incredible variety in the device landscape (as of August 2015, there were over 24,000 distinct Android devices on the market), having a site that does its best to accommodate this wide range of screens is critically important for future-friendliness. This is because that landscape is unlikely to get any less diverse in the future, which means that designing for specific screens or sizes is going to become impossible, if we have not already reached that reality.

On the other side of this comparison scenario, if a site is adaptive and it does not accommodate new resolutions that may become important in the market, then then you may be forced to add that breakpoint onto the sites that you have created. This adds design and development time onto projects and it means that those adaptive sites must be consistently monitored to ensure that no new breakpoints have been introduced into the market that must be added onto the site. Again, with the device diversity being what it is, having to constantly check for new sizes and possible accommodate them with new breakpoints is an ongoing challenge that will have an impact on the work you must to support a site and the cost of that maintenance for the company or organization for whom the site is for.

Performance
Responsive web design has long been accused (unfairly so in many cases) of being a poor solution from a download speed/performance standpoint. This is largely due to the fact that in the early days of this approach, many web designers simply tacked small screen media queries onto a site’s existing CSS. This forced the images and resources intended for larger screens to be delivered to all devices, even if those smaller screens did not use them in their final layouts. Responsive design has come a long way since those days and the reality is that quality responsive sites today do not suffer from performance problems.

Slow download speeds and bloated websites is not a responsive website problem – it is a problem that can be found on all websites. Images that are too heavy, feeds from social media, excessive scripts and more and weigh a site down, but both responsive and adaptive websites can be built to be fast-loading. Of course, they can also be constructed in a way that does not make performance a priority,but this is not a trait of the solution itself, but rather a reflection of the team that was involved in the development of the site itself.

Beyond Layout
One of the most compelling aspects of adaptive web design is that you not only have control over the design of the site for set breakpoints, but also the resources that are delivered for those site versions. For instance, this means that retina images can be sent only to retina devices, while non-retina screens get more appropriate images that are smaller in file size. Other site resources (Javascript files, CSS styles, etc.) can be smartly delivered only when they are needed and will be used.

This use of adaptive web design goes far beyond the simple equation of “if you are retrofitting a website, adaptive may be an easier approach to use.” All sites, including complete redesigns, can benefit from a smarter approach to a more tailored experience.

This scenario shows the nuanced nature of this “responsive versus adaptive” debate. While it is true that an adaptive approach may be better suited than responsive for site retrofits, it can also be a great solution for full redesigns. Similarly, in some cases a responsive approach can be added onto an existing site’s code-base, giving that site all the benefits of a fully responsive approach.

Which Approach is Better?
When it comes to responsive versus adaptive web design, there is no clear “winner”, although responsive is certainly the more popular approach. In truth, the “better” approach depends on the needs of a specific project. Furthermore, this does not need to be an “either/or” situation. There are many web professionals who are building sites that combine the best of responsive web design (fluid widths, future support) with the strengths of adaptive design (better design control, smart loading of site resources).

credits: https://goo.gl/rU8CHs