Tap Targets Explained

Tap targets are an essential part of mobile SEO. Here, we explain what tap targets are, how big they should be and common issues.

PLEASE! Before you read this excellent article, check out our simple guide on how to make mobile friendly web pages. A few simple checks will ensure your website ranks in Google for mobile devices.

What are tap targets?

Tap targets are areas on web pages that a user interacts with to carry out commands. Links, buttons, ads and forms are all tap targets. Tap targets should have enough space around them for a fingertip to ensure users can tap their desired item without accidentally selecting another tap target.

It’s important that sites using tap targets bear in mind smaller screens when creating points. When a web page is shown on a mobile phone it’s smaller, meaning that all your links and buttons are smaller too.

What affects the size of tap targets?

The way your site pages appear on smaller screens is determined by several things, particularly for responsive pages. This includes the size of your font, the media queries used on a page and viewport configuration.

How big should tap targets be?

The size of tap targets varies depending on the importance of an item. For things like menus or call to action buttons, Google states that these should be at least 48 CSS pixels tall/wide.

A lot of tap targets are links in text, which can lead people to think they need to enlarge text excessively. However, as long as you follow the guidelines for legible text you should be fine (unless you have several links next to each other).

Google recognises that not all tap target can be or should be 48 CSS pixels. They specify that if your tap targets are smaller than 48 CSS pixels, there should at least be 32 CSS pixels between any tap targets.

If you’re getting a tap target size error on mobile SEO tools, this is usually because your tap targets are too close together, rather than the actual tap target being too small.

Tap target issues

Lists

A common situation in which tap targets are too close together for smaller screens is in lists. Ordered or unordered lists are often styled in a different way to normal text, meaning that sometimes these lists size differently on mobile screens. If you have any pages with lists, it’s worth checking for this common issue. To ensure this doesn’t happen you need to go to your CSS and define how your lists should behave on smaller screens.

Here is some example CSS for this situation:

li a{line-height:1.8;}@media(min-width:60em){li a{line-height:1.2;}}

Depending on your design, this CSS may or may not work. The instruction it is giving, however, is that when a list has a link in it and is being viewed on a small screen, a larger line height should be used whereas if the screen is larger a more regular line height should be used.

Buttons

Button sizing is based on common sense more than an exact pixel size. A button is usually larger than the plain text on your web pages and it typically has space around it already. This means that if text is legible, your buttons are probably large enough for a user to interact with. Often, if a button has enough space around it to be attention grabbing, then your button will scale down appropriately on mobile devices.

Checking whether buttons are large enough can be done by simply looking at your page and interacting with it yourself. If buttons scale down to the same size as your font, you know that your button isn’t as much of a call to action as it could be and will be more difficult to select and interact with.

Essentially, if your button is clearly defined from your text then you’re probably fine.

Viewport

To ensure tap targets are big enough on responsive websites, you need to ensure your viewport is configured correctly.

Advertisements

It’s a frequent issue that not enough space is provided around ads. This can lead to users mistakenly clicking an ad when trying to select a different item. For example, if a user were trying to click a link but had unintentionally clicked an ad, this is bad because a user should always be in control and have a choice over what they’re clicking on. Though you make money from these clicks, you’re providing a poor user experience which should be your main concern.

Errors like this on Adsense can even cost you your account. False, accidental clicks are deemed suspicious behaviour and Adsense can remove your account for this.

Wait, hang on!

It’s been nice to have you but before you go, please read this excellent article. Check out our simple guide on how to make mobile friendly web pages. A few simple checks will ensure your website ranks in Google for mobile devices. Happy optimising!