The first twenty chapters of this book 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 book, 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!
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.
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.
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.htm in the corpinfo folder, you would use the following HTML:
<A HREF="../corpinfo/pres.htm">Our President</A> loves this recipe.
(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:
Try <A HREF="../../recipes/desserts">CowCrunch</A> for dessert.
Time Saver: Maintaining your pages will be easier if your directory structure matches the main categories or navigation "buttons" shown on your Web pages.
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 book 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:
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/
On a more positive note, you'll find a list of Web sites that don't suck, in my honest and humble opinion, at the ever-improving 24-Hour HTML Café.
http://www.mcp.com/sams/books/235-8/cafe21.htm
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.
