Getting creative with visited links

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.sitepoint.com AlexW

    Oh, man that ‘design eye for the usabililty guy’ is so funny but so right it’s almost ridiculous..

    Genius… unfettered genius.

  • Jesse Ruderman

    I find it amusing that someone is using background images in combination with :link / :visited. That combination also leads to a privacy hole that lets any web site you visit find out e.g. which Slashdot articles you read. (http://bugzilla.mozilla.org/show_bug.cgi?id=57351)

  • http://www.saumendra.com saumendra

    The Simon Collison’s Ticked Off technique, for the links visited were informative and smart way of implementation

  • Simon Collison

    In response to Jesse’s post above, I’m gonna post some info on my site about the bug you describe later today. I actually do not see it as a major security issue, but I agree it is worth highlighting. Check the site later tonight…

  • http://simon.incutio.com/ Skunk

    That certainly is an interesting security flaw – well, it’s more of a privacy risk than an outright security flaw but I’m not sure where or even if there’s a line drawn between the two. Simon Collison’s write up of the problem is now online for anyone still looking to understand it.

  • http://www.simonjobling.com Si

    I think Simon Collison’s technique is quite innovative. Aside of the securit flaws involved, if used properly, it can greatly enhance the user’s experience of a website. I know I found it useful to know which articles I had read.

  • rundmw

    Hmmm, my test of the snoop bug/feature (using a CSS background image for a visited link) worked only when the link was displayed. When the link was wrapped in a div with display:none, the browser (IE 6.0.28) never requested the image url. Any ideas?

  • http://simon.incutio.com/ Skunk

    Browsers won’t load anything that’s inside a display: none block, because it isn’t treated as part of the visible DOM tree. If you want to hide links that are being used for visited link snooping you’ll have to obscure them some other way – by placing them beneath a large absolutely positioned element for example.