Spare a moment for the poor web designers of today. In the past, all they had to do was optimize website designs for desktop computers. Sure, they had to deal with browsers like Internet Explorer 6 breaking their designs, but they only had to ensure that their designs looked good on one type of device.
Today, things are very different. People are now connecting to the internet using laptops, smartphones, tablets, gadgets, video game systems, and even their television. This has led many to state that we live in a “Post-PC World”. Those who still prefer to connect to the internet using desktop computers are viewing the internet on much larger screens than ten years ago, which is why many websites have increased the width of their designs.
Adaptive Designs
Designers have had to adapt to these changes in habits to ensure that websites look great on all devices. There are two main approaches to dealing with this. One is to create a responsive design that looks the same on all devices. The other is to create an adaptive design that is catered for every device.
I realize that most WPHub readers are not designers, however, the issue of whether you use a responsive or an adaptive design is something that all website owners need to consider. Therefore, I hope you stay with me as I look more into these two design concepts and examine the pros and cons of each one.
Responsive Web Design
Responsive designs all people to view your website across all devices with the same design. The design will adjust itself automatically for people on smaller devices. For example, on a desktop computer the website may be shown with three columns of content, however this may adjust to two columns for tablets and one column for smartphones.
This type of design is being adopted by many WordPress theme designers. If you check the WordPress section of ThemeForest you will see that most new designs are responsive.
The magazine design Gonzo is a good example of this. On tablets the design seems like a scaled down version of the desktop version, however when someone views the design on a smartphone, all content is placed in one column.
Web designer Ethan Marcotte is credited with creating the concept of responsive web design and his book of the same name has become the standard reference on the subject.
Responsive designs are created using the CSS3 @media rule. This allows you to create different rules for different devices. By using fluid grids and percentages for widths, designers can create a design that changes to the right size for each device.
Pros
- Same Experience for Everyone – Mobile users will see a slightly different layout from desktop users, however by and large everyone viewing your site will get the same experience.
- Less Maintenance – Multiple designs take more time to update. By using a single responsive design, you can reduce the time you spend updating your designs.
- Everything is on One URL – Desktop, tablet and smartphone users will all view a page using the same URL. This is better for social media sharing and optimising search engine rankings. It also means that your stats will not be split up for different versions of your website.
- It’s Google Friendly – Google went on record at the end of last year stating that they prefer website owners to use responsive designs. They noted that: “Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.”
Cons
- Website Performance – Loading times are the biggest concern of responsive designs. When someone loads a web page with a responsive design, they load the information for all devices, not just the one they are viewing your website on. Images are a concern too. Most designs simply scale down the size of an image. Therefore, smartphone users may download an image of 1,000 by 1,000 pixels in width, despite it being scaled down to 250 by 250 pixels on their device.
- Integrating Advertisements – It is more difficult to integrate advertising effectively into a responsive design as ads have to fit nicely into all resolutions.
- Sacrificing Functionality – A lot of sacrifices have to be made when using one single design for all devices. For example, you will have to compromise your reader’s desktop experience to ensure that the experience for mobile users is not hindered (and vice-versa).
From a SEO and consistency point of view, responsive designs seem like the best option. It is not the best solution for users with slow connections though it does mean you do not need to maintain different versions of your website.
To learn more about responsive designs, please check out the following articles:
- Responsive Web Design – A List Apart
- What The Heck is Responsive Web Design? – John Polacek
- How the Boston Globe Pulled Off HTML5 Responsive Design – ReadWrite
- How to Approach a Responsive Design – UpStatement
- 20 Best Responsive Web Design Examples of 2021 – Social Driver
Adaptive Web Design
Rather than use the one design for all devices, adaptive designs are catered for each user’s device, screen size and operating system. The concept was developed by Aaron Gustafson, who wrote the book of the same name.
Adaptive designs generally require more work, however it ensures that each visitor gets the best experience possible. Derek Olson wrote a great article on Foraker in which he detailed why his client Breastcancer.org wanted an adaptive design. Specifically, they wanted to increase engagement with mobile users and give them a better user experience.
If you visit www.breastcancer.org, you will see their full website design. You will notice that the bottom of each page has a link to “View Mobile Site”.
The mobile website is located at m.breastcancer.org. The design is tap-friendly and pages load much quicker than it’s desktop equivalent. The navigation is simplified too.
Like the full version, the mobile design has a link at the bottom that links to the alternative version. This is useful for tablet users who would rather view the full website.
It is easy to see the benefits of using an adaptive design. It requires two or more completely different designs to be created, though this allows you to create the best experience for users.
Pros
- Best Experience for Everyone – When you optimise the experience for desktop users and mobile users individually, you can ensure that each user gets the best experience.
- Fast Loading Times – Users will only load the version of the website that they are viewing. Smartphone users will really notice the difference in speed as mobile designs tend to be simplified versions of their desktop equivalents with few images and basic navigation.
- Advertising Monetization – More and more designers are working towards optimising advertising options in responsive designs, such as replacing 728×90 banners with 468×90 banners in smaller resolutions. In my experience, it is still very limiting. If you want to monetize your website in the most profitable way, you need to use an adaptive design that is catered for the device it is being viewed on.
Cons
- Bad for Search Engines – Two different designs means that there each article/section has two separate URL’s. In the example given previously, the symptons section is located at www.breastcancer.org/symptoms on the full website and m.breastcancer.org/symptoms on the mobile website. Search engines do not like identical articles being on different URL’s, therefore your traffice may be reduced as a result of this (though I have not seen any case studies on this issue that verifies this).
- Cross-Linking – Linking internally becomes difficult when you have more than one version of your website. Do you link to the full version or the mobile version of your article? You may have to set up redirects so that someone who clicks on the full article from the mobile design is redirected to the mobile version of the article.
- Stuck in the Middle – Mobile users usually find the mobile-optimized version of a design to be easier to navigate, however tablet users may not. It really depends on the device. Tablets generally range from 5″ to “11 in size. Those with smaller screens may prefer the mobile version of your website whilst others will prefer viewing the full version of your design. BreastCancer.org did the right thing by adding a link in the footer of each design that allows the user to change what design they are viewing. However, this does not stop a user from landing on the wrong version in the first instance.
A useful website that illustrates the difference between responsive and adaptive designs is Liquidapsive. It allows you to see how the one design would look if it was designed in a responsive, adaptive, liquid or static way.
Check out these articles for more information about adaptive designs:
- Beyond Squishy: The Principles of Adaptive Design – Brad Frost
- Five Reasons We Are Developing in Adaptive Design in Conjunction with Fluid Layout – RevSquare
Overview
The key thing about responsive and adaptive designs is ensuring that your website is optimised for everyone, regardless of the device they are using. I can see many benefits of using adaptive designs on smaller websites or on websites where you want to give mobile users a unique experience.
For my own projects, I believe that responsive designs are the most practical solution, as I do not need to maintain multiple versions of my websites. It does, however, come down to your own preferences and your goals for your own project. You may find creating a unique mobile design increases your traffic and engagement from mobile users.
To read more about the differences of responsive and adaptive designs, I recommend the following articles:
- Choosing Between Responsive Web Design and a Separate Mobile Site to Improve Mobile Visitors’ Experience – Foraker
- What is the difference between responsive vs. adaptive web design? – Tech Republic
- The Two Flavors of a ‘One Web’ Approach: Responsive vs. Adaptive – Web Monkey
- Responsive vs. Adaptive Design: Which Is Best for Publishers? – Huffington Post
If you enjoyed this article, I encourage you to subscribe to WPHub via RSS, Facebook, Twitter or Google+. It’s the best way to ensure you never miss an article 🙂
