Size tap targets appropriately

> > Sizing tap targets appropriately

Updated: August 27th 2015

What are tap targets?

  • Tap targets are places on webpages that a user interacts with to do something (links, buttons, forms, ads, etc.)
finger touching a button
  • Tap targets should be big enough to touch easily
  • Tap targets should have enough room around them for a fingertip
  • Tapping one thing and mistakenly hitting another tap target is frustrating for your users



Tap targets must be usable on smaller screens

When your webpage is shown on a mobile smart phone it is smaller. That means all your links are smaller and all your buttons are smaller.

When everything is smaller it can create a frustrating user experience. If a user wants to follow one link but hits another because the links are too close to eachother, then you are likely making someone mad, and they won't want to use your site.

How big should tap targets be?

Important ones (things that are used often like menus or call to action buttons) should be at least 48 CSS pixels tall/wide (7mm) according to Google.

How small can I go with tap targets?

Since links found in text are tap targets, it can make you wonder if you have to make your text super large to ensure the right tap target size. The truth is that if you text follows the guidelines for legible text, your links will likely be fine (unless you have a bunch of links right next to each other).

Google acknowledges that not all tap target can be or should be 48 CSS pixels. They note that if your tap targets are less than 48 CSS pixels, there should at least be 32 CSS pixels (5mm) between any tap targets.

In fact, if you are getting the "tap target size" error on mobile SEO tools, it is very often because your tap targets are too close together, rather than the actual tap target being too small.

Text links in lists

text links in list on desktop and mobile

A very common situation where tap targets become too close together for smaller screens is in ordered or unordered lists.

Ordered or unordered lists are often styled in a different manner than normal text. This means that sometimes these lists will size differently on mobile screens.

To make sure this doesn't happen you may need to go in your CSS and define how your lists should behave on smaller screens.

Here is some example CSS that targets this situation. The code may or may not work for your design, it is just to illustrate.

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

What this is saying is basically...

"When a list has a link in it and the screen is small, use a larger line-height. If the screen is larger use a more normal line height."

I would suggest that you doublecheck one of your pages with a list on it for this common scenario. It often slips through the cracks because lists are less common and are rarely on every page.

Buttons

With buttons my general guidance is in fact based on common sense and observation more so than an exact pixel size.

A button is almost always larger than the plain text on your webpages and it typically will have room around it already.

This means that if your text is legible, your buttons will likely stand out and be plenty large enough for a user to interact with.

buttons with space around them

When your button has enough room around it to be noticeable and attention grabbing (isn't that what a call to action is?) then your button will scale down well when seen on mobile devices.

To tell if your buttons are large enough can usually be accomplished by just looking at and interacting with your page.

If your buttons are scaling down to the same size of your font, your button is not as much of a call to action and will become more difficult to interact with as well. There may be links in your text that a user can accidentally hit in this situation.

Bottom line is, if your button is clearly differentiated from your text you are likely fine.

Viewport

mobile and destop view of page

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

Advertisements / Adsense

ads with space around them

A very common mistake is to not provide enough room around your ads.

I mention Adsense specifically here because if you are making mistakes with Adsense that create false clicks, you can lose your Adsense account (just as you can for any suspicious behavior).

Although you make money from those clicks, you want the user to always be in control and have a choice of what they are clicking.

If you have a link in your text and then right below it an Adsense ad, users may mistakenly click that ad when they are trying to follow a link.

That is bad.

I suspect Adsense will get strict about this very soon. Your best bet is to allow plenty of room around any ads.

It looks better, is better for the user, and it is the safest way for an Adsense user to go.

What affects the size of tap targets?

The way your page looks on smart phones or smaller screens is governed by a few things, especially for responsive webpages.

How to check your page

The mobile SEO tool reports when tap targets are too small on a page.






Patrick Sexton by