Webmaster guide for mobile friendly sites

Webmaster guide for mobile friendly sites

Google has launched another change in their algorithms last week, focused on mobile sites. For the mobile search results more importance will be given to sites that are mobile friendly. This blog post will explain what this would mean for you, what you need to do, how to do it, how to identify problems and more.

What is the impact of this change for my business?

If you don’t yet have a site that is mobile friendly, it can lead to a loss in traffic. Depending on the amount of organic traffic you currently get on from mobile devices, the impact can be quite big. Google announced that they expect this change to impact around 10% of the mobile search queries. Sites that used to be at the top spots in Google may now drop a few places, which can lead to less traffic. Consequently, less traffic can lead to less conversions, revenue and profit.

This new algorithm change will only impact search results on mobile (smart) phones, but not the on tablets. It will also not change anything in the desktop search results.

The algorithm change is continuously updated, which means when Google crawls your site, they will verify for every single page if it is mobile friendly. When there is a search query that matches your site’s content, they take the mobile friendly factor in consideration in ranking the search results. This means mobile friendly sites are promoted while others are demoted.

For general, non-branded search queries the impact will be higher, because there are more competitors for that keyword. For branded search queries the sites are expected to be still in the top of the results, regardless whether it is a mobile friendly site, as it is the most relevant result for the query.

Should I update my site?

Yes, if you want to continue your business, then it’s important to have a mobile friendly website. Currently, mobile traffic is responsible for about 30% of the total amount of internet traffic and although the steep growth we saw last year appears to have levelled off, the total numbers are significant. Google even expects the mobile search volume to surpass the desktop volume in 2015.

Based on these numbers and based on the fact that mobile friendly sites will have an advantage for mobile users, it is clear you want to get as much mobile traffic as you can. Having a site optimized for mobile devices not only brings you more traffic, but will also make it easier for your audience to actually do something on your site. Like subscribe for a newsletter, buy credits or watch a video.

The more user friendly your site is, the longer visitors will stay on your site and the more opportunities you will have to offer them your services. Also, a mobile friendly site will have a lower bounce rate for mobile visitors, which in turn will help your ranking in search engines.

As is the case for most businesses: when you’re not developing, you’re losing out to the competition. For mobile traffic this is very much the case. Even if you feel it’s not necessary at this moment to invest in a mobile friendly site, your competitors might invest in it. As a result, they may outrank you for mobile search queries. And if their visitors also visit their desktop site more often, they may also improve their search engine ranking for desktop while leapfrogging your site. This will surely have an impact on your desktop traffic.

Make a separate site or responsive?

Once you have decided you want to make your site mobile friendly, you inevitably have to think about implementation: which approach is best for you depending on your specific situation, what type of content you offer and what techniques you already use.

There are basically three different types of implementation for mobile friendly sites:

• Responsive sites
• Dynamic serving sites
• Separate mobile sites

Responsive sites

Responsive sites have flexible layouts, flexible images and cascading style sheet media queries. Based on the visitor's screen size and orientation the layout changes accordingly. This means that only the layout of the site changes and the functionality normally stays the same. However, it is possible that some elements on the web page are not displayed on mobile devices, reducing some of the functionality. Essentially, the URL structure and HTML code of the pages are the same for every device, browser and resolution.

Making a site responsive requires thinking about the site structure before you start implementation, because it might be a lot more difficult to optimize a site for mobile when it has been designed for desktop. Just changing some styles may not be enough for a good mobile experience. You’ll have to think about navigation, images, headings, font size, content, forms, etc.

Although it does require a bit of work to make a site responsive, it is still easier than the implementation of a completely separate site on a (sub)domain for mobile.

Dynamic serving sites

Although very similar to the responsive site, there is one big difference between the two. It loads different HTML and CSS for every device. Just like responsive sites, the URL for a particular page is the same for every device, browser and resolution. But the HTML and CSS is optimized for every device to give the user the best possible experience.

This implementation is more complex to manage than a pure responsive site, but it can very well be compared with responsive design. For example, you can use responsive techniques for the whole site, apart from pages with specific functionality. Think about pages which run flash or Java on the desktop, but for which you want another implementation for mobile, since not all mobile platforms support flash and Java. You could also use dynamic serving to offer less or different content to mobile users to make it easier to read, faster to load, etc.

Separate mobile sites

If, for whatever reason, making a responsive site is not an option, you can also create a separate mobile site. In this case the mobile site can be implemented on a domain, subdomain or in a subdirectory.

Having a separate site for mobile also means that you will have different URLs for the mobile site and for the desktop version, making it more difficult for desktop visitors to find the mobile alternative for a certain page. This is something to have in mind when designing the mobile and desktop site: how to switch between mobile and desktop without losing the page you were at. Since search engines also need to know where they can find the mobile version of a certain page, some additional steps are needed for this purpose as well as is explained in the next paragraph.

Finally, having two separate sites also means you have to maintain and update two different sites and develop everything twice, making this implementation in general more expensive than a responsive site.

How to tell Google that you have a mobile site

Since responsive and dynamic sites have the same URL regardless the device, Google can easily find and index the mobile version of the site and determine if it is mobile friendly.

This is not the case for separate mobile sites. To be able to index the mobile site properly, Google needs to know what the URL for the mobile site is. If you don’t tell Google the URL for the mobile site, you will not get credit for all the hard work on your mobile site and you could even have your mobile site penalized because it might be considered a duplicate.

To prevent this and to have your mobile site indexed as the mobile version of your desktop site, you need to relate the mobile site to the desktop and vice versa. For this, a few changes are needed to be made for both the mobile and desktop site.

