WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES phần 2 pps

While it would be easy to start this book diving headfirst into design, it would be a dis-
service to the first cornerstone of the Internet: the written word. Text is the Web’s foun-
dational element, from the earliest Gopher servers housing physics papers to the millions
of web pages published through corporate websites, personal blogs, and social networking
domains like MySpace.
Sharing text was the reason the Internet was invented in the first place. Text is searchable,
scannable, and transportable; it can be moved from file to file, program to program, lan-
guage to language. It can be sent thousands of miles in half a second or distributed to a
million inboxes at the click of the Send button. Rarely has a medium fit the platform so
perfectly.
After distilling all responsibilities down to a base level, the core role of a web designer or
information architect is to build an environment that illuminates the content crafted by
copywriters and blessed by the marketing team. The entirety of this book and its ideas all
serve the same grand purpose: to deliver the message of the site.
In the world of corporate web design, this is critical to remember. Many websites feature
elegant layouts and refined typography, exalting the text. But just as often, designers and
marketers overthink a project, and a potentially simple design devolves into a complex lay-
out that actually hinders reading, when time could be better spent writing and editing the
marketing message. For better or worse, the Internet is too often a living case study of art
deco mentality: time, effort, and money spent on embellishing the perfectly functional.
People visit corporate sites to get information. Sometimes they are already customers and
have a question, and they hit the Support section. Sometimes they’ve heard about you, but
need to clarify a few details about one of your widgets, so they visit the Products page.
Sometimes they stumble across your domain by pure coincidence, and browse the About
section to figure out what exactly you do. Whatever the reason, the visitor is going to con-
sume content—video, animations, diagrams, photographs, and, most importantly, text.
The
raison d’etre of the web designer is to make sure this content is findable, available,
and accessible.
This chapter covers what website designers, copywriters, marketing strategists, and every-
one else involved in the site needs to know about copy for the Web. This not only includes

the unnecessary obfuscation of content and trouble words to avoid, but best practices in
layout and typography that lead to more digestible words.
To compete, you need to be found
Worldwide business is changing every day. Globalization is reaching full steam. The world’s
economy is flattening, and the old economy giants of brand-name business are faltering
beneath the growing power of the long tail.
1
In just over a decade, the rulebook for
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
22
1. The long tail is a term first coined by Chris Anderson in an October 2004 article for Wired
(available at www.wired.com/wired/archive/12.10/tail.html), which he later expanded upon
in a book. It describes a feature of statistical distribution where the bulk of the population is
found in the long trailing end of the graph.
8393CH02.qxd 8/6/07 3:59 PM Page 22
marketing economics has been tossed aside. The Web has leveled the playing field, and
any company can serve any customer with an Internet connection, at any time of day, and
from any part of the world.
No longer must you buy Tide detergent. A simple search for “laundry detergent” brings up
dozens of alternate brands eating away business from Procter & Gamble, many of them
from Internet-only mail order companies. No longer must you buy music at the mall.
Hundreds of music shops—many of them serving narrow niches like classic jazz or hip
hop—thrive on the Web by catering to the customer who wants a deeper selection of
uncommon releases.
The always-on, instantly searchable, globally connected Web offers a tremendous platform
for businesses small and large to compete with equal footing. Millions of companies have
seen the Internet’s potential, and the medium is teeming like a jar of sea monkeys with
marketers vying for your business. But this new landscape introduces a new problem. Or
rather, reintroduces an old problem: how to differentiate yourself and win business over
your competition.

Consider a local music store called Armand’s. They compete with the downtown mall shop
and another record store a few blocks away. Their biggest problem came when the com-
petitor marked his 12-inch singles down to $5.99 and theirs were still $6.99. Despite this,
business remained strong because everyone knew Armand’s name, where they were
located, and the variety of the merchandise, and the helpfulness of the staff.
By contrast, an online shop has thousands of competitors, all lined up on the same
“street,” each with relatively equal pricing and selections. The Internet flips the archetype
of the brick-and-mortar store. The new twist on the age-old problem turns out to be
deceivingly simple—to succeed on the Web, you must be found in the first place.
Old paradigm: the phone book. New paradigm: search engines. Google, Yahoo, and MSN
have supplanted the slabs of dead trees thrown on our doorstep every six months, and
their information is a hundred-fold deeper and updated every second of every day.
There is one critical differentiator between these models. Search engines are more than
directories of names and addresses. They index every word of your website, offering a
richer representation of your business, and then attach that data to a geographic location
if one exists. Today, users can search by physical location or keywords. As you can see in
Figure 2-1, Google can find Armand’s store by keywords (“hip hop records”) or by
location.
This abrupt exposure has forced companies to reexamine their content. Marketers are no
longer able to control whose hands their brochures fall into, and by publishing on the
Web, they are effectively inviting a billion people to learn more about their business.
Some people might type in “detergent.” Others, “discount detergent refills.” Still others,
“environment-friendly detergent alternatives.” Each combination is going to bring up a dif-
ferent set of results, but at the top of each ranking will sit the company who wrote about
these topics in plain, clear, concise language.
CONTENT
23
2
8393CH02.qxd 8/6/07 3:59 PM Page 23
Figure 2-1. Businesses can be found by keyword or geographic location.

To be found, you need to say something
Here’s the reality: people search with words that make sense to them. For most people,
that means plain, short, common words, not the oblique marketing speak so prevalent on
the Web.
Too many corporate sites (and the technology sector is by far the most consistent
offender) feature marketing messages so pregnant with buzzwords, made-up phrases, and
convoluted clauses that it’s questionable whether the original writer has any clue what he
was trying to communicate.
The company that speaks in everyday vernacular will simply appeal to a wider customer
base. For instance, people will not type “integrated premises-based ECM solution” into a
search engine. So if your site says that, you are missing a disproportionately large segment
of your target audience. Someone
might type in “content management for accounts
payable.” Maybe. More likely, that person will search for “software to organize invoices,”
and then find the company that solves this problem without talking about all of that ECM
mumbo jumbo.
Search is already playing a significant role in our online experience. As the Web becomes
more cumbersome and competition thickens, the increasing influence of search engines
will continue to define how content is organized, parsed, and delivered. In the end, plain
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
24
8393CH02.qxd 8/6/07 3:59 PM Page 24
language will be a decisive advantage. Not only because your website will appear more
often in search rankings, but also because readers can understand your message when
they visit your domain.
People will always recommend products and services they understand, never ones they
don’t. No world leader ever gained power by speaking above his followers, and no song-
writer ever hit stardom for not making sense (except Bob Dylan, but even he made sense
some of the time). People will consume and pass along messages they grasp and relate
to—like a website their moms can use to buy environmentally friendly detergent.

