Why, when and how you should apply FastClick

10 August 2013 – 19:15

Update December 2020: this technique is not needed anymore.

Some mobile or touch devices apply a 300 ms delay to any touch event, usually in order to detect zooming with double tap (there is a further detailed explanation in Google fast buttons article).

That delay is desirable most of the time, but when users are dealing with some specific areas like carousels, buttons or preloaded tabs, this can be felt as unresponsive and slow.

If you are in a mobile, try following buttons:

removed

The first button shows the normal behaviour, and the second one presents the FastClick approach. Which one do you think responds faster?

When

I recommend using this trick only in specific scenarios, where we really need to trigger an action immediately, as applying it to any click will disable the double tap zoom in most of devices — and disabling default behaviours is usually a usability antipattern!

How

The easiest way is using dave1010 jQuery plugin version of FastClick.

  1. First of all, include jQuery in your head, as usual.
  2. Later, download and include FastClick jQuery Plugin after jQuery.
  3. And lastly, use it. Instead using the classic:

$(‘#element’).click()

you just need to use:

$(‘#element’).fastClick()

Easy, isn’t? Cheers!

This is the personal website of Ignacio Palomo Duarte, user experience consultant. If you're looking for my portfolio and more information just have a look at the homepage, and if you like this article maybe you can consider sharing it on twitter.