Chapter 5: Page design basics ---------------------------------------------------------------------------- Even though the Web is relatively young, there are already some definite do's and don'ts regarding content creation. If you heed some of the following credos regarding text, page length, graphics, and color, you'll be on your way to presenting an attractive and well-turned Web page, one with content that readers will enjoyably sink their teeth into. Time spent planning before you start "cooking" up your creation is time well spent. Consider these issues: * What's the purpose of the page? Are you providing a service, a product, or entertainment? * Who is your intended audience? Knowing your readers helps you shape the information content and pick a consistent voice to address them. * How do you intend to structure the information? It's common to see at least two levels of hierarchy: a top level index and second-level pages. Put as much content toward the top of a hierarchy as possible. (This way, even the casual reader can quickly grasp the sort of information you're presenting.) The easiest way to lay out your information is by chunking it: break your topics into subtopics. If you have several small topics, group them onto a single page. * How many links will you include? Remember that readers can create links that go to your home page as well as to any page within your set of pages. Also, readers can start to browse your Web page at any number of points; then navigate them in arbitrary fashion, choosing where to start and stop browsing. When planning the number of links you'll include, plan to test their validity on a regular basis. * How many pictures, sounds, and movies should you use? The fancier and more complex your pages are, the more work and time you'll need to develop them. While multimedia elements definitely add pizzazz to your pages, they also can make a page take too long to load, delaying the reader from the information they're looking for. Using different browsers As the Web grows in popularity, more browsers are becoming available. This means you can't assume that folks reading your pages are using the same browser you are. Even those who do use the Navigator might not use it all the time (they might use a different browser at home or at work). Tip: Visit the Netscape home site for more information about Netscape extensions to HTML. Don't make your document overly dependent on HTML features that can't be seen by all browsers. If you decide to use Netscape-only HTML tags, consider how your page might look to someone whose browser doesn't support those tags. Some browsers might not accept your graphics, so provide alternative text. Also, Navigator (and many other browsers) lets users choose how they want the pages they view to look. Users can choose fonts and font sizes, override a page's colors and backgrounds, and generally ignore a lot of the formatting options a Web author has specified. Do assume that a user's screen size, number of available colors, and screen resolution will be different from yours, even those readers using the same browser. This means that a page that looks great on your screen might look completely different on someone else's. This is another strong reason to concentrate on content first, and use design options as enhancements only. Setting page length Most current personal computer monitors display 640 x 480 pixels on 13- to 15-inch screens. Designing your pages so that the information is presented in short, clearly segmented chunks will make it easier to keep pages concise. A good rule of thumb for writing a page meant to be read onscreen is to make it no longer than two to three 640 x 480 screens' worth of information, including local navigational links at either the beginning or the end of the page layout. If you make the page longer than the window, your reader has to remember too much information that's already scrolled off the screen. A disadvantage of a very long Web page is that the reader must depend on the vertical scroll bar slider to navigate. Small scrolling movements can completely change the screen contents, leaving the reader no familiar landmarks. Keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. If you want to provide a good online interface for pages and easy printing or saving of the content, divide the page into chunks of two to three printed pages of worth information, including inline graphics or figures. Or provide a link to a separate file that contains the full-length text combined into one page. Providing good content While the graphic design of your pages should be pleasing, it is ultimately the content that determines a page's value to others. Use graphics and color and vary the font size to enhance your page, but make sure your page also works when viewed as straight text. And always include a text alternative to graphic elements. Note: See the section "Doing graphics justice" later in this chapter. Pare down your text. Usability tests show that people will skip over text that they consider non-essential. They don't like to scroll. Often readers will scan a page reading only the text of the hypertext links before they choose their next destination. Settle on as few heading styles and subtitles as are necessary to organize your content, then use your chosen styles consistently. Just because Navigator Gold provides six levels of headings doesn't mean that you should use them all in a single page! Use heading levels in order, with one level 1 heading at the top, and if necessary, several level 2 headings. Be aware that different browsers use different spacing and fonts. Use the heading levels to indicate structure, as they were intended. Avoid overusing boldface, italics, and multiple font styles in your text. One thing you can do to ease the monotony and visual strain of reading lots of text on the computer screen is to use the Block Quote paragraph format and Unnumbered List format (available in the Properties dialog box). Both formats result in indented text blocks that shorten lines of text, keep margins clear, and generally make the page easier to scan. You can also insert horizontal lines to visually separate sections of your document. Note: See the section "Taking stock of colors and fonts" later in this chapter for more ideas on text presentation. Doing graphics justice Graphics add a lot to the visual appeal and information content of a page. But poor use of graphics can frustrate your readers or keep them from understanding the message you're trying to send. Practically every published Web author will agree--keep images small! You should aim to keep the total file size of images used on a page to less than 30K. Remember that not everyone seeing your page has a 28.8 modem. If you need to use a large image, you might want to consider using a thumbnail of the image and then linking it to the full-size copy. You can reduce file size by using design programs to eliminate unnecessary colors. Use backgrounds intelligently. Backgrounds that are "loud" make it extremely hard to read the text that's on top of them. Don't let your backgrounds interfere with the message you're sending the reader. For a background to work well, color contrast is not enough. The background either needs to be very light (for dark text) or very dark (for light text). A background that contains an image should have low contrast, so it's not too distracting. The two types of image formats used by most Web browsers are GIF (CompuServe Graphics Interchange Format, .GIF extension) and JPEG (Joint Photographic Experts Group, .JPG extension). The JPEG format works best for photos and continuous tone images. The GIF format works best for inline images, line art drawings, most logos, and screen dumps. Both formats should use a resolution of 72 dpi (dots per inch) and use RGB (red-green-blue) color mapping. Note: For more information on GIF and JPEG images, see the "Images" section in Chapter 2. Since you can't assume your readers are using a graphical browser to view your pages, be sure to enter an alternative description in the Text field of the Image Properties dialog box (choose Insert|Image). This way, readers using text-based browsers will see the alternate text description, and those using graphical browsers will also see something if the image fails to load. Here are some other techniques that can help minimize download times for images: * Supply interlaced .GIF files in your pages. Of course, the caveat here is that not all browsers support interlaced images, but if your pages are graphics-intensive, it's worth considering. * If you plan to use the same image several times in your pages, provide a link to the graphics file. Otherwise, the browser has to reload the image every time it's used. Just make sure your graphics are accessible to the Web server delivering your pages. * Use the Image properties dialog box to indicate the amount of space (in pixels) you want around an image. This speeds up the dowloading process because the server doesn't need to request size dimensions to transmit to the client and can therefore display text faster. You may have heard of an extended type of graphic image called an image map. An image map is where different parts of the image activate different links. Clicking on one area of the image takes you to a specified page, clicking another area takes you to a different page, and so on. Taking stock of colors and fonts It's tempting to add lots of colors and font styles to a page just because you can. But the result is more likely to frustrate a reader and detract from the message you're trying to get across. After all, it's the content you want your audience to focus on, and that means presenting a page that's easy to read. Even though most graphical browsers (including Navigator) use a proportionally spaced font such as Times Roman as the default for text, many browsers are user-configurable, meaning the user can choose any font for viewing your page. Consider typography as the tool you use to paint patterns on the page. The first thing your reader sees is not the title or other details of the page, but the overall pattern and contrast of the page. The reader's eye scans the page first as a purely graphic pattern, then begins to track and decode type and page elements. Good typography depends on the visual contrast between one font and another and the contrast between text blocks and the surrounding empty space. There are a few basic typographic principals that can help make your pages easier on the eye: * Avoid overusing boldface, italics, and multiple font styles in your text. Too much contrast is just as bad as no contrast at all. * Making text uniformly bigger doesn't help at all, and only contributes to making the pager longer. * Boldface fonts become monotonous very quickly, because if everything is bold, nothing stands out, and it looks as if you're shouting at your readers. Using all uppercase can have the same jarring effect. * Choose a few heading styles to organize your content, and then use your chosen styles consistently. Regular, repeated patterns help readers quickly establish the location and organization of your information, and increase the overall legibility of your pages. * Use white space judiciously. Don't put blank lines or horizontal rules everywhere or your pages will look choppy. (Plus, you're trying to keep page length to a minimum.) Thoughtful and consistent use of color in backgrounds can really help pull your pages together into a cohesive presentation. In general, light pastel backgrounds are best for reading substantial amounts of text. If you are showing a lot of pictures, a black background can make your photos look good and give your pages a gallery-like effect. Using tiled backgrounds makes everything above them "float," causing your readers to work much harder to read your text. Using a white background can make text look good and your document look clean, but if you have a lot of pages, it can be extremely wearing on the eyes. Finishing touches And last, but not least---the proverbial icing on the cake. These elements are considered the hallmarks of the work of a professional Web author: Headers: A consistent titling design at the top of your Web page allows your readers to immediately know what the main point of the document is, and what (if any) relationship the page might have to other pages in a related group. Unlike a browsing a book, which is linear in design, a Web author can never be sure what other pages the reader has seen before linking to the current page. Graphics placed above the main heading should not be so large that they force the title of the page on a standard office-size monitor (640 x 480 pixels) to go off the screen. Footers: Ideally, each page should have a footer that contains your name, organization, navigational elements (links or icons), copyright information, and revision/change dates. Email Address: Like any fine work of art, a good Web page should have a signature or some other form of contact information. You can provide a link to an email form your readers can use to send comments and feedback to you. Select the Link tab in the Properties dialog box. In the Link to field, type the HTML tag mailto: followed by your email address. At the very least, provide your name, organization, and street address, in case your page is viewed on a browser that doesn't support email forms. Navigation: Include a target (a return link) to your top level on each page so readers have a quick way of returning to the beginning. It also helps to include links to an index or table of contents, other sections, and previous and next pages. You might want to add these targets to the bottom of the page, so the reader always knows where to find them. If your links only flow downward from the home page, the pages in your document will become dead ends. Links: Avoid the "click here" syndrome when defining a link; for example, "Get information about whatever is available by clicking here." Readers then have to remember where they're going to once they jump to another page. It's better to link to words or phrases that are a meaningful part of a sentence; for example, "Information about whatever is now available." If you use links to items on the same page, remember to use relative links, as absolute links (full URLs) can cause a browser to reload the page each time a link is selected. Time Stamps: Date your revisions and indicate those pages that have been changed or are new additions. Suggested reading There's a wealth of online information available on all aspects of good Web publishing: style guides, detailed technical information, and tools that help you create special effects. Choose Help|Web Page Starter to see a list of additional resources on Web page authoring and publishing. Style guides * Tim Berners-Lee, Style Guide for Online Hypertext * Jonathan Cohen, Elements of HTML Style * Patrick J. Lynch, Yale Center for Advanced Instructional Media WWW Style Manual * David Siegel, Tips for Writers and Designers Technical information * Bob Allison, The Web Master's Page * The Web Developers Virtual Library Tools * c|net shareware.com * The Web Communications Comprehensive Guide to Publishing on the Web ----------------------------------------------------------------------------