HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Making an Entrance: Tunnels and Flash Pages

A site entrance can be made more visually exciting through the use of a flash page or an entrance tunnel. An entrance tunnel is a linear collection of Web pages that exists at the beginning of a Web site—the user clicks through the tunnel pages, until finally arriving at the “real” home page. David Siegel, author of Creating Killer Web Sites, argues that an entrance tunnel “...help[s] build anticipation as people approach the heart of the site. An entrance tunnel uses a game or some other device to hook the viewer.” An entry tunnel can be enticing, if well designed and fast to traverse—which means that the tunnel must be short and must contain minimal copy and graphics. A tunnel also can frustrate users who have to wade though these preliminary pages before arriving at the real content. There is, however, more forgiveness for this type of effect when the site’s focus is marketing or entertainment, and not content delivery. Siegel also makes clear the importance of providing a direct link to the home page from the pages in the tunnel, so that the site does not frustrate repeat visitors who wish to bypass the “experience.”⁸

---

⁸Creating Killer Web Sites, by Dave Siegel, Hayden Books, Indianapolis, 1996

---

A slightly different approach is a flash page—this is a page that appears for only a few seconds, to be replaced by the regular home page. Such a page is easily created using the client-pull technique outlined in Chapter 11. Like an entry tunnel, a flash page must download quickly and must have content that is changed frequently, so that it does not become boring to the reader. A flash page should contain a real hypertext link to the home page to account for browsers that do not support client-pull and to let users “skip” the flash page by selecting the link by hand.

Figure 5.2 shows a typical storyboard for a site with a lead-in flash page or entry tunnel (structurally, the two look the same). The flash pages/entry tunnel are grayed out, to show that the content is dynamic and variable. The URLs corresponding to the associated pages are shown on the left.

Flash pages can also separate a home page from areas containing site content. In this model, a link from the home page is followed by a flash page, which quickly disappears to be replaced by the actual content. This is commonly implemented on advertising-driven sites and is used to showcase a particular advertiser before the actual “content” page downloads. An example is found at www.word.com.

The Image: Graphical Design and Page Layout

Given a plan for a site and its content, the next hurdle is to develop a distinctive page layout and graphic theme. Although textual content is usually the heart of a Web site, imagery is important for making a strong impression and an important component of good site design. Certainly it is important to follow good design principles to present a professional image. Conversely, an amateurish design will hinder, or even cripple, your efforts.

A Web site can be given character through the creative use of graphics and through careful choices of typography and page layout. However, at the design stage, proposed designs need to be tested in the real world of Web browsers. For example, for users with 640-by-480-pixel displays and Windows-based PCs, the Netscape Navigator browser produces a window 600 pixels. This width then can serves as a useful upper bound on the width of Web graphics. Once the design has been created, prototype pages should be developed and tested on the various platforms likely to be used by site visitors. For an intranet, this may be an easy task since most (if not all) users will have the same browser. This is not true for a publicly accessible Web site, for which the pages need to be tested on several different browsers. The pages should be tested for proper functioning (functional links, expected text formatting, proper functioning of any JavaScript programs) and for consistent quality of graphics across different computer displays. Last, it may be useful to bring in outside parties (for example, a focus group) to put your site through its paces and provide nonpartisan appraisal of the site’s effectiveness.

Figure 5.2  A storyboard illustration of a Web site entrance tunnel or entrance flash page. The entry pages are grayed to distinguish them from the regular documents.

Design Details

Given a well defined set of site design parameters, it is time to look for a site design metaphor or theme. As stated earlier, the design can be tied in with an existing corporate identity; it can be integrated with a specific advertising campaign; or it can be a design created exclusively for the Web. In all three cases, the team needs to determine how chosen graphical design should be adapted to provide a theme for the pages.

In the case of Chatelaine, the design was created exclusively for the Web—Chatelaine wanted to create a Web site that had a look and attitude very different from the magazine and did not want to be bound to the layout of the magazine. After much design work, puzzle pieces were chosen as a site metaphor, to emphasize the “connection” theme which drives the site. Consequently, puzzle pieces were incorporated throughout the site as navigation buttons, banners, and home page icons, providing a unifying visual theme for the entire site.

All pages within a site should be branded with the designated site logo graphic (to enforce brand identity). All pages should also contain a link to the home page. Users that arrive at a page of your site from a Web search engine or from some other outside reference will have no way of visiting the rest of the site—or of identifying what your site is—unless explicit site navigational links are provided on every page. The intended audience’s knowledge of the Internet should be considered when establishing a site’s overall design. If your site is being designed for new users, the layout and the links should be straightforward and obvious—new users often complain that they cannot identify links in a page, unless they are clearly identified as such. Novices could be made more comfortable through the use of “Click here” text associated with links, simple page design, and extra explanatory text.