Links with Increased Touch Area

When several links are placed on top of each other, it may be desirable to increase their clickable area and make them easier to hit for people using touch interfaces.

  1. Usage
    1. State-specific Classes

Usage

The touch-area class can be applied to lists containing a number of links, or to individual links.

Whole link lists
<ul class="touch-area">
    <li><a href="#">Up</a></li>
    <li><a href="#">And</a></li>
    <li><a href="#">Atom</a></li>
</ul>
Individual links
<a href="#" class="touch-area">The goggles</a>
<a href="#" class="touch-area">They do</a>
<a href="#" class="touch-area">Nothing</a>

State-specific classes

In most cases, this behavior is only desirable for smaller devices, particularly palm-sized ones. Luckily, you can restrict this functionality to one or more of the three states (palm, lap, desk).

So, if you wanted to make your links larger on palm-sized devices, but nowhere else, you could use the class palm-touch-area.

Increased clickable area on palm devices
(Shrink browser window to see the links change their appearance.) 
<ul class="palm-touch-area icon-arrow">
    <li><a href="#">Can't</a></li>
    <li><a href="#">touch</a></li>
    <li><a href="#">this</a></li>
</ul>