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.
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.
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.
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!
I like this idea. Better user experience. Thanks for sharing.
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.
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.
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!
nice
Just genius. All I can ask is, why haven’t we been doing this in the first place?
Props, man.
Thanks, Paul. I’m glad I’m not the only one who thinks it’s a good idea!
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. :/
Yeah, that is certainly an issue, Chris. But a solvable one I think.
This is awesome, so effin obvious.
I used padding in the past, but really small (1px or 2px) but never thought of using even higher values and then ‘bring’ the elements back to their initial position by using negative margins. Doh!
Added your snippet to my CSS Utility Rules gist (_utilities.scss partials)
Thanks, Ricardo!
Nice work! You can also achieve this with a :after if you like pseudo elements :P http://front-back.com/expand-clickable-areas-for-a-better-touch-experience