What are the differences between RWD and AWD

With the mobile devices becoming the everyday device of choice for web browsing, as stats from ExplodingTopics states on March 2024: Over 60% of website traffic comes from mobile devices and 92.3% of internet users access the internet using a mobile phone, it’s without a doubt we must go “mobile-first”: websites must be more compatible with smaller screens.

Table of Contents

Intro

Important note before you continue

Please note that Desktop Experience is also important, and shouldn’t be neglected, but always mobile before desktop considering it’s much easier to optimize and develop a desktop site.

Google officially announced emphasis on “mobile usability via page experience” started back in November 2020, and if your website is designed for mobile devices, it has a better chance of ranking higher in search results pages. Though they also officially announced they will bring “page experience ranking to desktop” starting February 2022, you can see how Google prioritized Mobile-first over desktop.

Currently, the common website design methods are RWD (Responsive Web Design) and AWD (Adaptive Web Design). RWD is newer and replacing AWD, but AWD is still important in some cases.

With this in mind, let’s talk about what RWD and AWD are, as well as the differences between the two.

What is RWD (Responsive Web Design)?

RWD – One version to serve them all, and requires more technical knowledge comparatively to optimize.

In this era where everyone has a mobile device, almost everyone uses their phones to browse the internet. The term RWD, Responsive Web Design, was introduced by Ethan Marcotte in 2011, emphasizing that the same website design should be easily browsable on different devices (desktop, tablet, and mobile).

In RWD, the most important thing is to set the browser control and loading scale in the viewport:

This means specifying the screen width as the device width, with the initial scaling of the screen at 100%, preventing the page from breaking.

Next, through CSS3 (Cascading Style Sheets) media queries, adjustments are made to the layout or content at appropriate breakpoints (media query), which are usually changes in the font sizes and block sizes on the page or resizing of images. This provides a consistent experience on the page.

The basic principle of RWD is to use CSS3 media queries to change the content of the webpage:

Example of using CSS to set breakpoints in RWD designs

Finally, decide on how to change to “respond” to different screens, such as content rearrangement or block movement, etc., allowing for smooth transitions between different devices.

What is AWD (Adaptive Web Design)?

AWD creates multiple versions of the same site specifically for different devices. Optimization is not as difficult but more consuming.

Adaptive Web Design is an earlier design approach than Responsive Web Design, Instead of having one site, you basically duplicate that site and adjust contents for different devices. And as the website loads, it recognizes the device you’re using and provides corresponding versions of the website for different devices.

About the screen sizes

Typically, there are six sizes, from extra small (XS) to extra large (XL): 320px, 480px, 760px, 960px, 1200px and 1600px.

But these sizes are now slightly different as technology evolves: 320px, 480px, 768px, 992px, 1200px and >1201px (1280px, 1440px, or 1600px, depending on the site contents).

Some companies still use this design, for examples, Amazon and USA TODAY. The former is a shopping website with tens of thousands of products, the latter is a news website with tens of thousands of news. This design approach allows for customization based on the characteristics of the device, providing a better user experience.

Global hospitality powerhouse IHG Hotels & Resorts used to use AWD, now it uses AEM (Adobe Experience Manager) as CMS, which is like a blend of the two: they still have different versions of the same site, but now more responsive due to AEM’s headless CMS functions.

However, in reality, both in terms of design or maintenance, adaptive design is more labor-intensive, and backend management may require two or more versions (Desktop and Mobile to say the least). Therefore, before adopting this design, it is necessary to evaluate whether there is sufficient manpower and time for maintenance and operation.

Comparing RWD and AWD

Before deciding which design is better, let’s compare the differences between the two designs:

Web Design	RWD	AWD
Full Name	Responsive Web Design	Adaptive Web Design
Common URL Format	Only www	Used to be www and m versions, now almost all redirected to show only www
Development Cost*	Lower (1 site)	Higher (two or more versions of the same site)
Loading Speed*	Mediocre to slower	Faster
Design Advantage	Only one URL is needed to satisfy different devices	Can provide optimized experiences for computer or mobile versions
Design Limitations	Design needs to consider multiple devices from the start, requiring more research time and development skill	Needs to maintain two or more versions simultaneously, updates or upgrades must be done in sync
Applicable Cases	Corporate image websites, brand websites, etc.	Large comprehensive or complex system websites (e-commerce for example)
Possible SEO impacts	Single URL page, strategies can be applied consistently	May have issues with duplicate content

*indicates relative comparison of the two only

Which web design is recommended?

When deciding which design to use, I recommend evaluating from three aspects: Website Type, Maintenance Capacity, and Budget.

1. Website Type

