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 prac­tice for some time now to ensure that nav­ig­a­tion links have appro­pri­ate pad­ding. This makes click­ing these links much easi­er, espe­cially if you are on a mobile device. Here is an art­icle, writ­ten four years ago, dis­cuss­ing this very idea.

Why aren’t we tak­ing this one step fur­ther? Links don’t only exist in menus, and inline links can be tricky to click accur­ately. Mobile users bene­fit the most from an increased click area, although I must admit that I occa­sion­ally mis­click with my mouse too.

Now keep in mind that this is only a thought. There are almost cer­tainly going to be some issues that I haven’t yet con­sidered. One that is imme­di­ately appar­ent is that click areas can now over­lap. As long as you keep this in mind, and don’t go crazy when increas­ing their size, I don’t think this will be a major con­cern. More often than not, links in body copy aren’t adja­cent.

The trick is to be subtle with this tech­nique; increase the click area enough that users don’t have to be 100% accur­ate, but don’t increase it too much so that the beha­vi­or becomes unex­pec­ted. It’s a pretty small change, but it’s the little things that make all the dif­fer­ence.

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 pos­i­tion of the link is static.

What are your thoughts on this tech­nique? I would love to start a dis­cus­sion on the concept, and why it may, or may not be, a good idea.

Tweet this

Looking for more articles? Find them here

15 Comments

  1. Jacob Kelley

    Cool stuff man. Personally, I think this would be best left to javas­cri­ot, allow­ing detec­tion and pre­ven­tion of over­lap­ping areas. All in all, it’s a cool thought, but it Can prob­ably be con­fus­ing, too.

  2. Simon

    Very nifty tech­nique, one thing to look at would be the over­lap if 1 link was above/below anoth­er but this def­in­itely helps usab­il­ity.

    @Jacob I would have to dis­agree with leav­ing this is JavaScript. This is com­pletely a usab­il­ity fea­ture to enhance the exper­i­ence.

  3. Gareth

    So long as this tech­nique is used wisely, due to over­lap­ping, then it’s a fant­ast­ic idea. As you say it’s the little things that count and can cre­ate a bet­ter user exper­i­ence, espe­cially for mobile. Overall it’s an excel­lent tip, nice work!

  5. Josh

    Thanks for your feed­back, guys.

    Jacob, I agree that JavaScript would help pre­vent over­lap­ping, but I think that it is okay doing the heavy lift­ing via CSS, as it is essen­tially a style change.

  6. Olly Hodgson

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

    It can be a tricky one some­times though. If you set it for all links, you need to make sure you over­ride it every­where you don’t need it (e.g. top/sub nav­ig­a­tion, image links, oth­er cus­tom com­pon­ents) but that sort of thing tends to get it’s mar­gins and pad­ding set to some­thing else any­way. The oth­er issue is if you use a back­ground image to set an icon on the link, the pad­ding and back­ground-pos­i­tion need adjust­ing to suit. Again, not really a major issue unless one thing uses em and the oth­er px.

  7. Josh

    Thanks for your com­ment, Olly. It’s great to hear that there are oth­ers out there using this tech­nique. Thanks for shar­ing those little quirks too!

  10. Josh

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

  11. Chris Bracco

    This is a good idea, except if there is a situ­ation where two words next to each oth­er are link­ing to two sep­ar­ate places, the second link’s click­able area over­laps the first link’s click­able area, which is a prob­lem. :/