Larger :hover hitspots – smart fix for links: iPhone, iPad and “retina” displays

by Peter

Introduction

More and more people view your site on a portable device, such as iPhone, iPad or an Android phone or tablet. While these devices come in many different forms, they share one common feature: The user uses keyboard or fingers to navigate, “tap” and “click”.

What can you do to make it easier to click the links on your site? Apart from fixing the layout, you should also work on making the targets for users wanting to click or tap bigger!

The problem

The basic problem is that the finger tip is bigger (and usually more “clumsy” on the screen) than the mouse.
Because of this, Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 times 44 points. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square.

Now that we have entered the age of the “retina” display, the Nokia recommendation is probably the most useful one here. We want a hit zone (target size area) that is around 1cm times 1cm regardless of pixel density on the screen. Given that an inch has 2.54 cm, and given a pixel density of 300px per inch (currently retina displays use around 225 to 326, with the smallest screens having the highest pixel density), that means about 118 px times 118 px!

Smashing Magazine, cites an MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense, that found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. If we use this as a norm, we end up with a square with sides somewhere between 189 and 236 pixels!

There are many articles on the Web discussing how to design for these requirements. Some of the ones I have found useful are "Designing for Touch" and “Design for Touch Screens”.

Increasing the size of the target or hover area

The solution, just like the well-known Nekkidblogger menu, is pure CSS, and makes use of padding in combination with negative margins. To show you exactly how this works, I have added a border that shows the “target area” of the three links in this paragraph. As you can see, one of them has a huge target area, while the others are normal, even though they take exactly the same amount of space on the page.

Not much CSS is needed to make this happen:

.linkfix{  
	padding:30px 10px; 
	margin:-30px -10px; 
	}

So I add lots of padding and then make the link narrower again by subtracting the same area using negative margins.

If you look at the page with several different browsers, and use the mouse to hover the framed area, you will notice that the effect is different in different browsers. The rule is that the effective target area increases when using padding and negative margins as I have done here, but that the clickable area increases less than the increase in the framed area.

I have added z-values in the code, but that is just to not make the link with the big target area over-shadow the normal links. However, if you have many links, it may be a good idea to only give the most important ones a huge target area, and then perhaps also give those links a lower z-value than normal links.

Conclusion

We can easily make the hover or target areas of links in documents big enough so that they can be “tapped” or “clicked” by fingers on small, high-resolution viewports instead of by mouse or other pointing devices. We can do this in a fashion that is non-obtrusive. However, if too many links are used, problems of crowding and overlap of target areas arise.

See also the demo with the source code.

Related Posts:

Leave a Comment