Lesson #19

June 10, 2013

How-To make links more clickable

One of the problems I find myself running into when designing UI is always, how do I make it easier for my visitors and friends to click the links that are on the page they are visiting. One example of where I ran into this problem recently is a page where I was working on creating a way for people to upvote or downvote articles that are here on clearskyy.net. The image for the links is rather small, however we don't want the clickable area to be just restricted to the image, this would make it so that a small area is the only space that can trigger the vote event. This certainly won't do, especially on mobile, where there was a case where the wrong vote was cast.

To resolve this issue we are going to work on making the clickable area of our links larger. For those of us making responsive designs, we often work with percentages for our pages. Unfortunately I found that working with percentages with this trick, doesn't work at all and I will explain the quirk that occurs when you try to.

This tutorial will be quick and dirty since not a whole lot is going on and its not that involved, however I will go over a few things I've run into that might help you understand how this isn't a silver bullet, cure-all approach to this issue. There are still a few things you have to look out for when using this technique.

Let's get started.

So, you have presumably, multiple links, such as a navigation or what have you, or you just like links, hey [wo]man that's your bag, I'm not going to rag on you about it. At any rate, you have links and you need them clicked, so we make them bigger, easier to click, at least that's the idea anyways, here's what you put in your CSS:

a { 
    display: block;
    padding: 0.25em;

Woah, woah, woah now, what is that "em" garbage?
We'll my good sir/madam, that is how we are going to make our links work in our neat little responsive site. If you don't really care about how "responsive" your site is, well you should perhaps rethink that, and if not, well this won't really hurt. Look in the Quick Questions section for more information on Ems.

Alright, this isn't the end of this tutorial just yet, I have a few things I need to clear up. You should probably avoid just making all your links just "display: block".

How come?
We'll because of what that does, it makes the link expand horizontally the whole width of the container. I know some of you will read that and just think "dope" and click off the page, if that's what you want, go for it. I'm not here to hinder your imagination/creativity. If you're not one of those people, feel free to read on.

Containers? you never really explained what containers are buttwipe... 
When you create a link, you're already working in a container called the "body" of our HTML document. If you create a div, the div is the container, the table cells in a table or the list item of our lists. All containers have their own paddings and margins, yes this includes the body, so even from the get-go you're dealing with paddings and margins. You just created a simple "Hello World" document and you had all this going on in the background the whole time, wow the deception. This is perhaps why you often see layouts with either one of the following three different styles:

* { margin: 0; padding: 0; } //this is bad by the way, don't use this. This selects all the elements.

html, body { margin: 0; padding: 0; }

body { margin: 0; padding: 0; }

This is because the designer wants to create their layout without having to deal with the predefined layout, set forth by those who write the standards for web markup. Those rebels, oh you fancy, huh? Look out, we got a badass over here.

Having our links fill out the container isn't always a bad thing, in the example of navigation, it's ideal to have our links this way. However in the main body of our pages, this is often not what we're looking to achieve in our design. This is why we put a padding on links, this will limit the extent of the clickable region to just around the text or image of our link. You can make it as big or small as you like just by adjusting the padding, test it out to see what works in your layout. Sometimes just having the link fill out the container, such as a table cell isn't enough, in which case we need more padding because perhaps our image is too small.

This is going to push stuff around, isn't it?
Yes, unfortunately it is, you will have to compensate, or anticipate that because we are using paddings that it will pushing your tables outward, your text in your paragraphs will be pushed out. That is why this is most ideal for images, since usually you have your text float around your images. Maybe this is what you want, perhaps it isn't. I would suggest playing with the z-indexes or positioning your link absolutely if you don't want stuff shoved around, but it can't really be avoided.

Quick Questions:

Q:  So, how come we can't use percentages?
A:  This is a good question, I don't know the exact reason, however, I found that when I tried increasing the padding of the link using percentages it would increase the padding between the link and the container. This is troublesome because the link stays the same small size while the area around it gets increased. The clickable region stays the same and the table or unordered list or div get larger potentially making your layout reach some breaking points.

Q:  What are Ems?
A:  Ems are a flexible, relative measurement. It's the length of an "m" in the font you are using, go figure. The great thing about this, however is that you can use it for your whole site and just have everything relative to each other, this is great for building fluid layouts and not having everything static to the pixel. We live in an age with varying screen sizes and pixel densities, time to accommodate that. I had a layout build using ems, but I switched to percentages to get a more organic site that molds to your window size in real time. Ems I believe would load to your current window size, but if you needed to change your window, you had to refresh to get everything to resize.

Q:  Do I have to have that 0 before the .25? I'm very anti-zero.
A:  Yep, otherwise it won't work. It's just good practice, I suggest you use the 0 in your coursework too, for clarity reasons. Always remember to include units as well.

Q:  This really doesn't make sense, I thought padding was outside of the content? As in, adding padding would just cause extra fluff outside my link.
A:  According to W3C specifications, an element's width is the sum of an element's content, left/right padding, and left/right margin. If we were adjusting for example the table cell's padding this would be true. This would add extra space between the table cell in the link, and that space would not activate the link when clicked. However since we are increasing the padding of the link itself we are adding space around the element in question that is also active because it is a part of the link. In other words, the link owns that space that we are creating inside of it. Kind of like expanding its territory. If you really wanted the padding to act like a margin, try using percentages, that will add extra space that doesn't activate the link.

author: clearskyy











ComputersCSSFoodGamesGearHardwareHealthHTMLHumorjQueryLaptopsMobileMoviesMusicMySQLNewsOnline ServiceOperating SystemPeripheralsPetsPHPRandomSoftwareSportsTV ShowsUnsortedVlog

Thanks for checking us out ♥

Hand coded with the blood, sweat, tears, and demonic infant sacrifices made by no other than Nate Seymour.


Icons made by Icomoon, SimpleIcon, Freepik, Madebyoliver, Google from www.flaticon.com is licensed by CC BY 3.0