Making Visited Links Radical
Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they’ve been. People with actual design taste use more palatable colors, or perhaps a font-weight variation instead. When Mike Industries launched, visited links differentiated themselves with a subtle grey background.
Although I liked the grey background implementation, it started to look more like a highlighter pen than anything else.
I decided to rethink the situation.
Since doing normal stuff is no fun, I decided to experiment with the :after pseudo class. What character could one insert after a link to indicate that the link had already been checked? Hmmm. How about a checkmark? The standard ISO character set gives us the mathematical “radical” sign (√) which looks remarkably like a hand sketched checkmark at small sizes. So this should be easy, right? You’d think something like this would do the trick:
a:visited:after {
content: " √";
font-size: 75%;
}
Nope. It turns out that prints the actual encoded character series for radical after each link. But by using the unicode entity instead ( \221A ), the checkmark renders perfectly after each visited link:
a:visited:after {
content: " \221A";
content: "\00A0\221A";
font-size: 75%;
}
* Thanks to Jens Meiert for improving this technique as illustrated above by using a non-breaking space before the radical, instead of a regular space.
I am not so naive to think this has never been done before, but I certainly do like the effect. Sure, the :after pseudo class isn’t supported in PC IE, but at least it degrades silently in feature-challenged browsers.
Seems a lot like what Simon Collison has been doing with his sidebar links, but he’s using background images…
“but at least it degrades silently in feature-challenged browsers”
Leaving the browser with 9x% of the marketshare with nothing?
If you are set on using generated content, perhaps a little hacking for IE?
* html a:visited along with some padding and a background image would do, similar to the method described in the link that Jemaleddin provides (in #1 above) could be added to clean up the stragglers ;-]
I stopped at adding ‘ticks’ to mid-sentence links as I personally felt it affected legibility and reading speed, but it works well on things like comments, permalink, trackback links.
I made a version of the mid-sentence version work by using a background image, not specifying block width, and aligning link text to the right. Worked a treat, and fully cross-browser.
I’ll be evangelical about using ticks for added usability wherever possible. But, be wary of using background images on links:
background images security flaw, and more here
I personally don’t mind the mid-sentence checkmarks as they seem small and light enough to not really affect readability, but of course, that’s just my opinion. An opinion which could easily change after time and/or any potential complaints…
Simon: Upon looking at your site again, I’m sure you subconsciously planted this checkmark idea in my head because now that I think about it, I clearly remember seeing the image-based implementation in your sidebar. And so, I do hereby credit thee with a large dose of inspiration!
I am not, however, too worried about the potential security exploit mentioned by others with regards to your site (even though I’m not using background-images anyway). Number one: I’m just not tracking stats like that. And number two: I’m not too sure the proprietor of a site doesn’t have the right to track stuff like that if they wanted to. I can add javascript to my links to track where you’re clicking anyway, so doing it with a background image doesn’t seem any worse… unless I’m missing something.
Also, I will look into providing the hack that Mike P. suggests for IE 6. Since they get their grey visited link color anyway, I didn’t think it totally necessary to offer them full parity in radicalness as well. There’s just something satisfying about keeping subtleties away from IE people…
Mike, I think a chap in Germany did the ticks first (very efficient people), though I hadn’t seen it until he posted a comment on my site.
Regarding readability, your ticks are subtle, and I think they work – it’s just takes a bit of getting used to seeing them mid-sentence. I’m not concerned about the background image security either, but Andy Clarke has definitely highlighted it’s potential misuse in his article.
Only issue for me is that I have to go to the end of the link to see the checkmark. On a long link, it’s not as obvious. Maybe try the checkmark at the start? When I check off a list, I normally check to the left.
Hmm, my apologies, seems I missed that you were offering the grey visited color to IE, and that they would only miss out on the ticks. My fault for checking in IE with my eyes closed, apparently.
Doug over at Stopdesign uses genereated content (I believe) on his home page quite nicely. The » that follow his ‘more’ links gets that treatment, and IE loses out there too.
I borrowed the checkmarks from Colly for my own site. I like them in a list of links but not as much inline with other text …
For me my eyes kept getting drawn to them as I’m reading through a sentance, but the brain is good at filtering out what it doesn’t need so after a while I can just skip right past them.
How many simultaneous ways do you need to show that the link has been visited? You could always add the strike-though method as well. ;)
What’s wrong with the disappear method? I don’t need to be distracted by links I’ve already clicked.
Definitely a neat trick. I’ve seen it done with the pseudo-element :after before (heh) but never seen that radical character. A little suggestion though? Since your visited color is so close to the regular text, why not make the radical character a different color? Such as bright orange or red, so that when scanning, people will know it’s a visited link, and not miss the radical character. My eyesight isn’t terribly great, and when I tried this on my page, I’ve found having the radical a different color than the link text was easier to spot and recognize.
Loving the site and the subjects you post about. Keep up the good work!
Why not use Unicode characters 2713 CHECK MARK or 2714 HEAVY CHECK MARK? They just seem to be more appropriate than the radical sign.
Frank:
I’d like to use the checkmark or heavy check unicode characters, but browser/OS support doesn’t seem very good so far. While Safari/Mozilla/Firefox can all render the radical character correctly, only Safari seems to render the checkmark or heavy check.
The problem with different styled visited links from those with “more design taste” is that how the hell are visitors supposed to know what that style signifies?
By the way, you can easily improve this approach by preventing the radical (or whatever) symbol to break after the corresponding link by using e.g. “\00A0″ (no-break space) instead of a space:
a:visited:after { content: "\00A0\221A"; }Will work just fine.
Jens
Links, being an important part of any web site, try to be extraordinary in look and feel. Although, people are used to conventional links, it is the human nature to invent something new. Whether the new link techniques be part of any web site in the future is a question of time and tradition.
Ann, web designer
Hm. On my notebook firefox doesn’t show this character, on my pc the same version of firefox shows it.
We are redesigning our doing business in Japan site to improve accessibility and user experience. The site is not so large but has a lot of reference information which takes a couple of hours to read through. Many of our visitors are busy executives who may come back to the site 5 or 6 times and get frustrated revisting pages. Rgis technique looks good but most of our users (85% or more) are using IE 6.
We tried the strikethrough effect for visited links recommended by some designers but frankly it gives a “no through street” effect we don’t like.
I think for present we will use a tint close to the default IE visited link and lighten it then “revist” this technique (pun intended) once IE 7 gains acceptance.
I don’t know if it has been overlooked or not, but blind people also need some sort of indication that they have already visited a link. A symbol will work as long as it is labeled in such a way that a person will understand it. As to what to label it, I have not had a lot of time to experiment. Any suggestions would be great!
Link Visited: CHECK!
I’m trying something new for visited links on this site: checkmarks after visited links. I had to edit Mike’s pseudo-class a bit to make it work for me—I only wanted checkmarks after links inside of post DIVs, not on the whole page!—but I like i…
Making Visited Links Radical
http://www.mikeindustries.com/blog/archives/000017.php...
refurbishing – done.
boooooya! here we are with a almost completely refurbished evilabmonkey.org! i finally found the time to sit down and finish the transition from the 3-column design to the now present “standard for a weblog” 2-column design. “never change a winning…
visited links and styling
Making Visited Links Radical — Check mark after visited links as a nice visual way to see that a link…
Checking Off Visited Links
Intriguing idea to checkmark visited links via CSS…
Old Fragments
A shell script to edit text files as root in the GUI(via)”I’ve Gained Strength” (via)Making Visited Links RadicalReduce compile time with distccDesktop Managerrentzsch.com: mach_injectFunny Microsoft Q Articles From The Knowledge BaseMedia Matters for Ame
Abgehakt…
Um den Blog noch interessanter und übersichtlicher zu gestalten habe ich gleich mal ein nettes Gimmick eingebaut das die bereits gelesenen Beiträge “abhakt”.
Auf diesen kleinen CSS Trick brachte mich ein Beitrag von Mike Davidson in seinem Blog.
…
Besuchte Links mit einer anderen Farbe markieren?
Dan Cederholm von Simplebits stellt sich und seinen Lesern die Frage, ob und wenn ja man besuchte Links markiert. Innerhalb eines Textes ist es nicht so tragisch sagt er, aber wie sieht es auf einer Linkpage aus, wo zig Links auf der Seite sind und da…
links for 2005-07-26
Mike Davidson: Making Visited Links Radical (tags: webdesign css) CollyLogic: Ticked-off visited links Reloaded (tags: webdesign css) Fog Creek Copilot (tags: web computing useful) FeedShake – Merge , sort and filter RSS feeds (tags: rss) JSAN – JavaS…
[...] proper proportions and two characters must be used. Prepared with dynamic generation in mind. Visited Links – Everyone does visited links differently. Jakob Neilson flunkies use the old school [...]