Writing better copy for the Web
If there’s one axiom of global commerce, it’s that companies that cannot be understood
lose business. Ask any English-speaking businessperson traveling to France, Saudi Arabia,
or Japan; most figured out long ago that learning the native language was a significant
competitive advantage. On the Web, the axiom still applies. There is simply no point is
throwing mud into the water of language. Obfuscation kills communication.
The goal of your domain should be to open a dialog with a customer, prospect, or investor,
not intimidate them. This requires communicating in plain language, not hiding behind
opaque words, and is best accomplished by avoiding corporate speak and writing for your
target audience.
Avoiding corporate speak
Imagine walking into a pastry shop, asking for a Boston cream doughnut, and getting the
following response from the shopkeeper: “That particular confection, with its falsely his-
torical nomenclature of alternate-dessert elements and synergistic relationship with first
light beverages, presents a best-of-breed banquet that yields sweet savor from the first
morsel of brunette icing to the last swallow of golden cream. It is also currently out of
stock, but we’ve leveraged our advanced dessert replacement solutions to replenish the
inventory.”
You would probably leave. As you walked down the street looking for a Dunkin’ Donuts,
you’d wonder how that bakery ever stayed in business. Visiting any number of corporate
sites on the Web, you could easily wonder the same thing. Here are three fictional exam-
ples of typical corporate speak:
Example 1: “Although our software can be premises-based or deployed as a fully hosted
solution, we allow companies to automate and streamline processes, progress organiza-
tional efficiency, and concentrate on governance and compliance through the direct man-
agement and explicit control of content.”
Example 2: “A person-centric architecture is at the core of our products. Whether imple-
mented into an enterprise system or interfaced as a particularized solution, our laboratory
software offers unparalleled functional competence.”
CONTENT

25
2
8393CH02.qxd 8/6/07 3:59 PM Page 25
Example 3: “Leverage the power of ever-increasing interconnected media channels by
inspecting them through a marketing lens. This integrative archetype affords businesses a
new context proven for retooling marketers to rethink clients working in a rewired
market.”
This trend toward what writer Erin Kissane calls “zombie copy” blossomed with the advent
of the Web, and hit critical mass around the time the first dot-com bubble burst in 2001.
2
Traditional selling collateral rarely required such language because most sales efforts were
focused on consumers. But the economic tsunami of the technology sector brought a
massive influx of postmodern business-to-business marketing, and companies quickly
found themselves stumbling over superlatives, euphemisms, and run-on sentences. There’s
no obvious reason why this occurred, but it’s fair to say a combination of factors were at
work, including the following:
To make the product or service appear more complex than necessary
To make the company itself appear smarter than its customers and thus subcon-
sciously claim authority on the topic
To make their target audience feel smarter
To use the thesaurus more often
The trend, thankfully, seems to be waning. Many companies have scaled back the layers of
nonsensical verbiage, put their thesauruses back on the shelf, and started writing in plain
language again, like their forefathers in advertising taught them. The more your company
exercises this, the more effective and far-reaching its marketing material will be in the
market.
Have mercy on the thesaurus
The torrent of bad writing has left a graveyard of once-valid, now-cliché words in its wake.
In the California Gold Rush of 1848 and 1849, thousands of people tore through rock and
stream to find any speck of gold their prospecting neighbor up the stream left behind. In

the late 1990s, the American English Thesaurus became a similar victim of pillaging.
Suddenly, plain English wasn’t good enough.
Use was replaced by utilize, company was
made obsolete by
enterprise and the use of acronyms—the ultimate achievement in
euphemistic writing—was suddenly so fashionable you could invent them on the fly and
people would almost applaud. This swath of abuse sent dozens of useful but relatively
uncommon words crashing down into a pit of clichédom. Couple this with the invention of
new words (
seriosity) and the trend of ridiculous modifiers (world-class), and we suddenly
have a template for how
not to write.
Following are a few words that have had their character ground away by unrelenting use
(or is that utilization?):
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
26
2. Erin Kissane, “Attack of the Zombie Copy,” A List Apart, October 24, 2005
(www.alistapart.com/articles/zombiecopy).
8393CH02.qxd 8/6/07 3:59 PM Page 26
Solution: Probably the poster child for corporate-speak abuse, this once great word
now appears on an incalculable number of company websites. Unfortunately, while
elegant, it has little meaning when orphaned, especially in a site’s navigation. The
word is still valid when meaning an actual answer to a problem, but not when used
as a replacement for more tangible words like
products or services.
Utilize: The major problem with utilize is that it is simply overused. It may or may
not be a direct replacement for
use; in different situations, its meaning can con-
note something slightly different. For example, I can
use this shovel to dig a hole

(its intended purpose), or I can
utilize this shovel to smash this lock open (an unin-
tended use, no matter how practical). However, the problem lies in the fact that
copywriters use
utilize even when its monosyllabic cousin would be clearer and
more to the point.
Enterprise: This word is just a flowery alternative to company. Who can seriously
tell me they don’t think of Star Trek when they read it? A prime casualty of the-
saurus abuse, try the more humane
company, organization, or business instead.
Leverage: This is another alternative for use, but with major bonus pretension
points. While a real word with real meaning, it hardly ever relates to the marketing
material in which it finds itself. Your software might
leverage your client’s IT invest-
ment, but it more likely
takes advantage of that investment instead.
Best-of-breed: This one just has to stop. Probably one of the most pompous
descriptors to come into common use,
best-of-breed is a term best left to award
ceremonies at dog shows. A marginally better
best-in-class could be employed, or
you could just stop writing empty modifiers and talk more about the real-world
benefits of your company’s product.
Writing with clarity also requires the immediate cease-and-desist of trying to write with
pomposity. People who try to write over the heads of their audience nearly always fall
short; after all, what is the benefit of confusing your readers with sentences thicker than
tar and as appetizing as sawdust? Removing these common sins from the copywriting tool-
box can help further the cause of intelligibility:
Invented words: Making up words not only complicates language, but suggests one
of two things: either the writer was not intelligent enough to think of a perfectly

