Chapter 1 "Making Effective Browser-Independent Graphics," stresses the importance of writing an abstract that describes how a page or set of pages in a Web site might function. This is the first step to good design on the Web. Structure is an important aspect of Web design because a typical Web site is not a single document-rather it is a collection of pages, images, sounds, and animations connected and cross-connected by links (see Figure 8.1).
Figure 8.1 : The structure of a Web site requires that you develop a mental map of how pages, functions, and resources are related (http://infi.net/).
Hey, you free-form, unstructured types out there. I want to hear a collective raspberry. Pfffft! You are probably thinking Web sites should develop as a creative extension of the internal aesthetic needs of the designer. Okay, I'll admit one attraction of the Web is its lack of rules and structure, so go for it!
Some Web sites simply have no structure at all. Other sites develop a structure, not through a master plan, but naturally, either as a function of the subject matter or as an unconscious expression of the Webmaster.
No other aspect of your Web site makes an immediate
impact than the first screen a client sees after typing in your
uniform resource locator (URL) and pressing the Enter key. Everyone
has accepted the axiom that "First impressions count"
or "You only have one chance to make a first impression."
You have roughly 30 seconds to convince the user that something
of interest lies beyond the first page.
| Tip |
Make sure your Web site works (gets you where you want, has no dead ends, and has the appropriate links) by setting up a shell. A shell doesn't have graphics and has only enough text to mark levels and page titles. |
The first page is called a splash page because the main graphic elements serve much the same purpose as a splash graphic on a piece of software. Splash graphics provide quick identification of the product while the bulk of the data is loading.
The splash graphic should
I'll admit to a serious bias when it comes to designing splash pages. I can't imagine why the initial page in a Web site has to scroll. Shouldn't a splash page serve the same function as the cover of a book, magazine, or front page of a newspaper? How would you like it if you had to unfold the cover of Newsweek three or four times just to see the whole cover illustration or a bulleted list of what's in the issue?
Here's the key: Design your splash page for a 640¥480
display at the default browser Fwidth of your target population.
Your goal is to avoid scrolling or resizing of the default browser
window.
| Workshop |
Use a graphic icon to draw attention to an interaction. In this case, the icon is followed by text that explains the action. You may want to do this if the icon isn't actually a button. Note that there is no border (BORDER=0) and that alignment (ALIGN=LEFT) is used so that the explanatory text follows on the same line. The cursor will turn into a pointer because the GIF file is inside the <A> tag. The text is not linked because it's outside the <A> tag. |
Test for your intended audience. If you anticipate a 13-, 15-, or 17-inch monitor, test your favorite browser for height and width. If you're stuck with a 13-inch monitor, you may not be able to see the entire page. Horizontal scrolling destroys any natural communication you have worked so hard to achieve. Figures 8.2 through 8.4 show examples of poorly planned pages.
Figure 8-2 : A page with elements too small to fill the default window.
Figure 8.4 : A page with elements too wide, which requires horizontal scrolling.
Creating a home page plan can be one of the more daunting aspects of designing a Web site. This is exactly like the first blank page an author faces when writing a novel. What will the first line be? or the first word?
Like any new work, it helps to form an outline of what you want to present. For a graphical work such as a Web page, try this:
Although home or start pages vary widely from one Web site to another, there are identifiable elements common to all but the most avant garde publications. How you put them together weighs as heavily in the success equation as their inclusion. There are five criteria for the first page in a Web site:
Figure 8-5 : Put the company's name and product up front.
Figure 8-6 : Present the function of the site in a short descriptive passage.
Figure 8-9 : Use linked word lists to show subordinate information.
| Workshop |
Rather than use a graphic as the anchor to a link, it may be easier to link a text passage. In this example, a small GIF bullet (spot.gif) sets off the list. You could use the <UL> structure and choose among character bullets, but we think a graphic bullet looks nicer. Each spot carries some empty pixels to the right to buffer the text. The spot is not a link because it's outside the <A> structure. The text is a link (see the underline and #9805FF color?) because it's inside the <A> structure. |
It is important to visualize the structural relationships around which a Web site is developed. This will tell you how to organize the various HTML text files, graphics, and other resources, not only so the browser can efficiently find them, but also so you can easily revise the components of the site when you need to. The icons in Figure 8.10 are used to easily arrange levels in a Web site. The diagrams in Figures 8.11 through 8.14 show four fundamental Web structures.
Figure 8-10 : Icons used to assist in designing Web site structure.
Figure 8-11 : A linear design utilizing three levels of structure.
Figure 8-12 : A hierarchical design.
Figure 8-13 : A pyramidal design.
Figure 8-14 : A Web site utilizing a polar design.
How you organize the structure and its relationships promotes certain links and communication flow. If you want the major flow of information to be between level-one pages, consider a linear design (see Figure 8.11). When related information is generally within a single topical level, the hierarchical structure (see Figure 8.12) puts all level-two pages together. The pyramidal structure (see Figure 8.13) puts all level-three resources at the same availability. When sections of your site all share the same sounds, photos, videos, and interactions, this is the structure for you. Finally, a polar structure (see Figure 8.14) makes level-three resources available universally from level-two pages, but can be associated with specific level-two topics.
Level-one sections represent the major topical divisions of your site, much like the sections of a book, magazine, or newspaper. The temptation is to include too much detailed information at this level rather than using it to further organize the topic. Ask yourself, "Why is the client in this section, and what do they want to know?"
If your design promotes lateral links between level-one pages, it is effective to use navigation tools that allow easy navigation-unique shapes, colors, or other visual elements. Or, you can use parallel visual elements for that section taken from the splash page. By repeating these visual elements, you build a sense of unity by tying the pages together into a unit.
Look at Figure 8.1 again. Note the following about how Infinet has organized its design:
Is it always a hard-and-fast rule that Web sites should have a home page and three levels? Of course not! The structure of your site should take the form that both best organizes the data and provides access to it. However, if you get deeper than about three levels, I feel that some communication functionality is often sacrificed.
To begin with, you are going to start from the outline that you used to create the home page for your site:
If you work from a general statement, to an abstract, to a word outline, to a structural diagram, you should have a pretty good idea of what level of detail is necessary. Ask yourself the following questions:
Some of the most effective Web sites group their level-three resources together in media galleries (see Figure 8.17). If you have the need to see a picture of a particular topic, you may want to browse laterally through the pictures before you return to level two. Or, if you linked out to get a definition, you may want to continue browsing through terms before returning. This is sort of like getting the dictionary out to look up a word and finding additional words before you put it away.
Figure 8-17 : Level-three graphic resources arranges as a gallery rather than individual files. This example from Carol Thompson Fine Photographs (http://www.sucom.net/civilwar/) utilizes a gallery of thumbnails that you can browse-together. Size specifications for downloading are also conveniently dislayed.
How many times have you had to flip to the glossary to look up a new or confusing term? Probably several times. Linking to a textual or visual glossary is another function of an intrasite link.
Words or pictures linked to additional information are called hypermedia. Click on the word conifer and see a picture of a fir tree. Click on a picture of a logging crew and see a video of tree harvesting in action. Click on the word issues and hear a recording of a spotted owl.
Several methods are available in HTML for navigating between pages in a Web site. In the next chapter, you will be shown specific techniques for increasing the efficiency of navigation. If you're adventurous, try the following:
But please, don't overuse this powerful feature of hypermedia. If everything is linked, then what's the point? The most effective designs anticipate when the client will need additional information. How can you design effective and timely links into your site? Look at the information not through your own familiar eyes, but through the eyes of the typical browser. If you can't do this, secure test subjects and observe them inter-acting with your design. Have specific questions to ask at important junctures of the interaction.
Of course, our interest is primarily using graphics as links and linking to graphical pages. Use the following guidelines when planning your intrasite links:
Intrasite links are easily created with an HTML editor. Instead of linking to another page with an ordinary URL, which is also called an absolute link, you can link to a page with a filename and a target, a process known as relative linking.
To create the HTML code that links your page to another page in the same site, follow these steps:
You may want to link directly to a certain section of a page. This can be done using a link to a target. A target is an <A> link with the addition of a NAME attribute. You can link to a target in your own document or within another document.
To create the HTML code that links your page to a specific target location on another page, follow these steps:
Having access to almost unlimited supportive data and information is a strong allure of Web publishing. If you need a special kind of calculator or a table of data, link to it. Want to show a map of Madagascar? It's over there. However, be careful because
Linking to an external site is very much the same as linking to an internal link. Open up your file in the HTML editor.
To create the HTML code that links your page to another (external) Web site, follow these steps:
| Workshop |
Links to external resources are one of the most powerful features of a dynamic Web site. Constantly review your external URL links to assure that they still do what you want them to do. In this example, the spot graphic you've seen before is combined with linked text. Instead of the object of the link being a graphic or an HTML file inside your site, the object is the URL of the site you want to jump to. |
To understand the importance of structure in designing your Web pages, you might want to consider
| I want to build a Web site for my consulting business. Where do I start? | |
| First, you need to locate a service that will publish your Web site on its Internet server. There are plenty around. Look at http://www.iwork.net/~chandler/book.htm for information on securing or setting up a Web server. Second, decide if you have either the interest or the skills to do the job yourself. Having either one without the other spells almost sure disaster. You can get a simple Web site designed and created for as little as $1,000. See http://www.thielenonline.com for an example of one company that pro-vides this service and tells you up front what the charges will be. If you want to do the job yourself, start with a single splash page with an "under construction" warning, post it, and start expanding. | |
| How do I know what to put on the splash page? | |
| Start with the minimum to introduce your site. Inform the reader as to what it does and its major functions. Look at major news magazines' tables of content and study how they organize an issue. | |
| You talk about levels. Are they real or just something you visualize while designing? | |
| They're real. They not only represent navigational depth within a site, but also the physical relationships between nested directories as they are installed on a Web server. Try to limit level depth to three. Your readers will appreciate it. | |
| Do I have to send my URL to an external page that I link to? | |
| No. I'm sure the external site doesn't know or care about your URL. Your browser provides rudimentary navigation tools (like the back arrow in Netscape) to return to your site. It's still possible to get out of an external URL where the back button shuffles you back and forth between two of its pages. Solution? Re-enter the original URL (yours) and press Enter. | |
| Can I change how my pages are organized, or am I stuck with my first design? | |
| Redesigning a Web site is a little like altering a shirt. It may be easier to make a new one. However, experienced Web designers use a modular approach when assembling a Web site. They make new pages out of old pages. They copy and paste a lot. If you approach Web design as a modular exercise, you can more easily redesign your Web site. |
