Over the past week or so I’ve been approached on separate occasions by companies wanting to discuss best practice mobile optimisation. In particular, these websites operate a non-responsive approach to content delivery dependant on device type, so I thought I’d take this opportunity to clarify some of the optimisation techniques.

There are typically three different approaches to mobile content:

• Responsive Design – A ‘one size fits all’ approach whereby the website detects the type of device in operation (be it desktop machine, smartphone, or tablet) and automatically adjusts the layout of the requested URL to suit the device.
• Dynamic Serving of Content – Similar to responsive design in that content is served on a single URL; however with this approach different content may be served depending on the device type. For example, the mobile version may serve a cut-down version of the desktop content to increase speed/efficiency.
• Non-Responsive Design – The opposite end of the spectrum whereby each desktop URL has a mobile equivalent to cater for mobile users. Through this method, mobile content generally resides on a mobile sub-domain (such as m.example-domain.co.uk) or a sub-folder (such as www.example-domain.co.uk/mobile/).

Most experts nowadays will tell you that responsive web design is the way forward, and they would probably be correct, but in many instances responsive web design is not possible, generally due to budget. Changing to a responsive approach to web design may involve significant investment for many businesses which sometimes is simply not an option, especially if they have recently invested in a non-responsive approach. Luckily for those businesses there are optimisation techniques available to enhance Google’s understanding of the relationship between the mobile and desktop websites.

Why Bother? Good Question!

Good question indeed. Why should you bother with mobile optimisation for your non-responsive mobile site? Does it really matter? Well actually yes it does, primarily because Google say so!

Whether you adopted a responsive design, a dynamic serving approach, or a non-responsive design you’ve identified that there’s an ever growing need to serve the mobile demand therefore maximising the compliancy of your mobile website and increasing your mobile search exposure should be a important factor in your mobile strategy.

Still not convinced? Well in case you’re not willing to take my word for it then I’d highly recommend listening to the big G themselves. Google have recently announced stricter guidelines around mobile site optimisation in an attempt to lay to rest bad mobile practices which may dampen the mobile user experience. These ‘guidelines’ are actually changes to smartphone ranking factors which will directly impact the visibility of mobile websites within mobile search.

Non-Responsive Design Optimisation Techniques

So, we’ve established that you have a non-responsive approach to mobile web design and we’ve identified that you could probably benefit from implementing some optimisation techniques, what’s next? How do we provide Google with a greater insight into the relationship between your desktop and mobile website?

For the purpose of these examples let’s assume your domain is www.blue-widgets.co.uk and you’re currently using a mobile sub-domain m.blue-widgets.co.uk.

User-Agent Detection and Redirect Handling

When you adopt a non-responsive approach you will need to redirect users to the URL which best serves their needs. To achieve this you will use user-agent detection to determine the type of device in use, redirecting the user to the correct desktop or mobile URL.

During the user-agent detection process you should also ensure Googlebot and Googlebot-Mobile are treated separately in exactly the same way that you would with user detection, redirecting Google to the correct location.

Whilst Google suggest that unidirectional redirects are acceptable (i.e. desktop to mobile redirects but not vice-versa) we would recommend implementing bidirectional redirects where possible to best serve the user experience. Why? Consider this: if you adopt a unidirectional approach to redirects what happens when a mobile user shares a mobile URL via their social profile? If a desktop user clicks this link they will be served the mobile version of the content rather than the desktop version, thus weakening the user experience. With bidirectional redirection this would not occur.

We would strongly recommend the use of HTTP redirection as opposed to JavaScript or any other methods of redirection. Whilst both 301 Permanent and 302 Temporary redirects are appropriate, we would prefer the use of 301 redirects where possible.

You can find more on information user-agent detection and redirect handling from Google here - https://developers.google.com/webmasters/smartphone-sites/redirects.

Vary HTTP Header

The Vary HTTP header provides Googlebot-Mobile with another signal to allowing Google to better understand the configuration of the desktop/mobile sites and assist with ISP caching.

Some webmasters will argue, quite rightly, that use of the Vary HTTP header is not necessary and can have an adverse effect on how CDNs (Content Delivery Networks) such as Akamai handle the delivery of content.

If you know that you’re using a CDN I suggest you read this post by Cindy Krum of MobileMoxie which goes into more detail on the potential affect of using the Vary HTTP header. Otherwise, we would recommend using the header where possible.

Canonical Tags for Mobile URLs

To help Google better understand the relationship between your mobile URL and desktop URLs Google recommend adding a canonical tag to each mobile URL referencing the desktop equivalent. From an SEO perspective this approach will help to consolidate indexing and maintain ranking signals such as direction of external link equity.

Let’s assume the mobile URL is http://m.blue-widgets.co.uk/blue-sparkely-widget.html.

On the mobile URL add:

Note: It is not necessary to do this the opposite way round i.e. do not add a canonical tag to the desktop URL which references the mobile URL!

Rel Alternate for Desktop URLs

Again, to help Google recognise the relationship between your mobile URL and desktop URLs Google recommend implementation of the rel=alternate tag on each desktop URL to specify the mobile equivalent.

Again let’s assume your desktop URL is http://www.blue-widgets.co.uk/blue-sparkely-widget.html.

On the desktop URL add (where ‘max-width’ = your preferred screen width):

Note: It is not necessary to include this attribute on the mobile URL!

Desktop XML Sitemap ‘Alternate’ Annotation

You can also annotate your desktop XML sitemap with the alternate URL for the mobile equivalent, an example of which could be:

Mobile URL Sitemap

You may also wish to consider creating a separate Mobile XML sitemap using the mobile URL Set and the mobile namespace requirements.

Be sure to read the full mobile sitemap requirements and considerations before you continue - https://support.google.com/webmasters/answer/34648?hl=en.

You Are Now Mobile Optimised!

So there you have it, your non-responsive mobile website is now fully optimised using the latest mobile optimisation techniques.

If you don’t already have a mobile website or if you’re thinking of investing in a responsive (or alternative) approach to deliver your mobile content I’d highly recommend you read through Google guidelines for building a mobile optimised website. Here you’ll also find Google’s advice for avoiding common mistakes in smartphone website design to ensure you avoid any penalty or loss in ranking as mentioned earlier in this post.