Expand clickable areas for a better touch experience

Uncategorized 2 Minutes

expand-areaOn mobile phones / tablets, where touch gestures comes into place, it’s sometimes hard to target little links with your finger. Mostly because it was primarily designed for a desktop use. Jacob Rossi, an Internet Explorer 10 engineer who worked on the awesome Microsoft’s pointer API (yeah true story man), said at the 2013 W3Conf that every touch oriented elements should be at least 40×40 pixels wide, to ensure the best user experience.

And he is right but does it mean you have to redesign all your stuff to make everything bigger!? Well, obviously yes. But, if you can’t (for any kind of human reason :), here’s a quick CSS trick that let’s you increase the “clickable area”.

.ur-small-element { 
    position:relative; 
}
.ur-small-element:after {
    content:'';
    position:absolute;
    top:-10px; bottom:-10px; 
    left:-10px; right:-10px; 
}

That’s it!

We use the :after (or the :before) pseudo-element, absolutely positioned, and we stretch it in every directions with negative values so it “overflows its parent”. That’s it. You can add some background-color to it (or some outline:1px solid pink), it will help you better see how it reacts.

Of course your element has to be clickable! Which means it has the be a <a> tag or a <button> or a <div> with a ‘click’ event registered to it.

Let’s target only touch devices

This technique works ie8+ so it will affect every single browser… We might need a way to target only touch based devices. Well why not use Modernizr? They have a test especially for this. Go to the custom download page, uncheck absolutely every thing. We only want the test for touch based events and the feature which adds “touch” or “no-touch” classes on the <html> tag.

expand-area-modernizr-1 expand-area-modernizr-2

Generate the js code with these two options, load the file in your site, this will only cost you 4k (minified) and your server can gzip it to make it even smaller. Then to expand the clickable area only on mobiles we just need to modify our previous snippet like this:

.touch .ur-small-element:after {
    content:'';
    position:absolute;
    top:-10px; bottom:-10px; 
    left:-10px; right:-10px; 
}

Easy right? 🙂

Further readings

* Another way to achieve the same effect by Joshua Hibbert’s
* Explore Touch from IE
* Jacob Rossi’s talk at W3Conf
* Microsoft Pointer Events API

Published by jkneb

Published

8 thoughts on “Expand clickable areas for a better touch experience”

  6. This didn’t work for me on a blackberry Z10, however, setting padding to 10px and margin to -10px on the element itself did.

    Reply

Leave a Reply