Increasing the Clickable Area of Inline Links

Increasing the Clickable Area of Inline Links

Demo

This post will take 1 minute to read.

It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Here is an article, written four years ago, discussing this very idea.

Why aren’t we taking this one step further? Links don’t only exist in menus, and inline links can be tricky to click accurately. Mobile users benefit the most from an increased click area, although I must admit that I occasionally misclick with my mouse too.

Now keep in mind that this is only a thought. There are almost certainly going to be some issues that I haven’t yet considered. One that is immediately apparent is that click areas can now overlap. As long as you keep this in mind, and don’t go crazy when increasing their size, I don’t think this will be a major concern. More often than not, links in body copy aren’t adjacent.

The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. It’s a pretty small change, but it’s the little things that make all the difference.

Here is an example of what the CSS rule might look like:

p a {
    margin: -.5em;
    padding: .5em;
    position: relative;
}

Notice the use of position: relative? This is due to a strange browser bug that doesn’t respect the right hand side of the click area if the position of the link is static.

What are your thoughts on this technique? I would love to start a discussion on the concept, and why it may, or may not be, a good idea.

Tweet this

15 Comments

  1. Jacob Kelley

    Cool stuff man. Personally, I think this would be best left to javascriot, allowing detection and prevention of overlapping areas. All in all, it’s a cool thought, but it Can probably be confusing, too.

  2. Simon

    Very nifty technique, one thing to look at would be the overlap if 1 link was above/below another but this definitely helps usability.

    @Jacob I would have to disagree with leaving this is JavaScript. This is completely a usability feature to enhance the experience.

  3. Gareth

    So long as this technique is used wisely, due to overlapping, then it’s a fantastic idea. As you say it’s the little things that count and can create a better user experience, especially for mobile. Overall it’s an excellent tip, nice work!

  4. Josh

    Thanks for your feedback, guys.

    Jacob, I agree that JavaScript would help prevent overlapping, but I think that it is okay doing the heavy lifting via CSS, as it is essentially a style change.

  5. Olly Hodgson

    I’ve been using this technique for what seems like aeons now :) It’s most useful in body text where there’s a nice open line-height.

    It can be a tricky one sometimes though. If you set it for all links, you need to make sure you override it everywhere you don’t need it (e.g. top/sub navigation, image links, other custom components) but that sort of thing tends to get it’s margins and padding set to something else anyway. The other issue is if you use a background image to set an icon on the link, the padding and background-position need adjusting to suit. Again, not really a major issue unless one thing uses em and the other px.

  6. Josh

    Thanks for your comment, Olly. It’s great to hear that there are others out there using this technique. Thanks for sharing those little quirks too!

  7. Josh

    Thanks, Paul. I’m glad I’m not the only one who thinks it’s a good idea!

  8. Chris Bracco

    This is a good idea, except if there is a situation where two words next to each other are linking to two separate places, the second link’s clickable area overlaps the first link’s clickable area, which is a problem. :/