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.

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

28 Responses:

  1. Seems a lot like what Simon Collison has been doing with his sidebar links, but he’s using background images…

  2. Mike P. says:

    “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 ;-]

  3. Colly says:

    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

  4. Mike D. says:

    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…

  5. Colly says:

    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.

  6. Scott Plumlee says:

    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.

  7. Mike P. says:

    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.

  8. 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. ;)

  9. What’s wrong with the disappear method? I don’t need to be distracted by links I’ve already clicked.

  10. 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!

  11. Why not use Unicode characters 2713 CHECK MARK or 2714 HEAVY CHECK MARK? They just seem to be more appropriate than the radical sign.

  12. Mike D. says:

    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.

  13. Chris Rollins says:

    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?

  14. 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

  15. Ann, web designer says:

    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

  16. Hm. On my notebook firefox doesn’t show this character, on my pc the same version of firefox shows it.

  17. Chris says:

    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.

  18. Joanne says:

    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!

  19. 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…

  20. Making Visited Links Radical

    http://www.mikeindustries.com/blog/archives/000017.php

  21. 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…

  22. visited links and styling

    Making Visited Links Radical — Check mark after visited links as a nice visual way to see that a link…

  23. Checking Off Visited Links

    Intriguing idea to checkmark visited links via CSS…

  24. 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

  25. 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.

  26. 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…

  27. 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…

  28. […] 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 […]

Shared
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.

LiveSurface:

A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.

Jonah Peretti's letter to BuzzFeed’s employees:

If you’re wondering what a excellent blueprint for a modern media company looks like, look no further than Buzzfeed CEO Jonah Peretti’s latest email to his employees. In it, Peretti explains a lot of his company’s virtues, the most important being a relentless focus on always providing what’s best for the user. Vox Media (operators of The Verge) is the only other company I can think of which approaches this level of reform and execution.

The Covers Project:

I love this so much: a cross-referenceable database of cover songs, searchable by song or artist. Slowed down, acoustic covers — no matter the song — are so enjoyable to me that I wish it was a requirement to play one at every show. If you like them as much as I do, make sure to check out M. Ward’s Let’s Dance or Sun Kil Moon’s entire album of Modest Mouse covers.