Google Mobile SEO Changes

Even though webmasters were warned far in advance that neglecting mobile traffic to their websites would impact their rankings, it was still a shock for me to experience a halving of my traffic. And therefore a halving in my website revenue. I've had massive drops like this in the past, ignored them, and then found that rankings/earnings had returned to former levels as Google tweaked their algorithm (i.e. fixed what they broke).

This time, though, I thought I'd have a look at what Google Webmaster Tools had to say on the matter. I was quite surprised to find this message:

Naive as I am, I didn't think that: 1) my site was so bad that it would be seen as unusable by mobile devices, 2) even if it was, traffic to it would be hit so hard.

Given that I had mobility issues, I went to an authoritative source of information: Responsive Web Design. This is a great article, but didn't help me get problems fixed quickly. Instead, if you are in the same boat as I was, just follow Google's instructions on mobile seo problem resolution, and read the A List Apart article at your leisure.

Fix Mobile Usability Issues

There were several actions I took to fix my mobile usability issues:

Touch Elements Too Close

Like most webmasters, I use an unordered list to display my menu links. Although these menu links are easy to use on my desktop computer, they are a pain for sausage fingered users like me to use on a mobile phone. They are just too close together. It was easy to change the CSS to add padding to each list item, but the challenge was to make the new padding applicable only to mobile devices. Enter media rules. With media rules we can specify CSS rules that apply only to certain screen resolution. I used this:

@media screen and (max-width: 480px) {
							#section-navigation ul li {
								padding: 40px 0 0;
								font-size: 2em;
								line-height: 1.5em;
							}	
						}
						

Here, I have increased the top padding to be 40 pixels, the font to 2em and also the line-height to 1.5 em to accommodate the previous changes. These are radical changes, but they have the desired effect of spacing out the menu links - and they are applicable only to screens that are 480px wide or narrower (i.e. a mobile device).

Small Font Size

Using the above method to target mobile devices, I increased the font size for the content on my website, not just the links.

Viewport Not Configured

Every page on the site needed the following in the head section:

<meta name=viewport content="width=device-width, initial-scale=1">

Don't worry about understanding it, just stick it in!

The Results Are In

I can report that wihin a week, my traffic and revenue increased almost back to former levels.