(Visual) anchor navigation aids

Something the Web lacks greatly in terms of clarity is information on where 
anchors lead. There are many ways to be mislead, and it became a real problem 
once opening multiple background windows and tabs became possible.

For example, a site I went to the other day had multiple image thumbnails. I 
middle-clicked several, and discovered that each one pointed (via a fragment 
identifier) to a particular image on a page of large images. So now I'd loaded 
multiple copies of this image page into RAM (no fun if you're low on RAM or CPU 
speed) and now had to close them all again.

Apple's developer site is especially painful: you're never sure whether a link 
leads to somewhere on the current page or another page altogether. Their links 
and fragment names are horribly long and complex and have to be decyphered to 
figure out whether left click or middle click is better. (The pages themselves 
are very long and reloading one into RAM is itself painful.)


It's not uncommon for sites to indicate which links point offsite, but how about 
differentiation within a site? Does a link point to the current page, or another 
page? This is also be possible (in CSS3) by assigning a rule to all links whose 
href begins "#" (the target is on the same page).

I had this on my site for a while, but all I could use for a little icon was a 
double-headed arrow that pointed both up and down. i.e. "Somewhere on this page 
but no idea where."

It would be useful if you could determine whether the destination anchor is 
earlier or later in the document. At least then the reader would have some idea 
where the link would go. As I understand it, CSS3 selectors don't allow this 
yet. You can select an element B that follows some earlier element A in the 
document, but not assert that B's href ties up with A's name.


Eventually I removed all the little link icons as they looked an eyesore and, 
worse, there were just too many places where they got in the way. For example, a 
link to an external site that is nothing but an image really does not need 
another image next to it! The rules of specificity make it extremely hard to 
remove an icon added to a link via :before, so I had gnarly CSS trying to rip 
the icons back off from all the places they didn't belong. Alas, they're still a 
useful concept and I miss having some way to differentiate link targets. Maybe 
different link colours would be better? Blue for internal, green for external, 
orange for "same page"?

I have no idea how you'd deal with some of the other cases, such as multiple 
adjacent links on a page leading to the same source document and helping the 
user not open that page multiple times. I think the answer might be "just don't 
do that", but either way, I think it's outside the realm of CSS.

Received on Friday, 16 March 2007 04:19:45 UTC