WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES phần 3 doc

Define abbreviations and acronyms: Just about every industry has its own sublan-
guage of abbreviations and acronyms, which can look like ancient Latin to visitors
not fully comfortable in the vernacular. For this reason, an accessibility statement
should spell these out, and if possible, offer a short explanation of each.
Declare standards compliance: This is not very interesting to most visitors, but
there are the occasional trainspotters who care about things like the W3C, WCAG,
Section 508, and other government regulations, and what version of XHTML the
site is running. This section is for them.
Offer additional resources: Many people reading your accessibility statement have
no disabilities at all, and have stopped by simply out of curiosity. This page is the
perfect opportunity to politely encourage others to learn about accessibility and
how to implement it across their own websites. Typical links include the WAI,
17
the
W3C’s published specs to WCAG,
18
Section 508,
19
and other government regula-
tions, and occasionally web designer resources like Dive Into Accessibility
20
or
Accessify.
21
Explain remaining barriers: Just as it is important to discuss how accessible a corpo-
rate website is, it is equally important to explain what barriers remain, and how
people can overcome them. For instance, users of older versions of Netscape will
probably not see your site as you intend, since the browser's CSS-rendering engine
is primitive compared to modern, standards-compliant browsers; in this case, peo-
ple simply need to upgrade their software.
Writing a good accessibility statement is not hard, and it should not take long. Hopefully,

the document should simply summarize all of the effort that has gone into the accessibil-
ity of the website, from small things like navigation aids to large initiatives like ensuring
standards compliance across the entire site. See Figure 3-7 for an example of a good
accessibility statement.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
62
17. www.w3.org/WAI
18. www.w3.org/TR/WAI-WEBCONTENT
19. www.section508.gov
20. www.diveintoaccessibility.org
21. www.accessify.com
8393CH03.qxd 8/2/07 12:04 PM Page 62
Figure 3-7. This accessibility statement speaks to the reader in nontechnical terms that explain the
benefits of the site’s accessibility and how to take advantage of various features.
Testing accessibility
Accessibility techniques mean little if they are not applied correctly, and the best way to
check markup is to run it through various tests, from simple validation checking to screen
reader simulation. For the benefit of end-users, it is always worth double-checking all
content.
Validate the site
There are numerous places that offer to test websites for accessibility, but they are limited
in what exactly they can test. For instance, any markup validator can check to see if
alt
attributes reside within the <image> tags, but only a human reader would be able to tell if
any text embedded in that image is written in a legible typeface. And while those same
ACCESSIBILITY
63
3
8393CH03.qxd 8/2/07 12:04 PM Page 63
programs can check to see if alternate content exists for the <object> tags, only a real

person can judge if the content makes sense and is not written over the heads of its
audience.
That being said, validation services offer a great place to start accessibility testing because
they will pick up just about any technical problem that may interfere with access. Here are
a few services:
Watchfire WebXACT
22
is a suite of purchasable applications that also offers a
reduced set of functionality free on its website. After entering a domain, you will
be presented with four tabs of content:
General (covers page size, load time, meta-
data, and other stats),
Quality (covers broken links, spelling errors, and alternative
text),
Accessibility (checks against WCAG 1.0 and indicates errors and warnings for
each priority level), and
Privacy (covers encryption levels, cookies, and more). This
is a fantastic resource that offers a broad swath of information collected in one
report.
HiSoftware’s
Cynthia Says
23
is an older diagnostic tool, but still useful because it
specifically checks markup against Section 508 compliance, which is an abbreviated
version of WCAG 1.0 adopted by the US government. There’s nothing ground-
breaking, but it will sniff around for missing alternate content, server-side
imagemaps, and insufficient table markup.
Site Valet
24
is another online accessibility tool that has a more expansive feature set

available for purchase. It takes a slightly different approach to its diagnostic output
by generating the page’s HTML and then outlining warning areas. This makes it very
easy to immediately target the naughty bits of the markup.
The W3C’s
Markup Validation Service
25
does not test for accessibility specifically,
but rather tries to validate HTML with the specified
DOCTYPE. Since valid HTML and
accessibility go hand in hand, it’s another solid checkpoint for the website.
Screen readers
Let’s be honest. Few companies or organizations are willing to spend money on a single
screen reading device, much less the myriad options available to disabled users. You might
be able to swing it if you work for a government agency or a company whose site’s acces-
sibility is critical to its customer base, but most likely, you’re going to be left looking for a
software alternative. Have no fear—they exist.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
64
22. www.watchfire.com
23. www.contentquality.com
24.
25.
8393CH03.qxd 8/2/07 12:04 PM Page 64
The Lynx browser
26
is a very old-school piece of software. It is a web browser, but it
is text-only. For those who were around in the primordial days of the Web and
remember DOS-like terminal screens to access online documents, the Lynx browser
will be a nice trip down memory lane.
The Firefox browser has many plug-ins designed to test accessibility, but the

