Adaptive Design VS Responsive Design – With Examples

Design and development didn’t start with the dot com boom back in the 90s. Rather, when GUIs became a thing back in the early 80s, a new era of communication was born. Man and machine finally found a way to communicate through shapes and text.

Fast forward almost four decades later, and we’re dealing with a whole different, more advanced scenario.

Thanks to innovation and the never-ending thirst for smarter devices, communication, and computing devices have evolved from archaic yet straightforward personal computers to laptops, mobile phones, tablets, smartwatches, and the biggest of them all, smart TVs.

This has brought forth a new dynamic as far as design is concerned – being static or being adaptive and responsive.

As any designer or developer would know, one layout just doesn’t cut it these days. You have to consider the middle-aged chap who doesn’t believe the internet can be viewed best if not on the desktop, the millennial who’s on his/her phone daily because of the Gram, and the extravagant folk who believes the bigger the screen, the better.

That’s where adaptive and responsive design comes in.

Wait, there’s a thing called adaptive design?

Yes. It sounds as alien as Apple admitting the iOS 14 was their best Android yet (ouch!). However, it is one of the core design principles used today, just like the more familiar, responsive design.

Adaptive design vs Responsive design

Adaptive and responsive designs are in a way the same thing. Generally, both responsive and adaptive designs focus on changing the appearance of content depending on the screen size.

However, if you take a look at the finer print, there are a couple of differences.

Content placement

For you to understand these two design principles, you need to first understand content placement. Think of content like a liquid, and according to basic physics, liquids take the shape of the container they are in.

This also applies to any software. Take, for example, a website. The contents of the site will take up the size of the screen within which they are displayed. For you to ensure that the website is viewed without any distortion across multiple devices, then you need to cater for content placement for that screen size.

And that’s where most developers will say, “Hello media queries”.

Well, not exactly.

Responsive designs are considered fluid and flexible while adaptive designs are considered neither fluid nor flexible. This means that, with responsive design, you have a single layout that changes content placement based on the current screen size, unlike the more rigid, multiple layout adaptive design.

Let’s break this down further.

What exactly is Adaptive design?

Adaptive Design

Adaptive design is exactly what it sounds like, adaptive. This design is adapted to different screen sizes. This design principle uses multiple fixed layouts whose sizes are the same as the users’ devices. Adaptive design selects the most appropriate layout for the screen size.

This is more or less what an android app designer and developer would do when building an app for this platform.

Why use adaptive design

If you are looking to update your existing site to be mobile or tab-friendly, then adaptive design is your answer. Adaptive design gives you control over the design and development for specific or multiple viewports.

This allows you to create multiple versions of your website, for different users visiting on different devices.

Standard widths in adaptive design

There are six standard widths most designers use in adaptive design. These are 320, 480, 760, 960, 1200, and 1600.

Mobile portrait design falls within the 320px to 600px range. Tablet portrait designs fall within 601px to 960px. In most cases, this would be the same screen size for a mobile device in landscape mode.

Tablet landscape designs fall within 961px to 1200px. Finally, desktops and some smart TVs, fall within the 1201px to 1600px range, with large desktops and large smart TVs falling in the greater than 1600px range.

Sounds familiar?

Yes. These are strikingly similar to the media query breakpoints you’d use in a responsive design. However, in adaptive design, you don’t specify ranges. Rather, you design for each of these six widths.

But that is not written on stone.

Ideally, adaptive design gives you the flexibility to choose the devices you want to focus on.

For instance, your site might have a lot of inbound mobile traffic compared to tablets, which might form a negligible minority. Using this kind of data, you can design specifically for mobile devices, ignoring (but in an intelligent way), the tablet adaptive designs.

What of new sites?

You can use adaptive design for new sites. At the end of the day, the process is the same. You design for specific viewports or all the six standard viewports. Finally, you set up subdomains for accessing the site for each specific layout.

For instance, a mobile user might use m.yoursite.com to access the mobile version of your site, compared to yoursite.com for the desktop version.

Sadly, with the uptake of responsive design, adaptive design for new sites is not that popular. Many designers and developers find working with adaptive designs for new sites or apps as unnecessarily hard.

Thus, this design method has been reserved majorly for retrofitting already existing ones.

Advantages of adaptive design

1. Content and layouts are user-specific

The use of adaptive design ensures that all your users receive a tailor-made user experience. Users using mobile phones, tablets, and desktops get to experience the same content but in different ways. This is because of the content positioning and layout.

Take a simple website for example. On a desktop device, there’s a lot of screen real estate to show ads on the left panel, a huge navigation bar at the top, and a nice grid layout of content. This might also be what desktop users analytically want to see.

