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.

The class .touch-area turns this

into this

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>

The goggles They do Nothing

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>