Web Page Design

ood web page design begins with an idea for the purpose of the page and a vision of the intended audience and its technology. The purpose often helps define the audience. In-house informational pages published on company intranets serve a limited group of people using a known level of technology. By contrast, pages published on the internet are available to anyone in the world, using access technology ranging from ancient to state-of-the-art.

You can plan a very complex page if you publish on an intranet for a company where the slowest computer available is a 586-level desktop workstation with a 17-inch high resolution monitor and a company-standard web browser. On such an intranet, you wouldn't have to worry about download time — speedy processors and data transfer swiftly transport large illustrations, scripts, applets, and complex layouts, which you can gear specifically to the company-approved browser. You wouldn't have to worry about service provider rules — ISPs that are willing to provide space for web pages may not be willing to provide supporting server software that allows you to run CGI scripts, Java applets, RealAudio, and so forth. You also wouldn't have to worry about display colors, since most high resolution monitors can display 64 thousand colors or more.

By contrast, when you publish on the World Wide Web (WWW), you must consider the range of technology levels used across the planet. Someone working at a 386 laptop with a limited display, an older browser, and a slow modem may try to access your page. If it takes half an hour to load, or if much of the page information is carried in illustrations, layouts, or scripts that their browser can't easily display or interpret, they won't be back.

You can exclude the lowest of the low-end users in your audience definition (and many non-commercial web page designers do just that), or you can instead provide a link at the top of your main page that calls an alternate text-only version. If you do, remember to list the alternative page in search directories as the "text version."

Tools

Since HTML is simply codes enclosed by "<" and ">" in a ASCII text document, the only tools required to create a web page are a computer, an ASCII text editor, and a list of HTML codes.World Wide Web Consortium web site contains more information about HTML. You can find a reference manual at Michael J. Hannah's page on the Sandia National Laboratories web site, or Sean Bolt's HTML 3.2 Reference. At least one HTML Quick Reference Guide also lives on the web. A web browser, while not required, is extremely helpful if you want to view your page before publishing it (a very good idea).

