Mobile Web Design Approaches You Need to Know

As smartphone use has become increasingly common, so have mobile-optimized websites.

Online companies are often confronted with having to choose between three different mobile web design approaches: responsive, dynamic serving, and separate mobile web design. Determining the best choice is not always simple or obvious, as it largely depends on the particularities of a company’s existing infrastructure, as well as each stakeholder’s department goals. Furthermore, very few people understand the differences between these mobile web design approaches, or even know that these three approaches exist. The purpose of this blog post is to help the non-technical people understand these differences and choose the approach that works best for their purposes.

Having said that, we’ll start by describing the three approaches. Then we’ll cover how to determine which approach a site uses. Lastly, we’ll summarize the fundamental differences between the three approaches.

What are the three main web design approaches available to businesses that want to go mobile?

  • Responsive web design (RWD)
  • Dynamic serving (aka adaptive web design, AWD)
  • Separate mobile site (aka dedicated, parallel, or custom mobile sites)

As you can see, multiple names are used to refer to the same web design approaches, which makes this matter even more confusing. To keep it simple, let’s start off by addressing the standard terms for each web design.

What are the standard terms used for each web design approach?

Responsive web design or RWD is the standard term for the first mobile web design approach. Dynamic serving and adaptive web design (AWD) mean the same thing. However, dynamic serving is the standard term used by Google. Dedicated mobile sites, parallel mobile sites, and separate mobile sites also mean the same thing. In addition, a separate mobile site is the standard term used by Google.

The most effective way to understand the differences between each approach, in our opinion, is to find out which mobile web design approach a site uses.

Below is a diagram (click to enlarge) to help you determine the web design approach used by a site. It is meant for non-technical users to understand the basic differences between these approaches.

 

web-design-approaches-map

However, it is also important to note that web design capabilities aren’t restricted based on their URL formats. A site can have a separate domain but also deliver a responsive experience or a site can be dynamic serving but also deliver the same content as the desktop site.

Question 1: Does the site optimize on how you adjust the browser window? How can you tell?

Step 1: Go to a company’s desktop site on your browser.

home-depot-1

Step 2: Decrease the size of your browser, so that its shape roughly matches the rectangular shape of a smartphone:

home-depot-2

home-depot-3

Notice how the elements on the screen aren’t optimizing? The contents on the homepage are also cut off. This means that the site is not using responsive web design.

Answer to question 1: Since the site is not responding to the screen size to which it’s being adjusted in the diagram above, we can answer “no” to the first question. We then must answer the next question, by determining which URL format is being used across mobile and desktop.

Question 2: Does the URL change between desktop and mobile? How do you find out?

Step 1: Open a new tab on your browser. For this exercise, it’s recommended you use Chrome or Safari.

Step 2: For Chrome, click on the hamburger menu icon shown at the top right corner of your browser, then click on “More tools”, then “Developer Tools”. You can also use the keyboard shortcut: Command + Option + i (for Mac) or Control + Option + i (for PCs).

Chrome browser developer tools:

chrome-1

For Safari, you need to go to Safari’s preferences, select “advanced,” and check the box labeled, “Show Develop menu in menu bar”:

safari-1

Click on the emulator at the bottom and select the device type:

emulation-1

emulation-2

Step 4: Type “google.com” in the URL bar, and hit “enter.” If you already have it in the search bar, hit the refresh button to load the mobile optimized version.

Step 5: Wait for Google’s mobile optimized site to appear (it should have the hamburger menu icon ). Google the company you used in the first question. In this example, Google, “Home Depot.”

emulation-3

Step 6: Look at the URL in the relevant result. If the URL is different than the URL used for the desktop site, then it’s a separate mobile site. Pay particular attention to the use of a subdomain, such as “m.” or “mobile.”

Answer to question 2: Yes, it’s using different URLs for mobile and desktop. Therefore, it’s a separate mobile site.

Now, let’s try another company. Which web design approach do you think Express uses? To find out, we need to follow the steps shown in the diagram above.

Question 1: Does the site optimize according to the browser window’s size?

Step 1: Go to the site on your desktop.

express-1

Step 2: Decrease the size of your browser, so that its shape roughly matches the rectangular shape of a smartphone:

express-2

express-3

Answer to question 1: Yes, it’s optimizing according to the browser window’s size. Therefore, it’s using a responsive web design approach. Notice how the site’s hamburger menu icon appears at the top left. It disappears and reappears, as you adjust the browser window’s size. The entire site is easily navigable, despite the adjusted size of the browser window. It is also using the http://www.dot URL format for this layout.

Let’s try one last company. Which web design approach is Best Buy using?

Question 1: Does the site optimize according to the browser window’s size?

best-buy-1

best-buy-2

best-buy-3

Answer to question 1: No, it’s not optimizing to the browser window’s adjusted size.

Question 2: Does the URL change between mobile and desktop?

Answer to question 2: No. While using the emulator feature in Chrome’s developer tools and performing a Google search on Best Buy, it’s showing a http://www.dot domain instead of an m.dot domain in the search engine results page (SERP) on mobile:

best-buy-4

Question 3: Is the site optimized for mobile?

Answer to question 2: Yes, it’s easily navigable from a mobile device. Because the desktop site doesn’t optimize according to the browser’s window screen size and is using a single URL across mobile and desktop, Best Buy is using dynamic serving as their mobile web design approach.

This Venn diagram outlines the key differences between the three mobile web design approaches:
venn-diagram-website-design-approaches

There are several steps involved in this process, which is why it can be difficult to understand. Now that you’ve learned how to determine if a site is using a dynamic serving, responsive, or separate web design approach, you might want to solidify your understanding, by seeing if you can find out which web design approach is being used by the following companies:

  1. Yahoo
  2. Williams-Sonoma
  3. JC Penney
  4. American Eagle
  5. Neiman Marcus
  6. Toys “R” Us
  7. Starbucks
  8. Overstock
  9. Macy’s
  10. Sony Netflix

Check your answers by using our friend’s, Pure Oxygen Lab’s mobile site analyzer: http://mobile-tools.pureoxygenlabs.com/mobile-page-audit/ 

Which web design approaches do you like and why? Write your responses below!

This entry was posted in Mobile. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s