Adaptive vs. Responsive

I was recently asked what I thought about the differences between "Adaptive Design" and "Responsive Design", and their respective uses. The answer was neither short nor simple, so I had to write this post.

It is difficult to say which of the two design philosophies is better because we are entering murky territory where the lines between one and the other are constantly erased and redrawn; everyone has their own definition of what "Responsive" and "Adaptive" mean. Having read hundreds of articles on the subject over the past three years, I believe I am in a position to try to define both and use those definitions as a starting point for answering the question.

Adaptive Design

This is a website-development philosophy based on the idea of adapting a website to the device from which it is being accessed, with the goal of giving the user the best possible experience. Suppose we have the following example:

The website of a convenience-store chain has a section for finding store locations. If the site is accessed from a device without geolocation functionality, the section lets you select your city and displays a list of locations in that city. If the site is accessed from a device that does have geolocation functionality, the section uses the device's current location to display the nearest locations on a map.

In the example above, we can see how each user is presented with the best possible option for their device. The map would not have helped the user without geolocation, while for the user with geolocation it is presumably much more useful to know which stores are nearby than to have a list of every store in the city.

The Adaptive Design philosophy is closely tied to another development philosophy known as Progressive Enhancement; in fact, it could be considered a branch of that philosophy. Progressive Enhancement is based on the idea of progressively revealing more options and functionality as the device or software permits. It is often used, for example, to deal with old browsers: the website is developed in such a way that it can adapt to display different options or functionality according to the browser's capabilities.

Although all the intentions behind Adaptive Design are good and pure, it has received a great deal of criticism because many people believe that consistency is lost when different experiences are presented to different users. For example, what happens if a user is accustomed to using a certain feature on a site whenever they browse it on their phone, but cannot find it when browsing on a computer? That user will think something is wrong with the site. How many times have all of us tried to open on a computer a page we had visited on our phone, or vice versa, and not even recognized it because the interface was completely different?

Adaptive Design also has one point against it: it has been used as a pretext for perpetuating the infamous "mobile versions" of websites. The logic is, "If a user accesses the site from a phone, we will present a special phone version of the site." The problem with this logic is that it takes many things for granted. It claims to know the user's needs and intentions by assuming that the user wants a different range of options and functionality simply because they are on a phone. The problem with most mobile versions of websites is that they create an imaginary context in which they assume that, because the user is on a phone, they only want quick access to certain information. This is not true. We do not know the context; we only know that the site is being accessed from a mobile device. The context is not the user's needs; the context is the device. This leads us to Responsive Design.

Responsive Design

This is a web-development philosophy centered on the idea of building a single website that adapts to every device, using the device's screen size as the criterion by which the site determines its context—the device from which it is being accessed. Responsive Design does not care about the operating system or the device's own technical specifications. It cares about screen size and, based on that size, presents every user with the same website but with a different layout or arrangement. Suppose we have the following example:

We have a website with a horizontal navigation bar, a slider beneath it, and four columns of text side by side below the slider. The layout described will look that way on a computer with a medium or large screen, but as we start visiting the site on different devices, we will see the arrangement of its elements change. For example, when visiting the site on an iPad held vertically, where the available screen space is rather narrow, we will see that the navigation bar now takes up two rows, placing some elements beneath others; the slider has shrunk; and the four columns are now arranged with columns one and two on top and columns three and four below. If we reduce the screen size further, down to the size of a phone, we will see that the navigation bar may have become a drop-down menu, the slider has grown smaller, and the columns are now stacked one beneath another—one, followed by two, then three, then four—becoming a single column of four paragraphs.

This development philosophy is not about guessing the user's context. It treats the device as the context and serves the user the same content on every device. The elegance of this solution lies in its simplicity and efficiency, because changes or content additions need to be made only once, as there are no mobile versions. Another advantage is that although the layout changes, the interface remains the same, so the user only has to become familiar with the site once.

Returning to the convenience-store example above, what if the user was accessing the site from their phone but wanted to know which stores were near their girlfriend's house on the other side of the city? The map of nearby locations was definitely no help, and now the user is trapped in that interface because they are accessing the site from a mobile phone. The person who developed the site imagined the context to be "needs to see nearby locations", but that context exists only in the developer's imagination. In reality, we cannot assume there is a relationship between the device being used to access the site and the user's needs.

Every day I meet more and more people whose primary computer is their phone, and one exceptional case is my girlfriend. She uses her iPhone as her computer and as her main work tool. She performs two roles in our web-development studio: she coordinates projects and acts as community manager for the social media accounts we manage for some clients, and she does everything from her iPhone—everything. Part of everything is browsing the web, and whenever she encounters a mobile version, she is forced to use a computer because the mobile version is incomplete.

Another major advantage of responsive design over mobile versions is URLs. For example, if I have an article at this URL, http://misitio.com/mi-articulo, and share it on Twitter, two things can happen. The first is that if my site is responsive, everyone will be able to access and view the article without problems. The second is that if my site has a mobile version, someone attempting to access the article from a phone will probably be automatically redirected to http://m.misitio.com, which is the mobile version of my site, but they will no longer have reached the article; they will have reached a home page. This broken-link problem occurs every day and is a problem even large sites such as YouTube have. The reverse can also happen: I might find an article on my phone with the URL http://m.misitio.com/mi-articulo and send it to a friend who, when opening it on a computer, will be unable to view it or will see a version designed for phones that does not look right on a computer.

Responsive Design offers an elegant solution: a single design that adapts to different sizes while serving the same content to every user.

Now, to answer the question: which of the two development philosophies is better? Which do I prefer?

Seeing these two philosophies as enemies or competitors is an incomplete view of the web-development world. Both offer interesting solutions to a variety of problems. In web development, one solution does not work for every case. Each project is different: one type of development will work better for some projects, while another type will suit others. The development strategies for a site must be chosen case by case according to its objectives and needs.

Trying to choose between these two development philosophies is like asking a type designer which typefaces are better, serif or sans-serif. Neither type is better; they are different, are used for different purposes, and more often than not are used in combination. Moreover, to a type designer, that division between serif and sans-serif will seem unsophisticated and laughable.

I am a Responsive Design enthusiast. I have built every website I have developed this year with Responsive Design, and it has become the specialty of our creative studio. For me personally, choosing that philosophy as the foundation for any development is logical. This does not mean that some elements of Adaptive Design cannot be incorporated into our work. A good example is sliders that present changing images. We are incorporating sliders that are not merely responsive—they adjust to the size—but also detect whether the device supports touch events and, if it does, allow users to move forward or backward by dragging their fingers instead of having to operate the slider controls directly. Another thing we do is incorporate iOS icons into our work, since those devices allow users to save website shortcuts as though they were applications, something we know will only work on certain devices.

I believe that the solutions are different for every type of project, and we are now living through the most interesting era of web development: new kinds of devices, new screen resolutions, and new uses for the web are emerging, and every day brings new tools and resources for developing on the web.

I believe that, for me, the foundation should always be Responsive Design, while keeping in mind a phrase I have coined as my motto: The device is the context.