Fangs
Screen Reader Emulator
27
is probably the most useful. Instead of running a sepa-
rate browser or buying a screen reading device, simply load a page in Firefox and
click
Fangs from the Tools menu, and it will display the site as it would appear to a
text-only screen reader.
User testing
Again, the list of organizations willing to invest in focus groups and user testing will be rel-
egated to the richer companies and better-funded government agencies. For instance, an
employee of IBM might convince his company to conduct a study on a few pages, or a
state government to examine their own website, but don’t expect much else. In addition to
funding (which has to cover the space, equipment, and personnel), you will need to find
disabled users willing to demonstrate their web surfing habits in front of a stranger.
If all the pieces fall into place for a live user testing session, study the methodologies and
advice from others who have done the same so that the effort is not wasted. Jakob Nielsen
and the Nielsen Norman Group, Joe Clark, and others have orchestrated these same studies
and have published their results and processes. In fact, some companies might want to
hire an accessibility consultancy to conduct the testing for them.
Summary
Accessibility is critical to a company’s success on the Web. By keeping the doors open wide
for every possible visitor, the revenue and marketing potential of the domain is maximized
while the business enjoys considerable side benefits like increased search engine optimiza-
tion and faster-loading pages. While it is important to read the WAI’s recommended
accessibility guidelines—especially WCAG 1.0—common sense and simple, real-world
techniques will always benefit your visitors.
ACCESSIBILITY
65
3

26.
27. www.sourceforge.net/projects/fangs
8393CH03.qxd 8/2/07 12:04 PM Page 65
4 ARCHITECTURE AND NAVIGATION
8393CH04.qxd 8/2/07 12:21 PM Page 67
Website design is often compared with building architecture. The similarities run remark-
ably parallel. In fact, in web design, a site’s overarching flow and structure is referred to as
its
architecture, a term defining the placement of elements on a page, how they interact,
the intended navigation, and how major sections of a site form a greater whole. This inter-
weaving of components doesn’t happen magically; web design, like building design, takes
meticulous planning with a focus on organization and usability.
The navigation system, a key component of the architecture, can make or break a large
corporate website. Imagine, for a moment, your company site as a large building. All of the
hallways, elevators, stairwells, emergency exits, lobbies, and signage constitute the naviga-
tion, dictating how users move from room to room (your pages of content) after arriving
in the main entrance (cold start from the root directory) or being mystically teleported to
the middle of the building (linked from another site to a deep page). You do not want a
building with dead ends, broken elevators, and ambiguous or disingenuous signs. Likewise,
the site visitor does not want broken links, inconsistent buttons, and no indication of
where they are in the site hierarchy.
These pitfalls are avoided by planning in advance. You need to define three critical things
from the get-go:
How much content you have to work with (at least to start)
How those pieces of content relate to one another
What kind of navigation structure needs to be implemented to best cover that
content
This chapter will cover those three points, plus best practices in building the website navi-
gation, from dictating global, local, and contextual menus, to drafting complementary
navigation components like breadcrumb trails, site maps, and more.

Organizing content
The Web comprises billions of pages of text, images, video, sound, and more.
1
The organ-
ization of that content is what makes it useful to the Internet’s denizens. The creation of
hierarchies, categories, and architectures allows our visitors to easily use, search, and ref-
erence the virtually infinite library of text, images, video, and more. Your corporate site is
a small corner of that greater structure, a microcosm of digital organization. From the very
beginning, you must carefully map out how the site’s pages will interact with one another
to not only form a cohesive whole, but to fit within the greater cosmic network.
There are several ways to approach this, but the end goal remains the same: to create a
proof-of-concept diagram outlining the website’s structure and where individual pieces of
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
68
1. A rough estimate from February 2007 places the number of publicly available web pages
around 30 billion. For more info, visit the Boutell.com FAQ at www.boutell.com/newfaq/
misc/sizeofweb.html.
8393CH04.qxd 8/2/07 12:21 PM Page 68
content fall under different levels of importance. This architectural prototype will influ-
ence the site design because it will be a major driving force in how the navigation is
crafted—how many items are in the main menu, whether to have a columnar subnaviga-
tion or drop-downs, or even if a breadcrumb trail is needed.
Determining the big buckets
The first step in organizing a site is determining the site’s main sections. These are the big
buckets for the content, and usually map to a website’s primary navigation. Deciding on
these broad categories requires a blend of key reference points:
Web best practices: In some cases, what’s been done before on other sites—maybe
competitive, maybe topically irrelevant—might be worth mimicking. Best practices
have been established. People expect to see a contact link just as they expect the
logo in the header to return them to the homepage. Breaking or ignoring these can

deeply affect the usability of the site.
What’s been done before: If the site is a redesign, there is a tremendous advantage
in critically evaluating the path already laid and realigning it to match the goals of
the new design. Since the old design was (hopefully) in place long enough for its
positive and negative points to be recognized, most marketing managers will
enthusiastically supply a designer or information architect with a stream of feed-
back. (“We hate this color. This link should be over here. That section is going away.
I don’t even know what this icon is supposed to represent. Wow, I forgot we even
had this.”)
Specific project requirements: In your initial conversations with the marketing
department and others involved with the site creation, specific directives may
come to light—“We absolutely need to have a section devoted to our
patented technology,” or, “I can see a whole separate section on this product.”
These explicit requirements offer a great starting point when you start mulling over
the architecture.
What makes sense: Designers often instinctively know what the main sections of a
website should be. There is a sense for the depth and topical range of the text and
images, and designers know—in a very broad, nonscientific way—how all the cards
will fall at the end of the day.
Choosing the main sections is not always a predetermined, logical, step-by-step process.
There is always a period of refinement and an intrinsic need for scalability to accommo-
date changes made on the fly. (“Sorry, we need to add one more section” is an oft-heard
phrase.) Actual section labels can also become a focus of manic fixation as you, your
coworkers, your client, the company marketing directors, C-level assistants, mail clerks,
the FedEx delivery guy, and your cat obsess over the semantic difference between
“products” and “solutions.”
Using these guidelines, a first draft of the primary navigation should take little time. Some
sections will be obvious, and others will need fine-tuning down the road. Iterations are
almost inevitable. But identifying the large thematic buckets for content organization is a
first step in crafting the architecture of the corporate site.

