Post Archive
› May 29, 2003
link highlighter
If there are a lot of links in a particular paragraph, depending on how the links are styled, the accentuation can actually be quite disruptive to the natural flow of reading. Likewise, links that are under-highlighted can be difficult to find. The problem is further complicated by various monitors and gamma capability.
That challenge got Stuart Robertson thinking, and he came up with a description of the problem and a solution. I read about this on a post at Blog-Fu. Over at the Blog-Fu discussion, Eric came up with a javascript based version, which actually simulates the effect in many browsers that don't have the mojo to do it with CSS (because they don't support the :hover pseudo selector for elements other than A)
Then I made a contribution by offering a more backwards compatible version that uses only CSS.
Read more about all of this at the Blog-Fu post and comments.
Comments
1. May 29, 2003 06:04 AM
2. May 29, 2003 09:47 AM
Quote this comment
vis10n Posted…
Sadly, the execution here doesn't appear to work on IE 5x (Mac 9.2).3. May 29, 2003 10:03 AM
Quote this comment
Darrel Posted…
I don't think it works in any IE. It's an interesting idea, though I'm never a fan of hiding links.4. May 29, 2003 10:17 AM
Quote this comment
huphtur Posted…
this "hiding" of links is poor usability. sure, the text reads better, but in order to find the link(s), the user has to do some "braille" surfing. which goes against what we've learned from usability studies: a user first looks at what he wants to click on, and then executes. i bet there are bookmarklets or moz extensions that can toggle styled links. (if not, i bet pixy can whip one up heh)5. May 29, 2003 10:22 AM
Quote this comment
Tony Posted…
I don't think it's about "hiding" links. It's about modifying the appearance of links. Say you have a muted color scheme. Say you dont want your links blue. Say you don't want the links to break up the reading of your content. So you keep with a color consistent with your color-palette, still maybe a text-decoration. Maybe not. But if you look, you can still see the links. But now, when you mouse over that paragraph, Viola! That links are prominent. You can easily see where you can go. The usability aspects are great. People are trained like circus monkeys to react to the blue links. Particularly people that aren't super web-saavy. Basically, now you can have your cake and eat it too. And why would you want to whip up a bookmarklet or something like that when you can do this with pure CSS? Then you (the designer) is still in control. And again, not everyone (non web-saavy) deals with bookmarklets or extensions.6. May 29, 2003 11:52 AM
Quote this comment
Nate Posted…
vis10n and Darrel, remember that the idea here is not that it "works" in IE, but rather that it *degrades* in IE. If things are working correctly in IE you should see the paragraph with links in blue and a hover color of red - no link highlighting/hiding. All links should work the same, and they should all look like the first "special" link. The blue and red are optional of course, they can be styled separately from the color combinations available on browsers that support the :not selector. Please don't mistake this as a discouragement against bug reports, please do let us know if you find a problem elsewhere (or if I'm misunderstanding).7. May 29, 2003 03:13 PM
Quote this comment
Scott M. Posted…
I agree with Tony, it's not about "hiding" links per se, but might be useful in many cases where you want to de-emphasize them upon initial reading. I could see using this for footnotes. links to definitions or the like. I know personally that sometimes I have the habit of scanning a paragraph for links before reading the content and let my attention be led by links. I can't get enough meta-textual information to the point where the original content loses impact. But that's just me...8. May 30, 2003 09:29 AM
Quote this comment
vis10n Posted…
Phrased that way, it works perfectly in IE. : ) As for the usability aspects: it's a tool, and a wonderful one at that. How usable that tool is really depends on how the designer uses that tool. What really gets me is the implied assumption by some that the links are the most important part of a page, and that they --- not the copy --- should have the default preeminence! Every page, every site has specific objectives... to accurately gage usability (read: usefulness), one must take these objectives into consideration. Some sites may very well be link-centric (I'm thinking search engines and the like), but other sites may be copy-centric and could benefit from a tool that allows them to reach their objectives. [Insert some godwinist comment about link-fascists missing the forest for the trees.]9. May 30, 2003 01:00 PM
Quote this comment
Dave S. Posted…
I came up with a few variants on Stuart's original example. Nothing groundbreaking, but a bit of a different approach to the same idea.10. May 30, 2003 03:46 PM
Quote this comment
Nate Posted…
Very nicely done Dave! It's great to have all of these options at our disposal.11. May 30, 2003 03:51 PM
Quote this comment
Darrel Posted…
I should say that it's always great to have new widgets like this. And yes, the usability aspect has more to do with how one uses such a widget than the widget itself. That said, if links are making it hard to read the text on your site, perhaps you have too many superfluous (sp?) links? Maybe a different approach to type setting would be better (like a LINKS FOUND IN THIS ARTICLE sidebar or something).12. August 29, 2003 11:33 PM
Quote this comment
huphtur Posted…
nate: is it possible to put your example back online?
http://web-graphics.com/tests/phover.html
13. August 30, 2003 05:30 PM
Quote this comment
Nate Posted…
huphtur - thanks for the heads up! I've put it back online, at the same address.
Andreas Posted…
Nate, If you use the !important indicator, you can strip down the code to only 4 selectors (example 1). Also, if you don't like the CSS3 :not selector and prefer to offer link highlighting to Opera 7 users, too, you can use the A[att] selector (example 2 ). Minor drawback: no backwards compatibility in Opera 6. BTW, has anybody noticed this strange effect in Opera7: when hovering over a link (e.g. in the original version), Opera7 turns off the hover-state of the rest of the paragraph. Weird.