From the 21st April Google will be penalising sites for mobile search which don’t appear mobile friendly.
You can test your site here:
https://www.google.com/webmasters/tools/mobile-friendly/
If you haven’t done any mobile design you’ll probably get some warnings like this:
- Text too small to read
- Links too close together
- Mobile viewport not set
-
Content wider than screen
The first thing you should do to make your site mobile friendly is add a viewport tag like this to the head section of each page:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Then modify the CSS to make sure everything fits onto the page when the site is shrunk down to a mobile device.
“Text to small to read”, “links too close together” and “content wider than screen” errors are normally easily fixed by adding something like the following lines to your CSS file:
@media screen and (max-width: 780px) {
body { font-size:16px; }
a:link { margin: 16px; }
#container { width: auto; }
}
This is an if statement and only comes into effect if the width of the browser window is less than 780px. It sets the font size for the entire body of the document to 16px you can adjust this as necessary but this should meet Googles requirements. It puts a 16px margin around all links to ensure people with fat thumbs can still click them. It sets the container width to auto, which is only applicable if you have a div with the id container obviously.
This may not fix all the issues on your site but it will certainly get you moving in the right direction and help get your site optimised for mobile devices.
