Nowadays, internet access is not limited to just laptops or desktop computers. Instead, with the advent of mobile devices, 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).
The concept of responsive web design was first brought to the limelight by Ethan Marcotte, in his article for A List Apart. If you are looking for comprehensive informational material about responsive design, you should, by all means, check out Marcotte’s book, Responsive Web Design ($9 for eBook, also available as paperback for $18+shipping).
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.
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.
The concept of adaptive web design was first brought to the fore by Aaron Gustafson, and he talks about it at length in his book Adaptive Web Design ($11 for eBook, also available as paperback for $22; you can download the first chapter for free).
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 desktop (main) site, or your mobile (generally a sub-domain at m.yoursite.com)? Obviously, 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 (and even netbook, just in case folks still use one) 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. However, I feel that this might just be a matter of perception—the identical-content-across-multiple-URLs-is-evil rule generally applies to sites that copy content from other sites. Maybe search engine bots are smart enough to figure out that m.yoursite.com is an mobile-friendly variant of yoursite.com—in any case, as already mentioned earlier in this article, Google has often professed its appreciation for responsive web design, so adaptive design does lag a bit behind in terms of SEO.
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.
What do you think of responsive and adaptive web design models? More importantly, which one do you prefer and why?
Images: Stephanie Walter | Wikimedia Commons | Easy Readers
Sufyan bin Uzayr is a freelance writer and Linux enthusiast. He writes for several print magazines as well as technology blogs, and has also authored a book named Sufism: A Brief History. His primary areas of interest include open source, mobile development and web CMS. He is also the Editor of an e-journal named Brave New World. You can visit his website, follow him on Twitter or friend him on Facebook and Google+.
19 Comments