BowlerHat is a Local SEO consulting & SEO
Audit
company that helps you win online

Responsive Web Design, Mobile Sites & SEO

responsive web design on several devices Google has provided us lowly web developers and SEO’s with some recent recommendations for creating mobile sites that are SEO friendly. Given the recent and continuing boom in smart phone ownership all website owners need to sit up and take note of the current recommendations for responsive web design and SEO and make sure their sites are performing as well for mobile as they are for computers.

This article will give you an overview of the best practices for mobile and smartphone design from a search engine optimisation and user experience perspective. We will provide a quick overview of benefits, costs and options to get responsive! 

Mobile Site Options

When building sites targeting mobile phones, or smartphones in particular (as most mobiles now fall into that category, except my dads, but that’s a whole other story), you have three main options:

1. Responsive Web Design – this is a new style of design that returns the same content but formats it for the specific device so the experience, in theory, is as close as possible and the content is the same. This is Google’s currently recommended configuration (1)

2. Device Specific HTML – this is returning a different set of HTML on the same URL specifically for mobile devices. Often peripheral elements of the page will be left out and only the main content will be returned. The content returned should be equivalent to the desktop experience so any elements removed should be peripheral.

3. Separate Mobile Site – a completely separate mobile site on a different set of pages. This is not recommended. 

Responsive Web Design & SEO

Ultimately, if you want to generate traffic from search, it makes sense to follow the best practices laid out by Google as all Google really wants from it’s search engine is to return the best possible results for it’s users. So, how does this apply to mobile SEO? Well, if the experience provided on desktop and mobile is different, then the score (rank) of your page for the mobile version of your site should not possibly be the same as for your desktop version of your site.

So, lets say the desktop version ranks in position 3, but the mobile version is a poor substitute with several elements missing then if they return that page in position 3 then they are providing a poor experience to the ever growing pool of mobile users.

That may be a hard one to wrap your head around so let me try again – people use Google because it is a great search engine. If your site is great on the desktop but not so great on mobile then they may be giving bad results to mobile users. Bad results will stop people using Google so, they lose market share.

Google wants to give it’s users the best possible experience, across multiple devices and responsive design is the best and most consistent way to achieve that so their current recommendations is to use responsive web design. So, by using responsive design on your site you are ensuring the highest level of trust in returning your site as a result for mobile and desktop users and the best possible experience for those users across multiple devices.

Responsive Web Design

responsive layouts on PC, tablet and mobile smartphone

The driving force behind responsive web design is to have a site that is not bound to any given screen size, device or layout. A site that adapts and changes to a layout that is best for the device being used and that is exactly the same from a content perspective across all devices.

Behind the scenes this is achieved through the use of some dynamic CSS3 queries that format the layout for the current device and is all very clever, subsequently, it may incur some additional costs to doing things the old, fixed way yet this is building a future proofed solution that is best for the Internet users of today and tomorrow.

The diagram to the right illustrates how a responsive design can be used to provide a unique layout for a desktop, tablet or smartphone. The four content blocks are simply moved around to best suit the device that is being used to access the page but the content is identical across all devices.

Device Specific HTML

Many sites render a mobile version of the site that provides a parred down experience. The main content is the same yet some of the additional content and template elements are likely to be removed. This will be provided on the same page but tailored to a mobile device.

In Google’s recommendations they state that the mobile page should include ‘equivalent content’ and in most cases this should be true. What this means is that if your page is an article about fishing with various other template elements then the mobile site would still feature the main article about fishing and only the peripheral items would be removed.

It is important to note that Google has a mobile version of it’s search engine spider that will visit and review the mobile version of your site and ensure that it is ranked accordingly. Where your mobile site is a poorer experience this may impact your results in a negative way with other, better sites ranking above yours for mobile search queries.

In many cases this is a simpler option that is still okay with Google and a mobile version of the site can be created with a simple plugin for most common CMS systems. Often, this is a more lightweight version of the site and can provide a better experience when a good mobile internet connection is not available (which is more common than it should be in the UK).

Should you go responsive?

Well, currently, responsive design is the preferred solution but I am yet to see any major problems with serving alternate versions of your content on the same URL so there is no burning need just yet to drop your mobile site and have a responsive redesign. That said, if you are looking at a redesign or new site now then it makes sense to get a responsive web design.

Likewise, if you are a big player or your analytics show a considerable amount of traffic from smart phones, tablets or other devices then it could be time to review whether your mobile solution is providing the best possible experience and whether a responsive design could help.

From a branding perspective a responsive design provides the same look and feel across all devices so if you are looking to set a tone then responsive is certainly the best option and people used to your desktop site will feel just as at home on a smartphone, tablet or any other device.

And finally, from a search engine perspective, a responsive design means you are only optimising one page and not having to make sure that all of your SEO ducks are in a row on a desktop and mobile versions of your site which, from the perspective of someone in the SEO trenches, is certainly a good thing.

My take? Yep, if you can, go responsive, it’s got the SEO seal of approval from Google and provides the most consistent experience for your users across the many devices they are using to access the web. Additionally, if you have a big site and are running multiple sites for desktop, tablet and smartphone users then going responsive could save you a considerable amount of time and effort (money).

Got Questions?

Got any questions? Need your site redesigned with a responsive layout? Drop a comment below or fire me an email, I am always ‘responsive’ and happy to help. Oh, and please share the article if you found it useful. :)

References

1. Google’s Recommendations for Building Smart Phone sites
http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html

2. Google’s developers guide for building mobile optimised sites
https://developers.google.com/webmasters/smartphone-sites/

Marcus Miller

I am an SEO Consultant based in Birmingham UK and with clients all over the world. I have been working in and around search for 15 years and currently focus on SEO Consulting, Website Consulting, Local SEO and Technical SEO Audits.

Comments (2)

  • comment_avatar

    sobhi

    |

    Good article on responsive webdesign. But you don’t focus on one things.
    we use single URL for all device, and all device use different html and css for rendering particular device such as featured mobile and iPhone,
    Should we use same title and meta tag for each page(iphone, tablet and mobile page)?.

    Reply

    • comment_avatar

      Marcus Miller

      |

      Well it depends, is the content the same? If so, if you are going for a similar experience across devices then use the same URL for sure. If you are building different sites for different devices though, responsive could save you a whole lot of time and effort building and optimising your content.

      Reply

Leave a comment