Mobile has grown massively over the last few years, and it hasn’t plateaued yet. It’s critical to make sure your website is mobile-friendly – that is, easy to view and navigate on a tiny little phone – but how to go about that? Google is a fan of the responsive layout, which supposedly adjusts to whatever screen size, but I disagree. Most responsive layouts for a site designed like BlogALiving dump the sidebar down at the bottom. If your site has valuable links or features in the sidebar, they will be lost to visitors.
Responsive layouts are about ease of reading, not ease of site usage. And yet, we don’t want to anger the Google gods, for they may smite us with zoo animal penalties, right?
Turns out Google has a tool that lets you know whether they view your site as mobile-friendly or not. This means you can devise any layout you want for your mobile site – including using the desktop version for both – and find out whether Google approves or not. Their approval could affect your standings in mobile search. And if they don’t like it? They tell you exactly why and offer guides to help you fix it.
What makes a site mobile friendly?
First, get hold of a phone or a good simulator. Firefox has a nice feature – control+shift+m – that shows you what your site looks like on a phone. If it looks good to you, but Google still won’t pass it, the first thing to do is look at your robots.txt file. I learned this the hard way. Google must be able to see all your images and scripts, or it won’t pass you. I had blocked them from a couple of WordPress directories years ago, and that was all it took to make me fail the test.
Otherwise, look at the messages you’re getting. Some of the most common problems I’ve seen:
You do not have to use a responsive design, but you do need to include a viewport setting. This one…
meta name="viewport" content="width=device-width, initial-scale=1" /
…has worked just fine on every site I’ve done. That just tells the device: whatever size your viewport is, scale it to that.
If it’s telling you links are too close together, that means you’ve got some links bunched up where fingers can’t easily hit one without hitting another. Pagespeed will call these “tap targets” and tell you exactly which links are too close. In my experience, these links are always outside the main text of the page – a list in a sidebar, for example – and the easy solution is to either make the text bigger if that works with your design, or add more padding or a taller line height to space them out a little.