Many web developers instinctively start a new stylesheet by declaring the style of links and visited links in a single statement:
a:link, a:visited {
/* rules here */
}
Doing this avoids the tricky issue of picking a subtly different (but at the same time visually obvious) colour for visited links, but also kills off an important usability feature embedded in all modern browsers. If your site is larger than a few pages, allowing users to quickly see if they have visited a link or not can really help them navigate your site.
Jakob Nielsen, the usability guru everyone loves to hate, has written a great deal on this subject. Change the Color of Visited Links and Guidelines for Visualizing Links are his latest postings on the subject. If you find it hard to take Jakob’s advice seriously due to the complete lack of design sensibilities on display on his site you may enjoy Design By Fire’s Design Eye for the Usability Guy, which remakes Guidelines for Visualizing Links and shows just how much good design can improve usability.
What people often forget is that there are other ways of distinguishing between visited links than simply using colour. I have a side-links collection on my other blog which I call “Blogmarks”, which uses the following CSS declaration to display visited links with a line through them. This is a bad idea for general site navigation, but works pretty well in more specialised areas:
ul#bmarks a:visited {
text-decoration: line-through;
}
For a really creative alternative though, look no further than Simon Collison’s Ticked Off technique. Simon uses background images on block-level link elements to display a graphical “tick” next to links that have been visited, and extends the idea to provide a neat hover effect as well. Background images are by far the most powerful visual design tool available to CSS designers and it’s great to see them being used in ever more inventive ways.
Simon Willison