decent word, or the company regards its self-worth high enough to warrant its own
secret language. There are many rather funny examples, but just keep in mind that
verbing nouns only increases the complexification of wordspeak.
Acronyms: These poisonous little strings of letters are the darlings of technology
pundits everywhere, from software makers to commercial equipment manufac-
turers to government agencies. Very few are valid. Just for fun, try to guess what
these stand for: SERP, ECM, XSLT, OPML.
Superfluous modifiers: Modifiers are the subtle little attachments to nouns that
make the subject sound just a bit better. Like a good pair of shoes, they provide fla-
vor to the package—and, like a pair of hot-pink knee-high Nancy Sinatras, can
quickly become distasteful. We discussed
best-of-breed in the preceding list; world-
class
, unprecedented, and others also appear with uncomfortable frequency.
CONTENT
27
2
8393CH02.qxd 8/6/07 3:59 PM Page 27
Write for your audience, not your ego
Avoiding obfuscation is the first critical step in a more readable website. Thinking about
what your audience wants to read—and how they want to read it—is the second.
Many copywriters indulge themselves with big words and heavy-handed messaging. Avoid
this. Edit copy to a common denominator by assuming your reader knows nothing. This
means offering the full story, in clear language, so search engines index you, readers find
you, and customers refer you.
Larger companies have dedicated editors for web copy. These folks understand the golden
rules of brevity and clarity. Unfortunately, these wise companies are the minority, so it is
important that web designers, information architects, and others involved with the project
understand what makes words work well so they can collaborate with the copywriter to
produce the most reader-friendly messaging.

Provide the whole story
Don’t assume people know what you do, how you do it, where you are, or when you
started. Providing all this information offers people the whole picture of your company.
Leaving out a key piece of the puzzle just annoys visitors and puts them off going any fur-
ther. For instance, a web page describing the services of the company should be rich with
detail, whether marketing copy, testimonials, or illustrations. Failing to adequately inform
readers about what the company does and its methodologies results in only one thing: less
interest.
Short paragraphs
The print medium provides designers tremendous creative freedom. If they want 2-inch
columns, text set at 8 points and the background a light gray, there’s not a darn thing the
reader can do about it. This flexibility in design accommodates different content styles as
well; our example of carefully designed columns would handily fit denser type and longer,
multi-sentence paragraphs.
The Internet ignores all constants. Text size is dictated by the user, and long paragraphs of
text can quickly become unwieldy on a wide monitor, causing reading speed and informa-
tion retention to plummet. Because of this unpredictability, the best web content is writ-
ten like newspaper copy: short paragraphs that focus on one thought and rarely exceed
three sentences. This fast-paced style organizes thoughts into easily digestible chunks, and
helps the eye travel from block to block through the copious whitespace.
So how long is a paragraph on the Web? A 50-word paragraph is reasonable; shorter is
better. It has been demonstrated over and over again that readers
scan web content
quickly, rarely lingering to
read and fully digest the information. Short paragraphs oblige
this pattern.
Bullets
Like short paragraphs, bullets help readers lightly graze on content to help determine
whether they’re in the right place. Here are some general guidelines:
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES

28
8393CH02.qxd 8/6/07 3:59 PM Page 28
Keep bullets short and punchy.
Group them together in logical clumps.
Don’t overuse them.
It’s best to mix bullet points with paragraphs to break up content and keep the eye moving.
This also avoids feeling too much like PowerPoint. Also, be careful that your bullets—
which are intended to abbreviate and highlight key messages—do not obfuscate your
message. It is entirely too easy to truncate a complete thought so much that it becomes
meaningless to your readers.
Reading level
Most television sitcoms are written at an eighth-grade reading level to appeal to the widest
audience possible. News and editorial programs might be written for a more educated
audience, but I would bet that if you sat a class of 13-year-olds in front of the TV, they
would understand almost every word on CNN. Television is written by professionals who
know how to speak to a broad demographic in a common language. It would be wise for
companies to follow TV’s lead. It’s common to assume your audience is more educated
than they really are, but even if that’s true, people don’t want to think too hard when
reading, especially on the Web, where the term
reading is used loosely.
Examples of clarification
Taking into consideration everything covered up to this point in the chapter, let’s take
another look at the examples of the thick corporate speak referenced earlier, and see if we
can’t increase the signal-to-noise ratio to get a clearer meaning. Here is the first one:
Example 1: “Although our software can be premises-based or deployed as a fully hosted
solution, we allow companies to automate and streamline processes, progress organiza-
tional efficiency, and concentrate on governance and compliance through the direct man-
agement and explicit control of content.”
This is not bad copywriting per se, it’s just heavy-handed. It’s technically correct, but the
cacophony of big words wearies the brain. Here is the same message, but with lighter, sim-

plified text:
Example 1 (edited): “Our software introduces new ways to organize your corporation’s
many kinds of content, increasing employee efficiency and helping to meet compliance
regulations. The software can be installed locally in your company, or hosted through our
datacenter.”
The message is still there, but the delivery is not as dense.
Example 2: “A person-centric architecture is at the core of our products. Whether imple-
mented into an enterprise system or interfaced as a particularized solution, our laboratory
software offers unparalleled functional competence.”
CONTENT
29
2
8393CH02.qxd 8/6/07 3:59 PM Page 29
The second example is tougher, because while the sentence is long and uses colorful
words like
person-centric and interfaced, it’s not actually saying too much. Here’s a possi-
ble revision:
Example 2 (edited): “Our products, built with the user in mind, help make your laboratory
more efficient.”
It’s not particularly mind-blowing, but it’s about the best we can do with such thin raw
material.
Example 3: “Leverage the power of ever-increasing interconnected media channels by
inspecting them through a marketing lens. This integrative archetype affords businesses a
new context proven for retooling marketers to rethink clients working in a rewired
market.”
This final example is just bad copy. The writer is trying way too hard, and the final text is a
plate of syrupy mush lacking any kind of intellectual nutrition. The message is there, and
it’s fairly simple once all the layers of language are peeled away:
Example 3 (edited): “Using a combination of marketing media, you can reach new
customers.”

