Tom Geller, dilettante and poetaster

Home

Professional
P.R.
Writing
Speaking
Geeking
Terms

Other areas
About Tom
Contact info

Tom's other sites
bandwidthpr.com
spamcon.org
openppc.org
popcomputers.com

Mailing lists:
Tgeller-personal
Tgeller-business
Suespammers

  

* Web design and implementation *

Sample guidelines for Web design

Created for a major health-care firm

By Tom Geller

Contents copyright Tom Geller, 1998. All rights reserved.
This article is available for publication: Write to me at the address below for details.

Document conventions

Frame conventions

 

Document conventions

We live in a multiplatform environment: Most Web servers are Unix, most design stations are Mac, and most desktop systems are Windows. Therefore, documents should be structured and named as simply as possible to allow them to work equally well on all machines.

Standard page and link colors are as follows:

  <BODY BGCOLOR="#FFFFFF" LINK="#663366" VLINK="#993300">

(Background = white, Unvisited link = eggplant, Visited link = brown.)

File names

File names should be simple, short, descriptive, easy to organize, and cross-platform. Here are a few rules:

  1. Use only lower-case letters.
  2. Keep them as short as possible, but be descriptive. learn_about_the_company.htm isn't as good as learn_about_us.htm, or even learn_us.htm.
  3. Instead of spaces, use the underscore character (like_this_for_example).
  4. Use three-letter extensions that describe the file type. Examples: asthma_tips.htm (not asthma_tips.html). Some of the more-common extensions are:
    • .htm = Web page in HTML format
    • .gif = Graphic in GIF format
    • .jpg = Graphic in JPEG format
    • .pdf = Document in Adobe Acrobat format
    • .mov = QuickTime movie
    • .zip = Downloadable file compressed in ZIP format
  5. Some documents don't usually carry three-letter extensions, such as .au (audio format), .ra (RealAudio), and .shtml (secure HTML). Fret not.
  6. The hyphen can be used in unusual circumstances. For example, to show a revision of house_calls.htm from 1 February 1998, you can use house_calls_98-02-01.htm.
  7. Note how the date is written above: year-month-day. There are two advantages to using this international standard:
    1. It avoids confusion about which number is the month and which is the day
    2. It "alphabetizes" correctly, in chronological order.
  8. Use no punctuation (other than the underscore, hyphen, and period as described above).
As you can see in the Frame examples below, documents are named according to the frame they occupy. So the header, which appears in the Head frame, is named something like healthtips_head.htm, the index is healthtips_index.htm, and the main part is named healthtips_main.htm.

We realize it can be a mighty butt-pain to recreate existing pages according to these conventions. You don't have to spend too much time converting those pages, but be sure to follow the rules in creating new sites.

Dimensions

Total window width (as determined by frames, tables, and graphics) should be no more than 600 pixels, which should allow it to be viewed on most systems with a 14" monitor. If possible, keep the width below 535 pixels, which prints nicely on an 8.5"-by-11" sheet of paper in portrait mode.

When setting up frames, see also the dicta about Frame conventions. (In brief: The Index frame is 140 pixels wide and the Head frame is 110 pixels high.)

In determining whether to deliver mass information as one long document or several small ones, there are several factors to consider. Among them are:

  • Ease of navigation. Will anchor links within one document be clearer than several documents and an index?
  • Load time. If it has a lot of graphics, it would be best as several small pages and an Index frame.
  • User experience. A long document may seem overwhelming, while a series of short ones makes the user work to get the goods.

Graphics

Use WIDTH="X" and HEIGHT="X" tags on all graphics. Some browsers will use this information to lay out the page geometry -- including the text -- while loading the graphics, giving the appearance of a faster-loading page.

All graphics should have an ALT tag. Otherwise, the page will be incomprehensible to blind people and those using non-graphical browsers.

Do not create animated GIFs that loop more than three times or ten seconds (whichever comes first).

Remember that browsers that don't display animated GIFs will show only the first frame of the animation. Therefore, that frame must have useful information in it. (A trick I like to use is to have the first frame play as fast as possible, and then launch into the animation from wherever I like.)

If you want to use custom rules (lines) to set sections apart from one another on the page, create a small (10 pixel-by-10 pixel), solid graphic and stretch it to the size you want. Don't create several instances of the same rule.

On a related note: Use 10-by-10 graphics instead of 1-by-1 graphics for spacers etc. 1-by-1 graphics are hard to grab and manipulate in graphical Web page editors.

Use client-side image maps instead of server-side. Better yet, cut the graphic up and add ALT tags to the pieces.

Make sure your design station is set to display only 256 colors, as many visitors' machines will be. Graphics that look great in millions of colors often look awful when dithered for lower resolutions. And, of course, use the Web-safe 216-color palette wherever possible.

Text

Before laying out text as a graphic, consider using font stylings on plain HTML text instead. Your page will load faster, be searchable, require fewer tags, and be easier for sight-impared people to read.

Remember that text looks smaller on most Macintoshes and Unix machines than on Windows boxes. If possible, browse the site on other platforms at least once during the design process. By the same token, use small type (i.e. SIZE="2") sparingly.

Likewise, be sparing with non-black text, and use only colors that contrast well with the background.

Make structured documents -- like this one -- consistent. All subheads should be tagged with the same <H> tags, for example.

Eight-bit characters (such as é, ™ and the like) won't display properly unless you use the proper codes: &eacute; and &#153;.

The <BLINK> tag is punishable by death.

Programming

Three words: Don't Do It™. JavaScript cuts off some of your audience, Java cuts off more, and proprietary plug-ins (such as Macromedia Flash) leave almost everyone in the dark. If you must use programming, make sure it's not essential to capturing the meaning of your page.