On the other hand, mobile users have limited space. Thus, you might want to focus more on the core content, reduce grids to a bare minimum, and find better ways to display advertising.

2. Good for advertising

Speaking of advertising, this medium has for the longest time been the go-to business for most people and companies. Adaptive design gives room for people to place banners within the sites or apps in a more sensible and device-specific way. Many online advertisers are switching from 780×90 banners to 498×90 to cater to smaller screens.

Plus, since the content can be tuned differently, you can use your analytics to better serve ads to mobile or desktop users.

3. Reusability

With adaptive design, you are assured of never going back to the drawing board to build the site from the ground up. Adaptive design allows you to reuse your existing legacy code and content to build a refurbished site or app.

Adaptive designs have also proven to be easy when it comes to adding a new viewport when the need arises.

4. Faster load times

Adaptive design allows only the version of the site or app accessed by the user to be loaded. This improves the load times, which is important mostly among mobile users.

5. Utilizes components of progressive enhancement

Progressive enhancement allows developers to build different layouts for websites, and apps while not interfering with the content used by multiple users across the site. This allows gradual updates to be made without interfering with the user experience.

Disadvantages of adaptive design

1. Labor-intensive

When using adaptive design, you need to be aware of the work and time you need to put in. Adaptive designs are labour-intensive because of their technical aspects. You have to use redirects for crosslinking just to get things working right.

Wait, why?

In adaptive design, you need to make sure that when a user clicks on a desktop link from a mobile phone they are redirected to the mobile version of that link. Otherwise, the whole concept is botched.

2. Users can be left out

Using adaptive design to retrofit existing sites and apps can lead to some users being left out. This has been experienced mostly by tablet users, who form a small chunk of mobile device users globally.

3. Not supported by all search engines

Adopting adaptive design for your websites means that you have to have multiple URLs, which might be an issue for some search engines. Many search engines flag down cross-linking since it has been previously linked to unethical cyber practices.

Yes, some search engine bots may be able to figure out that your m.adaptive.com site is the mobile version of your adaptive.com site. However, there are still chances that your site might still be flagged, leaving your users stranded, and desperately hurting the SEO that you deeply crave for.

4. Keeping up with the market and maintenance is a nightmare

For adaptive design, you have to make sure you keep up with the number of screen sizes and devices that are rolled out by manufacturers. To do this might be painstaking since, with every new display, you need to design a customized layout that is specific to the device.

Maintenance is also a nightmare since you have multiple display sizes to factor in when it comes to upgrades and updates. Even a simple logo change will mean that each display has to be individually updated. This makes the entire process cumbersome.

5. Costly

Adaptive design is not only time consuming during building and maintenance. It is also expensive. In order for you to handle the complexity of the development, maintenance, and support, you have to be ready to hire a competent team, which does not come cheap.

Obviously, this will translate to ridiculous operation costs that your business might not be happy with.

Examples of adaptive design websites

Adaptive design is quite popular in the e-commerce circle. Some of the leading sites that use adaptive design include:

1. Air France

2. Best Buy

3. Booking.com

4. Build.com

5. eBay

6. Flipkart

7. Newegg

8. Nike

9. Staples.com

What exactly is responsive design

Responsive Design

On the other side of the coin is responsive design. This design methodology uses one design or layout and adjusts it to fit the user’s display. This is achieved using the famous (or in some circles, infamous), media queries.

Media queries allow your design to respond to changes in the browser’s width and device orientation. Then, the layout will display content based on the available browser space.

Unlike adaptive design, responsive design is flexible and fluid. This means that all users view the same content, displayed the same way across different size displays. The only difference is, the placement can be dynamically adjusted as the user’s screen size or device orientation changes.

Why use responsive design

Most of the sites built today are responsive. This has made it easier for amateur designers and developers to create amazing work.

Content Management Systems (CMS) like Joomla, Drupal, and WordPress have huge collections of responsive design themes where anyone can create beautiful sites for personal or professional work.

While responsive sites do not give you as much control for content compared to adaptive designs, you are assured of less work during the building and maintenance of the site. This is because, responsive design caters to all the screen sizes available in the market, without the hustle of designing for a specific display.

Is it a must you use media queries?

Yes. All responsive sites utilize the use of media queries to target the breakpoints that are used to scale text, images, and also adjust the site’s layout to fit the screen size in use.

Alternatively, you can use responsive design frameworks such as bootstrap to make this process even easier for your development team. However, most of these frameworks come at the cost of flexibility and full customization.

Advantages of responsive design

1. Cost friendly

