by Eric Ladd
Designing Web pages is both a complex and rewarding activity. Hours of careful thought are needed at the planning stage. You need to take the time to think about who will be reading your pages: how they see and understand information, what type of computers they're using, what browser software they have, and how fast their connections are.
This chapter, and the next, give you some things to think about during the planning stages for individual pages and entire sites. Once you have a good handle on page and site planning, you'll be ready to move on to later chapters, where you will master Hypertext Markup Language (HTML), the document description language used to author Web pages. With knowledge of HTML and intelligent design, you'll be able to create Web pages and sites that will avoid Mirsky's infamous list-Mirsky's Worst of the Web at http://mirsky.com/wow/ (see Figure 1.1).
Figure 1.1 : Mirsky's Worst of the Web catalogs poorly designed Web sites.
Knowing your audience is the cardinal rule for Web site design, which requires gathering as much information about them as possible, including
You need to gather all of this information before you start designing pages. As with all things, finding out as much as you can beforehand will save you a whole lot of headaches later.
In addition to gathering as many user characteristics as you can, you should keep in mind the following two things that are common to all users:
Knowledge of these two factors provides a good basis for beginning
your Web page design. The next two sections investigate some of
the specifics of each factor.
| NOTE |
Unless you have the luxury of developing for a very homogeneous group of people, you'll probably have to design your pages to be accessible to the broadest audience possible. In the absence of proper information about your audience, designing for maximum readability is the best rule of thumb |
| Corporate Intranets: Designing for a Homogenous Group |
If you're working on an intranet page for your company, one thing you can typically take advantage of is a common platform. Many companies that put up intranets get a site license for their browser of choice. Once you know that everyone is using the same browser, you can design to that browser's level of performance. For example, if your intranet users are using Internet Explorer 3, you can design pages with frames, client-side image maps, Java applets, and ActiveX technologies. Additionally, everyone is most likely running the software on the same platform with the same connection speed, so you can design to those parameters as well Another advantage that you can harness in a corporate intranet design situation is a common culture. Most firms have a "way of doing things" that can be captured on the intranet pages. This gives the pages a context that all your users can relate to. Designing for an audience whose members are more or less the same is a luxury that few people get to experience. If you find yourself in this situation, be sure to make full use of the characteristics that are common to your users. |
When you choose information for a page and choose how you're going to format that information, you should think about how you can minimize the effort the reader has to make. If a page has relevant content that is presented in a well-organized layout, readers are much more likely to get something out of it than if the page is crammed with a lot of extraneous information and is displayed in a cluttered way.
When choosing what information to put on a page, keep the following two, often competing, parameters in mind:
Your Communication Objectives The first point in the preceding list presupposes that you have good and proper reasons for wanting to post content on the Web in the first place. Assuming that you have key communication objectives you want to reach, distill the messages that support those objectives down to their bare essence. Dressing up your messages with frivolous content, or burying them in irrelevant information, means the reader has to make a greater effort to extract them. This reduces the likelihood that they'll come away with what you want them to.
If you haven't formulated what goals you hope to achieve by creating Web pages, go back to the drawing board and articulate some. They're one of the driving forces behind appropriate content.
What's Interesting to the Audience? A visitor to your Web page also has specific objectives in mind. In a perfect world, your audience visits your pages because they want to read the messages you want to convey. When visitors exit your Web page and are knowledgeable of your messages, then both of you have satisfied your objectives.
Of course, the objectives of a Web page author and a Web page reader are not always convergent. In these cases, you may need to include content on your pages that attracts the audience you want. There is a fine balance that you have to achieve, however. You must include enough content to get people to your page without including so much that it obscures the message you want to get across.
Once you have selected the information to go on a page, you then need to think about how you want to display it. Between standard HTML and extended HTML (browser-specific HTML instructions that are not part of the standard) there are many ways to place content on a page that permit both creativity and good organization. These include
Figure 1.4 : Ordered lists imply an ordering among the list elements.
Figure 1.5 : Definition lists present a term or concept, followed by an indented description.
The page elements noted in the preceding list give you a design palette to work with. It's up to you to decide which elements best communicate your message in a way that's clear to your audience.
The current HTML standard is HTML 3.2, which incorporates a good
bit of the extended HTML that had been around, but it still has
not adopted everything. Of the page elements described in the
last section, paragraphs, lists, images, font styles, and tables
are all part of the HTML 3.2 standard. If you know that your visitors
are using browsers that are HTML 3.2-compliant, you're free to
use any of these elements without having to worry about alienating
anyone.
| CAUTION |
The one exception to the last sentence is if some of your visitors have non-graphical or text-only browsers. These audience members won't be able to see any images you put on your page. They also are unlikely to be able to see any color effects you use |
Frames require a bit more consideration, however. Frames were
initially implemented by Netscape and have only recently been
adopted by Internet Explorer. While it is true that almost 90%
of Web surfers are using either Netscape Navigator or Internet
Explorer, you still have to remember the 10% who are using something
else. Frames are being considered for a future HTML standard,
but until that happens, browsers that want to be standard-compliant
don't need to be able to process them correctly.
| NOTE |
Microsoft's Internet Explorer has extended the frames concept to the idea of a "floating frame." Floating frames are windows to other HTML documents that you can place just about anywhere on a page. They're much like the "picture-in-a-picture" feature on many television sets |
Alternative HTML Instructions One of the great features of HTML is that it permits you to provide alternative content if your primary content is not viewable. For example, the HTML instruction that places an image on a page also supports the display of a text-based alternative to the image for users with text-only browsers or for users who have turned image loading off on their graphical browsers. As you read the chapters on HTML in this book, make note of the ways that you can provide alternative content on your pages. Using these techniques will also help to maximize your audience.
Alternative HTML Pages Sometimes users are not able to view an entire page. One case of this is a framed page. Only Netscape Navigator and Microsoft Internet Explorer 3 support the HTML instructions that create framed pages. While most users will probably be using one or the other of these browsers, you still need to be sensitive to "frames-challenged" browsers. You can do this by creating non-frames versions of your framed pages. Many sites that use frames provide links to pages that contain the same information, but don't use frames (see Figure 1.11).
As users traverse the Web, they become accustomed to seeing certain items on pages. They come to rely on these items being present to enhance their Web browsing experience. This section looks at a few common page elements that are also good end-user services.
Everyone craves fresh content, so it makes sense to have some kind of "freshness dating" on your pages. A last updated date tells visitors how recently the information on a page has changed (see Figure 1.12). Assuming they remember the last time they visited your page, they can use the last updated date to decide if there's any new content that they need to check out if they're a regular visitor.
Figure 1.12 : Microsoft places last updated information at the bottom, center of its home page.
| TIP |
Server-side includes are a good way to have the server automatically stamp your pages with last updated dates. See Chapter 33, "Server-Side Includes," for more information |
| CAUTION |
Having a last updated date can create image problems for you if you don't keep refreshing your pages. Users will be unimpressed if they see a last updated date of six months ago |
User feedback is important as you maintain and improve your pages. Many Web pages have contact information at the bottom, typically the e-mail address of the Webmaster or the page author (see Figure 1.13). These e-mail addresses are often hyperlinked so that users can click them and compose a feedback message.
It's frustrating for users when they get that "You can't get there from here" feeling. To avoid the Web equivalent of this, it is imperative that you place navigation tools on your pages. Depending on where users are, they will have different expectations about which navigation tools should be available.
A visitor hitting the home page of a site will most likely be looking for some type of clickable image or image map that can take them to the main subsections of the site (see Figure 1.14). A home page that is well-designed will also include a set of hypertext links that duplicate the links on the image map. This permits people with text-only browsers, or people with image loading turned off, to navigate from the home page as well.
Once on an "inside" page of a site, users typically look for navigation bars either at the top or bottom of the page (see Figures 1.15 and 1.16, respectively). Some pages have navigation bars at both the top and bottom so that the user has the option of using the closest one.
Figure 1.15 : Sony Music's Featured Artists page has a navigation "glove" at the top of the page.
Some people think counters, which are graphical displays of the number of people who have visited a page (see Figure 1.17), are annoying. Counters can be annoying if they're used in a grandstanding or self-indulgent way. However, they can be a useful service if they're built into pages in an unobtrusive way. Counters are helpful to
Figure 1.17 : Counters are a simple way to monitor traffic on your pages.
There are two ways you can go about placing a counter on a page. One approach involves programming the counter yourself. This is a fairly straightforward thing to do, but it does require that your Web page server support Common Gateway Interface (CGI) programs (see Chapter 31, "The Common Gateway Interface," for more details).
If you don't have CGI support on your server, you can use one of the online counter services. Figure 1.18 shows you the counter service at http://www.digits.com/. This popular service walks you through the setup process and tells you exactly what HTML code to place in your files to increment the counter.
Figure 1.18 : WebCounter will maintain a count of how many people have visited one of your pages.
| CAUTION |
When you use an online counter service, the images that make up the counter display have to be transferred from your host service. This can delay page loading and make visitors to your Web pages impatient |
| TIP |
Don't put a counter on every page you do. Usually a counter on the home page of a site is sufficient |
You should avoid placing too much content on a single page. Forcing users to scroll through large amounts of text only serves to annoy them. If you have a lot of content, try to think of ways to divide it over several pages so that users can read it in smaller, more digestible chunks.
Sometimes, long pages are unavoidable. For those instances, you can make use of some of the graphic element techniques, discussed in the following section, to make reading long pages less of an effort for your audience.
Graphic elements are a terrific way to break up a sea of text. Graphics give users' eyes a break from line after line of content. If they're placed intelligently, they can also create interesting and attractive layouts.
With the HTML you'll learn in this book, there are three effective graphic elements you'll be able to use:
Horizontal Rule A horizontal rule is just a simple horizontal line across the width of a page (see Figure 1.19). Simple is very effective in this case because a horizontal rule can break up a long page into smaller sections and give the reader's eye a reprieve from an abundance of text.
Images Images can break up a lot of text and they're particularly effective when text wraps around them (see Figure 1.20). HTML 3.2 now includes instructions for placing "floating images" that permit text wrapping.
Pull Quotes A pull quote is a key phrase or sentence from a manuscript that is repeated in larger, bold text. Pull quotes provide you with a doubly powerful page element: They break up big blocks of text and they reiterate important points. Figure 1.21 shows a pull quote from a page on Netscape's site.
If a page is really long, you should make the extra effort to set up a small table of contents at the top of the page (see Figure 1.22). By clicking different entries in the table of contents, users can jump right to the section of the document they're interested in and not have to scroll through the document to find it.