Lowter

Increasing Clickable Area on Links

Published on the 19th of June 2008

By Ethan Poole

Awhile back, 37signals posted a blog entry about the clickable area of links (external link). The key is for links to have a padding on them, so that users do not necessarily have to click on the actual text itself, but have the ability to click on the area around it as well. It helps to improve usability and is a small adjustment to make to a website. One should only use it on navigation links really, but it does make a big difference for such a small change.

At Lowter, we have a large clickable area for our top navigation links, but this results more out of technical limitations than intention. Internet Explorer prior to version seven does not support the :hover state for elements other than anchors (<a>). Therefore, in order to achieve the changed hover-state of the tabs, all of the styling has to be applied to <a> tags, instead of the list (<li>) tag (as our navigation is semantically organised into an unordered list). Since this includes padding as well, the clickable area of the link encompasses the entire tab, as it should really.

Of course, 37signals is not big on semantics, so their links are not organised into a list. Nevertheless, if you organise your navigation links into a list, then it also allows you to easily have a clickable area for those links too.

Opera 9. Innovation delivered. Download Now (external link)