Desktop & Mobile vs. Responsive Websites. The Ultimate SEO Guide

We often hear that responsive websites are the ultimate way to create and maintain a strong presence online and to get the best results from your website in terms of higher traffic and conversion rates. And whilst I’m definitely an advocate for responsive web design from SEO point of view, there is still quite a bit of debate about its effectiveness, as well as the necessity of designing a responsive website for every business and every domain out there.

Desktop-Mobile-Responsive-Sites-Ultimate-SEO-GuideResponsive web design certainly does not necessarily meet all business requirements all the time, and there are certain advantages and disadvantages associated with having a dedicated mobile website versus having a responsive website design that immediately and automatically changes to suit all devices and screen sizes for mobile browsing with ease.

Continue reading to learn more about the pros and cons of responsive web design, as well as the steps needed for SEO optimisation if you decide to go with a responsive website or separate URLs for your desktop website and mobile website. Below are also some CSS tips that you can use when implementing a responsive design.

A LITTLE BIT OF HISTORY

Nearly a decade ago, mobile traffic caught the attention of UX teams, and more consideration was given to smartphone users who were surfing the web on small devices. Therefore, mobile versions of desktop websites began popping up like mushrooms everywhere you turned!

Consequently, there were numerous e-commerce sites that now had more to manage: a desktop website and its mobile equivalent. Since management of two separate websites required more resources and time, especially when it came to optimisation, the market needed an alternative solution.

In 2010, a new concept came to the rescue: responsive web design. The approach, which was first described by a Boston-based designer and developer named Ethan Marcotte, started a web design revolution. In his A List Apart article, Marcotte gave a great explanation of responsive web design, describing the fundamentals of flexible foundation fluid grids, flexible images, and implementation of the media query. If you haven’t read it, I strongly advise doing so.

In the most simplified way, responsive web design can be defined as a design that fluidly changes and responds to fit any screen or device size.

So what are the SEO implications and overall pros and cons of implementing either a responsive website or creating a dedicated mobile website to work alongside your desktop website?

DESKTOP AND MOBILE WEBSITES

Having separate mobile and desktop sites simply means that we have the same or similar content on two separate URLs.

NewLook--desktop-and-mobile-sites

NewLook.com desktop and mobile sites

What about SEO?

Since Google uses a single index to cluster mobile and desktop pages together (although Google is currently working on a dedicated mobile index), it is necessary to use metadata to send signals to Google to make it clear which mobile URLs are associated with their equivalent desktop URLs. Otherwise, we will end up with duplicate content in the Google index.

In other words, having separate desktop and mobile sites simply means duplication of efforts when it comes to on-page SEO, linking, and page rank. Also, separate sitemaps need to be created, and the websites have to be managed across separate accounts within Google Search Console (previously Webmaster Tools).

SEO implementation

In order to correctly pair mobile and desktop sites, a page level implementation across both websites is required.

Step 1: On each desktop page that has an equivalent mobile page, add a rel=”alternate” tag pointing to the matching mobile URL.

This helps Googlebot discover the location of your site’s mobile pages. Below is the code the rel=”alternate” tag that should be placed on the desktop page.

<link rel=”alternate” media=”only screen and (max-width: 640px)” href =”http://m.domain.com/mobile-page-no1/”/>

Step 2:  On each mobile page that has an equivalent desktop page, add a link rel=”canonical” tag pointing to the matching desktop URL.

Using the canonical tag will help Google consolidate indexing and ranking signals. The tag also prevents confusion about possible duplicate content between mobile and desktop versions of a page. Below is the code for the canonical tag that should be placed on the mobile page:

<link rel=”canonical” href =”http://www.domain.com/desktop-page-no1/”/>

 

Step 3:  302 redirect the desktop URLs to the mobile equivalent URLs based on user agent detection.

But do not overdo it! It is important to avoid irrelevant redirects: if the content doesn’t exist in a mobile-friendly format, showing the desktop content is better than redirecting to an irrelevant page.