Design considerations for content
Some web designers may think they are perfectly justified in glazing over this chapter. It is
after all, about content, not design, or even traditional information architecture. But the
reality is that the two elements are fundamentally bound, like hydrogen and oxygen atoms
in a water molecule. In fact, their symbiosis is driving many designers to become increas-
ingly conscious of web content—what messaging works and what doesn’t, how people
react to typography decisions, how people scan content within a page, and so forth. Every
day new research offers deeper insight into how the masses interact with content. Those
theories and best practices filter down and permeate the decisions driving how interfaces,
navigation elements, body text, and more are actually designed.
In a traditional marketing structure, designers design and writers write. Large organizations
might even have a dedicated copywriter for the Web. A medium-sized business might
retain a copywriter who handles both print and web content. But in a small company, one
person could easily comprise the entire in-house marketing team, and their job is to both
write copy and get it live on the site.
Whatever the case, it is in a designer’s best interest to read the content. At best, they can
work proactively with the copywriter to craft better messaging; at a minimum, under-
standing the text can only help them appreciate the company’s needs, which will ulti-
mately result in a stronger design.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
30
8393CH02.qxd 8/6/07 3:59 PM Page 30
Insist on copy—refute lorem ipsum
Designers everywhere have a familiar friend in ancient Latin text. For hundreds of years,
Cicero’s
De Finibus Bonorum et Malorum has provided printers and designers a content
doppelganger: the infamous passage containing the words
lorem ipsum. This once obscure
text now finds its way into countless design projects as meaningless filler copy. It suppos-
edly approximates typical character distribution in an average passage of English text, and

is intended to force the viewer’s eyes to focus on the design of the text without getting
hung up on the actual words.
While the technique has merit—especially when testing typefaces—designing a website
without real content does a disservice to everyone, especially the designer. Imagine a mas-
ter picture framer carving a new frame without knowing what the painting looks like, only
that it’s about 3 by 2 feet and has some red in it. While it can be done—and maybe even
done well if the framer guesses right—the end product will not be anywhere close to its
potential without understanding the context of the art.
To execute the best possible work, designers and developers need the full story, and that
means real content. Too often, clients, marketing departments, and writers instruct
graphic artists to “just ‘greek’ in the text.”
3
While designers might have a general idea of
what the site needs to convey in its look and feel, it’s still just a shot in the dark.
Typography considerations
The world of typography on the Web has a murky, sordid past, filled with inconsistent
browser rendering, poorly aliased text, cross-platform font discrepancies, and the unpre-
dictable text-resizing whims of users. This trail of frustration is, thankfully, slowly subsiding.
Today, the tools are better than just a few years ago, and as technology marches forward,
some of the maddening variables of early web design have stabilized into a few concrete
guidelines.
To serif or to sans?
The question over whether to use serif or sans serif fonts in body copy is actually a fairly
interesting debate. In the web design world, it has become an accepted precept that sans
serif fonts are better for condensed body copy, and in the world of print, serif fonts are
better for longer passages of type. This is, however, a myth that has yet to be proved con-
clusively either way, but you can see an example of the difference in Figure 2-2.
CONTENT
31
2

3. The term greek is technically false (lorem ipsum is Latin), but it has been slowly converted into a
slang verb by thousands of designers and marketing folk looking to quickly fill a block of
content without actual text.
8393CH02.qxd 8/6/07 3:59 PM Page 31
Figure 2-2. The text on the right could appear on a website; the text on the left is formatted
for print.
Several studies have been conducted, all of them producing virtually imperceptible,
almost anecdotal evidence supporting both arguments. For typography on the Web, we
can deduce the following:
In general, people prefer serif fonts when they were sized higher than normal,
around 12 to 14 points.
Above 12 points, most fonts of any family are perfectly readable. At smaller sizes,
sans serifs slightly edge out serifs in terms of readability, but this has a lot to do
with the inability of most computer screens to elegantly render the subtleties of
serif fonts.
Small sans serif fonts present difficulty for readers with dyslexia.
Use common typefaces
When producing Windows 95, Microsoft commissioned celebrity typographer Matthew
Carter to design screen-friendly fonts. The result was Verdana and Georgia, among others.
These were crafted with the goal of retaining legibility at both small point size and subjec-
tion to poor screen aliasing. In a study by Wichita State University, both faces—along with
Arial, the inbred cousin of Helvetica—scored high with users in almost all categories,
including reading time, perceived legibility, and overall font preference.
4
It would be a
criminal understatement to say Matthew Carter succeeded in his goals.
The advantage of Verdana and Georgia is that they are available on most PC- and Mac-
based computers produced since 1995. (Arial is installed on all PCs, and its nearly identical
twin Helvetica is installed on all Macs.) This widespread adoption, along with their
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES

32
4. Michael Bernard, Melissa Mills, Michelle Peterson, and Kelsey Storrer, “A Comparison of Popular
Online Fonts: Which is Best and When?” Usability News 3.2, 2001 (
psychology.wichita.edu/
surl/usabilitynews/3S/font.htm).
8393CH02.qxd 8/6/07 3:59 PM Page 32
familiarity and proven legibility, make them ideal carriers of web-based content. The trick,
then, is to make sure the CSS references them correctly.
Cascading style sheets provide web designers the means to discontinue the use of messy
inline
<font> tags and other display-related markup. In addition to creating far cleaner
HTML, CSS allows for advanced typographic control, such as general styling (italicizing and
bolding), employing small caps and drop caps, precise sizing through different units of
measurement, and much more.
5
With this much power, it is vital to write CSS type defini-
tions that accommodate different platforms.
For instance, all Windows-based and newer Mac-based machines have Arial installed, but
the same cannot be said for older Mac-based computers, which often rely on the similar
but subtly different Helvetica.
6
To produce a similar experience on both operating systems,
the CSS needs to define both faces, such as the following:
p {
font-family: Arial, Helvetica, sans-serif;
}
It is also important to note that some fonts may not be called the same thing between OSs,
and ones that are may look slightly different between the platforms. The font Times is
common on the Mac, but completely absent on most PCs, except for a rare variation that
produces a grungy, distressed version of the classic Times New Roman. To avoid the

