Login Sign Up

Size Tap Targets

What is a size tap target?

A tap target is any element on a web page that a user interacts with. These include action buttons, links, ads, etc. that a user taps on when accessing a web page using a touchscreen.

The sizing of a tap target is triggered when tap targets like links or buttons are packed closely together or are too small for a user to click on them. Smaller screens pose a greater challenge as the size of tap targets gets scaled down on such devices. To prevent users from getting frustrated, or hitting the wrong button, space out tap targets and make them large enough such that that the users can click on the correct one without their finger pads touching other field forms.

Why sizing tap targets?

On an average, the size of the finger pad of an adult is approximately 10mm wide. Android recommends a minimum tap target size of about 7 mm for any element. Once the viewport has been configured correctly, you should ensure that the tap targets are at least 48 CSS pixels wide or tall. 

Three things affect how tap targets are sized:

  • The font size of the textual content 
  • The media queries used on the web page 
  • The configuration of the viewport 

How to size tap targets 

Any tap target the user will access on a touchscreen, including search bars, navigational links, buttons, etc. should meet the minimum size requirement of 7 mm and also have enough space around it when placing other tap targets. There should be no other tap target within at least 5 mm both vertically as well as horizontally of a particular tap target.

A typical example that can be given here is when there is a list (ordered or unordered) in which the tap targets can get too close together on a smaller screen.
  • Text Hover

To avoid making it difficult for the user to access them or inadvertently clicking on the wrong tap target, you must define in the CSS style sheet, how the list should be rendered when it is accessed on a small screen. In this case, your CSS will contain a code that essentially conveys that when the screen size is small, a larger line height should be used, whereas when the screen size is large, a standard line height can be used.

When you use buttons on a web page, you will notice that it is already larger as compared to the rest of the textual content on the page.
  • Text Hover

Buttons also need to have enough room around it. The button should be large and visible and stand out from the rest of your text. If on smaller screens, the button scales down to the size of your text, it will defeat the purpose of acting as a call to action button and also make it difficult for users to interact with.

When using adverts, ensure that enough room has been provided with the ad copy.
  • Text Hover

People can accidentally click on an ad, even when they don't intend to if enough space has not been provided. This might attract a penalty for you from your Ad provider.
Keep Learning more from our Learn Technical SEO guides. Do Technical SEO Audit yourself for free here. 

Start generating Leads today

No credit card required – Get started in seconds