The growing list of tools available to help develop a web page includes dedicated HTML editing applications, but many name-brand word processing and desktop publishing packages are coming on board with functionality that allows the creation of HTML documents, usually through conversion functions. (Be aware that some of these don't produce cleanly coded pages.) Any of these may also include capability to maintain a web site, which is a collection of related HTML and graphic files stored on the web server.

One of the best-known HTML editors is HotDog, by Sausage Software. (A number of web page developers who use conversion software to create the final issue of their pages first load each page into HotDog to check coding, since HotDog is not a tolerant application.)

As with almost everything, you can find the most recent information about HTML editors on the web. Yahoo has a category specifically for these. (They also have a specific category for HTML converters.) Other pages, such as 3W contain lists of editors. Private pages, such as Mag's Big List of HTML Editors, can provide additional information.

If you want to add illustrations, sound, and action to your page, you have a variety of tool choices, including JAVA, CGI, and Perl for scripts and animation; VRML to help create virtual realities; applications such as those provided by RealAudio. for streaming sound transfer; and any illustration packages that can create GIF and JPEG graphic files. Most of these additives are expensive in terms of bandwidth, and may slow download times to unacceptable levels in lower-end computers.

Design Basics

Once you've determined who your audience is, the level of technology you think they will use, and gathered your tools together, you are ready to design your page. Although design is an artistic venture, its primary purpose is to help readers and viewers absorb and understand the information presented. Usability, media, and other design experts have carefully measured reader/viewer understanding of information presented under a wide range of conditions.

A secondary, less-tangible purpose of design is to create an atmosphere or "feel" that helps define the overall mission of the information or the information provider. This is where the designer becomes an artist, using design principal and design elements to get the message across on multiple levels.

As with paper publishing, the web page creator has a limited number of elements to consider:

• the boundaries of the browser window
• text
• graphics (including background and animation)
• color
• white space (the empty space that surrounds the text and graphics within the browser's window border).

Unlike publishing on paper, HTML provides only limited control over most of these elements. (More about this later.)

The Browser Window

You have no control over the size of the browser window that ultimately displays your web page, since this depends largely on the reader's monitor resolution. Unless you're designing for an intranet serving only high-resolution monitors, remember to limit the size of your display to meet the standard display size. (Many video drivers allow you to manipulate the display size. When you've reached a point in your web page creation where you want to check display, set your video driver to the standard 640 X 480.)

You can assign a color or illustration to the window background, but you must be careful when combining it with text. (More about this in Graphics and Color.)

Text

Text is usually the most important element, since it contains the most information. It is more difficult to read text displayed on a computer monitor than printed on a piece of paper because the monitor does not have as high a resolution as the paper page.

Traditional designers working on paper treat paragraphs of text as blocks of gray. They select the type font and size, and assign attributes such as italics and bold.

You do not have a great deal of control over your page's type font (each computer has a unique set of available fonts). Users often have browser options that let them select the font they prefer, such as times roman or helvetica. You can however control font attributes, color, and size.

Short paragraphs help make your page more inviting to your readers. The white space between paragraphs helps readers keep their place when reading, particularly if you use a simple layout where text lines stretch to both sides of the browser display. Designers often use a two-cell table to control line width, placing the main content in the right cell. Tag paragraphs with bullets, numbers, headings, line breaks, and block quotes to add variety and white space without exponentially increasing the size of the file. You may also use the definition list and terms tags. (More about this in Controlling White Space.)

Graphics and Color

Illustrations and color add excitement to any page of text, whether on paper or monitor. But they also add complexity to your job as web page designer.

Just as quality photographs are expensive to reproduce on paper, they're expensive to display on the web — costly in bandwidth and download time. A good way to present a picture on the web is to provide a small version (or "thumbnail") of the picture, linking it to a larger version stored in your web site. This cuts the download time and gives your readers the option of viewing a full-size version, rather than forcing them to either wait for the image or stop the download.

Use the width and height attributes in HTML's image tag to create a box for your illustration so a reader's browser can block the graphic area then continue loading the rest of the page, before the image finishes loading. (Otherwise, everything comes to a complete stop until the image displays.)

Another trick to make the download seem faster is to use an interlaced GIF, which loads progressively. (See Adam Bernstein's Transparent/Interlaced GIF Resources web page for more information.)

Provide a text alternative for your image (using the ALT attribute) in case you have a reader without image display capability or in case the illustration doesn't load.

You must also consider the quality of your readers' monitors. A photograph that looks fine on a monitor displaying 256 colors (the number of colors allowed in a GIF file), may look very bad on a monitor displaying only 16 colors. (JPEG graphics may contain up to 16.7 million colors, but you still operate under the same restraints.)

Another factor to consider is that only 216 colors are set aside to display in a variety of browsers and platforms. (You can download the Netscape Color Lookup Table Palette to use as a swatch palette to create your GIFs; click the "Netscape clut" link at Bruce Heavin's Web tools, tricks and help web page.)

Controlling White Space

White space doesn't have to be "white," but must not have any other graphic elements or text in it. It is a crucial element in any flat design, just as empty space is crucial for a three-dimensional setting. In addition to helping organize a cluttered layout, effective use of space visually creates borders around related information, helping the reader see that the elements are associated.

HTML provides many tools to control the space in your web page. The current HTML version is 3.2, which incorporates new tags such as DIV, the division tag, which is not yet supported by all browsers. This tag lets you determine the horizontal alignment (left, center, or right) of a block of text or of an image, providing block control of space. (The next version of HTML will also add support for objects, client-side scripting, style sheets, and extensions to fill-out forms.)

In addition to the division tag, HTML tools for controlling white space are:

• head and sub-head tags
• line break and paragraph ending tags (to control blank lines)
• bullets, ordered lists, and definition/term tags
• justification attributes
• tables
• image placement attributes (to determine where the illustration displays in relation to the text baseline as well as the display area).

If you use a table, you can shorten lines of text to a comfortable reading length. You can create a two-column, two-cell table and place brief information (such as links or instructions) or thumbnails in the left column and your text (with additional illustrations) in the right column. The vast majority of browsers recognize tables. Table attributes also let you determine borders, column widths, background color, and text and table alignment.

Putting it Together

When you place text over color or an illustration, make sure it remains readable. If you use a dark background, assign a light color to the text and make it a size larger (making the text bold also helps make it easier to read). If you use a green background, change the color of linked text to something other than green, and be aware that users can assign a specific color to linked text from within their browsers. So be careful.

Take care with background illustrations. Not only do they slow the download, your reader may have a difficult time reading the text on a monitor with poor resolution. Very pale background illustrations are better than bold, sharply geometric ones, and you should increase the size of the text, as well as make all of the text bold.

Use a variety of HTML codes to format your page and bring in white space. HTML also provides horizontal rules that you can use to provide a definite break between sections of text. Attributes let you align the rule, determine the thickness and width, and remove the standard shading.

Keep your eyes open when you browse the web, looking for layouts that you like. When you find one, open your browser's source file window to view the ASCII document (and HTML codes) to see how that page developer created the look. Before creating scripts and applets or incorporating sound or animation files, check with your web server's help desk to find out which multimedia capabilities they support.

Most of all, enjoy the process. Web sites are always "under construction" and the most interesting ones change often.

Enjoy the article? Subscribe to Eye on Objects!

Elizabeth "B" Holroyd received her BA in Journalism from Marshall University in Huntington, WV. Working for various West Virginia newspapers, she covered county governments as a newspaper reporter and served as editor at a weekly paper. After working in the journalism field for ten years, she moved to North Carolina and changed careers, completing the technical writing course at Durham Technical Community College in the late 1980s. She then began working as a technical writer. When the World Wide Web became reality, she was hooked. Currently, she is free-lancing and sub-contracting, and seeks projects that allow her to expand her knowledge of web-based information delivery.

Home Page