This week Google altered the way it orders search results on phones to give preference to what it terms mobile-friendly websites.

The change to Google’s algorithm means sites that haven’t been optimised to be easy to use and view on mobile devices could find themselves bumped down the mobile search rankings.

Half of Google searches are made from mobile devices and when the tech giant announced the change in February it warned it would have a “significant impact” on where sites appeared in results.

Google offers a tool to allow sites to see if they pass its mobile-friendly test. Sites that fail appear to be falling foul of common gotchas – many of which are fairly simple to rectify. Here’s the approach you should take if you want to pass the test.

Make sure links and buttons aren’t too close together

Google will mark down your site if links, buttons or other tappable elements are close enough together that it determines it is possible to accidentally hit the wrong one.

To avoid this problem, Google recommends making elements you want to be tappable larger or to add more space around them. Ideally users should be able to hit tappable elements without their finger overlapping other tappable parts of the page.

According to its guidelines, the average adult finger pad is about 10mm wide, which means buttons and links should present a tap target of about 48 pixels on a site with a properly-set mobile viewport. Where links or buttons need to be smaller than this, Google suggests having no other tappable elements within 32 pixels.

Don’t make the content wider than the screen

Horizontal scrollbars are a no-no for Google on mobile. It prefers pages to be no wider than the screen of the device.

When setting the width of containers for text or images, Google recommends using relative values, such as percentage, rather than fixed values such as pixels. It also warns against using high values when placing elements on a page using absolute positioning, to avoid the chance of that element being positioned outside the visible portion of the screen.

Different layouts and styles can be applied to websites depending on the size of device viewing it, using CSS media queries. Google provides a Web Fundamentals guide to help you get started.

Try to avoid plug-ins

Google assumes that most mobile devices do not support plug-ins to allow third party technologies to run in the browser.

That means that plug-ins for Flash, Silverlight and Java on your page could see you penalised.

Google recommends doing away with the need for plug-ins by implementing the effects using browser-based technologies. For guidance, it suggests HTML5 audio and video, advanced graphics and presentation effects, network connections, local storage and file access as alternatives.

Specify a viewport width

Failing to specify a viewport in the HTML for your site can cause mobile browsers to render the page as if it were on a desktop browser, as seen below.

The upshot is that text can be hard to read and interactive elements like buttons difficult to hit.

Google advises setting the viewport to the width of the device using the <meta name=viewport content=”width=device-width, initial-scale=1″> tag in the head of your HTML.

Ensure text is readable

Pretty self explanatory, Google will penalise you if the text on your site is too small to be legible on mobile screens.

Google suggests setting a viewport to the device width, as shown above, as being a good way to make text scale so it remains clear on smaller screens.

To help appropriately scale fonts, the firm recommends setting a font size of 16 pixels on the body of the page, a line height of 1.2em and sizing the rest of the text relative to the base size of 16px. For example, creating a ‘small’ class selector in CSS that applies a font-size of 12px, which is 75 percent of the base size, and a ‘large’ class selector that applies a font size of 20px, which is 125% of the base size.