Making A Mobile Friendly Website: Links Too Close Together (3/5)

image of earth from space showing connected cities

Fixing “Links Too Close Together” Failures

Our previous posts have addressed preparing your website for mobile-friendliness.  We looked at the background to what being mobile-friendly means, the Google mobile-friendly test tool and we set out solutions to the two easiest of the five problems Google’s test tool highlights.

We turn our attention to a more complex problem that the tool identifies.

Links Too Close Together

Google uses the alliterative term tap targets to refer to web page areas that allow users to interact with a site, be these links to other pages, selection items or buttons.  A “Links Too Close Together” failure means that the mobile-friendly test deems the tap targets to be too small or too close.

Google’s Android User Interface guidelines recommend that tap targets be at least 7mm (48 CSS pixels) in size, within a properly set viewport.  And, Google says the gap between tap targets should be at least 5mm (32 CSS pixels) both horizontally and vertically.

This specification sounds easy to meet, but consider the situation in which you have a link for a small icon or very short word.  Forgetting about mobile friendliness it would be easy for the tap target to be too small to pass the size and spacing guidelines.  But, what about the situation in which links appear consecutively within a text paragraph such as: We think you should visit link1, link2 and link3?  This commonly occurring text format is very likely to produce tap targets that are too close together to pass the mobile-friendly test.  What can be done?

If you have multiple content contributors, or a large number of close links, it may be impractical to ‘reword’ each instance and increase the gaps between and the size of the links.  A more systematic approach is needed.

A solution is to use CSS styling to include margins around the links to increase spacing and use padding to increase the tap target size.  This solution may cause pages to render clumsily under certain circumstances.  

When links are included in text and the anchor text is long or includes many words the browser is likely to break the link across lines.  Breaking in this way will cause readability issues especially with multiple adjacent links.  We recommend limiting the anchor text length, judiciously including non-breaking spaces between words and separating links with other text.

You can use Google's PageSpeed Insights to determine which tap targets are problematic and will need to be fixed to pass Google's mobile-friendly test.

In the next post we address: Text Too Small to Read. In the post we cover using CSS media queries to increase the base text size for mobile viewing and improving readability for visitors using mobile devices.



Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required

MailChimp stores your details. We do not share data with third parties.



Don’t have accurate and current information on all the websites you own? Not able to monitor and check each website’s content quality and risk status? Let’s talk about how we can help.


Blog photo image: