Chapter 21

• Organizing a Simple Site
  • Figure 21.1.
  • Figure 21.2.
• Organizing a Larger Site
  • Figure 21.3.
  • Figure 21.4.
  • Figure 21.5.
• Organizing Your Files and Folders
• Designing a Coherent Look for Your Site
• • Figure 21.6.
  • Figure 21.7.
  • Figure 21.8.
  • Figure 21.9.
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 21

Organizing Multiple Pages

The first twenty chapters of this guide led you through the design and creation of your own Web pages and the graphics to put on them. Now it's time to stop thinking about individual Web pages and start thinking about your Web site as a whole.

This chapter shows you how to organize and present multiple Web pages so that people will be able to navigate among them without confusion. It also discusses ways to communicate the unique message of your Web site effectively, ways to organize the files on your Web site, and ways to make your Web site memorable enough to visit again and again. To Do: By this point in the guide, you should have enough knowledge of HTML to produce most of your Web site. You have probably made a number of pages already, and perhaps even published them online.

As you read this chapter, think about how your pages are organized now and how you can improve that organization. Don't be surprised if you decide to do a "redesign" that involves changing almost all of your pages--the results are likely to be well worth the effort!

Organizing a Simple Site

For many companies and individuals, building and organizing an attractive and effective Web site doesn't need to be a complex task. The Web page shown in Figure 21.1, for example, does its job quietly with a single graphics image and two short lists of links.

The goal of the home page in Figure 21.1, like the goal of many Web sites today, is simply to make the organization "visible" on the Internet. Many people today immediately turn to the World Wide Web when they want to find out about an organization, or find out whether a particular type of organization exists at all. A simple home page should state enough information so that someone can tell whether they want to find out more. It should then provide both traditional address and telephone contact information and an electronic mail address.

The beauty of the Web is that a simple, short list like the "Materials currently available online from the GMWS" in Figure 21.1 can lead to a surprising wealth of information. Clicking on the first link on that list brings up the page in Figure 21.2, which in turns leads to a dozen more articles.

Having seen all the fancy graphics and layout tricks in Part III, "Web Page Graphics", you may be tempted to forget that a good old-fashioned outline is often the most clear and efficient way to organize a Web site. If you aren't selling visually oriented products or trying to prove that you're an "artist," a list like the one in Figure 21.2 may be the best way to guide people through a relatively small Web site.

Figure 21.1. This home page establishes a presence on the Internet with a minimum of fuss.

Figure 21.2. Simple black-and-white graphics and a straightforward table of contents make this index page fast to view and easy to use.

Organizing a Larger Site

As the table of contents in Figure 21.2 grows, it will become more difficult for people to find the pages of interest to them in the list. One way to help people find their way around would be to place a more detailed summary of the most recent or most important information at the top of the list, as the long index in Figures 21.3 and 21.4 does.

Figure 21.3 also demonstrates another way to help people navigate through a large site without becoming lost and confused. Five graphical "buttons" allow readers to jump to the pages that contain the most important and popular information.

In this case, "READ ME" provides an overview of what the site is all about; "TALK TO ME" lets people comment or offer suggestions; "FREE STUFF" offers free software related to the site; and "ORDER FORM" lets people buy commercial products discussed on the site. These are rather archetypical pages that every good-sized site should contain in some form or another, though you may choose different names for them.

---

Time Saver: Here's another way to make long outlines like the one in Figures 21.3 and 21.4 easier to navigate: Put a short "index of the index" at the top of the page, with links leading down to the major sections of the page. (See Chapter 8, "Intra-Page and E-mail Links," for examples of intra-page links.)

---

For convenience, the buttons are repeated at both the top and bottom of the home page (see Figures 21.3 and 21.4).

The navigation buttons are also repeated at the bottom of every page in the site, as the sample page in Figure 21.5 shows. You should always provide some kind of "next step" at the end of your pages, and never make readers rely on the "Back" button to navigate through your site.

Note that a small banner is included at the top of the page in Figure 21.5 (and all other pages on this site). You should always provide either a banner, a unique icon, or another unmistakable visual clue that each page is part of the same site as the one the page reader just came from. Otherwise, they have no way of knowing whether they have suddenly jumped to a different site in Tasmania. Consistent backgrounds and color schemes are another visual cue that can keep people oriented as to where in the World Wide Web they are.

Note also that ultra-fancy eye-popping graphics and hokey visual clichés weren't necessary to make the site in Figures 21.3 through 21.5 easy to navigate. I'll probably jazz up this site visually in the future (it is a newsletter about computer graphics, after all), but you don't need to be a graphics designer to make a Web site that's visually appealing and conveniently organized.

Figure 21.3. Navigation buttons and details about the most recent information help people find their way around a complex site.

Figure 21.4. This is the bottom half of the page in Figure 21.3. Lengthy pages can still be very readable if they are well-organized.

Figure 21.5. The same banner and navigation buttons appear on every page listed in Figures 21.3 and 21.4.

Organizing Your Files and Folders

Organizing Your Files and Folders

Theoretically, you can put all your Web pages in one big fat directory folder. But if your site has (or will ever have) more than ten pages, lumping them all together in one folder will make it next to impossible to maintain either your site or your sanity while working on it.

If your site is updated on a fairly regular schedule, you can create a new directory folder for each new "issue." That's how I organized the files for the newsletters shown earlier in this chapter. However, most sites are updated either haphazardly or constantly, so you'll usually be better off grouping files by the main subject areas of your site.

For example, a food company's site might include a page about each product, pages with suggested recipes for using the products, and corporate information, such as a mission statement and a list of board members. You might put the Web pages for each category in separate folders, named products, recipes, and corpinfo. To link from a page in the recipes folder to a page named pres.asp in the corpinfo folder, you would use the following HTML:

(Use of double dots ( .. ) to go up a level in the directory structure was introduced in Chapter 3, "Linking to Other Web Pages.")

If you have more than ten recipe pages, you might want to introduce subdirectory folders within recipes. You can use .. and / as many times as necessary to link between the directories and subdirectories on your site. For example, to go from a page in the products/cowchips folder to a page named cowcrunch in the recipes/desserts folder, you would use the following link to go "up" twice, then back "down" into two levels of directory folders:

---

Time Saver: Maintaining your pages will be easier if your directory structure matches the main categories or navigation "buttons" shown on your Web pages.

---

Designing a Coherent Look for Your Site

Many of the techniques, presented in Part III, can also help the site's organization to improve the looks of your site when used consistently throughout all of your pages. To see how you can make aesthetics and organization work hand-in-hand, let's look at how an existing site was recently redesigned for both better appearance and clearer organization.

The home page in Figure 21.6 is quite typical of what are called "second generation" Web pages. It uses graphics and image maps to go beyond what "first generation" HTML was capable of. The site itself is also neatly organized into four categories of pages, accessible through the four regions of the image map or through the text links below them. The text on the page provides the essential information that someone would need to figure out what the site is about and whether or not they might be interested in looking further.

Figure 21.7 shows one of the pages you would get if you clicked on the image map in Figure 21.6. The banner at the top provides a strong visual relationship to the original page, and an icon at the bottom makes it easy to navigate back to the home page for further exploration.

If you produced pages similar to the ones in Figures 21.6 and 21.7 as your first site, you'd probably be proud, and rightly so. But you can use the techniques you've learned in this guide to do even better.

Figure 21.6. This site has nice graphics and good organization, but you can do even better.

Figure 21.7. If you click on "CONSULTING & EQUIPMENT" in Figure 21.6, you get this page.

Figure 21.8 is a more recent look at the same company's home page. It differs from Figure 21.6 in several important ways, most of which you can apply to your own pages as well:

• The new background and graphical titles provide a more appropriate mood, and provide even more of a visual identity throughout the site than the blue banner graphic did.
• All text and foreground graphics on the new home page load in less than eight seconds using a 28.8Kbps modem (the background takes an extra four seconds to appear). The old home page takes over 25 seconds to finish loading, due to the large image map.
• Use of a table provides people with more information about where they will go if they click on the three main links. Quite a bit of text that was "buried" in other pages before is now visible on the first screen that people see.
• The prominent "OTHER SITES" link was removed. It is seldom a good business strategy to immediately refer visitors out the door.
• The under construction sign was removed. People expect sites to be updated, but if your site is missing enough key information to need an under construction sign, it probably isn't ready to be put on the Internet yet.
• The most compelling information that potential customers should see (the list of magazine articles and reviews) was moved to the home page. A table border separates it from the other text.

Figure 21.8. A souped-up version of Figure 21.6 looks sharper, loads faster, and presents more key information immediately.

Figure 21.9. Though this page has about the same text content as Figure 21.7, it has a stronger look and more navigation aids.

All these changes to the home page help bring more of the company's message to the intended audience more quickly and clearly. Yet some more subtle changes also make it considerably faster and easier to navigate around all the pages of the site.

