|
Chapter 21
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:
| <A
HREF="../corpinfo/pres.asp">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.
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.
(c) 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.
(c) 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.
|
Learn HTML
