Ultimate Guide to Responsive Design and SEO

Responsive web design is not only the largest current design trend to hit the internet, but it’s also the most important design method to simplify managing a website and boosting user performance. A responsive design eliminates the need to have multiple designs to accommodate different devices, such as desktops and cell phones, as the website automatically adjusts to each device. With more than 20 percent of all Google searches originating from a mobile device, it’s imperative your website is suitable to support mobile searches by being easy to navigate to increase user performance.

Does a Responsive Design Help SEO?

Admittedly, Google prefers responsive designs as they are more efficient for bot crawling, indexing, and organizing website content. Now, instead of having one website for desktop and one for mobile devices, a responsive site has one URL and the same HTML across all devices; thus, eliminating the need for Google to index and crawl multiple versions of the same website.

In addition, the new design trend boosts user performance as users are better able to share, engage, and interact with the content. With your users happy, Google stays happy, giving a responsive site a higher ranking, which often have a lower bounce rate. Your SEO will benefit from this as errors with external linking and on-page will decrease, which are common when having to use separate sites for different devices. Plus, responsive sites show to also improve conversion rates, allowing you to stay ahead of your competition and boost your ranking.

Google’s Matt Cutts recommends using a responsive design, stating “It’s the smarter way to go for SEO” when compared to a mobile site because everything is handled from one URL instead of dividing the Page Rank between two sites. Essentially, there are just fewer drawbacks to using a responsive site as it’s simpler to eliminate split Page Rank, duplicate content errors, and it’s easier to manage.

Are Conversion Rates Impacted By Responsive Designs?

With user performance increased due to responsive design, websites are noting an increase in conversion rates. Large companies like State Farm and Career Builder all report dramatic increases in their conversion rates upon switching their site designs. In fact, State Farm tweeted their conversion rate went up on all devices by 56 percent, while Career Builder tweeted their conversion rate spiked more than 20 percent.

What’s driving the increased conversion rates? Well, we all know users will leave a mobile site within seconds if it doesn’t perform correctly. Therefore, a responsive site will keep your users from turning to your competitors as they can easily use your website; thus, improving conversions, sales, and revenue. As an example, the clothing brand O’Neill Clothing released the results of their metrics after 3 weeks of switching to a responsive design. During that time, their conversion rates for the iPhone/iPad increased by almost 66 percent, while their conversions from Android devices went up 407 percent. As a result, their transaction from the iPhone/iPad went up nearly 113 percent and 333 percent for Android. Both of these factors led to a drastic revenue increase of 101 percent among iPhone/iPad and 591 percent via Android.

O’Neill Clothing isn’t alone in achieving huge conversion increases. Companies large and small report their responsive designs reign far superior when compared to their separate desktop and mobile designs. With the increased conversion rates and promoted user experience, your ranking is bound to increase over your competitors.

How Do I Convert My Website to a Responsive Design?

To convert your current site to a responsive design, you have a bit of work ahead of you. If you’re lucky, you’ll only need to change your template or install a PlugIn if you use sites like WordPress. However, even with these two options, there will be some customizations you’ll need to make.

To create a responsive design, you’ll need to change your layout to include fluid pages, flexible images and grids, and CSS3 to allow your website to adapt to any screen size and browser. You will need to use a single code that holds the ability to adapt your site instead of a separate code base for each device.

To begin developing your fluid layout, you’ll need responsive design CSS frameworks, which are fully responsive to allow developers to use and test a number of screens and devices.

After you have a framework, you’ll need to decide if you’re going to use a new template altogether or update the existing code. Starting from scratch in more time consuming; however, updating your new code can be tricky as you’ll need to remove unnecessary HTML markup, CSS, and JavaScript that becomes irrelevant due to the new framework you’re working with. Should you leave these aspects in, it will make your site’s weight heavier, causing the potential to slow your site’s speed. You’ll need to fully go through your code and replace any areas that aren’t relevant to a responsive theme.

If you decide to start from scratch, you’ll need to add your CSS framework and JavaScript files to your new template. Then, you can copy over existing images, global styles, colors, link styles, Jquery, custom JavaScript files, etc, with the exception of the code that doesn’t relate to a responsive template.

With either method, you’ll need to clean up the look as there is a tendency for sites to be a little chunky looking or the grids to not align correctly. You’ll also need to address any navigation issues and determine which elements to display on mobile devices and customize the sizes.

What Happens to My Mobile Site’s Subdomain?

