|
atdphome
|
| SiteMap |
An abbreviated, opinionated guide to crafting good Web pages...
by Lloyd R. Nebres
Dump those gray backgrounds!!
Have you ever read a book with black type on gray pages? I didn't think so. Or if you have, it certainly must not have been a pleasurable experience! Go to a Web page (like this one at The Network Observer) that has masses of text on the gray background browsers use as a default, and see if you can get to the end without some eyestrain. Imagine having to read or scan lots of pages like that. Sounds like a dreary prospect, doesn't it? Contrast it with the Director's letter on the ATDP Website, which is a lot more pleasant to read. Cream or ivory backgrounds are perfectly okay, too!
Margins rule...
Have you ever read a book or a magazine (weirdly formatted ones like WIRED or Raygun don't count!) with no margins on either side of the page? I didn't think so. Make good use of the blockquote tag to render nice, vertical whitespace on your page margins. Check out the sterling example of the ATDP Overview page.
HTML font control sucks...
...not to put too fine a point on it. Therefore, judiciously create your own text headers (like this "continuity" one) in tasteful, anti-aliased display fonts, saving them as small GIF or JPEG files. Make them colorful--though not garish--in order to offset the title nicely from the body text. Subtle drop-shadowing is also recommended, for that stylish textured or 3D feel. Check out the titling on the top of this page, for another example.
Toolbars are compasses...
In the maze that is the sum total of pages on your Web site, a navigational toolbar is an essential device that ensures visitors won't get lost as they click-n-surf around your site. The toolbar may be a set of straightforward text links on the top or bottom of your pages, it may be a set of GIFs with links (such as this one at ATDP's Internet Classroom web page), or it may be an image map (though in some cases, the toolbar icons can be cryptic, defeating the intention of providing a coherent navigational system). Whatever kind of toolbar you make, it must satisfy a visitor's need to get around your site with the minimum of fuss or hassle. The ATDP navigational toolbar is also a good example of a straightforward directional aid that relies on the familiar tabbed folder metaphor.
The red/blue dichotomy...
With most browsers these days, the default color for an unvisited link is blue and the color for a visited link is red. It ought to be the other way around! Here's what one Web designer (D. Siegel) has to say, and I quote him in full, since I can't say it any better:
At user-interface school, they teach us that the color red has a prominent place in the evolution of our visual system. In the jungle, the color red serves as a strong warning of danger. Almost all animals are more sensitive to red than other colors. Go to a magazine rack and look at the way red is used on the covers. It is the number one "flag" color, standing out from the rest and drawing more attention. It is why lipstick works. People have a visceral, gut reaction to red, as well they should. Red shouts. Good designers take advantage of this mechanism without overusing it and watering it down. Did you ever see a blue speedometer dial? So, if you think about it a bit, the right choice is to turn the "hot" unvisited links red and leave the visited links distinguishable, but "cool," receding into the black text. Red says "Over here! Hit me!" Blue says "Been there, done that." Blue recedes into the background. I want my visited links to become associated with (but distinct from) the text and leave the active (unvisited) links standing out. Hot red and cool blue links should be standard on all browsers, but they aren't.And so it is with the ATDP website. If your browser's font color preference has been set to "Let Document Override," you will see that unvisited ATDP links are hot red, and the ones you've been to will be purplish blue. Here's hoping that this more sensible color scheme becomes standard not too long from now...
Home | Elementary | Secondary