Hints on Good Hypertext

By Luisa Rebull

Note: this was last modified a long time ago, and not only do some of the links to other sites no longer work, but the culture itself has changed. It's kind of quaint in here how Netscape is still distinct from AOL. ;) Anyway.... Your Mileage May Vary. -- LMR, 06/25/01

See also Top 10 Mistakes in Web Design for a similarly short version, and webpagesthatsuck.com for a much more extensive debunking of bad web pages.

The Punchline:

  1. Each page should have links back to earlier pages in your hierarchy.
  2. Each page should have an email address.
  3. Don't use non-standard typefaces for your main text (do use this one).
  4. Think about your user
  5. Don't use "Click here to get this"; reword your sentence such that your user can click on a real word or phrase instead of "here" or "click."
  6. Verify your hypertext.
There are also pointers to other style guides elsewhere.

Why? The reasoning behind these hints.

1. Each page should have links back to earlier pages in your hierarchy.

This is perhaps the most important thing to do! Once you unleash your pages on the world, you can no longer control which page people first find. People can and will come in to your last page first. In other words, if your pages could be drawn like this...:
first level              main page
                      /      |      \
second level       page1   page2   page3
                  /  \      / \     / \ 
third level     p4   p5   p6  p7   p8  p9
...it is very likely that someone will find "p9" first. How will he know that it's actually, say, "Chapter 3" of your pages? When she likes your page, how will she get to see other pages of your hierarchy?

So, it is very important that you have links back to :

For a real-life example, see the Yerkes Observatory virtual tour. The main page has links back to "parent pages", like the Department of Astronomy and Astrophysics and the Yerkes Observatory page. If you go to the science page, (MANY people have started the Virtual Tour on this page, I am not sure why) then at the bottom of the page, you see a "go back to the virtual tour home page or Yerkes Observatory home page" sentence. Just above the colored line is a sentence that allows people to continue (or back up on) the tour without going on/back to the main tour home page. This same structure can be found on all of the virtual tour pages.. take a look!

The other thing you may notice on the bottom of those virtual tour pages leads me to the next hint...

2. Each page should have an email address.

If something goes wrong with your page, or someone really likes it and wants to compliment you, or someone wants more information, or has something to correct/add to your stuff, he or she will want a way to get in touch with you. And they're not going to want to spend a lot of time poking around all your pages to find your email address.

Personally, I have (more than once!) found something critically wrong on a web page and spent some time trying to find an email address. Sometimes I can't find one and I just give up. Sometimes I find an email address and I send email, only to get a response, "this isn't my responsibility." Both of these things drive me crazy. There was actually a page that got circulated around the webmasters of the university with the message, "Who wrote this? Who maintains it?" I have no idea if they ever found out. These problems would all be solved if there was an email address at the bottom of every page...

Our department also requires a disclaimer somewhere on your pages, but that is an institutional thing.

3. Don't use non-standard typefaces for your main text.

While most people use Netscape, not everyone has the same fonts installed. And, not everyone uses Netscape. Some fair fraction of people are using browsers from America On Line (AOL) and other commercial internet providers -- and AOL's browser, in particular, stinks. It doesn't deal with any fonts other than this plain one very well. (Forget typewriter font, etc.) And things tend to look fairly goofy if you make them all in h3 or h2 (the third largest and second largest sizes, respectively). So, for best readability, you shouldn't put ALL your text in anything other than plain text. You can use special fonts for emphasis, but don't put your whole document in bold or italics or typewriter.. you get the idea.

4. Think about your user

Personally, I have a high-speed line to the computer at my desk. And, I bet you are probably reading this from a relatively high-speed line yourself. And, yes, I realize that having a really neat highly-textured non-repeating background looks really cool when you finally load it. And I realize that you have this really cool image of something special to you, and you like the fact that it's huge. But, some (large?) fraction of your users will be coming in on slow connections, even over pathetic little 2400 baud modems. In order for them to even get to load the text content of your page, they have to wait a REALLY long time for it to finish loading. And, especially if you put the title of your document in a gif instead of in text, what happens if someone is cruising around with image loading turned off? Or with just a text browser? They won't be able to read your title at all. And what about these "robots" that wander the web, putting things in their catlogs filed by what you have written in the largest font? People won't be able to find your page if the robot can't read the text.

Lots of the commercial sites (like, say, for instance, this NBC entertainment site) have a graphic in the background that doesn't really add that much to the site, but that takes me (on a high-speed connection!) something like 3-5 minutes to load. Yeah, sure it looks cool at the end, but I'm not likely to wait that long to load it.

And, to make things worse, sometimes the graphic (for which I've waited 5-10 minutes or more) makes the page unreadable. For example, on this Superbowl site, I can't read anything that isn't on the white background. Well, ok, I can see "Flashback" on the left, but most of the options are totally gone. And I can only read the orange on that long, thin, narrow menu bar on the bottom - and that just barely. It's true that my monitor stinks, but I don't think I'm that atypical. As you might imagine, it's quite frustrating to not be able to read what is on a page.

If you pick a small graphic with lots of texture, while it might load quickly, it is also often hard to read text. Make sure that any backgrounds are subtle and don't distract you when you try to read.

A good compromise would be a small graphic that loads quickly and is "tiled" in the background (e.g. repeated many times), OR, better yet, just pick a background color. Make sure that you pick a very contrasting color for your fonts, otherwise it will be illegible (or painful to read) for me and other users like me. Writing in blue on a starfield is right out. Writing in black on white or light colors is best.

Alternatively, of course, you can just stick with the defaults and let the browser pick the colors. This is probably the most flexible option.

It's always a good idea to try loading your page on as many different computers using as many different browsers as you can. It's most revealing to do so...

5. Don't use "Click here to get this"

Yes, this is the most subjective of the hints, so I am less concerned about this issue - you can follow it or not. However, it's also the way to make your pages look the most professional. Using "Click here" generally is regarded as something that only the newest, most inexperienced hypertext writers use. For the nicest-looking and smoothest-flowing hypertext, you should be able to take advantage of the nature of hypertext to fully embed links. For example, this (all links go to one neutral place to protect the guilty):
Click here to get the solutions for this week and click here to get the solutions for week before last.
could easily be reworded to be:
The solutions from last week and week before last are available.
I think you'll agree that the second one reads much more smoothly than the first.

One subtlety to this general guide is "go back to" sentences. "Go back to" is generally acceptable, but "Click to go back to" is not. Since these sentences should be near the bottom of your pages anyway, the awkwardness of "go back to" is not as prominent as if it's really embedded in the text of your document.

6. Verify your hypertext

Obviously, you want your users to see things on their screen in the format you've intended. The best way to do this is to make sure you're programming in standard hypertext. There are many, many on-line services to do this. Search in Google on "web page validation" or similar. 'Nuff said.

Other places to find style guides:

Last substantially modified a really really long time ago by rebull
Any opinions expressed here are well-reasoned and insightful, but in no way reflect those of NASA/JPL, Caltech, or the NRC. No electrons were harmed in the creation of these pages.