Because you only need one design to set up your site, you are bound to spend less. Responsive designs are easy to implement and support thus saving you the extra cost of multiple developers, designers, and support teams.

This also saves you the cost of organizing and controlling your content, seeing that you can do it from one centralized location.

2. Search engine friendly

Compare to adaptive design sites that can be flagged for cross-linking, responsive sites are search engine friendly. This means that your users are likely never going to be affected by security flags that show that your site is not safe.

More importantly, your SEO is not hurt.

3. Seamless user experience

With responsive design, you are assured that all your users will have access to your site. Responsive designs do not lock any user out because access is not restricted to specific URLs and layouts.

This tremendously improves user experience since they can access your content at their convenience without worrying about layout compatibility. Also, with all your content being under one URL, users find it easier to share your content across different platforms.

4. Improved indexing efficiency and crawling

Indexing and crawling are key in making sure that your site’s content is SEO friendly. For a responsive site, you only need one crawler for the entire site. This improves the crawling efficiency and directly helps improve the indexing of your content and site in the search engines.

5. Easy to build and maintain

Responsive sites are easy to build and maintain because of the single design process. Because the site uses similar content across all devices, the building and maintenance of responsive sites is also easier and faster.

This leaves you with enough time for marketing, A/B testing, support, content development, and customer service.

6. Consistency

By using one design for all devices, you are assured of consistency of the content you are putting out. In turn, this will allow you to send a consistent brand message to your users.

7. Better accessibility

The use of responsive design ensures that none of your users are left out. This means that you can create a site that is accessible on smartwatches, phones, tablets, laptops, desktops, and TVs.

8. Easy to monitor analytics

Responsive sites allow you to monitor your site’s analytics easily. This is because you do not have to worry about the different devices being used to access your content, which might be a source of bias in the data, given the different content you might be showing for each.

In addition, all your analytics can be access from one source allowing you to monitor and determine what needs improving.

Disadvantages of responsive design

1. Not ideal for advertising

With responsive design, you have to be extra cautious when it comes to content placement. Varying screen widths across devices may not be favourable for advertising. This is because not all ads fit equally across all screen sizes.

2. Slower load time

With one design for all screen sizes, you are bound to encounter slower load times. Slower load times happen because regardless of the screen size, all the content and code in the site has to be loaded. Then, it is up to the code to determine the current size and adjust the layout accordingly.

For a large site, the impact can be quite huge if the CSS is not minified.

Examples of responsive design websites

Responsive sites are quickly becoming the norm. This is because, in a quest to improve user experience,  more and more companies are leaning towards responsive sites. And these 11 are currently among the popular pack using this pattern.

1. WIRED

2. WillowTree

3. Treehouse

4. Smashing Magazine

5. Slack

6. Shopify

7. Magic Leap

8. Klientboost

9. GitHub

10. Dropbox

11. Dribbble

So, which is the best design strategy?

Responsive vs adaptive. Which strategy should I choose?

The answer to this question is both straightforward and as difficult as explaining why Google bothers to make its own phone (why not just own Android and chill?).

The key to picking the right strategy is focusing on your end-user and what experience they want to have. You have to also factor in the devices they’re using, and the subtle differences each user might want across multiple devices.

Doing this allows you to know if you are going for one design or multiple designs adapted for different devices.

This decision also has to be made depending on whether you are creating a site from scratch, or you’re adding a bit of cool to an old dinosaur.

If you are starting from scratch, a responsive design is the best way to go. However, if you are building on an already existing site, then an adaptive design might be the better option.

Finally, you need to consider the resources required. How much are you willing to spend on the project? This applies to time, money, and the human resources you have at your disposal.

Other design options

Standalone Mobile Design 

Other than responsive and adaptive design, you can opt for other design options such as standalone mobile design. Standalone mobile design focuses on creating websites that are meant to be accessed on mobile phones only.

Yes, this party is for millennials only.

These sites often have URLs denoted by the “m.” prefix. This approach is best if you are sure that most, if not all your users, have access to mobile phones.

But isn’t this a shortcut?

Yes. Technically, it is. That’s why standalone mobile designs have serious limitations, the major one being, your site might not be useable on other platforms.

Over there years, standalone mobile design has lost its popularity because of these limitations.

Conclusion

While responsive design might be the go-to for many people today, you are open to picking which design strategy is best for you. But remember, like most technical decisions, you don’t make the ultimate decision. The end-users do.

Plus, ultimately, when building any product, you need to bear in mind that technology is always advancing. Thus, the design strategy you choose should be easy to update, upgrade, and maintain.

10 Shares:
You May Also Like