First, we have to canonicalize it to the desktop site. To do so, add a Meta tag between the tags on every page of the mobile site, like this:

<link rel="canonical" href="http://awempire.com/landingpage">

Then, to relate the desktop page to the corresponding mobile page, on every page of the desktop site we have to add another Meta tag (for example):

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.awempire.com/landingpage">

With these two Meta tags, search engines like Google know that one page is the mobile equivalent of the desktop version of that page. With this knowledge they can show the right page in the search results that gives the user the best experience for their device.

How can I test if my site is mobile friendly?

To test, if, according to Google, your site is already mobile friendly you can use the Mobile Friendly Test. The site gives an indication on how Google sees the site and some additional information about how to optimize it.

If the outcome is that a site is not mobile-friendly, then you get a few comments about what’s wrong on the site, like:

• Text is too small
• Viewport not set
• Links too close together

If you want to know what your site looks like on different devices you can easily get a good idea when you use Google Chrome.

Chrome has the function “Inspect Element” (right-click on the page) or “Developer Tools” (menu -> more tools) which allows you to see the markup and some other functionality. One of the features is that it can show how your site looks on any type of mobile device. To get into that view, use the little mobile phone image (next to the magnifier class) in the menu bar of the developer tools view.

The page will then open in a smaller size, just like it would when viewed on a mobile device. On the top of the page you can select one of many mobile phones or tablets.

An extra option to learn how Google sees your page, compared to a visitor, is also available in Google Webmaster Tools. You can use the function “Fetch as Google” to learn how Google actually fetches a page on your site. To check one specific page for mobile devices, just fill in the URL and select Mobile in the dropdown list. Then, click on “Fetch and Render” to start the process.

Once this is finished, you can click on the link (for the homepage, you will only see a ‘/’ as link).

The resulting page shows two different views of the page, one showing the Googlebot interpretation of the page and the second showing how a visitor sees the page. However, no specific mobile device, browser or screen resolution is given for this view.

If Googlebot did not manage to get all the resources on the page, for example images, CSS or JS files because they have been blocked, you will also see that mentioned on this page.

How can I optimize my site for mobile?

Before you can optimize, you need to know first what’s wrong with your current implementation.

To learn more about your site, it is recommended to use Google Webmaster Tools (GWT). In GWT there are several tools and pages that help you get better insights on your site. One of the pages give more information on mobile usability.

This page gives you the number of pages Google has found with errors and usability errors. Some examples of errors you might see on this page:

• Viewport not configured
• Fixed with viewport
• Too many redirects
• Content not sized to viewport
• Small font size
• Touch elements too close
• Flash usage

This already is a good To-Do list of things you may want to have another look at from a usability point of view. But another important success factor for sites in general, but mobile sites especially, is the page speed.

For this, see the PageSpeed tool which is focused on changes to improve the speed.

This page also gives several suggestions for changes that help with your page speed, separated for mobile and desktop pages. Some suggestions you might see on this page:

• Optimize JavaScript and CSS files
• Optimize images
• Reduce server response time
• Use browser caching
• Limit number of redirects
• Minify CSS, JavaScript, HTML
• Use legible font sizes

For many of these suggestions more information on how to fix them is provided on the page as well.

If you manage to implement the changes suggested in these tools, you will be more than likely to have a mobile friendly site with the best mobile experience.

Where can I see the mobile traffic for my site in Google Analytics?

Most of our affiliate partners use Google Analytics (GA) to analyze the traffic on their sites. To get some insights on the mobile traffic in GA, you have a few standard reports.

Under ‘Audience’ check out the Mobile section for a few interesting and useful reports.

When selecting ‘Overview’ you see the three rows:

• Desktop
• Mobile
• Tablet

It gives you great insights in the differences in what type of devices visitors use to come to your site and how traffic is divided. You can also see if your mobile site has a high bounce rate, converts well (if you have Goals or ecommerce tracking set up), etc.

The second standard report is called ‘Devices’. This gives you the list of devices people used to visit your site. You can find all thinkable mobile phones and tablet in this report, like the Apple iPhone, Apple iPad, Samsung Galaxy phones and tablets, HTC phones, Google Nexus, Nokia, etc.

You can learn a lot about your audience with these reports, since a certain type of device fits certain subcultures better than others. Also, a high percentage of expensive high-end phones might tell you that your audience has a lot of money to spend. Furthermore, you can learn from this report if investing in your mobile site makes any sense, based on the conversions rate, bounce rate, etc. If you see that you have a lot of mobile traffic that does not convert at all, the quality of your mobile site could be an important reason for it.

To make these standard reports even more useful, you can easily enhance them a little. Apart from knowing what devices your users have, it’s also very interesting which browser or which screen resolution mobile visitors use.

To get more insights in the browser data, you can simply add “Browser” as “Secondary dimension”. This gives an additional column in the report and for every device it now shows the browser and all the metrics for each combination. But since you’re only interested in mobile data, you type ‘mobile’ in the filter box. Now you have a nice report with the browser data for mobile devices.

The same thing can be done for the screen resolution, so you learn for which resolutions you should optimize your site (at least).

The bottom line is that mobile traffic is a significant part of the total traffic for most sites, which makes it worthwhile to invest in a mobile friendly site. To know if that also applies to your business, you can find the necessary information in your Google Analytics mobile reports. What you need to do and where to start can be found out using the various tools mentioned in this post.

If you have anything to add to the story, please leave a comment below.