appearance of this nasty alternative and ensure the same look is produced on both plat-
forms, the CSS would be the following:
p {
font-family: "Times New Roman", Times, serif;
}
Finally, it is critical to include a generic term at the end, whether serif, sans-serif, or
monospace. It is foolhardy to assume any given machine has even the most generic font
installed, so a contingency rule must be added. Otherwise, the browser will use its own
style sheet (and that is almost never desirable). Testing the website on all platforms will, of
course, weed out many of these potential design trolls.
Consider contrast
Finally, contrast is very important in web design, and most important when designing text.
Like the conundrum over serif or sans serif, there are no hard-and-fast rules, only guide-
lines. Some prefer dark text on a light background; others like their copy reversed.
Whatever the case, contrast—the level of color difference between the words and their
environment—must be set relatively high in web design. A thousand different monitors
will produce a thousand different images. For a deeper discussion on the topic and a list of
tools to help discern contrast ratios, see Chapter 3.
CONTENT
33
2
5. Diving into advanced typography is beyond the scope of this book. However, a great book that
wades neck-deep into the topic is CSS Mastery: Advanced Web Standards Solutions, by Andy
Budd, Simon Collison, and Cameron Moll.
6. For an entertaining read on how Arial was unceremoniously derived from Helvetica, read Mark
Simonson’s article “The Scourge of Arial,” at www.ms-studio.com/articles.html.
8393CH02.qxd 8/6/07 3:59 PM Page 33
Summary
Writing and the presentation of the written word are the fundamental goals of the Web,
but this too often gets forgotten in the excitement of the design process. Design and con-

tent, like in any medium, are symbiotic, and when working together, they create a stronger
finished product. Web designers and information architects are responsible for how con-
tent is presented, and must work with copywriters to ensure that the best possible product
makes it to the outside world.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
34
8393CH02.qxd 8/6/07 3:59 PM Page 34
3 ACCESSIBILITY
8393CH03.qxd 8/2/07 12:04 PM Page 37
Architecture and web design are close cousins. Both vocations require focus in creatively
designing tangible experiences and environments that facilitate movement. A good archi-
tect will study how people move from room to room and craft a layout that makes this as
easy as possible. A good web designer will research how people navigate a website, where
their eyes travel, and what visual cues they look for to get the information they need as
easily as possible.
One person moves through a building and follows the icons for the restroom; another
navigates a website and finds an e-mail address by clicking
Contact. The craft of predicting
user movement exists in both environments, and the architecture of each is designed to
assist that movement. But what happens when not everyone moves the same way?
Problems arise when architecture—both physical and digital—limits the movement of the
visitor. Buildings are clearly designed around people who can walk. Long hallways, stairs,
urinals in the men’s bathroom. Websites are clearly built around those who can see.
Pictures, icons, colors.
If you visit any contemporary public spaces, especially those catering to large meetings like
conference centers and hotels, you will notice the abundance of accessibility and usability
accommodations these facilities have extended to their visitors. Ramps and elevators sup-
plement stairs for those with wheelchairs or children’s strollers. In many seminars, sign lan-
guage specialists are contracted to translate the speaker for those with hearing disabilities.
Many rooms—including restrooms—have braille equivalents on their signs. These days,

hotels and event organizers take steps to make life as easy as possible for everyone.
Several countries have made accessibility in buildings a legal requirement, and any public
space failing to meet the minimum accessibility policies is subject to fines. The same types
of requirements are starting to appear on the Web. All US government sites must adhere
to a certain level of accessibility, as do most sites in the United Kingdom, Australia, Ireland,
Canada, and more. Even commercial sites are subject to lawsuits if they discriminate
against those with disabilities.
The issue of accessibility on the Web is not new. However, for years, the issue has been rel-
egated to small designer mailing lists. Only recently have web designers and corporate
marketing teams become aware of the potential problems inaccessible websites present,
and how to overcome those challenges.
Accessibility is not just for the blind
While the design industry is slowly becoming more educated through the evangelism of
Joe Clark
1
and sites like Ian Lloyd’s Accessify,
2
many web designers still incorrectly equate
“disabled” with “blind.” While it is true that the Web plays host to a significant number of
people with visual impairments, to slice the definition of disability so narrow is a disservice
to the millions of users with other handicaps.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
38
1. www.joeclark.org
2. www.accessify.com
8393CH03.qxd 8/2/07 12:04 PM Page 38
The 2000 US Census reported that 12.3 percent of Americans have a disability—including
sensory, physical, and mental disabilities. That number adds up to almost 32 million
people.
3

There are very few businesses or institutions that would willingly turn away so
many potential customers, if they could find a way to serve them elegantly.
The first step to meeting the needs of the millions of disabled users is understanding their
situation. The word “disability” is an umbrella term that covers many categories of impair-
ment, from visual impairment to learning disabilities. Following are some common handi-
caps many everyday web users have to contend with.
Visual impairment
Disabilities with vision include full blindness, semi-blindness, and color blindness. People
who are fully blind cannot see at all out of either eye; they rely completely on specialized
equipment and software like screen readers to navigate websites. Semi-blindness, on the
other hand, affords the person
some vision, either in one eye, or with some debilitating
limitations in both. Depending on the severity, semi-blind people might use assistive tech-
nology like screen readers, or just increase the size of the text in their browser.
Color blindness comes in several forms: red-green, blue-yellow, and monochromacy. There
is a tremendous amount of science and biological terminology behind these variations, but
in essence, red-green color deficiency (the most common) makes it hard to tell the differ-
ence between red and green hues, blue-yellow (much rarer) makes it difficult to discrimi-
nate between blue and yellow, and monochromacy is the inability to see any color. (It is
interesting to note that monochromacy—pure black and white like an old episode of
The
Munsters
—is the rarest type of color impairment.)
Mobility impairment
Some people lack the necessary motor skills to operate traditional computer equipment,
such as a mouse. In fact, many users with limited motor skills prefer using a keyboard
exclusively since it requires fewer finite movements and less reliance on hand-eye coordi-
nation. Many people mentally stereotype mobility-impaired people as those confined to
wheelchairs, but in reality, most people in wheelchairs have no trouble using the Web
because their particular disability affects them only below the waist.

