Mobile Seo Size tap targets appropriately

What are tap targets?

• Tap targets are places on our webpage that a user interacts with to do something (links, buttons, forms, ads, etc.)
• These 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 to your users

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 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.

Viewport

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

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.

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.

Advertisements / Adsense

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.

• The size of your font
• The media queries used by page
• The viewport configuration

How to check your page

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