ARCHITECTURE AND NAVIGATION
69
4
8393CH04.qxd 8/2/07 12:21 PM Page 69
Visualizing the architecture
Once the main sections of the website are decided, it’s a matter of fleshing out the sub-
sections, minor categories, and even individual pages if the site is small enough to allow
for that level of focus. At this stage, designers and information architects must critically
evaluate the content that will be present on the site, how it will be organized, and the best
structure to support all of the information.
There are different tools for visualizing the architecture of a website. Each presents the
data in a slightly different way. While a mind map encourages rapid, free associative think-
ing, a more formal hierarchical diagram requires site designers to think about content in
a cascading path, or how visitors will naturally explore content if they don’t bail out to a
search feature. Laying out the same information in a spreadsheet provides a third per-
spective that requires a more decisive examination into actual content heuristics.
As a general gut check, maintain more than one version of the architecture. A mind map
approaches the structure from a user-centric point of view, allowing you to think about
how sections expand outward from the homepage. A parallel document with the contents
in a linear, bulleted format transforms the material into a table of contents, which has an
author-centric point of view. Keeping these two versions side by side establishes a rough
check-and-balance environment to ensure that your site organization makes sense from
different perspectives.
Mind mapping
The term “mind mapping” (also known as “idea mapping”) represents an alternative way
of organizing content. It is often used for raw idea generation in the first stages of plan-
ning a new website (or a heavy-handed redesign), as it encourages free association and
rapid exploration of themes.
Mind mapping promotes a tree-like view of information, where subsidiary sections branch
out from the central anchor. Hierarchical diagrams trace the organization of content

through linear paths and assume that visitors will choose a single path and drill down until
they find their page. Mind mapping visually describes the sections more efficiently.
Figure 4-1 shows two corporate websites; the first is a simple 20-page site, and the second
represents a much deeper site with hundreds of pages of content (some nodes are hidden
in order to save space).
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
70
8393CH04.qxd 8/2/07 12:21 PM Page 70
Mind mapping is simple, and works best when exercised without restraint. The name of
the game is expeditious refinement and iteration, not deliberate, prolonged decision-
making over tiny details. In fact, as the mind map unfolds, more pages and subnavigation
items will naturally reveal themselves from free-associative thinking. There are many
resources dedicated to the art of mind mapping (including entire books), but here are a
few tips common among the experts:
ARCHITECTURE AND NAVIGATION
71
4
Figure 4-1. Two mind maps representing two different corporate sites. Example 1 is a smaller, brochure-type
corporate site; example 2 is a much deeper site with several layers of navigation.
8393CH04.qxd 8/2/07 12:21 PM Page 71
1. Always start in the center and work outward. This is a more efficient use of space
and avoids thinking in downward, linear movement. A homepage is the natural
center of a website, not the top as represented in a hierarchy.
2. Explore the branches and do not stop to think too hard or long about one particu-
lar section. Revise later.
3. Prune widowed sublevels. These are the tiny branches with only a single child level.
Either fold the content into the parent or create more child nodes to flesh out the
navigation.
Although mind maps are traditionally hand-drawn, there are several pieces of software
that aid in the process. NovaMind, Mindjet, MindMapper, among others, all accomplish

the same basic goals. FreeMind,
2
an open source alternative, works well for both basic
sketches and later refinement.
Hierarchical diagrams
While mind mapping is one means of defining the architecture, any site of substantial size
also requires a top-down structure that displays the information in a hierarchy, where the
top represents the singular homepage and subsequent levels comprise more granular
menu options. This uses much of the same data as a mind map, but the alternative organ-
ization provides an immediate view into the depth of the site. See Figure 4-2 for an
example.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
72
Figure 4-2. A hierarchical diagram shows the architecture from the top down.
2. />8393CH04.qxd 8/2/07 12:21 PM Page 72
A well-designed hierarchical model not only allows for a comprehensive view of the infor-
mation, but the
shape of that information as well. For instance, a flat architecture starts
with the homepage, but quickly fans out into many choices, with little content and few
pages housed within each section. By contrast, a vertical architecture has few choices
stemming from the homepage, but each section extends deeply into its topic. A well-
balanced architecture looks like a shallow pyramid, with a distinct point cascading down
into thickening subsections.
Neither structure is right or wrong, but each can present obstacles to users. A flat organi-
zation may present too many choices from the get-go—on the homepage, visitors are
unsure about where to click since the labels may not be distinct enough for a clear deci-
sion. They might click around and become frustrated with the lack of content within each
option. A vertical organization is the opposite. Too few choices can present an equal level
of confusion, and users may delve several clicks deep before realizing the path is not going
to lead them to the content they are after.