4
Hearing impairment
Hearing impairment is not a major concern for general HTML-based web design, but it
becomes a definite concern in multimedia development when voiceovers or other audi-
tory triggers are the only source of direction or content. Also, any type of video content
ACCESSIBILITY
39
3
3. The 2000 US Census had a total of 257,167,525 respondents. Of these, 31,681,270 were reported
to have one or more disabilities.
4. There are a few instances in which those in wheelchairs have difficulty operating computers.
These are usually severe cases affecting the upper body’s range of motion, such as with a
quadriplegic person.
8393CH03.qxd 8/2/07 12:04 PM Page 39
becomes immediately inaccessible unless it contains closed captions. As web designers
begin taking advantage of increasing bandwidth to deliver high-impact interactive presen-
tations, accommodating the hearing impaired will become an important topic of discussion.
Hearing impairment is also a major concern when coupled with blindness, because then
your visitor must use a braille device for consuming content.
Learning disabilities
“Learning disabled” is a somewhat harder category to narrow, because it encompasses a
range of developmental and learning disabilities that can affect almost any aspect of a per-
son’s ability to process information. Dyslexia is a particular concern in web design. The
condition can deeply affect a person’s ability to read and understand text, and is affected
by a disconcerting range of factors, from background colors and typefaces all the way to
word choice.
Epilepsy
Epilepsy is not a learning disorder or mobility impairment, but a chronic neurological con-
dition. It must be mentioned, however, because certain designs (particularly rapidly flash-
ing advertisements) can trigger epileptic seizures.

Accessibility benefits everyone
It is probably true that the majority of a corporation’s website visitors will have passable
vision, no significant learning disabilities, and not suffer from epilepsy. It’s even common
for businesses to think people with those inhibitions will never visit their site because
“that’s not our target audience.” But remember that a target audience is not the only audi-
ence, and disabilities are more common than most believe (remember, about 32 million in
the United States alone). Beyond designing for that significant slice of the population,
there are many reasons to consider accessibility in a corporate web project.
Keep the doors open
Imagine visiting a store where every tenth person was refused entry. Imagine that of those
that got in, some were not allowed to look at the merchandise—and of those that could,
only a certain number could understand the complex checkout process to even buy any-
thing. If brick-and-mortar stores operated like web stores, there would be a lot of mom-
and-pops out of business.
A corporate website is no different. Keeping the doors open for all visitors—even if all that
is being sold is information about the company—only helps people find what they are
looking for. There is no business value to excluding any segment of your visitors, because
a customer left in the cold will simply go find a competitor that accommodates them.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
40
8393CH03.qxd 8/2/07 12:04 PM Page 40
Stay out of the courtroom
The precedent for accessibility lawsuits has been set in the United States. Southwest
Airlines, among others, was sued in 2002 for not accommodating disabled users, but the
case was later dismissed. In early 2006, another lawsuit was filed against Target, which was
accused of violating the California Unruh Civil Rights Act, the California Disabled Persons
Act, and the Americans with Disabilities Act because of simple accessibility failures like not
providing headers in the page, failing to include
alt attributes for the images, and pro-
ducing an inaccessible imagemap-based navigation.

There are few greater headaches for corporations than lawsuits, especially ones that could
have been easily dodged. The laws governing accessibility are a bit nebulous and vary from
country to country, and we will go over them later in this chapter, but it is easy to err on
the side of caution. There is no reason Target should have been sued; by planning to build
accessibility into their markup from the beginning of the development process, they could
have avoided a snowstorm of bad press.
Optimize for search engines
Google has been often referred to as “the blind billionaire.” When search engines crawl a
website, they consume content like a blind person using a screen reader at warp 9. Only
actual text is read. The meaning of images and certain types of multimedia files can only
be disseminated if appropriate alternate content is provided, meaning
alt and title
attributes. (Search engines are getting better at indexing Flash and PDF files, but screen
reading technology continues to lag in these areas, and HTML remains the best way of
publishing content that can be read by all users.) So if you optimize your site for the visu-
ally impaired, you optimize for search engines. Sweet deal, huh?
Karma
Of course, making your business website accessible is just good karma. Even if today’s dis-
abled visitor doesn’t buy from you, they might recommend you to five of their non-
disabled friends.
Consider accessibility from the beginning
Building accessible websites is a habit. It’s a mindset that should be adopted from the first
day of planning to the last hour of quality assurance. An architect plans the wheelchair
ramps from the first building blueprints; a developer should always reference a mental
checklist of accessibility considerations from the first wireframes and comps in Photoshop.
The rest of this chapter explores two key aspects of accessibility. First, it covers the legal
requirements for corporations and web developers. This varies from country to country
and occasionally changes, but we’ll do our best to navigate those thorny paths. Second, it
covers what you can do—today—to apply unobtrusive accessibility tactics to your site
without disrupting the design or architecture. Even the smallest improvements in the

ACCESSIBILITY
41
3
8393CH03.qxd 8/2/07 12:04 PM Page 41
markup can have tremendous benefits to a significant number of users, and we’ll cover the
critical basics before establishing a roadmap for future learning.
The accessibility landscape
As accessibility becomes a front-burner topic for web designers and corporations across
the world, the rules and recommendations that drive best practices have become increas-
ingly cluttered by several factors: bureaucracy in the World Wide Web Consortium (W3C),
5
more “specialists” publishing misleading information, and the escalating punditry within
the blogosphere. There are a number of accessibility checklists you can use when building
your site, and they vary in their scope of detail and ease of implementation. Unfortunately,
the terminology and acronym use has become a bit obtuse, so it is worth disseminating
the differences and detailing which points designers, developers, and directors need to be
concerned about.
The W3C
The W3C is a large, nonprofit organization comprised of hundreds of individuals and
organizations whose purpose is to establish standards and guidelines for the Web. They are
most famous for establishing HTML, CSS, and XML, but also actively work on standards for
the PNG and Scalable Vector Graphics (SVG) graphic formats, SOAP and other web service
standards, MathML, and much more.
The WAI (Web Accessibility Initiative)
6
is the accessibility arm of the W3C. Consisting of
representatives from higher education, commercial companies, and independent volun-
teers, the WAI sets a common standard for website accessibility through the Web Content
Accessibility Guidelines (WCAG). These guidelines are the starting point for building acces-
sible websites, and for now, remain the only global standard for web accessibility. In fact,