Step 4: XML Sitemaps

When all 3 steps are done and you conducted on-page SEO on both websites, it is time for the sitemaps creation. You not only have to generate an entirely new mobile XML sitemap, but also update the current desktop SEO sitemap too!

Full instructions how to create mobile sitemap can be found on Google’s Add mobile URL information to a Sitemap page, whilst how to update desktop XML sitemap can be found here.

Step 5: Verify your mobile and desktop websites in Webmaster Tools and submit the sitemaps.

Now, you will need to verify your desktop site as well as mobile website in Webmaster Tools (aka Brand New Shiny- Google Search Console)  if it is on a different hostname than your desktop website.

Advantages & disadvantages of separate Desktop and Mobile Websites

Advantages

  • It gives a possibility to create a fully optimized mobile content- is your AOV (average order value) much higher on mobile? then you would definitely want to show more expensive items on the top of pages to your mobile users. With a separate mobile site, you can definitely do it!
  • You can simplify the design to achieve an easy to navigate website- let’s take as an example expedia.com. Would I really want to see the latest offers in Vegas on the homepage when I am in Notting Hill and search for a hotel nearby? Sometimes keeping a mobile site separately allows companies to simplify the design to make it easier for a user to browse or search!

Disadvantages

  • Additional server logic is required
  • More difficult to optimise for all devices and screen size- it needs to support different templates or markup for the different devices and the templates need to be constantly updated
  • Additional resources needed for mobile content management AND SEO (!) You have two separate web entities- that means building separate robots.txt, sitemaps and managing separate accounts within Google Search Console (previously Webmaster Tools).

RESPONSIVE DESIGN

Responsive design means that you will design just one website, and that single website will be able to automatically display perfectly as soon as it loads onto a large desktop monitor, a tiny smartphone screen, and everything in between.

JackWills--responsive-design

JackWills.com- responsive-design, same URLs

What about SEO?

As an SEO professional, I cannot praise responsive design enough because all of your SEO efforts are going into one domain, so there is no duplication of efforts when it comes to on-page SEO, linking, and page rank. Plus, Google rewards mobile-friendly websites with greater organic search visibility.

However, there are a few things that we still should consider when working with responsive design.

Browsers build the DOM of a web document, parse its tree to render its HTML, and then interpret the CSS. The front-end development of responsive websites almost always requires displacing content with CSS to adapt it to various types of screens. Therefore, it is important to try to place code and rendered content in the same order.

Also, no links, content, or menus should be hidden on different versions of the responsive design. Those elements should be positioned sensibly. The “display: none” or “visibility: hidden” options shouldn’t be overused. And the use of negative numbers to position elements off the screen is also viewed as bad practice from an SEO perspective.

Advantages & disadvantages of Responsive Design

Pros

  • It’s recommended solution and praised many times by Google
  • No additional server logic is required
  • It’s very flexible as it works across all devices
  • No additional resources needed for mobile content management as Information architecture is the same

Cons

  • The same information architecture- you cannot fully optimise content just for the mobile audience
  • JavaScript control – you would need to have in mind JavaScript events like hover or click since the newest devices prompt the user to touch, tap, swipe etc.

Summary

I personally do not believe that responsive design is the definitive way to go for every website. There are too many factors outside of SEO that need to be taken into account when deciding upon the best approach. However, from an SEO point of view, I would love to see only responsive websites out there, as it would make our lives much easier!

Finally, since the end user should be at the centre of everything that we do, should we really serve all of the content that is found on advanced desktop websites like Booking.com or NewLook.com to a mobile user? Wouldn’t mobile users become overwhelmed with the amount of information they would have to go through while browsing the web’s advanced sites on small mobile devices? I think this is something we should definitely consider as well.

Do you have questions, comments, or thoughts on this subject? If so, feel free to leave a message below!

Like this post? Sign up for my monthly newsletter!

Learn how to attract a relevant audience to your websites.

Mags Sikora

I'm Mags, an SEO Consultant, London