New Link Style
Summary: Content links on mono are now underlined instead of boldfaced.
Keith Robinson's Guidelines for Linking and Visited Links: Your Take made me take a 357th look at the way links are presented on mono. Until now they had always been colored and bold, with a different color for visited links. I had preferred bold links over underlined for aesthetical reasons. My main concern was that the boldfaced links interfered visually with the strong and b (bold) elements; it seemed that a clear distinction was difficult to achieve using color alone.
Keith's posts and the accompanying comments made me reevaluate my choice. After all, many fine weblogs do use underlined links and get away with it (e.g. Seriocomic, The Daily Flight, and Asterisk itself). Like it or not, underlined links is a strong web design convention. As with most such conventions, I think designers should strive to break them as often as possible. It just didn't seem warranted for this weblog anymore.
Consequently, links on mono are now underlined instead of boldfaced.
Unlike Keith, however, I have always found it helpful when weblog posts Change the Color of Visited Links, and will continue to do so here. In line with Jakob Nielsen's Guidelines for Visualizing Links, I have changed the colors so that visited links now appear more desaturated and washed out than unvisited links. I hope this also works for colorblind readers.
Of course, it may not always be advisable to distinguish between visited and unvisited links. For an interesting and more nuanced discussion than Dr. Nielsen's, see Andrei Herasimchuk's Oops! Nielsen did it again.
Here is the CSS in use now:
a {
text-decoration:none;
color:#222;
border-bottom:1px solid #555;
}
a:visited {
color:#666;
border-color:#aaa;
}
a:hover {
color:#fff;
background:#222;
border-color:#222;
}
a:visited:hover {
color:#fff;
background:#666;
border-color:#666;
}
As seen above, I use a bottom-border instead of an underline. I find that this adds a little more breathing room under words, and allows the text and the underline to be styled differently.
BlogAid
Help support the Asian earthquake and tsunami appeal...
Save Darfur
A preventable humanitarian crisis is raging in the Darfur region..
MaThIbUs
Comment on September 25, 2004 at 5:45 pm
That's funny --- ever since my site launched I had been using bold links too, but since my recent redesign, they're underlined. And it's only now I get to read these articles? Damn.
I dig the change on this site, somehow it still fits perfectly in the design.
MaThIbUs
Comment on September 25, 2004 at 6:18 pm
(Now you'll only have to "redesign" the about page etc a bit.
)
Lars
Comment on September 25, 2004 at 7:49 pm
Thanks Mathias. Good job with your redesign! You have taken a very consistent approach to link styles; certainly no room for confusion there. I experimented with dotted underlines because I think they look better than solid ones. However, the link color I eventually settled for would have made it easy to confuse links with abbrevations and acronyms. Dotted underlines seem to be popular though: Stopdesign and your own site are but two examples that come to mind.
The About page is actually part of larsholst.info, a 'personal website' that preceded, and has been left intentionally different from this weblog. So rather than redesigning the existing page, I should make an about page (and a contact form!) that is part of mono. One day...
Carol
Comment on September 26, 2004 at 12:00 am
Hi --
I swear I'm not comment-stalking you...but I did come over here from Keith's article on links. I love the way you've done the links inside the blog with the background change. But the visited link colour -- hmmm...the slight change to a lighter grey -- is that enough? Or should it be a completely separate colour so that it *really* stands out?
And I've been dying to ask someone this question -- if I want to bold one word in a blog post, am I a terrible person for using HTML text formatting instead of creating a CSS style for bold words? Sigh...
Lars
Comment on September 26, 2004 at 12:51 am
Thanks Carol. Good question about the lighter grey. It is enough for me, but as with all colors, different shades of grey will look different on different displays. You never really know until you have done some proper testing or received sufficient amounts of quality feedback. I do prefer related colors to completely different ones though. This is one reason I linked to Jakob Nielsen's Guidelines for Visualizing Links; I find that the "washed out/used" look he suggests is the most intuitive. With other color combinations, visitors will notice the difference but will have a hard time knowing which color represents what state.
Actually, you are a terrible person if you don't use HTML in this case. Only flame-baiting markup zealots would argue that
textplus the associated CSS declaration is somehow "better" or more correct thantext. Both variants are semantically meaningless, which is the only thing that matters. Simplicity wins.seriocomic
Comment on September 26, 2004 at 3:03 pm
This is a common quandry faced by web designers, especially since it is an easy way to make one site stand apart from another by doing funny things with links.
Untill all browsers adopt CSS3 attributes such as
link:after, which gives the designer another method of discerning links from normal text then the underline will remain the method du jour.I haven't looked at or thought about the rational behind using border-bottom rather than text-decoration, but you have given me food for thought.
When such strong design conventions exist and in a time when web-standards creeps into design standards, it can become limiting to adhere to such conventions. However, it is funny to find myself getting annoyed when people don't use dotted/dashed underlines for acronyms or abbreviations.
As for coloring, there isn't much less saturated than grey. Its finding that right shade of grey that gets frustrating.
Honestly, I think that the black underline adds an unwanted heavyness to your current text, possibly having a lighter shade of underline, perhaps #333 through to #666 would soften the black on black feel, or even change the link text (and its associated underline) to another color alltogether.
An interesting dilemma of presentation vs usability.
Lars
Comment on September 26, 2004 at 4:30 pm
358...
Lars
Comment on September 26, 2004 at 6:23 pm
Exactly! And I am extremely frustrated...
I agree that the #222 underline is a bit on the heavy side, particularly when a high density of multiple links is present. After reading your comment I had another go at changing the link colors (*sigh*)... The problem is to maintain enough contrast between visited and unvisited links: changing the unvisited links to some other matching color, such as blue or blue-green, will invariably make them appear lighter, and thus reduce contrast. If instead I make the unvisited links any lighter, then readability is compromised. I also tried changing just the underline color, first to a lighter grey, then to other colors, but I didn't like the way it looked. Made me think of Michael Barrish's weblog, Oblivio: the mismatch between the color of the link text and the underline is the one thing I don't like about his design. Also, if the underline gets too light, the dotted abbrevation/acronym underline disappears...
Despite all this, I did up the underline colors a notch, from #444 to #555, and from #999 to #aaa, respectively. I don't know if the difference is visible, but it feels slightly better. Any further suggestions would be appreciated.
Rob Mientjes
Comment on September 29, 2004 at 7:35 pm
Since my redesign, I do use an underline for my blog, but that's more for the ease of it, and the underlines don't need other colours. And my :hover is very eye-catching, something I do like, but a friend of mine doesn't. Linking is about taste and compromises.