Learn more about user experience, web development and digital marketingView training courses

This is my first blog post for Webcredible – I’ve just recently joined the team here. My name is Steven Datt; I’ve recently completed a degree at Roehampton in Web & Multimedia computing, and I’m a web developer to the core. I can’t say just how excited I am to have landed this job, not many can say they got their ideal web development job straight out of uni!

I’m mainly a PHP sort of guy, though here at Webcredible I get to learn all sorts of things, from the frontend HTML & CSS to the back end scripting and databases, even the usability testing that goes on. Because of this, I’m in a good position to filter out, interpret and pass on whatever I learn to you, as I learn it – and I’m finding there’s a lot they can teach me here!

Increasing the clickable area for links may seem like a small and insignificant addition, but it actually greatly increases the usability your site offers, which in turn increases potential conversions.

You can see examples of this feature on our site and there’s a way of accomplishing it with a few lines of CSS.

To begin, we’ll create the list items for the navigation:


<ul>
<li><a href='#'>Link 1</a></li>
<li><a href=
'#'>Link 2</a></li>
<li><a href=
'#'>Link 3</a></li>
<li><a href=
'#'>Link 4</a></li>
</ul>

Simple List

Now to add a bit of style to it all:


ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul li {
float: left;
margin: 0 5px;
}
ul li a {
color: #000;
text-decoration: none;
}
ul li a:hover {
background: red;
text-decoration: underline;
}

Which gives us this horizontal aligned navigation bar. Half way there!

icl-step2

So, we’ve created the links, and styled them, the last piece of the puzzle is to put in the CSS to maximise the link area:

ul li a {
color: #000;
text-decoration: none;
}

Add this code which will increase the “hit” area to encompass more space surrounding the link text:

display: block;
padding: 10px;

And we’re done! Told you it was simple!

icl-step3

Comments

  • Darrel Boyt says

    Hi, Steven,

    In your HTML code snippet for the list, I believe you intended the tags at the end of the lines to be (/li).
    Other than that, you demonstrated a nice, simple way to make links more “clickable”.

    Thanks!

    4 January 2011 at 9:02 pm

  • Jean-Marie Unger says

    Hi Steven,

    Thanks for your demo. Simple and good for usability.
    It is also possible to have different padding all other the “block”.

    Great and good first one!

    5 January 2011 at 6:14 am

  • Good Web Design says

    Yeah. makes you wonder why not everybody using it. Hate those small click areas.. hehe

    19 January 2011 at 7:54 am

  • Wayne Hunt says

    Hi Steven – good first article that I know I would have needed during my early days as a front end developer. You still need to close your list with (/ul) not (ul) :)

    Might be worthwhile mentioning that you can also use a background image instead of colour to create a stylish button.

    Good luck at Webcredible.

    20 January 2011 at 5:25 pm

Leave a comment

Required indicates required fields

 

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centered, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

Back to top