To move about freely is a driving desire for many. There are those who seek the excitement of diverse culture in major metropolitan areas, and others looking for challenges and thrills at the top of nature's peaks. The Web offers the wonderful
experience of being able to explore many of the earth's fascinating sites by simply pointing and clicking a mouse. One moment you might find yourself atop Yosemite's famous Half Dome, or suddenly you're in Italy, exploring the Vatican.
The Web cannot replace the power of travel and adventure, but it can be an opportunity to learn about the world and its points of interest. It can even provide the means to choose travel destinations, book flights, and design itineraries before ever
leaving the comfort of home or office.
Travel on the Web is big business. There are many wonderful sites that offer commendable service, beautiful design, and extensive information. The ten I've chosen to cover in this chapter reflect some of the Web's best efforts in providing service as
well as information. As you travel along, you'll also have the opportunity to learn some important Web concepts and techniques.
The first stop is Excite CityNet. This site is jam-packed with information, and I'll examine the way CityNet has used what is rapidly becoming a design standard to manage large amounts of data: the left- margin index. Leaving the cosmopolitan life, the
next destination is the breathtaking TerraQuest, an exceptional site that offers a look at adventure travel, and does so with a public broadcasting model of financially driving their Web projects.
Other vistas will include Fodor's, where random header graphics excite the visitor's eye upon every new visit. Travelocity offers up a great example of aligned graphics for visual texture. With Internet Travel Network, issues of copyright on the Net are
examined. Lonely Planet uses the modern Progressive JPG, and Microsoft Network's stunning Expedia service is a prime example of RSACi ratings in action. Everyone loves Walt Disney World, and the use of visual repetition is exceptional on this beloved Web
site. The Cyberspace World Railroad is an example of content that is so hot and so popular that hiring a graphic designer is in order. Finally, Timeout is an opportunity to catch your collective breath and learn about iconography as it relates to page
identity.
So grab a refreshing drink (maybe even a snack), buckle up, and enjoy the ride!
Figure 7.1. Excite City.Net splash page.
Excite City.Net is an all-inclusive vacation to the world's best cities. The main page is a variable library desk of vast information, allowing visitors to select one of the listed cities, or search for a city, or any aspect of a city, that he or she
might be interested in.
Individual city pages provide a top-level view of the city's features. These include up-to-the-hour weather conditions, a hot-linked list to specific attractions such as arts and entertainment, and an extensive collection of very detailed and often
interactive maps.
City.Net's design is light-hearted and upbeat, using a green side margin, inventive header graphics (see Figure 7.2), and fun, hand-drawn style navigation icons. (See Figure 7.3.) The designers have created an attractive and easy-to-use interface, which
is no simple task considering the amount of information that is being distributed here. In fact, this is literally City.Net's most significant design feat: the creation of a Web site that is information rich, functional, and logical.
Figure 7.2. Inventive and appealing header graphics.
Figure 7.3. Upbeat iconography.
Designers are challenged by navigation on the Web, for many of the reasons discussed in Chapter 3, "Sites that Speak: Newspapers and Magazines," and, specifically, how to encourage the potential of the Web's non-linear
medium but maintain a clear structure. Most people are used to hierarchical or progressive, fixed configurations. Simply think about the last book you read, and how it was laid out. Most likely, there was a table of contents first, and then a specific
arrangement of information as the teaching or story therein advanced.
There has to be a logical progression in order for material on the Web to make sense. Essentially, the Web is chaotic; there is a growing amount of data available in a multitude of directions, with only successful designers reigning in the powerful
hypermedia that allows you to venture onto unfamiliar but potentially illuminating side roads. Chaotic information is a deviation from what most people are familiar with. It can be confusing, difficult, and frustrating. It is also a strength in that every
return to a Web site will ideally be a unique experience, and each individual will enjoy the site in a different way.
With Excite City.Net, I haven't visited any given point of interest in the same order yet. Each trip, if you will, is a new look at sights that I might have missed or chosen to pass over on my last visit. This time I enjoyed reading about Franz Kafka in
Prague. From there, I enjoyed coffee house suggestions for my next visit to Seattle.
Your visit is going to be markedly different, because you have the choice to go to the destination that most interests you.
Designers working in this variable medium have to be extremely thoughtful about how to organize information so that it will be logical enough to follow, yet diverse enough to maintain the experience that the random possibilities make available. This is
not easily done, but when it is successful, it almost always results in a site that appeals because it becomes easy to use and seems logical in spite of numerous, dynamic options.
Excite City.Net has used a common but very effective feature to reign in the chaos and root visitors to a logical structure while they enjoy individual journeys. This feature is the implementation of a left-margin navigation system. While other
navigation options exist, including a bottom navigation bar and many links on given pages, it is this sidebar that acts as a virtual tour guide and helps the visitor find his or her way home should the chaos begin to overwhelm.
Consider the following reasons for using the left margin:
Figure 7.4. A clear look at the textured edge of City.Net's left margin.
I've heard designers and Web fans alike complain that this left margin system is getting cliché and tired. It certainly is used by a large number of sites, particularly those attempting to maintain extreme amounts of data. As you can see from
these comments, there are several reasons why the left margin navigation system ends up being a natural choice. When sitting down to design sites with significant amounts of information, think about using this scheme carefully, and apply good amounts of
creativity in order to use it well.
Figure 7.5. TerraQuest's home page
Every so often people have the opportunity to stumble upon something that is so absolutely close to perfection that it knocks the very breath from the body. I believe this is what the word "awesome" originally set out to describe, and, should
it appear in a Web site dictionary, TerraQuest will be the graphic definition of the word.
Did I mention I love this site? It's not just the outstanding content, which focuses on virtual expeditions to intriguing points of interest such as Antarctica and the Galapagos Islands. It's not the fact that the site is beautifully designed, precisely
coded, and immaculately maintained. Well, it is these things, but it is especially because the vision of TerraQuest extends beyond its components and right back into the heart of what really matters: people.
Yes, you might have noticed at this point in the book that I am an idealist, an optimist, a humanist, and totally sold on the possibility that the Web can change the world for the good. The cynics among you can sneer away. I don't mind; in fact, I think
it's a healthy thing for people to be skeptical of such fervor. I do have my down days, I promise. But then along comes a site such as TerraQuest, and my optimism is ignited because I see a Web site working within a much greater, visionary model.
Idealism aside, a Web site of TerraQuest's caliber can be an enormous expense. Certainly there exists a number of companies willing to create a Web page at bargain-basement rates, but those companies are either going to put out a poor product and fail
because of inability to generate revenue, or they will ultimately fall into the market model that sells price over quality.
There's a place for that, undeniably. And just as there is a place for both bargain-basement design and top-quality professional presence, there is also a place for what I'm beginning to call the public broadcasting model for the Web. This is what
TerraQuest has done, and it seems to be working with enormous grace.
TerraQuest seeks support from select corporate sponsors to fund its expeditions. The result is a Web site with events that people can join for adventure. This is best demonstrated by the recent coverage of Erik Weihenmayer's historic climb to the top of
Yosemite's famous El Capitan. Why is it historic? Well, Erik is blind.
El Cap, as it's called by those who know it intimately, has actually been a monumental pinnacle, if you'll pardon the pun, in the lives of several extreme athletes. Paraplegic Mark Wellman's story of his ascent—solely on the strength of his
arms—can be read about at http://ybi.com/wellman/. To the completely able-bodied, this mountain is no small potato. To those with physical impairments, the effort is multiplied, but, then again, so is the
personal and social triumph.
It is this triumph that enraptures me as a visitor to the TerraQuest Web site. I want to learn about these wonderful places, and the phenomenal contribution all individuals involved are making to demonstrate the idea that anything is possible!
Who can be cynical looking at these stunning photographs (see Figure 7.6), reading the daily diaries, or going along with the climbing team through the different day-to-day emotions as they ascend to greater heights than ever believed possible?
Figure 7.6. Erik Wihenmayer scaling mountain walls.
In this case, the corporate sponsors are available to read about, on a common page (see Figure 7.7), and it is undeniable that I want to know who has put their money behind such adventurous and life-enhancing opportunities. This gives me great impetus
to find out who they are, buy their products, and thank them for their involvement in not only getting blind hikers to the top of mountains, but bringing that information back into the real world via a fantastic Web site.
Figure 7.7. View of primary sponsor page in the public broadcasting model of Web design.
But the story isn't over. The message, and the resounding support, goes back into a broader community. In this case, through the works of groups such as the American Foundation for the Blind (AFB), who was founded by a group of people that included
Helen Keller in 1921. "The theme... is a simple one," said AFB President Carl R. Augusto. "Let no barrier stand in the way of the goals you set for your life."
This is a model that goes far beyond the practical application of Web design. Although, the most apparent learning here is to think about ways corporations can become involved as sponsors for the type of work you are doing, the most important message is
that a Web site can be a conduit for human empowerment. I hope that designers never let that basic idea get away. Sites such as TerraQuest prove how important it is to create something that resounds yesterday on the top of El Capitan, today on the Web, and
for tomorrow's visionaries who hear that resonance and believe in the power of positive possibilities.
Figure 7.8. Fodor's home page.
Famous Fodors, known far and wide for consistent and very comprehensive travel guides, adds to its resources with its clever and very useable Web site. Heavy emphasis is on news, with coverage of destinations, restaurants, sports and adventure, and
important facts that every traveler should know before embarking on his or her journey.
The design is intelligent and straight-forward, with the splash page being used as a jumping off spot for articles of interest as well as Fodor's online services. There's a nice blend of iconography and original artwork, particularly in individual page
headers, and specifically in the Fodor's main header.
Savvy surfers will notice that the main Fodor's header is often different in appearance. Fodor's has chosen to visually carve its name out of a variety of travel photos, and it is these images that change with each visit to the Fodor site, as can be
seen in three different return visits. (See Figures 7.9, 7.10, and 7.11.)
Figure 7.9. The first visit to Fodor's shows a golfing scene in the header graphic.
Figure 7.10. My next visit shows a beautiful blue sky with white clouds.
Figure 7.11. Another visit shows a beach scene. I'm captivated! I want to return again to see what comes next.
How is this done, you might wonder? Is someone changing the graphics every day, or every hour? Of course not! That would not only be awkward, it would be cost-prohibitive. However, because fresh data and changing images on a Web site keep visitors
returning and enjoying each subsequent visit, finding techniques to give the illusion of regular change is going to be to a designer's advantage.
One of the most popular of these techniques is referred to as "randomization." This is almost always the exploitation of HTML pre-processor functions and information housed on the Web server.
Randomization is actually very simple, although to the non-technical eye, it can seem almost magical. First, syntax within the HTML document calls a pre-processing script to run on the Web server. The server then takes that input and returns the data
requested by the HTML.
In the case of Fodor's, that data is simply a series of graphics that conform in shape and size to one another, and can easily be placed in the exact spot within the page. Each time the script is called, it will randomly select one of the graphics
allowed, and return it to the server. Magic? Not really. Just a clever use of HTML and Web server technology that can become an essential part of dynamic Web design.
Because of the variety of servers that exist, and the various approaches that each requires to use this type of function, it's impossible to go into detail as to how your given Web server is going to be able to handle a randomized process.
The first place to find more information on what your particular server is capable of doing is to contact the system administrator for details. This is the individual or individuals at your company, or the contracting company you hire, that houses a
given site's data on the Internet. The system administrator either has this information, or has the details regarding the type of server software and hardware that he or she is running. He or she should also be able to provide documentation for the
software and hardware, or give you a good reference as to where such information can be found.
With this knowledge in hand, the Web designer is empowered with a technique that is becoming a standard method of keeping sites interesting and fresh. The added advantage is that this can ultimately be done with very little extra effort in terms of
programming and preparation.
Figure 7.12. Travelocity's reservations page.
Travelocity is another great contribution to online travel services. The site is perhaps less broad than Excite or Expedia in terms of content, but, in fact, this is a benefit. There are four main areas, including Reservations, Destinations and
Interests, Chats and Forums, and Travel Merchandise.
The logical and attractive design of Travelocity make it one of my regular bookmarks. It's a very easy-to-use site. I especially like the way the home page is designed, because it has a good deal of information available only a click away, but doesn't
overload the page with so much information that it feels like a shopping mall rather than a personal service!
Along with simple but colorful graphics, intelligent layout, and a very functional JavaScript marquee with up-to-date special fares, Travelocity creates nice visual texture by using a very easy graphic alignment technique that immediately makes the page
easy to read and follow.
As you can see in Figure 7.13, all of the information along the right is a combination of text and floating images. Floating images is a term used to describe the sense that these images allow for text to wrap around them, instead of text and
images placed on a page, with no apparent relationship to one another.
Figure 7.13. Floating images keep information easy to follow.
The designer of Travelocity, in this case, stacked a variety of text information and added three separate graphic images to enhance aspects of the text. These images are staggered, meaning that while the first one is on the left, the next one is on the
right, and then the following one is on the left again. This staggering allows for a lovely, smooth flow for both the text as well as the graphics. The eye enjoys the images without being jarred by a sudden, unexpected change, or becoming bored with
inappropriate repetition.
The technique of floating images used on Travelocity is easily done by using the align and related arguments within the <img> tag to float the graphics.
Here is an example of the syntax for the first graphic from Travelocity:
<img alt="TriStar" border=0 align=left valign=top hspace=5 vspace=5[ic:ccc]
src="promo/graphics/tristar1.gif">
It's easy to see that the tristar1.gif graphic is forced to the left because of the simple syntax in this string that says align=left. To continue maintaining an attractive look, there are three other elements that the designer has added to be sure to
get the results desired.
valign=top this argument states that the vertical alignment is at the topmost part of the vertical space.
hspace=5 this argument creates a five pixel-width of background beyond the horizontal space of the graphic.
vspace=5 in this case, the vertical space has five pixels of background beyond the graphic image.
These commands can be used in a variety of ways, depending upon the designer's desired end look and feel. The amount of pixel width on horizontal as well as vertical space can be changed to any number that makes visual sense. The vertical alignment
might or might not be necessary, again depending upon the individual designer's ideas.
With the Travelocity site, the designer continued using the align argument to help create the graphic staggering, and the extended arguments to allow for plenty of white space between the graphics and the text. The end result? An easy-to-follow grouping
of text and graphic information!
Figure 7.14. Internet Travel Network's home page.
The Internet Travel Network is a secure-server, Internet, reservation service that books hotel, car, and plane reservations twenty-four hours a day from the comfort of your home or office. There is a discussion forum and a news section, and a "how
to get the lowest fares" series of tips. Each is interesting and useful, but the undeniable strength in this network is its focus on travel bookings for Internet users, as well as using agents in the area of the specific user, no matter where
in the world he or she might be.
I like the design of this site. It's very easy on the eyes, with a textured almond background and a stylized early 20th century look and feel to the graphics. It's clever without being over-bearing.
As with many Web sites, each page on the Internet Travel Network has a copyright notice on the bottom (see bottom of Figure 7.14) and I felt this would be a good time to discuss some of the realities of copyrighting material on the Net. A quick
disclaimer here: Anyone building a Web site that has concerns about the safety of the material they are placing on the Web should check with a qualified attorney who can give specific advice.
The information here is merely a discussion to get Web designers familiar with copyright, and what some of its merits and downfalls could be. This information was obtained through discussions with attorney Linus B. Kafka of the Arizona firm Bowman,
Kafka, and Mileff, P.C. Kafka's practice includes copyright and intellectual property issues, and he maintains a personal and active interest in Law and the Internet.
In simple terms, copyright is a form of protection provided by United States law to anyone who creates original works, including literary, dramatic, musical, artistic, and other intellectual works. It is available to both published and unpublished
works.
Copyright is governed by the Copyright Act, which allows the owner of the copyright to reproduce the work, prepare derivative works, distribute or sell copies, perform the work publicly, and display the work publicly.
A copyright automatically exists at the time the work is created in fixed form. For example, the day a book is published, it is copyrighted. The copyright vests immediately in the author, except when the project is considered a work-for-hire, in which
case the employer owns the copyright.
Unoriginal works, short phrases, names, ideas, and concepts cannot be copyrighted.
A copyright protects the work for the remainder of the author's life, plus fifty years. In the case where a copyright is owned by two or more people, it follows the last authors term.
Copyright notice is optional, but recommended. It informs the public that the work is protected, identifies the owner, and the year of first publication. One need not get permission from or register with the Federal Copyright Office to use a notice.
Registration is a legal formality, but it does have advantages. First, it makes a public record of the basic facts of the copyright. It allows the owner of a page to sue for infringement, which is extremely important. If you've placed notice on your
page but failed to register, you might have a very difficult time proving an infringement case.
Again, these are basic considerations. For more detailed information on copyright and intellectual property, please consult a qualified attorney who can evaluate the specific needs of your given Web site.
Figure 7.15. Lonely Planet's home page.
Known as the premier publishers of guides for independent travelers, Lonely Planet has been a grass roots organization, offering up the idea that travelers make an important contribution to the places they visit. The Lonely Planet Web site reflects the
earthy aspect of their print publications, offering a variety of travel survival tips, health information, and detailed maps of world destinations.
The look and feel of the site is simple. The emphasis is on the text information, and much could be done to make the site more visually exciting, including a more sophisticated use of text alignment (see Chapter 9, "Sites
that Express: People on the Net—Unique Home Pages") and consistency in graphic sizing to a 640x480 resolution. However, one intriguing technical choice that the designers have made is the predominant use of the progressive JPG.
JPGs are discussed more specifically in Chapter 8, "Sites with Spice: Food and Beverage on the Web," where the JPG discussion involves choosing the JPG format for photo-realistic graphics. JPGs use "lossy"
compression as opposed to a 256 color palette, as found in GIFs. What this means is that JPGs will lose colors, reducing the total number of colors, and compress an image file, rather than force a specific palette. In general, JPG is a better choice for
any graphic that requires a broad color palette but decent compression. Therefore, JPGs are better for photos and graphics with a lot of light or color gradations, whereas GIFs are better for line-art and iconography.
Progressive JPGs are, in the most simple terms, the JPG version of interlaced GIFs. (See Chapter 5, "Sites to Live By: Beauty, Fashion, Health, and Lifestyle.") The idea is that the graphic will render on a page in a
progressive fashion—appearing all at once in a very blurry version, and then becoming more clear with each pass the browser makes at the data. The power in progressive rendering is that it captures the viewer's eye and keeps the viewer interested in
the page. This is a very effective choice over the standard JPG, which is drawn from top to bottom.
The other advantage to progressive JPG is that the final product can be smaller and visually more precise than GIF compression. The trick to making sure this occurs is to follow the basic rules for when to choose JPG over GIF. Simply remember that
photographic images, or design work with a lot of light and color gradations require the 24-bit color of JPGs rather than the limited 256 palette for GIFs.
Progressive JPGs are not yet extremely popular, and there is some question that they ever will be. The arguments stem from two camps. First, there's the cross-browser issue. Progressive JPGs are supported by Netscape browsers above version 2.0b1, and
Internet Explorer 2.0+. Other browsers, such as Enhanced Mosaic 2.1f5 and later versions, do support them, but anything else will not. For most designers, this is a moot point, as the pervasive attitude is that top-line browsers are available for all
platforms at no or little cost.
The other argument stems from the look of progressive JPGs. To some eyes, my own included, the progression and final version of progressive JPGs often look as though someone has smeared petroleum jelly over the image of the computer screen. The
explanation for this phenomenon lies in the complicated mathematics behind the compression and rendering. Some graphic artists have an excellent hand and a fine eye. They choose the application so well that the end results are excellent. However, many feel
the product to not be consistent.
The final choice is in your hands. There are some fun tools that can produce progressive JPG images, and several are included on the CD-ROM accompanying this book, including Paint Shop Pro and Lview Pro. A professional Photoshop plug-in is available for
both Macintosh and Windows platforms from InTouch Technology for under twenty-five dollars ( http://www.in-touch.com/p JPG.html). DeBablizer and GIFconverter are two of the most common Macintosh applications
that are in wide use today.
Figure 7.16. Expedia's home page.
The Microsoft Network and its related extension of services are unparalleled in the contributions to both the behind-the-firewall proprietary fee services and what is made available on the free ranges of the Internet. Expedia is a prime example of the
attractive design and functionality of Microsoft sites. Offering travel agent services, world-wide, weather information, a currency converter, fare trackers, hotel services, and interactive forums, the Expedia site is made for world travelers.
The site takes advantage of Microsoft Internet Explorer technologies (which, invariably, Netscape has had to incorporate), including background colors for table data (discussed in detail in Chapter 10, "Sites for Kids:
Education, Games, Items of Interest with Children in Mind"), and the use of attractive fonts. These techniques help add color and graphic texture without creating bandwidth problems because these elements are found on the client side and loaded from
the local machine rather than the browser. It is this type of intelligence that will give Netscape a run for its money in the long and ugly war of the browsers.
Another reason is the savvy integration of RSACi ratings as a standard method of rating pages, enabling parents and teachers to set up a password-protected system that defines what their children will and will not be able to view on the Web. All of
Microsoft's sites, including Expedia, use this system.
RSACi (pronounced are-sack-ee) stands for the Recreational Software Advisory Council. This is a non-profit, independent group of software publishers interested in the creation and maintenance of accurate, autonomous, and "non-judgmental"
methods of rating Web sites. In simple terms, RSACi has developed a rating string that site developers can place in the META tag. (See Chapter 11, "Sites that Sell: Company Presence on the Web.") This rating string,
combined with a browser that supports the string (namely Internet Explorer) makes a powerful tool that is in the hands of the individual parent or teacher, and not a special interest group.
For the Web designer, RSACi ratings are somewhat complex in syntax. However, RSACi has created very acceptable tools to assist the designer in getting the right rating string for the Web site in question. Even more powerful is the
"granularity" system that RSACi offers designers.
Granularity is the descriptive term for the ability of a Web designer to selectively place different RSACi ratings in different sections of a particular site. For example, the Expedia site might one day want to add a section that features pictures of
certain beaches where nudity is commonplace. Although the rest of the Expedia site might be perfectly viewable for all ages, this particular section would require a different rating.
Using degrees of granularity, the Web designer can select a certain rating for that particular area, and when parents set up their browsers to forbid under-age children access to that area, the entire site except that section will be
viewable.
Granularity allows the RSACi system to be applied to one page within a site, one branch of a site, or an entire site. This is an extremely powerful tool, and one Web designers should take into serious consideration when designing sites. Even though many
browsers don't yet support RSACi ratings, the tag will simply go unread by visitors using anything but the Internet Explorer—for now.
Ultimately, this type of rating will be embraced simply because of its combined technical ease of use and the fact that it hands the core of the responsibility to parents and teachers immediately, instead of in the distant future. In the meantime, it
also is a major motivation for parents and educational institutions to use Microsoft's Internet Explorer. Again, this is a potentially serious blow to Netscape in the ongoing battle to ultimately dominate the browser market.
The easiest way to be sure that your RSACi ratings will be accurate is to allow RSACi to walk you through the process. A visit to http://www.rsac.org/start.html will get you started. You will go through a
series of questions that ask you to respond with a yes or no to issues involving violence, language, nudity, and sexual content. Once you've completed the series of questions, a RSACi rating will be generated for you. Simply copy this rating into the META
section of your HTML pages that call for this level of rating. The main page of Expedia has an RSACi rating that looks like this:
<META http-equiv="PICS-Label" content='(PICS-1.0[ic:ccc]
"http://www.rsac.org/ratingsv01.html" l gen true comment[ic:ccc]
"RSACi North America Server" by "travel@expedia.com" on[ic:ccc]
"1996.04.04T08:15-0500" exp "1997.01.01T08:15-0500" r (n 0 s 0 v 0 l 0))'>
For more ambitious Web designers who want a full understanding of each level of RSACi syntax, the RSACi developer's pages can be reached by pointing your browser to http://www.rsac.org/dev.html.
Figure 7.17. Walt Disney World's home page.
I love Mickey Mouse! I don't know too many people who don't, especially the young and the young at heart. Mickey is your personal guide to Disney World's Web site, which is a specific site (among many other Disney sites) dedicated to various Disney
interests at the main Disney site; it is found at http://www.disney.com/.
The Disney World Web site is particularly enjoyable, especially because it is featuring the very popular Orlando theme park's 25th Anniversary celebration. It's hard to believe that it's been 25 years; even I remember when it was built! It was an
exciting time, especially for those of us on the East Coast who wanted more opportunities to visit with our favorite Disney characters.
It's especially heart-warming to think that children world-over can get a taste of the eternal optimism, creativity, and colorful presence that Disney World offers right from home! The site is as light-hearted and sweet as can be expected, with
intelligent design featuring many of the familiar Disney characters and artistic styles. Repetition of color and graphic elements help tie the site together and keep the eye subtly but consistently engaged.
Repetition is the foundation of design consistency. Repetition is the foundation of design consistency. No, that sentence's duplication is not a typo or an editorial oversight. It's a sledge-hammer commentary about one of the most overlooked aspects of
Web design today.
Repetition, in practical terms, is the use of a specific element in a repeated pattern. This element can be any number of things, including a color, a specific graphic, a stylized header, or a custom rule. Whatever the elements chosen, they can be used
both multiple times on a page, or, even more importantly, from page to page.
Remember the earlier discussion of the Web's natural state of disorder? Repetition is one of the design techniques that help bring order to the chaos, influencing whether or not a visitor will stay or leave your site. Visual flow is imperative to
keeping people calm and engaged. Certainly, you'll want to have texture, diversity, and dynamic elements, but the need for repetition goes back to the earlier comment of requiring logical foundations from which to expand into the unfamiliar territories of
non-linear environments.
This suggests that a designer must deliberately create repetition, and that is precisely true. Notice the pink bar in Figure 7.17? I then travel to the next page, and there it is again. (See Figure 7.18.) This visual continuity consolidates my
experience of this site, keeping me grounded and involved. Designers should think very carefully about what elements can naturally be repeated to create this continuity.
Figure 7.18. Repetition of pink bar.
Repetition needs to be done with a careful hand, however. Too much of something is, as they say, not a good thing. If an item is overused, it can actually cause the initial intent to backfire. Instead of creating order, you can actually repeat something
so much as to make a design chaotic. Precision is an imperative here.
I like to think about design guru Robin Williams' metaphor regarding repetition. "Repetition is like accenting your clothes." She adds, "If a woman is wearing a lovely black evening dress with a chic black hat, she might accent her dress
with red heels, red lipstick, and a tiny red rose corsage."
Williams then shows how too much is a problem. Add to this effective repetition a red hat, red earrings, a red pocketbook, and a red coat, and suddenly the balance is totally lost.
Repetition, incidentally, is not only important in graphic design, although that's a primary place to use it in terms of the Web. When I was studying writing in college, I learned that the repetition of words or phrases was an important element in
effective communication. The rule of thumb in that instance was that three repetitions would be remembered, anything less might be ineffective, anything more might be overkill.
I think the same is true for visual elements on an individual Web page. This will change as you start repeating elements on tangential pages of a site. The best rule in this instance is to carefully evaluate the look and feel that results. Are you
calmed by the repetition? Is it too busy? When you've fully evaluated your use of repetition, repeat your evaluation!
Figure 7.19. Cyberspace World Railroad home page.
Rail fans, unite! The Web might seem an unlikely place for train and rail travel fans, but the line community has been online for a long time. With original groups on all of the major commercial services, such as CompuServe and America Online, it's no
surprise that the Web would be a natural extension of the rail fan's domain.
There's something invigorating and very independent about this group, who are, in general, extremely enthusiastic and have a palpable passion for everything and any thing to do with trains. Daniel S. Dawdy has created a very rich Web site with the
Cyberspace World Railroad, a main station for anyone looking for all the electronic information and networking to be found on the subject. Dawdy's dedication is evident; he is devoted to the site in a way that all designers should aspire. There is
regularly updated information, humorous bits, history, well-written articles and trivia, and ample links to other train sites 'round the globe.
Dawdy has won several awards for the Global Railroad's content, and I'm going to add his site to the list of all that sizzles, even though the site is not a prime example of technical design. This is an instance, as with many sites on the Web, where the
content is just so cool, so extensive, and created with such passion that it simply cannot be ignored.
The design lessons with a site such as this are many, especially the vivacity that someone who loves what they are doing is bringing to the site. It's contagious, and it's obvious, especially when page creators are enamored of the project. Another
perspective is when content on the Web is just this darned good, the input of professional designers might sincerely benefit the visitors in terms of layout, look and feel, and ease of use.
The following situations suggest it's time for the non-professional designer to seek out a professional's advice:
When a site becomes this popular, and has this much data, it's also a good time for the hobbyist to consider getting some input from professional level designers. This is in no way to suggest that the hard work put in is negated. Rather, it is a logical
part of a site's progression. A design consultant can make a few good suggestions to help the site be very well-structured, interactive, intuitive, and visually engaging.
Certainly there are books (such as this one) that can help very serious hobbyists learn some techniques that enable them to keep the site's enthusiasm, yet have design ideas that match the quality of the content. There are also many resources for design
consultants and information on the Web.
One such resource that I particularly like is portfolios.com. This extensive list of designers from varied media, such as fashion to graphics, has a special section just for graphic designers, typically ones of very high quality and experience.
http://www.portfolios.com/graphic_designers/ will point those interested in finding a graphic designer whose advice might benefit a given site.
Figure 7.20. TimeOut Net's London page showing descriptive icons.
With a distinctly European focus, England's TimeOut Net is a very handy guide for city travel. Of special interest is the regular focus on political or social situations in a given country, with a feature article or series editorial focusing on the
problem and offering assistance in helping travelers to that region stay aware. Arts and entertainment events are high on the list of offerings. Another unique service is TimeOut's free classified advertisements in the city it serves.
Anyone can post a classified ad. Typical ones are for apartment rentals, specialty shops and items, and people trying to connect with other travelers to help share expenses as well as friendship. This is a great feature, and reading the classifieds can
itself be a taste of the life and lifestyles of people within the cities from which they are generated.
TimeOut offers simple design, using plenty of white space, simple header graphics, and a navigation system that consists of colored icons to represent each city covered.
This is an interesting approach, which allows a person to jump from city to city using the visual icons with ease. Another little trick that TimeOut has employed is removing the icon of the page you're visiting from the navigation series. This is a
clever way of letting you know that you are currently surfing around in that region.
Icons can be very powerful tools for recognition and navigation purposes, and in the case of TimeOut, they've been used with a large degree of success, especially considering the amount of icons they have. Fifteen cities are covered, and if TimeOut
wants to begin adding more, this system might get crowded mighty quick.
Web designers selecting iconography as a method of navigation and recognition should be realistic in the planning stages. Will the number of options remain fixed or close to fixed? If not, selecting to use a more advanced, or detailed navigation system,
such as the one described in Excite City.Net, might be in order.
Furthermore, the creation of visual icons is a complex art. TimeOut has done an admirable job representing most of the fifteen cities they are servicing with simple visual guides, such as a windmill for Amsterdam, the Statue of Liberty for New York, and
the Eiffel Tower for Paris. There are a few I'm slightly unsure of, such as Barcelona and Prague, which might have more to do with my lack of familiarity than with what might be common symbols to a European eye. Still, in an international arena, it's
important to consider such issues.
I hope this guided tour of Web sites fits your travel as well as Web design needs. Before take off into Chapter 8, "Sites with Spice: Food and Beverage on the Web," a quick review of lessons learned are in order.
Are you wearing comfortable clothing? I hope so! The next stop is M&Ms, which is sure to please the sweet tooth, melt in the mouth, and fill the tummy!
