Mobile has grown massively over the last few years, and it probably won’t stop growing anytime soon. 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 your visitors use. But for many sites, the better approach is to use a separate theme for mobile views. However you handle it, you need to check the Google mobile-friendly test to make sure your site is in compliance.
Responsive layouts are about ease of reading, not ease of site usage. It can be hard to strike the right balance between readability and usability. For example, most responsive layouts dump sidebars below articles. But what if you have important visitor features in your sidebar?
Designing for mobile can be a pain, but at least 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.
This is probably the most user-friendly thing Google has ever done for webmasters.
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.