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.
Related posts:
- Six Ideas For Breaking A Creative Block Creative block hits many designers at some stage in their...
- How Creative Should A Designer’s Resume Be? Should a designer have an extraordinarily creative-looking resume or CV?...
- The 10 Most Creative Uses for Twitter Think Twitter is just for wasting time chatting to friends...
- 30+ Places To Find Creative Commons Media The number of images, audio files, movies and other files...
- The W3C Want Your Feedback The W3C website is undergoing a long-deserved redesign and the...
Oh, man that ‘design eye for the usabililty guy’ is so funny but so right it’s almost ridiculous..
Genius… unfettered genius.
May 23rd, 2004 at 8:59 pm
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)
May 24th, 2004 at 2:43 am
The Simon Collison’s Ticked Off technique, for the links visited were informative and smart way of implementation
May 24th, 2004 at 3:58 am
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…
May 24th, 2004 at 10:19 am
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.
May 26th, 2004 at 2:06 am
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.
May 26th, 2004 at 4:44 am
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?
May 30th, 2004 at 12:36 pm
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.
May 31st, 2004 at 11:59 pm