Reviving Advanced Hypertext ?

by @jehiah on 2005-01-05 13:26UTC
Filed under: All , Articles , Javascript , CSS

In his most recent article Jaokob Nielsen talks about a few new things which could take the web to the next level, or as he puts it Reviving Advanded Hypertext. Here are the actual steps to implement which will take you there.

Differentiate Link Types

Thanks to wikipedia’s style sheet and real browsers with fairly complete CSS support, like Firefox, I’ve had something like this implemented on my site for quite a while. (though for the record I did disable it for http links because fully qualified links even if they are to my own site show as external links. Only relative links without the domain name show as internal. In my defense though it still shows extra information for mailto links and such).

One good use for this method of link type differentiation might be on an intranet setting to show which links go to pdf, word or excel documents as it would be nice to warn users before they click.

This ends up looking like this

internal and external links example

a[href ^="http://"],a[rel ^="external"],a[href ^="gopher://"] {
    background: url(http://www.jehiah.com/images/external.png) center right no-repeat;
    padding-right: 13px;
}
a[href ^="https://"]{
    background: url("http://www.jehiah.com/images/lock_icon.gif") center right no-repeat;
    padding-right: 16px;
}
a[href ^="mailto:"]{
    background: url("http://www.jehiah.com/images/mail_icon.gif") center right no-repeat;
    padding-right: 18px;
}
a[href ^="news://"]{
    background: url("http://www.jehiah.com/images/news_icon.png") center right no-repeat;
    padding-right: 18px;
}
a[href ^="ftp://"]{
    background: url("http://www.jehiah.com/images/file_icon.gif") center right no-repeat;
    padding-right: 18px;
}
a[href ^="irc://"]{
    background: url("http://www.jehiah.com/images/discussionitem_icon.gif")  center right no-repeat;
    padding-right: 18px;
}

Highlight Query Terms

Highlighting search terms can already be done. The best (as in most flexible) implementation is this one in Javascript which even you (yes you Jakob Nielsen) could use!. Go ahead follow your own wisdom.

Display Higher-Value Advertising

… On a content page, that same ad conflicts with the user’s goal to process the information and possibly return to the search engine to select the next destination. Still, an ad that’s relevant to the user’s current problem (as indicated by recent query terms) should beat advertising chosen with less situational awareness.

Did I miss something, or is that not the gaol which is the purpose behind Google AdSense? Googles chief aim is to provide adds which are relevant to the page content, and assuming the page content is relative to a users intentions (or their search keywords) the ads will also be relevant.

Physical Hypertext

Rather than click underlined words on a screen, it’s possible for users to retrieve a destination page through some real-world action. Physical objects can be the anchor points for a hypertext link.

Try this on for size. Next time you are in a store next to a real item you want to buy, send a text message of that item name to 46645 and see what happens. Oh, and yeah and that real world query was returned by Google.

Subscribe via RSS ı Email
Jehiah Czebotar