Site-Design Tips

The skills outlined in the preceding examples are all you need to stitch multiple pages into a coordinated site. All you need now is a little guidance about ways you can organize information into a Web site. The remainder of this chapter offers tips for choosing a site design.

Building a Multipage Linear Site

In a multipage linear site, the pages and links are set up in a way that encourages the reader to read a group of pages in a particular order, from start to finish (see Figure 24.6).

Figure 24.6. The structure of a multipage linear site.

This design makes sense when the content your site delivers is made up mostly of medium-size blocks of text (around one screen) that should be read in a particular sequential order, from beginning to end. (Some people call it a slide show structure because the visitor steps through the pages in order, as in a slide show.)

Suppose that this book were converted into a Web site. Its chapters serve the reader best when they're read in order, because each chapter builds on material from the ones before it. To encourage readers to proceed in order, the site would be designed so that the natural flow from page to page (or from chapter to chapter) follows the proper order. Other content that fits this design includes a story that's too long to fit on one page or lengthy step-by-step instructions.

Each page in a multipage linear site features a prominent link, often labeled Next or Continue, that leads only to the next page in order. Other links can be offered as well, but be careful about offering too many links in these types of pages ”the links enable the reader to stray from the order, defeating the purpose of the design.

The Microsoft PowerPoint program (included in most versions of Microsoft Office) is designed to help you quickly build an attractive slide-show presentation.

Recent versions of PowerPoint can convert their slide presentations into multipage linear Web sites. They convert each slide into a separate Web page and then automatically insert the navigation buttons (Back and Next, for example). It's a fast and easy way to make a Web site from content you might already have on hand.

Tips for Multipage Linear Site Design

When developing a multipage linear Web site, keep in mind the following tips for good design:

• Try to divide the material into pages that have just enough content (text and images) to fill the screen. Because the visitor is moving sequentially through the pages, he or she should not have to scroll, too. Putting just the right amount of text on each page enables visitors to conveniently explore the whole site just by clicking the Next link that you provide.

• A Next link on each page is the only link that's required and, often, the only one you want. However, if you can offer a Back link (pointing to the preceding page) without cluttering up the design, try to offer that link on each page after the first one so that the reader can review content, if necessary. Also handy is a Back to Start link that points to the first page, so that the reader can conveniently jump from any page to the beginning.

• The last page in the order should always contain a link back to the first page, even if you choose not to provide this type of link elsewhere.

Working with One-Page Linear Pages

When the following conditions are true, a one-page linear design is a terrific (and often overlooked) approach (see Figure 24.7):

• You have lots of text to deliver.

• That text is naturally divided into many small sections.

• You want to deliver the text in an efficient way.

Figure 24.7. A sample one-page linear design.

This structure is often applied to lengthy reference material provided as one part of a larger, multipage site, but a well-designed one-pager can actually serve as your whole site.

Although readers can always scroll through the entire page, the top of the page typically shows a list of links ”a table of contents or index of sorts. Each link points to a target (see Chapter 23) somewhere down in the page. The links help readers quickly find particular information without having to scroll for it.

The longer the page and the more separate sections it has, the more important the table of links at the top is.

If a page is only three or four screens long, the visitor can pretty easily explore it by scrolling. Five screens or longer, and you owe your visitors the assistance of some links.

Tips for One-Page Linear Design

When developing a one-page linear design, keep in mind the following tips for good design:

• At the top of the page, or adjacent to the table of contents, insert a target. Between each logical section of the page, insert a Back to Top link that points to the target at the top. This link enables the reader to conveniently return to the TOC after reading any section.

• Limit pictures (see Chapter 25). The danger of this design is that the long page will contain so much data that it will take a long time to download to the visitor's browser. But text ”even lots of text ”moves through the Internet pretty quickly. If you limit yourself to an image or two, usually at the top of the page, you can lend some visual interest while still enabling the page to download quickly.

• Scroll through the page. If the total page exceeds 15 screens, consider breaking it up into a hierarchical or multipage sequential design.

• Use horizontal rules (see Chapter 22, "Organizing Text with Tables and Rules") to divide sections of the text visually.

Making a Web-Style Site

In a Web structure, anything goes (see Figure 24.8). Any page can link to any other page, or to all other pages. This structure makes sense when the various pages contain information that is related to information on other pages, but there's no logical order or sequence to that information.

Figure 24.8. A Web-style structure.

In a Web-style site, a "top" page might be provided as a starting point (as in a hierarchical site, as described later in this chapter), but from there, readers can wander around the site in no particular path . Web structures are best suited to fun, recreational subjects or to subjects that defy any kind of sequential or hierarchical breakdown.

Typically, each page of a Web-style site contains a block of links ”often in a column along one side of the page or in a block at the bottom ”that lead to every other page in the site (see Figure 24.9).

Figure 24.9. Each page in a Web-style site typically contains a block of text links (or a navigation bar) to all other pages in the site, if there aren't too many.

Tips for Web-Style Design

When developing a Web-style site, keep in mind the following tips for good design:

• Before you resort to a Web structure, make sure that your message really calls for one ”you might just be having trouble recognizing the logical organization of your content.

• Visitors can easily get lost in a Web-style site. I recommend always including a "top" page that serves as an all-purpose starting point and then making sure that every page in the site contains an easily identifiable link back to the top page. That way, lost visitors can easily get back to a landmark from which to set off down a new path.

Making a Hierarchical Site

The most well-organized design (see Figure 24.10), a hierarchical Web site starts out with a general, "top" page that leads to several second-level pages containing more specific information. Each of these second-level pages leads to third-level pages containing more specific info about the second-level page to which they are linked, and so on.

Figure 24.10. A hierarchical structure.

The careful organization of a hierarchical site is not for the mere sake of neatness. The structure of the page actually helps the visitor find what he or she wants, especially when the site carries lots of detailed information.

Suppose that the site sells clothes, and I want a dress shirt. The top page might show links to women's clothes and men's clothes. I choose the Men's link and arrive at a second-level page offering links to shirts, pants, and shoes. I choose Shirts, and I see a third-level page offering Dress and Casual. I choose Dress, and I'm there. The structure of the page makes my search easy, even though the site offers hundreds of items.

Tips for Hierarchical Design

When developing a hierarchical site, keep in mind the following tips for good design:

• As in a Web-style design, be sure that every page in the site contains an easily identifiable link back to the top page so that visitors can easily get back to the top without having to struggle up the hierarchy a level at a time.

• More than with any other design, a hierarchical structure demands that you think and plan carefully the content of each page and the organization of the pages so that the site flows logically. As with my shirt example, visitors should be able to drill intuitively down through the hierarchy to find specific information.

• Keep in mind that many levels are available to you. Don't try to link the top page to a dozen second-level pages ”doing so suggests that you have not really figured out the organization. Ideally, each page should lead to no fewer than two pages and no more than seven or eight, in the level below it. Then again, don't follow arbitrary rules. Just be sure that the page organization and the natural organization of the content match.