Increasing Clickable Area on Links

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.


  • It still annoys me that 37signals don't use any sort of sementic or valid code for anything. A lot of the pages don't even have the <html> tags's frown

    Posted by Matt Oakes (external link) on Fri 20 Jun 2008 at 18:20

  • Yeah, they seem to be more about functionality than standards-compliance. I really wouldn't care if they didn't have such a big influence on the web development community. They set a bad example.

    Posted by Ethan Poole (external link) on Sat 21 Jun 2008 at 10:15