If you’ve ever read Nielsens top ten webdesign mistakes you’ll know that one of the mistakes that comes back year after year is not differing between visited and not visited links. The question generally is how to do this without breaking the design.

Designing a different mark-up for the current active link, and giving visited links another nice design sometimes proofs hard. Especially since it gets confusing with three different designs in one menu. What design means what?

Now I’ve found a site that has found a really great way to do this.
http://www.collylogic.com/

Collylogic has checkboxes after their links which show wether it’s active, visited or just a link. They way they’ve done is very easy. They use <ul> and <li> to build the list of links. Especially with the upcoming css dropdown menu’s that have been appearing lately this is a very common practice. In there a normal link is placed <a href=’link.com’> and, here’s the trick, a bit of css is added.

a { display : block; width: 200px}
a:link { background-image : url('/images/link.gif')}
a:hover { background-image : url('/images/hover.gif')}
a:active {background-image : url('/images/active.gif')}
a:visited {background-image : url('/images/visited.gif')}


By making sure the image is as wide as the link you can get the checkbox at the end of the link, or at the beginning. It’s very easy, and adds a lot in respect of usability to your site.

edit: Since I liked this so much I went ahead and added it to my blog, in a modified version of course. The blogroll now features a different images for visited links than for other links. And if I were good at designing you wouldn’t have to check out the example at collylogic anymore, but theirs just look better.

Related posts

This entry was posted on Wednesday, December 28th, 2005 at 11:24 by Sonja Duijvesteijn and is filed under Webdevelopment, CSS, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.