How do I make sure my site is mobile friendly? A checklist

https://searchenginewatch.com/2016/05/17/how-do-i-make-sure-my-site-is-mobile-friendly/

As we reported in our SEM news round-up on Friday, Google’s Webmaster Trends Analyst John Mueller confirmed that the latest wave of changes to Google’s mobile-friendly ranking signal has now finished rolling out.

Ever since the initial ‘Mobilegeddon’ update which debuted on 21st April 2015, mobile-friendliness has been a significant ranking factor in Google search results. In its blog post foreshadowing the algorithm changes two months before, Google said it wanted users to “find it easier to get relevant, high quality search results that are optimised for their [mobile] devices”.

Google has affirmed and re-affirmed its commitment to mobile-friendliness over the years, implementing a ‘mobile friendly’ label to distinguish websites that are adapted for mobile, making changes to the mobile search results page including user-friendly URLs and expanded sitelinks, and launching Accelerated Mobile Pages to provide an ultra-fast mobile experience.

Now, with this latest update, Google has strengthened its mobile-friendly ranking signal even further, making it all the more important for webmasters to have a site which meets Google’s standards.

With that in mind, how can you make sure that your site comes up to scratch? We’ve put together a handy checklist of things you should do (or not do) in order to get the cleanest bill of mobile health possible from Google.
Don’t use Flash

Most mobile browsers can’t render Flash content, so one clear-cut rule of thumb in creating a mobile-friendly site is: don’t use Flash. Google’s mobile usability report sassily recommends that you use “modern web technologies” to display your page content, animations and navigation instead. Ouch!
Make sure your viewport is set properly

A viewport is a type of meta tag that gives the browser instructions on how to adjust the page dimensions and scaling to different device widths. This should appear in the head of your webpage.

If there is no viewport tag, mobile browsers will default to rendering the page at the width of a desktop screen. Google has a tutorial on how to set the viewport for your page and make sure it’s accessible.

A screenshot of the meta tags for Search Engine Watch, including a section entitled "mobile meta (hooray!)" which has a correctly configured viewport meta tag.

What not to do: set your viewport to a fixed width. Some developers will define the viewport to a fixed pixel width to suit common mobile screen sizes, but this still won’t be suitable for every kind of device, and so Google doesn’t judge it to be mobile-friendly.

If you follow the instructions in Google’s tutorial and use the viewport value width=device-width, this will allow your page to match the width of whatever device your visitors are using.

Adding the attribute initial-scale=1 will also allow your page to fill the screen whether the device is portrait or landscape, and so take advantage of the full width of the screen.

Finally, make sure that your content is sized to the viewport. If you set absolute CSS widths for page elements like images and videos, this can cause a problem for devices that are narrower than the width you’ve specified. You can get around this by using relative width values, such as width: 100%, in your CSS.
Use large font

If you’ve configured your viewport properly, font sizes will be scaled according to the user’s device, but Google makes some additional recommendations for font on top of that.

It recommends using a base font size of 16 pixels, with any other font sizes (such as small and large) defined relative to that baseline. The vertical space between lines should be set at 1.2em.

Try to also avoid using too many different fonts and font sizes, which leads to messy and complicated page layouts.
Space out links and buttons

Links and buttons, also called “tap targets” by Google, are harder to press on a mobile device than on a desktop browser, because fingers are wider and generally less accurate than a mouse cursor.

Google will penalise any pages where the tap targets are too small and close together to press accurately.
The average adult finger pad is about 10mm wide, so Google recommends a minimum tap target size of about 7mm, or 48 pixels wide – at least for the most important tap targets, like frequently used buttons, navigational links, search bars and form fields.

Less frequently used targets can be smaller, but should still be spaced far enough apart that a user trying to press one won’t accidentally hit another target instead. The recommended space around smaller tap targets is at least 5mm.