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:
- Each page should have links back to earlier pages
in your hierarchy.
- Each page should have an email address.
- Don't use non-standard typefaces for your main
text (do use this one).
- Think about your user
- Would you like to wait for this graphic (background) over 2400 baud?
- Can you read your page on a variety of monitors? (Have you
written in blue on a black background?)
- 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."
- Verify your hypertext.
There are also pointers to other style guides
elsewhere.
Why? The reasoning behind these hints.
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 :
- the previous page in your collection
- probably the first page in your collection
- possibly the main page for the project, as in the root
document for your server, or the main home page for the organization
providing your paycheck.
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...
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.
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.
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...
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.
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.
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.