The same graphics that appear on the home page are used as topic headers on each subsequent page. This has the double benefit of providing an immediate sense of where you are within the site, and making the pages load almost instantly. (Web browsers will "remember" the graphics so they won't have to download them for the second page.)

Those same graphics are also placed at the bottom of each page as "navigation buttons." Re-using navigation graphics as headers is a great trick that can be incorporated into almost any Web site. The words "Refractal Design" are also a clickable link to the home page, though as a general rule, you shouldn't count on readers to find links that don't look like links.

Another subtle navigation aid: The company name at the bottom of every page (and in several other places throughout the site) is a link to a corporate identity page that explains the whos, whats, and whys of the company. Placing this obligatory information in the page footer and body text reduces the apparent complexity of the site by allowing for fewer main categories on the home page.

Perhaps the most important change in the site is the choice of organizational headings. Remember that the main categories you use to divide your pages are essentially answers to the question, "What is this site about?" In this case, "Jewelry, Infinity, and Technology" is likely to be a better answer than "Seeing Jewelry, Consulting and Equipment, Other Sites, and More." Think carefully about the main divisions of your site and the icons or headings you choose to represent those divisions. Your site will be much more compelling if they embody the primary message you want to convey to your audience.

---

Coffee Break: A great way to improve the organization and presentation of your site is to look at some sites that really "suck" and avoid the common (but disastrous) mistakes the authors of these sites made. I highly recommend Vincent Flander's "Web Pages that Suck" site for all aspiring Web page authors.

http://www.webpagesthatsuck.com/

Summary

This chapter has given you examples and explanations to help you organize your Web pages into a coherent site that is informative, attractive, and easy to navigate. If you have only a few pages of primarily textual information, a simple outline or table of contents organizational scheme is likely to serve you well. For more complex and graphical sites, a strong visual identity, reuse of key images, and well-chosen headings and icons can make an enormous difference in the impact of your pages.

Q&A

Q Wouldn't it be better to organize my Web pages in a specific 1, 2, 3 order, like a guide or brochure?

A Many authors try to arrange their Web site as a "story" or an ordered graphical presentation, but this approach is seldom effective because it goes against the nature of the Web. People are used to having control of their Internet experience and making their own choices about what to view. Unless your "story" is extremely compelling, don't count on people staying with it past page one. They are much more likely to click one of three or four options than to click "the only option."

Q I've seen pages that ask viewers to change the width of their browser window or adjust other settings before proceeding beyond the home page. Why?

A The idea is that the Web page author can offer a better presentation if they have some control over the size of reader's windows or fonts. Of course, nobody even bothers to change their settings, so these sites always look weird or unreadable. You'll be much better off using the tips you learn in this guide to make your site readable and attractive at any window size and a wide variety of browser settings.

Q How many major categories or "navigation buttons" should my site have?

A Generally, no more than seven, since psychological tests have shown many times that people have difficulty keeping track of more than seven choices at a time. If your site has more than seven pages, use subcategories--preferably with each set of subcategories on its own page.

Q I was thinking of having a cool image map that portrays the pages of my site as the parts of a dog's body or the continents of the world or something. Good idea?

A Organizing your site around a big metaphorical image can work, if you can keep the size of the image small enough so that modem users don't grow old and die before they get to see it load. Repeating a piece of the big image on each page helps, so people know which metaphor they're supposed to be playing along with. Personally, I like a nice tacky bit of kitsch once in a while. But if that's not the tone you're after, try to steer clear of the "see?-my-site-is-really-an-X" thing.

Quiz Questions

1. What are three ways to make a long list of links easier to read and navigate?

2. About how many pages should you keep in a single directory folder?

3. What are four ways to help people stay aware that all your pages form a single "site"?

4. What two types of information should always be included in the first home page that people encounter at your site?

Answers

1. (a) Put the most important links at the top, and add more detailed explanations of each link.
(b) Use a "button bar" or image map to highlight key links.
Break up the list with sub-headings, and add links to those sub-headings from the top of the list.

2. Theoretically, you can put as many as you want. But any more than ten gets quite difficult to manage and keep track of.

3. (a) Using consistent background, colors, fonts, and styles.
(b) Repeat the same link words or graphics on the top of the page the link leads to.
Repeat the same small header, buttons, or other element on every page of the site.

4. (a) Enough identifying information so that they can immediately tell the name of the site and what the site is about.
(b) Whatever the most important message you want to convey to your intended audience is, stated directly and concisely.

Activities

• As an exercise in possibilities, surf on over to "The 10 Types of Web Page Design" at http://gate.cks.com/~patrick/types.asp and see whether you can organize (or at least imagine) your site as it would look as each of these types.
• Grab a pencil (the oldfangled kind) and sketch out your Web site as a bunch of little rectangles with arrows between them. Then sketch a rough overview of what each page will look like by putting squiggles where the text goes and doodles where the images go. Each arrow should start at a doodle-icon that corresponds to the navigation button for the page the arrow leads to. This can give you a good intuitive grasp of which pages on your site will be easy to get to, and how the layout of adjacent pages will work together--all before you invest time in writing the actual HTML to connect the pages together.