Fitts' Law

The purpose of this example is to demonstrate how to apply Fitts' Law to links within the the body copy. It's designed to show functionality, not beauty — I realise how ugly the green links are. This example is based upon the discussion in Mezzoblue, and the examples produced by David Benton as his solution. David's solutions still have some caveats as he mentioned in his Fitts' Law and Text links article. They are:

  1. …Opera 7 covers the padding below the link, meaning some of the benefit is lost. …
  2. In link-rich text, it may not be clear which link a user is above. This technique should always be used with an appropriate a:hover style.
  3. If you use background colors or images for your links, this technique may not be for you…
  4. Selecting and copying text, as mentioned above, may be hindered slightly

The reason for the first point about Opera clipping bottom is due to the line box of the span elements used had a higher z-index than the link, simply because it came later in the document. David should have applied the background to the p element but for some reason, he thought he need to use span. However, This technique addressed all of those points in the following ways:

  1. Used z-index to ensure the link padding always covers surrounding text.
  2. Used :hover styles to indicate the selected link.
  3. Backgrounds can be used because the padding does not cover surrounding text until the link is hovered.
  4. Selecting and copying text is not hindered for the same reason.

Besides addressing each of those four caveats of David's method, the additional principle I adopted here is that the problem with small links is that it's too easy to move the cusor a little too far, thus slipping off the link and perhaps onto another nearby. This technique provides clear visual feedback as to which link will be selected, and tries to prevet slipping off the link by increasing the target size after the cursor hovers the link.

Note: The horizontal padding is permanently applied, rather than just on :hover because under some circumstances, this can trigger re-flow when a link is hovered. This occured when the link wrapped at the edge of the containg block, thus spanning 2 lines.

test test test test nearby links test test test test test test test test test test 2 links seperated, by a comma test test test test test test test test test test test test test test 2 links with no space between test test test test test test test test test test test test test test

This is a link on one line
This is another link on the next

Comments are welcome. You may contact me