7 Nov

Responsive vs. Adaptive Website Design

Nowadays, internet access is not limited to just laptops or desktop computers. Instead, with the advent of mobile devices and tablets, more and more users are accessing the internet using a diverse array of gadgets—and screen resolutions. As a result, the importance of having a website that performs well across multiple devices, like smartphones and tablets, cannot be stressed enough.

And when it comes to creating a website that looks great across these different devices, there are two major approaches: responsive design and adaptive design. In this article, I’ll be taking a look at the benefits and drawbacks of both these approaches.

Responsive Design

In simplest terms, responsive design caters to different screen resolutions by having a defined layout for each. Thus, with each layout, the width of the elements is resized in relation to the changing window size (more like a series of liquid layouts).

resp-adapt-featured

Responsive web design enables your visitors to view across different devices using the same design. The design adjusts itself automatically on the basis of the viewers’ screen resolution. For instance: for a bigger desktop screen, the design may show three columns of content, but it may adjust itself to just a single or double column on a smartphone or a tablet, and so on. Naturally, since it ensures uniformity of design across multiple devices, responsive design is often favored and appreciated by WordPress designers.

Advantages

1. As already mentioned, responsive web design ensures the uniformity of design across multiple devices and screen resolutions. While your design may be adjusted (say, in terms of column width) to fit the mobile screens, overall, the design layout and styling remains uniform throughout.

2. Perhaps the biggest and most emphatic advantage of responsive design is the fact that it turns out to be more search engine friendly as compared to the alternatives. Well, at least Google thinks so; they have talked about it here, here and also here. And to quote a part of their recommended configurations:

… sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

3. Furthermore, responsive design also adds simplicity to your website. Since all your content is on one URL only, it comes in handy with factors such as social media sharing, search engine ranks, bookmarks, web stats, etc. Also, do not forget the fact that you will have to maintain only one version of your website (as opposed to two separate mobile and desktop versions). This can go a long way in saving your time and efforts.

Disadvantages

1. Varying width of content columns across devices means that you may have to be extra cautious when choosing advertisements for your website. Not all ads fit happily into every screen resolution, so integrating advertisements in a responsive layout becomes difficult. In fact, even Google AdSense ads do not always perform well across multiple resolutions.

2. A balance needs to be struck between the user experience on the desktop and the mobile. Factors such as load times and accessibility too can come into play. For instance, if your design simply scales down the images for mobile screen resolutions, your mobile visitors might just end up downloading a full-size image, even though all they need to view is a 200 x 200 preview on their phones.

3. Adding iframed content to your site. Videos from Youtube and Facebook like boxes can sometimes cause a headache when added to a responsive website.

Adaptive Design

Unlike responsive design, adaptive web design does not fluidly change to fit any screen resolution or device size. On the contrary, it has a series of static and defined layouts that cater to a given set of screen resolutions.

adaptive-design

The idea behind adaptive web design is to create the best experience for the user, irrespective of the browser or device that he or she uses. As such, instead of having “one design to rule ‘em all,” adaptive design uses a partitioned approach. Desktop users are shown the full website, whereas mobile users are presented with a separate mobile version of the site.

As a result, you can make sure that your mobile site is tap-friendly, loads quicker and consumes less data, and the navigation links are more prominent. For your desktop site, on the other hand, you may even choose to discard the tap-friendly mobile features. On the other hand, you can also display a “Switch to Mobile/Desktop Site” link in your footer or sidebar, so that users on devices such as tablets can decide for themselves.

Advantages

1. The first and foremost advantage of adaptive web design is the fact that it ensures the best user experience for all your visitors, regardless of their device. Your mobile visitors will see a website that is touch-friendly and optimized for their device, whereas your desktop users will see a site that caters primarily to their device.

2. Arguably, adaptive web design has better monetization prospects than responsive design, for the simple fact that you can easily optimize advertisements on the basis of your mobile or desktop site designs.

3. You can use adaptive web design to speed up and improve your website’s performance on mobile devices: since mobile sites are basically simplified versions of their desktop counterparts, you can employ a simpler navigation mechanism and lesser images and woo your mobile visitors!

Disadvantages

1. You will need to use redirects for cross-linking. Say, if you link to an older article on your website in a new article, which site do you link to? Your main desktop site, or your mobile ? You will need to set up redirects so that anyone who clicks on the desktop site’s link from a mobile device is redirected to the mobile version of that particular link.

2. While this is purely subjective, having an adaptive design can leave the tablet users hanging. Your mobile website is optimized for the smartphone resolution. Your desktop site caters to bigger screens. What about users with tablets, which generally have a screen that is bigger than smartphones but smaller than laptops? Even if this does not apply to your visitors, you should surely consider having a link in the footer or sidebar that allows viewers to toggle between mobile and desktop versions of your website.

3. Adaptive web design may probably hurt your terms with search engines. For example, an article that is available at yoursite.com/nice-article will also be available at m.yoursite.com/nice-article. Most search engines do not appreciate identical content across multiple URLs, so it can be argued that adaptive design is not as SEO-friendly as responsive design.

Conclusion

Both responsive and adaptive web designs ensure that your website performs well across different devices with varying screen resolutions. While responsive design makes your website automatically adjust its layout as per the screen resolution, adaptive design allows for specialized user experience by distinguishing between mobile and desktop versions of the same site.