When deciding which design to adopt, first determine the type of your website. If it’s a large shopping website with complex system functions, or News website with lots of contents, AWD might be a better choice, as it can provide a better experience on mobile devices. However, if it’s a general corporate website aimed at building a good image, RWD would be the better choice, as it allows for consistent visual design across different devices, maintaining brand consistency.

2. Maintenance Capacity

The amount of capacity, most notably the manpower and time available for maintenance is also an important consideration. If there is a dedicated team or sufficient manpower for product listing and operations, AWD can be recommended for smoother maintenance of two versions of the website. However, if there are only one or two people managing the website and frequent content updates are needed, RWD would be the best choice for the company, as it allows for synchronized maintenance.

3. Budget

Budget is a key factor in choosing AWD or RWD. If the budget is sufficient, a more comprehensive system and functional website can be built, and AWD can be chosen. If the budget is limited but three versions of the website are needed, RWD is a more cost-effective choice, which is why RWD is becoming increasingly popular.

Since Google prioritizes mobile content for indexing and ranking, it recommends responsive web design for mobile devices. In the article on responsive web design, Google mentions the benefits of using RWD, and here are some additional points on its benefits for SEO.

Why is RWD more SEO-friendly?

1. Single URL

Using a single URL helps users recognize the content of the page and improves the relevance between the URL and page content.

2. Easier to Index

Using the same set of web page text, Google can more accurately assign indexing attributes to the page without sending additional messages to indicate which page is for desktop or mobile.

3. No Need for Redirection

When switching between desktop and mobile versions, there’s no need for (additional complicated) redirection, saving loading time and improving user experience.

You already have https://www.example.com, https://example.com, http://www.example.com, and http://example.com that you have to deal with, imagine adding subdomains like m.example.com and wap.example.com in the mix. (Fun, right?)

4. Saves Crawling Budget

Crawl Budget is real, I’d say at most 70% of your contents are crawled (for medium to larger websites), and there are definitely some pages you don’t want Google to index.

When GoogleBot crawls RWD pages, it can index different versions of the page content more quickly without needing to re-crawl based on different versions, improving crawling efficiency and allowing GoogleBot to crawl more page content.

5. Lower Maintenance Cost

Web designers or engineers only need to maintain a single version, without spending extra time on other versions. But keep in mind that the development needs careful planing and knows how to execute RWD correctly.

6. Reduces the Chance of Errors on Mobile Websites

Compared to AWD, RWD can reduce issues such as mobile pages not being indexed, needs proper redirection, or slow loading speeds among different versions. Most of the time, if your mobile experience is optimized, chances are your desktop experience will be just as good if not better.

Common SEO Questions for RWD

Below are some common SEO questions for responsive web design.

Q1: Will using RWD guarantee a good website ranking?

Although Google recommends it, it doesn’t guarantee a top ranking. Many factors affect website ranking. Using responsive web design may give your website a head start, but optimizing website speed, external links, and rich content is still necessary to compete for a good ranking.

Q2: Will using RWD ensure that Googlebot’s crawling and indexing are problem-free?

Official statements say that using RWD can save crawling budget and increase crawling efficiency, but it doesn’t guarantee smooth crawling. It’s still necessary to check if the server is blocking bots, check if your robots.txt is not blocking anything, check if pages have noindex tags, and to further check in Google Search Console for unindexed pages and why.

Q3: How to evaluate RWD?

To assess the website experience of RWD, you can check the website experience in Google Search Console or use tools like PageSpeed Insight and Lighthouse to confirm the status of the website.

Q4: If the website currently uses AWD, is it recommended to switch to RWD? Will this be more helpful for SEO?

When considering switching from AWD to RWD, it’s important to assess whether the change can meet the company’s needs in terms of system functions. If the change will cause maintenance difficulties, it’s recommended to stick with AWD. However, if there won’t be any negative impact (given you know what to do to make the change), then consider switching to RWD. Regardless of the design choice, SEO strategy still requires time and effort to provide good content and products, allowing the website to be competitive.

Conclusion

RWD (Responsive Web Design) and AWD (Adaptive Web Design) are the most common approaches, each with its own benefits and considerations for achieving optimal mobile compatibility and search engine ranking.

RWD is newer and harder to develop, but easier to maintain overtime. AWD is older and easier to develop, but harder to maintain and needs more attentions and efforts. While RWD is suitable for almost every website, AWD is more ideal for complex and comprehensive websites, like shopping websites.

In conclusion, as mobile usage continues to rise, websites need to adapt to various screen sizes, with Google prioritizing mobile page experience over desktop, and over 60% of web traffics comes from mobile, you can see why Mobile-first is important.