most government accessibility laws are derivative of WCAG 1.0, which was established in
May of 1999. WCAG 2.0, first published in 2006, makes many updates to the original ver-
sion, but its doctrine will take time to filter down into government law.
WCAG 1.0
WCAG 1.0 was the cumulative effort of the web community to arrive at a few basic acces-
sibility guidelines. It is divided into three priority levels: Priority Level 1, Priority Level 2,
and Priority Level 3. These are cumulative, so satisfying Priority Level 2 will also satisfy
Level 1. In a flash of brilliant vernacular, the W3C decided to also add the term
Conformance Level as well—Conformance Level A, Conformance Level Double-A, and
Conformance Level Triple-A. Amazingly, these conformance levels map to the priority
levels, so if your site meets all the requirements of Priority Level 1, you are actually meet-
ing Conformance Level A. Sound needlessly convoluted? It is.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
42
5. www.w3.org
6. www.w3.org/WAI
8393CH03.qxd 8/2/07 12:04 PM Page 42
According to the W3C, content authors “must” cover all items in Priority Level 1; doing
otherwise would jeopardize the very ability of certain groups to even access a website.
Furthermore, developers “should” satisfy Priority Level 2, and they “may address” Priority
Level 3.
There are 14 major accessibility guidelines in WCAG 1.0. Each is divided into a bunch of
checkpoints. In an even brighter flash of brilliance, the 14 guidelines do not map elegantly
to priority/conformance levels; instead, any given checkpoint inside a guideline could
apply to any of the three levels. For instance, guideline 2 states “Don’t rely on color alone.”
Within that, checkpoint 2.1 states “Ensure that all information conveyed with color is also
available without color, for example from context or markup.” Checkpoint 2.2 then goes
on: “Ensure that foreground and background color combinations provide sufficient con-
trast when viewed by someone having color deficits or when viewed on a black and white
screen.” Checkpoint 2.1 is required for Priority Level 1 while Checkpoint 2.2 is required for

