Website design rule 5: design your text links

If there is no colour scheme for links (and you haven’t customised your browser) then text links you haven’t followed—or only followed some time ago—will be blue and underlined. Links you have followed recently will be purple and underlined. When your mouse cursor rests on the link, the cursor will change to a pointing finger, but the link will stay as it was. When you click on the link, the link will also stay as it was—for the second or so before you are whisked away to the new location.

Very few professionally designed pages keep this default look and behaviour. Nor should you. So my fifth rule is: design your text links.

You will take this step as part of working out a colour scheme (Rule 3), perhaps at the same time as you are deciding your two basic backgrounds (Rule 4). And you will have four link states to consider: unvisited, visited, hovered over, and clicked on.

There are some obvious things to keep an eye out for. The links must be readable against the background, just like other text—and unvisited links (in particular) must stand out against the surrounding text itself. What is more, the colour of unvisited links, and even shades and tints of that colour, should not be used for anything except links. If the visitor sees another bit of text in the same or a very similar colour, they will take it to be a link, and will be frustrated when they find it isn’t.

The exact colours of both will depend on your scheme, but if other text is black on white, then the default bright blue is as good a colour as any for unvisited links. On the other hand, purple stands out too much for my eye, so I would never use purple for a visited link. Rather I would use a shade of the colour I had picked for my main link colour—one that stands out less against surrounding text, or one which looks as if it has faded out. If unvisited links are blue, visited links can be navy or very pale blue; if they are green, visited links can be a darker or much paler green. Oh, and they should never be the same: not to change the colour of visited text links makes a site look unresponsive. It is also confusing: visitors expect to be able to see that have already followed a link.

One thing I always do is remove the underline from links in both their unvisited and their visited states. To my eyes, lines under links look really old-fashioned and unprofessional. But I often put them back for the ‘hovered over’ state. This is always reassuring for a visitor. Of course, the cursor will change—but this extra confirmation is often desirable. I have experimented with emboldening the link (check this very page!) but adding the underline is simpler and usually better.

The other thing I usually do for the ‘hovered over’ state is restore the ‘unvisited link’ colour. This is a further confirmation, and it carries a kind of meaning. It says, “For you this is not a visited link, one you have done with. It is a link you want to follow now.”

The clicked on, or ‘active’ state is the least important of the four. But it gives a page a tiny bit more of an interactive feel, which may matter for some sites. And it is reassuring if the page linked to is slow in arriving: the visitor can see that the link has been clicked on. So if you decide to set this stage, it should be highly contrasting, even glaringly out of place. After all, we’re leaving this page, we’re moving on. A stark red will often do the trick.

Apart from removing and restoring the underline, other effects are possible. A particular site might find it useful to strike through visited links, like crossing out jobs on a scribble pad. And the one time when blinking text could be acceptable would be on a link in a clicked on, or ‘active’ state. These are not often seen, and I myself have tried neither. So far…

A tiny final point. If you’re setting these states in your stylesheet, make sure you define them in the right order, or you won’t get the effects you want. Later stylesheet rules cancel earlier ones when a link is simultaneously in more than one state. So, define the unvisited state first: a:link, then the visited state: a:visited, then the hovered over state: a:hover, and finally the clicked on state: a:active.