Google’s mobile friendly update is here. It has started rolling out today (April 21, 2015) and may affect your rankings. Google’s previous major algorithm updates, Panda and Penguin, caused major ripples for several businesses and a lot of fatalities were reported. This article is all about minimising the impact this update will have on your business website.

Google has emphasised in the past on having a mobile first design to improve the experience of the users. But for the first time, mobile friendliness will officially become a ranking factor in Google’s search algorithm. If you are on this page, it is very likely that you are looking for a comparison between the responsive, dynamic serving and a separate subdomain approach. You can directly skip to that comparison or read on.

[raw]

[one_half]

[/one_half]

[one_half last]

Note: The diagrams in this article have been simplified. There are complex user agent detection programs that detect your device from thousands of devices. In this article, I have considered just one generic ‘mobile’ device.

[/one_half]

[clear]

[/raw]

[raw]

[one_half]



1 Test your site for mobile friendliness Make sure your site is mobile friendly. You can test your site for mobile friendliness here. If your website is already mobile friendly, there is nothing for you to worry about. Go and take a look at our list of local business SEO tips while your competition optimises their websites for the mobile update.

[/one_half][one_half last]

[/one_half]

[clear]

[/raw]



If your website tested negative, it’s for the best that you hire a developer to make it mobile friendly. Making your design mobile friendly does not necessarily mean re-designing your entire website. Your first step towards making your website mobile friendly is choosing the right approach that will suit your website. There are three ways you can make your website mobile friendly. I will discuss all three of them to help you make an informed decision.

[raw]

[one_half]

2 The three approaches Responsive Design vs Dynamically Serving vs Separate mobile subdomain (mDot) Responsive Design is fundamentally different to the dynamic html and the mDot approach. In the last two approaches:

a. server detects the user agent and dynamically serves the html optimised for the web

b. redirects the user to a mobile friendly version (different url) of the page based on the user agent.

Responsive design, on the other hand, serves the same html to all the devices and user agents. The html, in conjugation with the javascript and css, is self sufficient to adapt to the width of any device it’s being viewed upon. In the past, Google has strongly endorsed the responsive design because it is one of the easiest to maintain. But very recently, it has backed off of that endorsement as noted by some notable figures in the SEO community.

[/one_half]

[one_half last]



[/one_half]

[clear]

[/raw]

Now, let’s take a look at the three approaches to make your website mobile friendly. All three have their unique benefits and downsides which make them a better solution in different circumstances (for businesses with different server specifications).

[raw]

[one_half]



[/one_half]

[one_half last]

3 Responsive Web Design This approach has quickly become one of the most common approaches since it involves the least amount of maintenance. It also puts the least amount of load on the server (generally speaking). Techniques based on CSS or Javascript (both client side technologies) are used to make your web page fit and look good on any screen size. Pros: Responsive Web design is one of the most web master friendly techniques. There are very few ways for you to induce errors to your website using this technique. Here are a few positives: One url for every page (SEO friendly) You have just one set of code for all devices (developer friendly) Requires the least amount of resources for maintenance Cons: One of the biggest downsides of responsive approach is the page size. It’s not very uncommon for a responsive website to get inflated with code. ‘Heavy’ pages can be slow to load on the mobile devices Can be hard to optimise your pages for all devices

[/one_half]

[clear]

[/raw]

[raw]

[one_half]

4 Dynamic html serving If you go back to fig 1, you will see how a user’s request is processed at the server before the html is sent out to be rendered. As the name suggests, this approach serves different html for mobile and desktop devices. There is only one url for each page but this approach requires the maintenance of two sets of code. For example, if you use wordpress, this approach will show a different theme to the people accessing your website from mobile. Pros: Since we have two different sets of code, the mobile version of your website is a lot smaller in size and loads quickly. One url for every page (SEO friendly) Small page size, quick to load (optimised for mobile) Cons: Two sets of code (not very developer friendly) Requires extra maintenance from the developer

[/one_half]

[one_half last]



[/one_half]

[clear]

[/raw]

[raw]

[one_half]



[/one_half]

[one_half last]

5 Mobile Subdomain (aka mDot) A lot of big websites like Facebook, BBC and IMDB use this approach. The idea is very simple or let’s say scalable. The server detects the user agent, and if it’s a mobile device, sends a mobile version hosted on a separate subdomain. The domain usually looks something like m.example.com. It hosts a simplistic (minimalistic) replica of pages on the desktop version. In a lot of cases the server detection is not present, and hence if a desktop user gets to the mobile version accidentally, it might mean one frustrated user. Pros: With m. approach, it’s all about the speed, smaller static files, and lesser bandwidth consumption. The mDot version of a website will beat it’s responsive counterpart hands down any day. Very small page size, quick to load (optimised for mobile) Consumes lesser bandwidth (provides an alternative way of accessing your information to the users with capped data plans). Cons: Much harder to maintain, more prone to errors (technical and SEOwise) Two sets of code. Each page has two versions (urls). Requires extra maintenance from the developer and SEO personnel

[/one_half]

[clear]

[/raw]

Conclusion Hopefully this article gave you all the information you need to make a well informed decision on which approach is the best for you. I made Oziti’s design responsive but I had my reasons for doing that. By no means does that suggest that it’s my favourite. That’s why I haven’t picked a favourite from the list of three options given above. There might be a solution that suits you with one project, but might not be a great solution for another project. I have a few more posts planned for the mobile User Experience optimisation, if you like this post, please subscribe in our blog section so that you can stay current.