A good website should look great on any device running any browser, be it Chrome on a Pixel or Safari on an iMac. Responsive and adaptive design try to accomplish the same task but present different approaches to solving the same problem.

Responsive design

Responsive web design uses a single website where the content layout changes as a liquid, letting you have a single site for all the browsers and devices. It is about using HTML and CSS to automatically resize, shrink, hide, or enlarge a website to make it look good on all devices: desktops, tablets, and phones. When modifying the screen size, the elements respond fluidly as the page appearance is based on the browser viewport, meaning that coding efforts need not change for mobile, desktop or anything in between. Responsive design requires a flexible layout, flexible media, and media queries, letting content change proportionally to the screen size. Instead of pixels, designers use percentages.

 

While saving time and resources, responsive design works perfectly with clean and functional designs. It also speeds up your site's maintenance and update process without having to worry about different layouts.

Adaptive design

Adaptive design uses a few different fixed layouts and selects the best one for the screen size being used. This way, there are different layouts for desktop, tablet, and mobile. These adaptations are limited to what the designer created for the website—usually, six standard viewports ranging from 320 px to 1600 px. In this case, the coding effort is heavier as additional HTML and CSS need to be written for each screen size.

 

For projects with an audience that uses a wide range of devices, adaptive design is a good option. It also means you have both time and financial resources to create and maintain several variants of your site.

Responsive vs. adaptive design

You know the drill. When there is a versus in tech, it is usually not a boxing match with a clear win by KO, but rather a pros-and-cons list. I would normally state how one side has many advantages while the other leaps forward in certain situations. The thing is, in this topic, the positives and negatives stack up to a clear winner.

 

Adaptive design has a somewhat long list of disadvantages. It implies at least two sets of code, generating more work and maintenance. Google even declares that it may be an error-prone technique, and on the indexing side of things, it may cause link dilution. That is not to say that adaptive design is a terrible choice—it is okay to consider multiple viewports—, but the same can be found in responsive design.

 

Responsive design unifies mobile, tablet, and desktop in a single scheme as it only cares about the web browser size. As an argument of authority, even Google recommends responsive designs in its guidelines. It has only one set of code, making it easier for Google and Bing to crawl; while still maintaining the possibility to show different layouts depending on the size. This method keeps the same URL structure, making its indexing more efficient. The last thing is that it usually implies less work for devs. In almost all cases, it is less prone to errors and saves up time and effort.

 

Want to know if the sites you are visiting use responsive or adaptive design? Just open it on your desktop browser and see how the layout changes when you change screen size: either the elements will adjust their proportions fluidly according to the size, or they will change abruptly. You can also test this by comparing the layout on your phone to your PC.

Mobile-first approach

In his Wicked Web Wednesdays, Chris Davidson perfectly states the difference between responsive and adaptive design. Responsive works by pushing around given elements around the screen, while adaptive may have different building blocks altogether depending on the device you are on. These may have problematic consequences for the users as they may expect a given layout across devices. Not finding an element may produce frustration on the users, who may prefer always having the same experience regardless of how they access it. Being mobile the most used type of device nowadays, you cannot relegate its implementation.

 

Since 2020 Google has announced a mobile-first index project, stating that their crawler will index sites as if experienced from a mobile device. That follows a trend that hasn’t been reversed since 2016: the dominance of mobile devices over desktop computers. Google is signaling that it recognized the tipping point to the mobile era, prioritizing its usage with an appropriate ranking, which is another reason to really understand the options presented by responsive and adaptive design.

The design process: creative solutions

As we have seen in another post, the design process sometimes looks more like engineering than art. Design is a creative discipline dedicated to solving problems and communicating appropriately. Hence, responsive design and adaptive design are not just aesthetic options. Choosing one or another has to be justified by trying them with different users and acquiring usability, accessibility, and page speed data. The thing is, you are not looking for an opinionated design; it has to be measured with scientific principles.

 

While responsive is the norm today, this may change in the future with further progress in coding and design. In her session, The new responsive: Web design in a component-driven world, Una Kravets presents a possible new responsive design looming over the near future. She goes into new kinds of responsiveness: to the User, the Container, and the Form-Factor. The appearance of ever-changing new technologies is the reason why you cannot become complacent. As innovation does not show signs of slowing down anytime soon, there is always a risk of becoming obsolete. You always just keep swimming, just keep swimming...

Emotional design

Don Norman put forward his theory on emotional design some years ago; and always strives to understand the real needs of people. To gain insight, Norman argues that you have to watch, not ask, as people usually don’t know what they need. This line of thought makes people, in his view, not purely rational thinkers but emotional beings. He presents three levels of emotion associated with objects: visceral, behavioral, and reflective. Norman states the importance of knowing how to balance the emotional and functional parts of the whole by urging designers to consider both sides of the same coin.

 

As he presented his arguments, I remembered using my dad’s computer during the early days of the internet. Born in the mid-nineties, I rapidly acquired a sixth sense from spending countless hours on the internet with my little brother. I remember the rough edges, the not-so-appropriate sites, and the overall feeling of being in the Wild West. That emotion remained in me, and it was only many years after that I understood it completely. In those times, no one talked about adaptive or responsive design. You were lucky if you found a site that wasn’t failing or bugged in any way. Using a web browser on a blackberry was more challenging than my final exams in university and more frustrating. But we endured.

 

That is not asking for a buggy and bizarre internet (even if it still is like that in some aspects), but to remind ourselves that responsiveness is not the only thing that matters. Each time I opened the Lego portal, I could feel a rainbow coming out of the screen. It was pixelated, messy, and counter-intuitive, but the visceral was still there: emotional design had nailed it. So when designing your site, whether adaptive, responsive or with any futuristic new design, think of the emotion you want to convey.

 

At Awkbit we use responsive design to bring forward a unified user interface and experience throughout all devices. We put a lot of effort into our UX and UI design as we want to successfully communicate with the people who land on our site and show our clients that a functional and engaging layout is possible. Having used both adaptive and responsive design in our projects, we look forward to acquiring new technologies as design theory expands. Are you ready to use design at the service of your project?