Chances are if you have been using a desktop version and a mobile version of your website, you probably have your mobile site on a sub domain. Upon switching to a responsive design, the sub domain will no longer be needed.

Here’s what Google suggests to move two URLs into one:

1. Remove the redirects and the Vary: user-agent HTTP header you had on your desktop URL for smartphone users (if used).
2. Remove the bidirectional annotations if you used to have them on your desktop and smartphone URLs.
3. Redirect your separate smartphone URLs to your desktop URLs using server-side 302 HTTP redirects (we recommend not using JavaScript redirects). Make sure that Googlebot can crawl these redirects and is not blocked by robots.txt directives. You can use the “Fetch as Google” tool in Google Webmaster Tools to test it.
4. Set up the new page layout or redesign on your main site, and make sure we can crawl important files such as CSS, JS and images so that we can recognize that the website is responsive.

Or, if you have multiple mobile URLs that you need to consolidate into one URL, Google advises that you use dynamic serving:

1. Remove the redirects you had on your desktop URL for smartphone users (if used).
2. Remove the bidirectional annotations if you used to have them on your desktop and smartphone URLs.
3. Redirect your separate smartphone URLs to your desktop URLs using server-side 302 HTTP redirects (we recommend not using JavaScript redirects). Make sure that Googlebot can crawl these redirects and is not blocked by robots.txt directives.
4. Set up a Vary: user-agent HTTP header (if you don’t already have it) on the destination URL to tell Googlebot for smartphone to crawl your pages and thus recognize the smartphone-friendly nature of your site. The Vary: user-agent header will help serve the appropriate content to your users according to their user-agent.
5. Update your user-agent string and add Googlebot for smartphone. Keep in mind that Googlebot for Smartphone user-agent identifies itself like an iPhone. Treat it as so.

Be sure to keep an eye out for any blocked page assets, blocked redirects, or faulty redirects when consolidating your URLs.

Responsive Design for SEO, 6 Reason you Need to Switch

Google says that there are three options for mobile SEO. Those are mobile site and desktop site, vary http header and responsive design. They are very clear to state that all three can rank equally well in the search engines. Well, to some degree this is true. But I have 6 reasons why I really think you should be switching to responsive design, opposed to using these other methods. And here we go…

One URL is Better Than Many

Social shares, external links, reviews, citations, whatever the external ranking factor for SEO, it is better to have one URL that is enjoying the benefit of those external signals. If you have multiple URLs, as is the case with the separate mobile site option, those factors are split between two different URLs. In some cases, people will link to the mobile page and in others the desktop page. Now, if you set up the optimization correctly then those URLs can be mapped and share those signals, however, there is always a little bit lost when rel canonical and/or redirecting that is does not even come into question when you have one responsive URL. You also don’t need to worry about potential technical errors in your mobile mapping.

No Bi-Lateral Redirects

When you use the vary http header or a separate mobile website you have to make sure you detect the device and serve the correct version of your site. When a user on a mobile phone lands on desktop they need to be redirected to mobile and vise versa. When looking at large websites, this can be hard to do and it requires a good amount of work. With responsive design, the screen simply changes based on the device width and you don’t need to deal with this tricky process.

No Missing Mobile Pages

On very common issue that arises with vary http header and having a dedicated version is there are often certain pages on the site that are not mobile ready. When there are not corresponding pages, that causes the site to lose rankings for the terms that the desktop page is going after in the mobile results. With responsive, generally all the templates are built on a framework that is integrated, meaning every page has a mobile equivalent. It is so nice to have this be the case and not have to create 2 pages opposed to just making one new page that works for everything.

Same SEO Framework and Code

With a responsive site, you have the same code between mobile and desktop. This means you can keep an eye on one implementation and have a better grasp on what Google is indexing for SEO. When it comes to large websites, it can be very hard to manage all the technicalities of the site. One set of responsive code saves hours of Q&A time.

One Webmaster Tools Account

If you have a separate mobile website, you need to set up and maintain two Google Search Console accounts. This gets really tedious. You are constantly working on two sites and have to adjust for this in your workflow.

Plan for the Future

I really feel like responsive design is the best technology for a website. I have seen very large sites implement responsive and small, so it is certainly possible for any domain. This technology was invested by Cameron Adams in 2004 and has since become the go-to way to build a domain. I recommend everyone work towards moving their websites in this direction.

Sources:

• “How Important is Responsive Design?” By John Rampton Huffington Post
• “14 Brands that Increased Conversion Rates Via Responsive Design.” EConsultancy

Updated 8-14-2015