How the hierarchy is laid out directly influences the navigation scheme through the site. It
helps the designer plan the primary, global, local, and contextual navigations.
Collecting the content
If you’re lucky, you will have all the content for the site before the design phase is even
started. But if you’re like 99 percent of web designers tackling 99 percent of their projects,
content will be outdated, incomplete, or in permanent revision purgatory with a final
version seemingly never to be delivered. The project leader of the website—whether
designer, developer, or marketing leader—is responsible for keeping track of the site’s
text.
Monitoring the copy can help influence the architecture, since many writers and content
editors can change the organization around as they draft the text. Some pages might be
combined, other pages might be divided, and some sections can be deleted altogether.
The direction of corporate content is also influenced by directors and vice presidents
of the company, and they can easily decree entire swaths of a writer’s work unfit for pub-
lication.
Content might come from different authors in different formats; text, for instance, might
come as Word docs, HTML files, instant messages, e-mail, and even hand-written notes.
Inconsistencies can lead to mistakes and incorrect information being published. To avoid
this, it’s best to rigorously police content, maintaining a small library of the prototype ver-
sions and exercising stringent version control.
It helps to create a file structure on the local or server hard drive that mimics the structure
of the website. For instance, a website category might be “About Us”; inside the content
directory, there might be a sister folder called
About Us containing text files for each HTML
page. Those text files should have descriptive file names like
About – Company History
[ver2.3 – 20061203].txt
, which signifies version 2.3 of the company history page, cre-
ated December 3, 2006. (Regular text files work best for web content because they reduce
the content to plain ASCII characters, stripping out any formatting left over from Word

and e-mail programs, as shown in Figure 4-3.)
ARCHITECTURE AND NAVIGATION
73
4
8393CH04.qxd 8/2/07 12:21 PM Page 73
Figure 4-3. Managing content for a website requires explicit version control so that the correct
content appears in the final site.
Inside the actual text file, keep the content organized. At the top of each file, write the
page title and its metadata information, including description and keywords. In addition,
clearly indicate pullquotes, bold text, and whatever else is applicable to the HTML page.
Navigation design
Once the architecture of the corporate website is fleshed out, the navigational structures
naturally follow. It should be obvious from the preparative work how menus are going to
cascade, and what is going to comprise the global, local, and contextual links.
Global links are generally built from the big buckets. Because the global navigation is per-
sistent across the domain, major sections are accessible from any point in the site. Local
menus are relevant to only the section they’re found in. For instance, a local menu inside
the
About Us area might include Company History, Principals, Stock Information, and Contact
Us
. These links would not be found in the Products section. On a more granular level,
contextual links are those appearing in actual content—often embedded and not always
obvious.
While many usability experts argue that a visitor should not have to dedicate more than
three clicks to getting what they want, there is no hard-and-fast rule capping the number
of navigation levels. There may be one global menu, and two or three levels of local
menus drilling deeper into the content. Ultimately, the architecture should balance
between deep and flat. Waves of decreasingly substantial navigation can lead users into
labyrinths of content, while too many choices on a global level can be overwhelming.
There is quite a bit of research on the topic of “breadth vs. depth.” There is no right

answer. Everyone seems to vaguely agree that creating a deep structure is a bad way to
build a website, so avoiding narrow, linear paths of navigation is preferable.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
74
8393CH04.qxd 8/2/07 12:21 PM Page 74
Many information architects argue that the number of top-level navigation links should
not exceed seven, referencing the widely read article “The Magical Number Seven, Plus or
Minus Two,” by George A. Miller.
3
This article makes a case that people can remember up
to seven (plus or minus two) chunks of useful, relevant information. However, just as many
professionals debunk this article as support it, pointing to later studies claiming that users
actually find their information faster when initially presented with a broad selection of cat-
egories, rather than a hierarchy.
4
On top of all this, keep in mind that a website’s native navigation is a complement to the
user agent’s functionality. In other words, browsers and other devices are already very
good at moving through a website. The
Back and Forward buttons easily skip through lin-
ear sets of pages, the built-in history feature recalls previously visited pages, and the loca-
tion field itself enables people to teleport to any location in the domain so long as they
know the URL.
Navigation placement
Since the invention of hyperlinks, web designers have argued over the design advantages
and pitfalls of different navigation placement. Some favor navigation along the top of the
page, some favor navigation within sidebars, and still others place redundant links in
the footer. There are many places on your page to create groups of links, as shown in
Figure 4-4.
Figure 4-4. There are many possibilities for navigation placement on a web page.
ARCHITECTURE AND NAVIGATION

