A little more than a decade ago Ethan Marcotte coined the term ‘responsive web design’. Responsive web design came as a natural development to the emergence of mobile phones, tablets, and other handheld devices. Since then, the number of people browsing the web through their handheld devices has risen to equal, and eventually surpass desktop use. Today it is more likely for people to experience a website on a handheld device than a desktop, making it vital to the design and build of a website that it works across all screen sizes.

When we design a digital product like a website, we generally have two approaches to choose from: Responsive Design or Adaptive Design. At first, both might look the same as they help us achieve the same goal – to change the appearance of a website based on the browser width or height. However, if we look through the details, we will find the differences that make each approach unique. 

What is Responsive Design?
Websites that follow a responsive design approach respond to the browser window’s width at any given point. The website adjusts to the browser window’s width by scaling, rearranging elements, and sometimes changing functionality to optimize the content for the specific screen size. 

Why go Responsive?
Building a responsive website can make it more effective, scalable, and manageable to implement. This is mainly because we generally design two screens, one for mobile and one for desktop, and these can be built within one codebase. Of course, this comes with its challenges as it becomes more demanding to implement this solution for complex websites like large e-commerce websites. This is why we suggest the responsive design approach as the preferred method for smaller-scale projects with lighter content.

What is Adaptive Design?
Websites that follow an adaptive design approach, adapt to the width of the browser at specific breakpoints; a breakpoint is the point/width of the browser – at which a website page’s content adapts in a certain way to optimise the content by changing the layout and sometimes its functionality. In other words, when we open a website, the site chooses the best layout for that screen’s width.

Why go Adaptive?
This solution comes in handy on projects with a greater need to control how the content adapts. Adaptive design allows designers to control the user experience in more detail by tailoring the solution to the user’s needs on a specific device. This is why adaptive design might come as a better solution when creating some more complex websites that hold a lot of content, such as News and e-commerce sites, where the layout needs to be significantly altered on some screens.

How to figure out if a website uses adaptive or responsive design?
As a rule of thumb when we resize our browser window the responsive design scales smoothly and fluidly. While the adaptive design performs any changes only on the designated breakpoints. As always, the best way to tell the difference is to go and have a look and play around for yourself; the following websites are responsive: WIRED,  The V&A,  Swiss Air, BMW and New York City Ballet, and the following are adaptive: The Guardian, Amazon, Ikea, Adidas, Nike, AirFrance, and Apple.

Finally, to say one is better than the other would be wrong, as each solution achieves the same end goal in its own way. Choosing one over the other would be on a project-by-project basis and after careful analysis of research on how users interact with the product.

If you’d like to talk to us about how we design websites, apps, prototypes or anything else just get in touch.