Priority Level 2 (images) and Priority Level 3 (text). If you haven’t already guessed, things
are rarely simple with the W3C.
Here are the 14 guidelines.
7
Some guidelines are more obvious than others, and the check-
points within each range from the painfully obvious to the near impossible:
1. Provide equivalent alternatives to auditory and visual content.
2. Don’t rely on color alone.
3. Use markup and style sheets and do so properly.
4. Clarify natural language usage.
5. Create tables that transform gracefully.
6. Ensure that pages featuring new technologies transform gracefully.
7. Ensure user control of time-sensitive content changes.
8. Ensure direct accessibility of embedded user interfaces.
9. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.
WCAG 2.0
WCAG 2.0 arrived in 2006 and saw both criticism and praise from developers all over the
Web. Many considered it a major step forward, while others, like accessibility consultant
Joe Clark, blasted it as a major step backward.
8
In essence, the WAI shifted away from the
ACCESSIBILITY
43
3
7. W3C, “Web Content Accessibility Guidelines 1.0” (www.w3.org/TR/WAI-WEBCONTENT/

#Guidelines).
8. Joe Clark, “To Hell with WCAG 2,” A List Apart, May 2006 (www.alistapart.com/articles/
tohellwithwcag2).
8393CH03.qxd 8/2/07 12:04 PM Page 43
technique-centric approach and rewrote the guidelines by principle. This means that
instead of a bunch of HTML code samples (the dominant technology in the late 1990s), the
theories and recommendations apply to all technologies, from SVG to Flash to Portable
Document Format (PDF). Instead of 14 general guidelines, WCAG 2.0 has been distilled
into four major pillars:
Perceivable: This ensures that content can be perceived by users with at least one
sense—usually vision or hearing.
Operable: The content must be delivered in a way that users can operate it using
standard technology.
Understandable: This one’s a bit fuzzier, but the content must be presented in a
way that’s understandable.
Robust: Interfaces and hardware for disseminating the content must be robust
enough to handle disability access.
Within those four, three levels of success criteria replace WCAG 1.0’s priority levels. In
terms of writing accessible websites, the same fundamental concepts apply to both ver-
sions of the WCAG, such as images and multimedia requiring text alternatives, form ele-
ments needing labels, and content and background having at least a five-to-one contrast
differential. On a technological and tactical level, there is little difference.
In fact, if a company has developed their website with web standards—in this context
defined by using well-formed, semantic HTML and CSS for presentation—it has already
made huge progress toward being more accessible. In the next section, we will cover some
accessibility basics and how to supplement and refine your markup to meet and exceed
current laws.
Country-specific laws
Many countries have passed their own accessibility laws. While many do not specifically
target Internet websites, they address accessibility for disabled users across all public

areas, under which the Web clearly falls. Almost all use WCAG 1.0 as the recommended
guideline. For a comprehensive list, please see the UI Access site, at
uiaccess.com; in the
meantime, here is a brief overview of some countries:
Section 508 of the Rehabilitation Act of 1998
9
is the US government’s formal acces-
sibility law and very closely mirrors WCAG 1.0. Its legality only reaches federal web-
sites and vendors working with the government.
The Disability Discrimination Act 1995 (DDA)
10
is the United Kingdom’s general
accessibility law, and covers all websites providing service to customers (for
instance, an airline’s site that allows the booking of flights). Part III of the DDA
makes it unlawful for a service provider to treat disabled people less favorably for
a reason related to their disability.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
44
9. www.section508.gov
10. www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_1.htm
8393CH03.qxd 8/2/07 12:04 PM Page 44
Canada passed the Common Look and Feel for the Internet standards,
11
which also
mirror WCAG 1.0 very closely. The country also maintains a detailed website with
recommendations, guidelines, best practices, tools, templates, and more.
Many other countries have accessibility laws, including Sweden, Ireland, and Japan, but the
WAI’s recommendations are followed so closely across the board that any site meeting the
guidelines set forth in WCAG 1.0—especially Conformance Level A—should be just fine.
Real-world accessibility

The WCAG contains many valuable strategies for opening your site’s doors as widely as
possible. But they do not always map to common, real-world scenarios. Designers and
developers often find themselves following the spirit of accessibility without adhering to
every letter of the law, because at the end of the day, common sense will dictate what is in
the best interest of your visitors.
Some Priority Level 3 requirements are as easy and useful to implement as Level 1, just as
some Level 1 requirements are nearly impossible to objectively quantify. For instance,
checkpoint 14.1, required for Level 1 compliance—“Use the clearest and simplest lan-
guage appropriate for a site’s content”—is an area where many feel the W3C itself falls
short. They might disagree, and how could you argue with them if they did? What quan-
tifiable measuring sticks do web developers have to rate content?
It’s important to dispel the myth that accessible sites must be ugly. Too many designers
equate accessibility with all-text documents without visual formatting or decorative
images. This could not be further from the truth. Ninety-nine percent of accessibility is
achieved
within the markup (the one notable exception being accommodating the visually
impaired with wise color choices), so even the most beautiful sites can welcome all visitors.
The bolt tightening and pipe cleaning that needs to be done under a corporate website’s
hood is usually quite minimal. The value that a few pieces of additional markup brings to
the table is enormous. If Target had put just a few extra hours of spit and polish into their
HTML, they might have completely avoided a costly and widely publicized lawsuit. The rest
of this chapter will explore some tactics for better real-world accessibility—changes that
will directly benefit visitors without getting hung up on explicit WCAG compliance.
Standards-based development
As mentioned earlier, the intrinsic nature of web standards contributes greatly to accessi-
bility. The term
web standards encapsulates many things, but is most known as the sum of
web development best practices: using valid HTML for structural markup, CSS for presen-
tation, and JavaScript and the DOM (Document Object Model) for enhanced functionality.
ACCESSIBILITY

45
3
11. www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp
8393CH03.qxd 8/2/07 12:04 PM Page 45
Valid HTML
“Valid” HTML is the first step toward web standards, and means two important things.
First, it means that a web page has a
DOCTYPE at the top of the code. This DOCTYPE tells the
user agent (usually a web browser, but could be a screen reading device or a mobile
phone) what kind of document it is about to disseminate. Second, valid markup means
that there are no mistakes in the HTML, such as unclosed tags or missing
alt attributes for
images. This helps ensure that browsers render pages correctly and screen readers accu-
rately translate the content.
There are several markup validators, all of which perform the same basic task: enter a URL
or upload a file, and it will reveal whether the web page is in fact valid or there are still
unresolved errors and warnings that need to be addressed. Figure 3-1 shows the validator
created by the W3C, which can be found at
validator.w3.org. XHTML validation requires
developers to avoid noisy presentational markup, and is therefore much preferred over
the overly forgiving HTML 4.01 spec, which allows “old-school” markup like
<font> tags.
Bottom line: A site that passes a validation test does not automatically equate to full acces-
sibility, but it is a great place to start. When the structure of the code is sound, user agents
will read the content as intended.
Figure 3-1. If your site passes the validation mustard, the W3C validator will return this screen.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
46
8393CH03.qxd 8/2/07 12:04 PM Page 46
Semantic markup

The advent of CSS enabled web designers to toss out muddy presentational tags like
<font> and table-driven layouts in favor of lean, semantic markup that accurately
describes the structure of a document without trying to affect the visual representation of
the information.
Web documents should use markup that intelligently describes the content—paragraphs
use
<p>, lists use <ul>, <dl>, or <ol>, and forms use <fieldset>. This allows the document
to become transient. It can be read and understood by almost any user agent, and can
have different style sheets applied without changing the actual code. (For instance, a web
designer could provide a high-contrast version for those with low vision in addition to the
default design.)
Color considerations
Because the Web is a medium that relies heavily on visual display, those with visual dis-
abilities are the ones most likely to be affected by poor, inaccessible design choices.
Accommodating the blind, color blind, or visually impaired takes a minute amount of
design compromise.
Contrast
Even in the flashiest, most image-laden websites, the majority of the content is delivered
in plain old text, from the first navigation bar, to the core content, to the copyright infor-
mation in the footer. It is critical that this content be readable. The first priority is ensuring
that there is sufficient contrast between the background color and the text.
This is a difficult thing to measure by just looking at a monitor. The human eye is subjec-
tive, and variables like monitor quality and lighting conditions are completely unpre-
dictable. There are, however, some general rules of thumb. Avoid red text—or equally
dark colors—on black backgrounds. Avoid very light grays or light blues on white back-
grounds. Avoid tonally neutral backgrounds, like medium gray, which can wash out the
contrast of any colored text.
From a technical standpoint, the magic ratio for everyday contrast is 5:1. The Web
Accessibility Tools Consortium
12

has produced a very useful tool called the Colour Contrast
Analyser, which measures two colors and reports back the contrast ratio. For instance,
dark red (#800000) text on a black background (#000000) produces a measly ratio of
1.93:1, completely inadequate for reading. Compare that to white text (#FFFFFF) on a field
of dark blue (#000080), and the ratio jumps to 15.95:1, a highly legible contrast.
ACCESSIBILITY
47
3
12. www.wat-c.org/tools/CCA/1.1
8393CH03.qxd 8/2/07 12:04 PM Page 47
Most sites have good contrast for normal viewing, but for some, good color
choices are simply not enough. Visually impaired visitors need high-contrast
versions of your site, the equivalent of large-type books. This is accomplished
with an alternate CSS file, activated through a style sheet switcher, which takes
your existing HTML and bumps the type size, eliminates frivolous material like
sidebar links, and adopts dramatic color contrast, as shown in Figure 3-2. A
zoom layout provides a comfortable reading experience for those whose visual
impairment does not tolerate normal web layouts.
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
48
Figure 3-2. 456 Berea Street, a popular web design blog, employs a very effective zoom layout for visually impaired
readers. Side navigation elements are dropped, color is reversed, and font size is bumped up for a much easier
reading environment.
Using more than color to signify information
Imagine if every color at a stoplight were the same. Now imagine if every link on a web
page were the same color as the text, without an underline, even when rolled over. In both
cases, the lack of differentiation makes for a usability nightmare. Different types of color
blindness can make certain color combinations indistinguishable; for instance, if the text is
black or green, plain red links might go completely unnoticed.
Usability and accessibility experts urge designers to keep links underlined for two critical

reasons. First, underlined text is an established visual cue for a hyperlink on the Web; sec-
ond, links without underlines—differentiated only by color—can be virtually impossible
for color blind readers to differentiate, as in the preceding example.
The recommendation goes beyond hyperlinks, however. Avoid using only color to convey
any type of critical information. An icon that only changes color (like a circle going from
red to green) will have no significance to a visually impaired user who cannot identify the
change. Contrasting icon styles are shown in Figure 3-3.
8393CH03.qxd 8/2/07 12:04 PM Page 48