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.
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