75
4
3. www.musanim.com/miller1956
4. Kent L. Norman, “The Psychology of Menu Selection: Designing Cognitive Control at the
Human/Computer Interface,” Chapter 8 ( />8393CH04.qxd 8/2/07 12:21 PM Page 75
Based on the complexity of most business websites, a combination of navigation position-
ing will be used to indicate primary, secondary, and tertiary levels of organization.
The global navigation is persistent across the website. Because the same buttons appear
on all pages, visitors can leap from section to section without having to backtrack through
previously visited pages. This perpetual menu usually exists in the main header, separated
by both space and design, but it can also exist peacefully in the sidebar if a horizontal lay-
out does not provide enough real estate.
A secondary navigation can also appear in the sidebar or in the header as long as it is visu-
ally clear that it is subsidiary to the main navigation (while still being relevant to the visi-
tor’s experience). Secondary links are local, meaning that they only appear in the section
where they are relevant, but their design and placement should be consistent between
sections. The visual dynamic between the primary, secondary, and lower navigation sys-
tems is a considerable design challenge. The hierarchy of links must be explicitly laid out
in the visual design. Consider Figure 4-5, in which a dominant global menu spans the
header, and each link opens a drop-down menu. When a visitor navigates to a subsection,
they are presented with a local navigation on the left—clearly subsidiary to the top
menu—and a set of contextual links within the main content area. The relationship
between parent sections and child subsections is crystal clear.
The position of the navigation elements in Figures 4-4 and 4-5 is not some mystical con-
struct decreed by the web gods, prophetically chiseled into an ancient tablet for all design-
ers to follow. Many websites place the global menu in the left column, or rely heavily on
drop-downs to present local options. The point is not the
physical location of the menus.
Rather, the
graphic design of the navigation system determines how successfully visitors

move around the site. A muddy visual hierarchy will dramatically decrease usability.
Figure 4-5. Omniture uses a very well-designed navigation to clearly indicate which navigations are
global, local, or contextual.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
76
8393CH04.qxd 8/2/07 12:21 PM Page 76
Best practices
Because the range of possibilities in designing menu structures is so wide, less experienced
designers often act like kids in the candy store, grabbing icons, rollovers, drop-downs, and
animations to mix and hack together before stapling a blinking, honking, poorly labeled
navigation to the top of every page. In almost all cases, the exact opposite approach works
better. Exercising design and technical restraint can produce a far better navigation expe-
rience for visitors.
The following guidelines are grounded in good usability and accessibility; breaking any one
of them can introduce significant problems for visitors. They are particularly relevant to
corporate sites, where the end goal is to always serve content about the company without
making the user think too hard about where to find the information. The best navigation
structures are virtually invisible.
Design and development no-nos
Since there are no rules governing or standardizing how technology and design are used
on the Web, programmers, graphic artists, and marketing directors often get funky in the
presentation of content, especially when it comes to creatively managing navigation. The
Internet highways are riddled with usability potholes where web designers focus more on
how they want to see their website than how their audience needs to see it.
Over the years, designers and information architects have become more savvy about how
users actually conduct themselves on websites, and which design tactics and navigation
schemes present significant usability issues. Jakob Nielsen pioneered these usability studies
in the 1990s.
5
Many of his findings were obvious then, and are even more glaring now.

There are just some things that consistently frustrate users, no matter how badly they want
the information.
Don’t break the Back button. It has been demonstrated in study after study that the
browser’s
Back button is one of the most-used tools for navigating the Web. No matter
how intuitive the menu system and architecture, people will always fall back on what they
know first, and the
Back button is the simplest way to backtrack out of a dead end.
Opening links in new browser windows (see next item) or using Flash for the entire web-
site will render the browser’s button useless.
Don’t open new browser windows. There are very few instances in which launching a new
browser window serves a functional purpose. Never open new windows for external links.
If there is a legitimate concern that people will leave the site, there’s not much to be done
to ease that fear. (Not providing the link at all is selfish development practice, and is not
going to hinder users from leaving your site to fire up Google.) If your company wants
people to return to its site, it’s far better to have the links open in the same window and
let users use their
Back button.
ARCHITECTURE AND NAVIGATION
77
4
5. Jakob has published several prominent books, including Designing Web Usability: The Practice of
Simplicity
and Prioritizing Web Usability, and continues to write on his long-time site, useit.com
(www.useit.com).
8393CH04.qxd 8/2/07 12:21 PM Page 77
New windows are useful, however, when leaving the page will definitely interrupt a critical
experience. For instance, if a person is filling out a complicated online form, they might
want to click a small
Help link to get more information about a specific field. If they click

away from the page, their work could be lost. If the
Help link opens a new browser win-
dow, it is easily referenced as a separate page.
Avoid form-based drop-downs. Using a form-based drop-down presents several usability
and accessibility problems:
The navigation choices are hidden, slowing the process of moving around a site.
Operating a drop-down requires fine motor skills; by providing large, easily tar-
geted buttons, people are less likely to select the wrong link.
These drop-downs are often tied to JavaScript to work correctly, which may be dis-
abled or unavailable.
Form-based drop-downs are not standard, obvious menu constructs, so visitors
might skip right past them. Drop-downs are often used for contact forms and other
areas not generally associated with navigation.
Never use server-side image maps. From a technical standpoint, this might be the biggest
no-no. Server-side image maps present significant accessibility hindrances by effectively
hiding links behind code, making them completely inaccessible to screen readers. (These
are not to be confused with client-side image maps, which use standard, compliant HTML
to accomplish a similar effect, and which do not have any immediate accessibility
challenges.)
Avoid mystery meat navigation. In short, this means designing obtuse visual menus that
have no intuitive meaning (see Figure 4-6). For instance, imagine a set of links represented
only by icons—a house, a T-bone steak, a wrench, and a flame. No one except the designer
has any clue what the heck they mean. Equally bad are menus that only reveal themselves
if rolled over. (The phrase “mystery meat navigation,” which describes this kind of design,
was made famous on Web Pages That Suck,
6
a site hosting a collection of bad web design
practices.)
Figure 4-6. This navigation means nothing to the
visitor. While some vague meaning could be

gleaned, the menu is difficult to use without
explicit labels.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
78
6. www.websitesthatsuck.com
8393CH04.qxd 8/2/07 12:21 PM Page 78
Drop-down menus
Drop-downs present an interesting paradox of efficient navigation structure with substan-
tial accessibility challenges. They allow designers to construct a global navigation with links
to the primary buckets of content, while at the same time presenting a layer of local
navigation in an attempt to both offer a preview of the topics of the main section and
hopefully save the visitor a click from bypassing the sectional landing page. Like most
brilliant ideas, however, it is weighed down by a reality check. In this case, the elegance of
drop-downs is counterbalanced by significant inaccessibility on several fronts.
Older versions of Microsoft Internet Explorer do not recognize key CSS attributes neces-
sary to create drop-downs in pure CSS, so the menus depend on JavaScript to function.
7
As
with anything reliant on client-side scripting, the developer has to hope that JavaScript is
not disabled, otherwise the functionality is crippled.
8
In addition, drop-down navigation presents difficulty for those with impaired movement,
especially if the drop-downs contain nested menus that require careful mouse control to
reveal. Since the appearance of elements relies on the position of the mouse and not
actual definitive clicks, anyone with tremors, arthritis, or other motor control impedances
will have a difficult time with drop-downs.
There is no perfect, magical cure for drop-downs. Developers can, however, take several
measures to ensure that their audience will have as little trouble as possible using them:
Use a drop-down script that adheres to web standards: And luckily, there is no rea-
son to write one of your own, because Patrick Griffiths and Dan Webb have written

an elegant solution called Suckerfish Dropdowns.
9
This uses nested list elements
styled with CSS. JavaScript is only needed for versions of Internet Explorer 6 and
earlier; other browsers use pure CSS to activate the drop-down. Also, because all of
the menu links are written in plain HTML, they are easily navigable by screen read-
ers, cell phones, and other devices where CSS is absent.
Offer a large hit area: Make root and subsidiary elements as large as possible for
mouse movements. Offer an obvious rollover state so there is no question of the
location of the user’s pointer.
Add tabindex attributes to the top set of links: Visitors using a keyboard will be
able to quickly flip through the global navigation. (Make sure these links actually go
somewhere and do not serve as placeholders for the subnav.)
Provide redundant local navigation within the section: While drop-downs enable
designers to reveal the local navigation inline with the global navigation, it is
important to reiterate the local links within the section itself. This permits visitors
with JavaScript disabled to move around the site with just as much fluidity.
ARCHITECTURE AND NAVIGATION
79
4
7. Generally, the problem is rooted in Internet Explorer’s inability to process the :hover pseudo-
class on anything except an anchor tag.
8. As of this writing, about 5 percent of users have JavaScript turned off. A good general source for
this statistic (and others) can be found at TheCounter.com (
www.thecounter.com/stats/).
9.
www.htmldog.com/articles/suckerfish/dropdowns
8393CH04.qxd 8/2/07 12:21 PM Page 79
Breadcrumb links
The practice of leaving a trail of links—or breadcrumbs—at the top of a page rose to pop-

ularity when Yahoo started adding them to their directory. They are little more than strings
of labels that link to their respective sections and present a rough directory path, starting
with the homepage on the far left and ending with the current destination on the far right.
The idea behind this supplemental navigation is twofold:
1. It helps users understand where they are in the structure of the site.
2. It allows them to jump backward to a previous section.
A study conducted at Wichita State University showed that the use of breadcrumb trails,
when available, constituted 6 percent of users’ total navigation activity.
10
(It’s also interest-
ing to note that 40 percent of the test subjects used breadcrumb trails five or more times
during the course of the test.) While the
Back button garnered more attention (31 percent
of all navigation activity), the study proved that when looking to retrace their steps, peo-
ple will employ breadcrumb links if they are available.
Breadcrumbs are typically displayed at the top of the page (near the header) as a horizon-
tal hierarchy, like so:
Products ➤ Cars ➤ Nissan ➤ Altima ➤ 2006
In addition, there are two different types of breadcrumbs:
Path breadcrumbs: These dynamically display the links the user chose to arrive at
the page, mimicking the browser’s history-keeping and
Back button functionality.
Hierarchical breadcrumbs: As in the example just shown, these illustrate the actual
structure of the site and are independent of how the user actually arrived on the
page. This approach is far more common and usable, since it gives visitors a sense
of where they are in a site. (Ideally, a hierarchical breadcrumb would mimic the
URL structure—e.g.,
www.example.com/products/cars/nissan/altima/2006/.)
If a corporate website has more than three or four levels of navigation, breadcrumbs will
probably enhance the usability of the site. As increasingly granular levels of categorization

are clicked through, it becomes less feasible to show every full level of navigation on a
page, and breadcrumbs become an efficient, contextual supplement that is easy for visi-
tors to understand and exploit.
Flash-based navigation
Skim any design forum and you’ll quickly find heated arguments over the viability of Flash
as a website delivery platform. While no one disputes its visual wow factor, the technology
introduces numerous usability problems, not the least of which is the breaking of the
Back
button, the inability to bookmark individual pages, and long loading times for graphically
intense interfaces. Many corporate websites are built entirely in Flash, and all of these suf-
fer from the same problems.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
80
10. Bonnie Lida Rogers and Barbara Chaparro, “Breadcrumb Navigation: Further Investigation of
Usage,” Usability News 5.2, 2003 (
/>breadcrumb.htm).
8393CH04.qxd 8/2/07 12:21 PM Page 80
Many sites exercise a hybrid model of HTML content and Flash-based navigation. This alle-
viates the first two problems just mentioned, but remains accessibly inferior to traditional
HTML links for several reasons:
Any content in Flash is locked behind the plug-in and can only be “seen” visually,
shutting out screen reading devices and browsers lacking the plug-in. These user
agents rely on the alternative content provided in the HTML.
Tabbing through a menu built in Flash only works well if the designer specifically
tests and optimizes for browsers and screen readers. There may be significant
accessibility issues if visitors can only activate hyperlinks by using a mouse. Adobe
has published several documents describing best practices in ensuring better acces-
sibility in this area.
11
Users cannot right-click the menu. Instead of the browser’s standard contextual

menu (which allows users to load links in new windows, check link properties, and
much more), visitors are presented with Flash’s proprietary menu (as shown in
Figure 4-7), which is completely useless.
If the menu uses any complex graphics or animations, it adds to the page’s overall
weight. Even though most Flash developers are considerate enough to provide pre-
loading animations to tell visitors how long they have to wait, if the load time takes
longer than 5 to 10 seconds, even the most patient web user will let loose a string
of unpleasantries.
Figure 4-7. This site uses Flash-powered navigation with HTML-based content. Unfortunately, the
contextual menu (accessed by right-clicking) is useless to the audience.
ARCHITECTURE AND NAVIGATION
81
4
11. www.adobe.com/accessibility/products/flash
8393CH04.qxd 8/2/07 12:21 PM Page 81
It seems the one contingency to consistently make up for Flash’s shortcomings is to actu-
ally duplicate the content in HTML. Typically, main menu links are repeated near the site
footer. This is awkward usability (people will question why the links are the same), but it
makes the site far more accessible.
Smart labels
We’ve all driven through some unfamiliar part of the world, and we’ve all gotten lost from
poorly labeled or overly complex road signs. (Those who have driven in and around New
York City may be having flashbacks right now.) Websites are not much different.
The job of the master architect of a user interface is to tell people where they want to go.
The words used in the website navigation—whether found in the primary menus or in con-
textual links—should be clear, accurate, relevant, and meaningful. People drive through
websites at 60 mph.
12
The goal is to provide groups of links that users can browse and
immediately understand; if someone has to slow down and figure out where a link might

go (or worse, waste their time clicking it), then the designer has failed.
Avoiding bad labels means avoiding internal jargon. At a software company whose product
icon resembled a flame, the product manager caught wind of customers using the term
“hitting the fire” when they activated the product. The product manager wanted to
replace the label
Learn About Our Software with Start Hitting the Fire on the company web-
site. It took a lengthy conversation to convince him that using internal jargon would mean
nothing to new visitors trying to learn about the software.
It’s just as important to pay attention to industry trends by researching other sites and tak-
ing hints from the greater Web. A manufacturer of high-end mountain bikes might use a
term like “aluminum chainring guard” knowing that it will resonate with its market even
though the average person on the street wouldn’t know the part from a pile of empty
soda cans. Every business should analyze what its competition does and research the
prevalence of certain words, scanning for use in reviews, articles, and forum conversations.
Walking the fine line between meaningful language and buzzwords can be tricky, but it’s
best to save the less obvious language for the body copy, where a term like “aluminum
chainring guard” can be explained in context.
Who doesn’t have Flash installed? Flash designers are often incredulous to the
thought of their target audience not having the Flash plug-in installed for their
browser. However, the reality is that many organizations simply don’t allow their
employees to install anything on their computers, including Flash and other ActiveX
controls, PDF software, and Java. Any given federal agency, university, or high-security
business (think pharmaceutical or software development) will have a strict no-
download policy rigorously enforced by the organization’s IT team. Since many people
surf the Web during the day at their job, this represents a significant portion of any
potential target audience.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
82
12. That’s 95.56064 kph for you metric folks.
8393CH04.qxd 8/2/07 12:21 PM Page 82

Picking good verbiage is not the end of the job. It’s just as important to map the menu’s
text with the metadata of the pages. A button titled
Company History should go to a page
not only containing some company background, but have the text “company history” in
the title, description, and keywords. This helps instill users with the confidence that they’ve
made a good selection, and also helps search engines index content more accurately.
Site maps
Site maps have long been a staple on the Web, especially for business sites where the
structural hierarchy seldom changes. They exist as addendum to the rest of the site’s nav-
igation. Since a site map provides a hyperlink to every page and section, it provides a great
reference point for new visitors, and as a bonus, helps search engines index the site.
Google, Yahoo, MSN, and others can use HTML site maps as a launchpad for spidering con-
tent. (These are not the same as XML site maps, discussed later in the section.)
The site map concept is carried over from traditional print publishing. Their purpose is to
list all active pages on the site, very much like a table of contents in a book, and provide a
bird’s eye view of all the public-facing content. In the primordial stages of the Internet,
there was a debate among information architects between the term “site map” and “table
of contents.” Ultimately, the snappier and more modern-sounding “site map” won over.
The effectiveness of site maps depends on the scale of the site and the level of detail to
which the site map magnifies. Some corporate websites are simply too vast to list every
individual page, and in this case, linking to major sections and notable subsections is suffi-
cient. On the other hand, some small businesses may only have a handful of unique pages
that are easily listed in one document, such as the example in Figure 4-8. Still other com-
panies may have a lopsided page depth, where one section contains a disproportionately
large repository of documents. For instance, a software company might only have two or
three pages inside the About Us section, but 500 pages inside the knowledgebase of their
support portal.
A site map must maintain a balance between usability and comprehensiveness. Since a site
map is relegated to a single HTML page, it has to present the breadth of the site without
overwhelming the user. Present too little (or too high-level) content and its purpose is

defeated; list 9,475 pages spanning 192 sections and you’ll do nothing but send cursors
sprinting for the nearest exit link. At the very least, all major sections should be repre-
sented with
some level of detail, whether that includes individual pages or just important
subcategories.
In a blow to the old site map’s ego, studies have revealed that users can (and will) find the
content they want more quickly using a site’s search engine than by browsing. This makes
sense. After all, it’s easier to flip to the index of a book and look up a keyword than to pick
through a preordered list of content, no matter how intelligently designed. The former
empowers the end-user; the latter empowers the original author.
ARCHITECTURE AND NAVIGATION
83
4
8393CH04.qxd 8/2/07 12:21 PM Page 83
Figure 4-8. A site map for a small business
Linking to HTML site maps
Users should be able to access the site map from any point in the website. The link does
not have to be big or even obvious; many designers simply add a small text link in the
footer, while others call more attention to it in the header near or within the primary nav-
igation. Whatever the case, the link needs to be persistent across the entire domain. Again,
consider a book—at any time, a reader might flip back to reference the table of contents.
In addition, a site map should be linked from the metadata of the site. In Chapter 3 we
covered navigation aids, which are special tags linking to important sections of the site.
The site map is one of those pages and is represented by the following bit of code:
<link rel="contents" title="Site Map" ➥
href=" />
These links are important for visitors employing screen readers, and other browsers like
Opera and Mozilla can access them as well.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
84

8393CH04.qxd 8/2/07 12:21 PM Page 84
XML site maps for search engines
Traditionally, search engine robots crawl the Web and discover content organically, travel-
ing from site to site via hyperlinks and indexing content as they meander along. In addition
to traditional HTML-based site maps, which have no common specification, Google, Yahoo,
and Microsoft all recognize a common XML-based site map protocol that is designed to
aid search engines in accurately indexing a domain.
13
These files generally exist in the root
directory of the web server and follow a simple format:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns=" /><url>
<loc> /><lastmod>2006-11-01</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
</urlset>
These simple XML files provide a list of the site’s URLs and include a bit of metadata about
each. This meta information includes the following:
Last modified date: This is when the actual page was last changed. The formatting
uses W3C Datetime.
14
Update frequency: This is a hint to search engines on how often the content of the
page is updated; possible values include
always, hourly, daily, weekly, monthly,
yearly, and never.
Priority level: This is a ranking from 0.0 to 1.0 (the default is 0.5) that allows the
developer to classify the relative importance of pages within the site. It has no
effect on how often search engines spider content, the position in a search results
page, or how content is ranked in regard to other sites.

Besides describing the links of a site, XML site maps allow developers to proactively inform
search engines of new content. As shown in Figure 4-9, Google in particular has an online
tool that allows you to ping its system every time your site map is updated.
ARCHITECTURE AND NAVIGATION
85
4
13. www.google.com/webmasters/tools/docs/en/protocol.html
14. www.w3.org/TR/NOTE-datetime
8393CH04.qxd 8/2/07 12:21 PM Page 85
Figure 4-9. Google provides an online tool for managing XML-based site maps.
The XML site map protocol is not a replacement for traditional site maps. Because they do
not appear on a web page, website visitors cannot use them; they exist purely for the ben-
efit of search engines. Using them will not guarantee a better search engine ranking (or
even a ranking at all), but it certainly increases the chances of being more accurately and
frequently indexed by search engines.
Summary
When website managers take the time to organize content and gain a clear understanding
of what needs to be accomplished—using mind maps, hierarchical diagrams, and indexes
of content as their guides—the subsequent development process will go much more
smoothly. This careful planning of the architecture can have a profound effect on the
usability and accessibility of the site, from influencing the overall menu scheme to creat-
ing and maintaining key supplemental navigation components like breadcrumbs, site
maps, and more. All of these, coupled with clear and consistent labels and design, deeply
affect a visitor’s experience.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
86
8393CH04.qxd 8/2/07 12:21 PM Page 86
5 THE HOMEPAGE
8393CH05.qxd 8/2/07 1:55 PM Page 89