Also, don't use programming tricks as attention-grabbing gimmicks: They're the mark of an amateur. Examples are: music that plays when the page loads, text scrolling, and excessive button rollovers.

If you're using programming to animate a graphic, consider using an animated GIF instead. It'll use fewer resources and more people will be able to see it.

If you use programmed elements for navigation, there must be an alternate, non-programmed way to get around the site as well.

Programming should never take control away from the visitor for more than a second. I saw one site that had a script that displayed a map that s-l-o-w-l-y scrolled to your location. It was very clever, but visitors had to go through this annoying 15-second ritual every time they went back to the page.

Frame conventions

Pages should have no more than three frames, as follows:

  1. Top frame, named Head. This is always the navigation bar, and is 110 pixels high.
  2. Left-hand frame, named Index. This is an optional map to a specific part of the site, and should be 140 pixels wide. It can be slightly bigger if absolutely necessary: i.e. to fit detailed graphics or very long terms that can't wrap.
  3. Right-hand frame, named Main. This is where the actual content goes.
All frames are borderless.

The Head frame has no scroll bars.

No frames are resizeable.

You must use the boilerplate text, below, for the NOFRAMES section.

Frame examples

  • Two frames: graphic

  • Two frames: code

  <HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-8859-1">
<TITLE>Learn about health</TITLE>
</HEAD>
<FRAMESET ROWS="110,*" FRAMESPACING="0" FRAMEBORDER="NO" BORDER="0">
<FRAME SRC="learn_head.htm" NAME="Head" SCROLLING="NO" MARGINWIDTH="0" MARGINHEIGHT="0" RESIZE NORESIZE>
<FRAME SRC="learn_main.htm" NAME="Main" RESIZE>
</FRAMESET>
<NOFRAMES>
<BODY> [Mandatory NOFRAMES text goes here: see below]

</BODY>
</NOFRAMES>
</HTML>

  • Three frames: graphic

 

  • Three frames: code

  <HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-8859-1">
<TITLE>Pharmacy tips</TITLE>
</HEAD>
<FRAMESET COLS="600">
<FRAMESET BORDER="0" ROWS="110,*" FRAMESPACING="0" FRAMEBORDER="NO">
<FRAME BORDER="0" SRC="../learn_head.htm" MARGINWIDTH="0" MARGINHEIGHT="0" NAME="Head" SCROLLING="NO" NORESIZE>
<FRAMESET BORDER="0" COLS="160,*" FRAMESPACING="0" FRAMEBORDER="NO">
<FRAME BORDER="0" SRC="pharmtips_index.htm" MARGINWIDTH="6" MARGINHEIGHT="0" NAME="Index" NORESIZE>
<FRAME BORDER="0" SRC="pharmtips_main.htm" MARGINWIDTH="6" MARGINHEIGHT="0" NAME="Main" NORESIZE>
</FRAMESET>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY> [Mandatory NOFRAMES text goes here: see below]

</BODY>
</NOFRAMES>
</HTML>

Mandatory NOFRAMES text

For those people using a Web browser that doesn't show frames, we have a standard form to include in the NOFRAMES section. The HTML is as follows:

  <NOFRAMES>
<BODY>
<P>
<HR>
If you're seeing this message, your Web browser doesn't support frames. If your computer can support it, we recommend downloading one that does, such as <A HREF="http://home.netscape.com/
comprod/mirror/client_download.html"> Netscape Communicator</A> or <A HREF="http://www.microsoft.com
/ie/download/">Microsoft Internet Explorer</A>. (Most Power Macintoshes and Pentium-based PCs with 16MB RAM or more are powerful enough for these programs.)</P>
<P>You probably see something that looks like this:</P>
<PRE>FRAME: Head
FRAME: Main</PRE>Choosing &quot;Head&quot; lets you jump directly to the following sections:

<UL>
<LI><A HREF="../index.htm">Home</A>
<P>
<LI><A HREF="../using/using_frames.htm">Using this site</A>
<P>
<LI><A HREF="learn_frames.htm">Learn about health</A>
<P>
<LI><A HREF="../explore/explore_frames.htm">Explore the site</A>
<P>
<LI><A HREF="../communicate/comm_frames.htm">Communicate with others</A>
</UL>
<P>Any other links in &quot;Header&quot; lead further down into this particular section.</P>
<P>Choosing &quot;Main&quot; gives you a description of what's in this section,
and may have other links. If you get lost, the <A HREF="../index.htm">Home</A> page gives a (fairly) complete index to the site. Good luck!
&nbsp; </P>
</BODY>
</NOFRAMES>

Note that you'll probably have to change some relative links. Rendered, it looks like this:

If you're seeing this message, your Web browser doesn't support frames. If your computer can support it, we recommend downloading one that does, such as Netscape Communicator or Microsoft Internet Explorer. (Most Power Macintoshes and Pentium-based PCs with 16MB RAM or more are powerful enough for these programs.)

You probably see something that looks like this:




FRAME: Head
FRAME: Main
Choosing "Head" lets you jump directly to the following sections:

  • Home
  • Using this site
  • Learn about health
  • Explore the site
  • Communicate with others
Any other links in "Header" lead further down into this particular section.

Choosing "Main" gives you a description of what's in this section, and may have other links. If you get lost, the Home page gives a (fairly) complete index to the site. Good luck!  

(Note that local links in this example are simulated for demonstration purposes.)

This page was last updated on Thursday, January 05, 2012 at 6:15pm CST. All contents copyright 2005 by Tom Geller.