Responsive Design Vs. Separate Mobile Website

Why Responsive Web Design (RWD) is generally the best choice.

This post will look at the pros and cons related to building a mobile website using responsive web design (RWD) verses building a separate mobile website. I’ll declare upfront that in most cases, I’m in favor of the RWD approach. And, I’m not alone.

  1. Google recommends RWD over building websites with separate URLs for mobile and desktop devices.
  2. Mashable has declared 2013 the year of Responsive Web Design.

If you want to bypass the technical mumbo jumbo and get right to my conclusion, go straight to the bottom of this post.

How does RWD (Responsive Web Design) work?

In the header of a typical HTML document that uses CSS, you’ll find a link to a stylesheet. A stylesheet basically defines the look of a site, for example, font, margins, columns, image size, etc. In RWD websites, the link to the stylesheet is modified to add media queries.

Wikipedia defines media queries as follows:

Media Queries are a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen).”

Referring to the above image, you can see how media queries are used to serve different stylesheets based on screen width.

  • <link rel=“stylesheet” media=“screen and (min-width: 0px) href=“small.css”>
  • <link rel=“stylesheet” media=“screen and (min-width: 1200px) href=“medium.css”>
  • <link rel=“stylesheet” media=“screen and (min-width: 1500px) href=“large.css”>

In each of the above three lines of code, notice that the media type is defined as “screen” (verses print or a handful of other options), and that each line includes a conditional expression based on a minimum screen width. There are many other options for conditional expressions that I could have used here, but let’s keep it simple…  

So in the above if:

  • Screen width = 0 to 1199 pixels –> use the small.css (mobile phone)
  • Screen width = 1200 to 1499 pixels –> use the medium.css (tablet)
  • Screen width = 1500 or more pixels –> use the large.css (laptop or larger)

Pretty simple, right?

Separate mobile website

Separate mobile websites are exactly that – a separate site. That means different code for each different site and separate content for each site too – images, text, etc. While there are a few ways to go about creating separate sites, most people build out subdomains for the mobile version of their site. For example:

Google recommends using both the rel=”alternate” and rel=”canonical” meta tags to tell them which URL they should display and under what circumstance it should be displayed. This helps to avoid duplicate content issues.

Referring to the figure above:

    • rel=”alternative” tells the search engines that an alternate URL exists.
    • max-width defines the conditions under which the alternate URL should be displayed – in this case for screen resolutions 640 pixels or less.
    • Provides the location  of the alternate URL (href).

The canonical tag on the mobile version of the site simply tells the search engines that the page has a preferred URL.

Note that the above example shows how rel=”alternate” and rel=”canonical” can be used in HTML. Alternatively, they can be used in an XML sitemap too – see the above link to Google for more details.

Why does Google recommend RWD?

  • RWD delivers a single URL (piece of content). This makes it easier for users to interact, share, and link to your content. If you create separate desktop and mobile versions of your site and a mobile user shares a mobile link, desktop users will become frustrated when they try to view the mobile page on their desktop machine.
  • A singe URL makes it easier for Google to more fully index your content. Since getting indexed (by the search engines) is half the battle when optimizing for organic search engine traffic, it makes sense to do everything you can to get as many of your pages in the index as possible.
  • Duplicate content is bad for search engine ranking.  In a post-Google Panda world, most webmasters try at all costs to avoid duplicate content and the resulting loss of organic search engine traffic. If the above mentioned redirection attempts don’t work properly, you’ll likely learn this the hard way. I recently spoke with a site owner who lost 70% of his organic traffic because of duplicate content. Take this issue seriously!
  • Development is less expensive – you only have to develop a single set of code.’

Why do I recommend Responsive Web Design?

  • It’s easier to build and maintain. That means it’s cheaper to build and maintain too. 
  • You only have to manage a single set of content. Version control can be a big problem, but it can be avoided with RWD. Having multiple sets of content leads to customer confusion. If both the desktop and mobile version of your site have 500 pages and annually you update 20% (100) of those page, you would have quite a task trying to keep your content in sync. Imagine the customer service issues you’d have if they find your content out of sync. The problem gets worse with bigger sites. For this reason alone, it is often not practical to create multiple versions of your site.
  • With responsive design, you reduce potential SEO issues like low indexation and the elimination of duplicate content.
  • Google says so.

When wouldn’t Responsive Web Design be the best approach?

Consider a separate mobile website when the way mobile users will use your website is vastly different than the way desktop users use the site. In this case, you may want separate content served to different users based on their screen resolution. Be careful here, choose wisely.