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

But just as often, designers andmarketers overthink a project, and a potentially simple design devolves into a complex lay-out that actually hinders reading, when time could be better sp

While it would be easy to start this book diving headfirst into design, it would be a 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

dis-of web pages published through corporate websites, personal blogs, and social networkingdomains 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 amillion inboxes at the click of the Send button Rarely has a medium fit the platform soperfectly

After distilling all responsibilities down to a base level, the core role of a web designer orinformation architect is to build an environment that illuminates the content crafted bycopywriters and blessed by the marketing team The entirety of this book and its ideas allserve 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 featureelegant layouts and refined typography, exalting the text But just as often, designers andmarketers 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 themarketing message For better or worse, the Internet is too often a living case study of artdeco mentality: time, effort, and money spent on embellishing the perfectly functional.People visit corporate sites to get information Sometimes they are already customers andhave a question, and they hit the Support section Sometimes they’ve heard about you, butneed 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 Aboutsection 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 one else involved in the site needs to know about copy for the Web This not only includesthe unnecessary obfuscation of content and trouble words to avoid, but best practices inlayout and typography that lead to more digestible words

every-To compete, you need to be found

Worldwide business is changing every day Globalization is reaching full steam The world’seconomy is flattening, and the old economy giants of brand-name business are falteringbeneath the growing power of the long tail.1 In just over a decade, the rulebook for

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 isfound in the long trailing end of the graph

marketing economics has been tossed aside The Web has leveled the playing field, andany company can serve any customer with an Internet connection, at any time of day, andfrom any part of the world.

No longer must you buy Tide detergent A simple search for “laundry detergent” brings updozens of alternate brands eating away business from Procter & Gamble, many of themfrom 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 hiphop—thrive on the Web by catering to the customer who wants a deeper selection ofuncommon releases

The always-on, instantly searchable, globally connected Web offers a tremendous platformfor businesses small and large to compete with equal footing Millions of companies haveseen the Internet’s potential, and the medium is teeming like a jar of sea monkeys withmarketers vying for your business But this new landscape introduces a new problem Orrather, reintroduces an old problem: how to differentiate yourself and win business overyour competition

Consider a local music store called Armand’s They compete with the downtown mall shopand 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 werelocated, 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 bedeceivingly 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 MSNhave supplanted the slabs of dead trees thrown on our doorstep every six months, andtheir 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 thandirectories of names and addresses They index every word of your website, offering aricher 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 inFigure 2-1, Google can find Armand’s store by keywords (“hip hop records”) or bylocation

This abrupt exposure has forced companies to reexamine their content Marketers are nolonger able to control whose hands their brochures fall into, and by publishing on theWeb, 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 ferent set of results, but at the top of each ranking will sit the company who wrote aboutthese topics in plain, clear, concise language

dif-C O N T E N T

23

2

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 onthe Web

Too many corporate sites (and the technology sector is by far the most consistentoffender) feature marketing messages so pregnant with buzzwords, made-up phrases, andconvoluted clauses that it’s questionable whether the original writer has any clue what hewas trying to communicate

The company that speaks in everyday vernacular will simply appeal to a wider customerbase For instance, people will not type “integrated premises-based ECM solution” into asearch 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 ECMmumbo jumbo

Search is already playing a significant role in our online experience As the Web becomesmore cumbersome and competition thickens, the increasing influence of search engineswill continue to define how content is organized, parsed, and delivered In the end, plain

language will be a decisive advantage Not only because your website will appear moreoften in search rankings, but also because readers can understand your message whenthey visit your domain.

People will always recommend products and services they understand, never ones theydon’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 sensesome of the time) People will consume and pass along messages they grasp and relateto—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 understoodlose 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 significantcompetitive advantage On the Web, the axiom still applies There is simply no point isthrowing 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 behindopaque words, and is best accomplished by avoiding corporate speak and writing for yourtarget audience

Avoiding corporate speak

Imagine walking into a pastry shop, asking for a Boston cream doughnut, and getting thefollowing response from the shopkeeper: “That particular confection, with its falsely his-torical nomenclature of alternate-dessert elements and synergistic relationship with firstlight beverages, presents a best-of-breed banquet that yields sweet savor from the firstmorsel of brunette icing to the last swallow of golden cream It is also currently out ofstock, but we’ve leveraged our advanced dessert replacement solutions to replenish theinventory.”

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 corporatesites 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 hostedsolution, 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 mented into an enterprise system or interfaced as a particularized solution, our laboratorysoftware offers unparalleled functional competence.”

imple-C O N T E N T

25

2

Example 3: “Leverage the power of ever-increasing interconnected media channels byinspecting them through a marketing lens This integrative archetype affords businesses anew context proven for retooling marketers to rethink clients working in a rewiredmarket.”

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.2Traditional selling collateral rarely required such language because most sales efforts werefocused on consumers But the economic tsunami of the technology sector brought amassive influx of postmodern business-to-business marketing, and companies quicklyfound 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 atwork, 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 sciously claim authority on the topic

subcon-To make their target audience feel smarter

To use the thesaurus more oftenThe trend, thankfully, seems to be waning Many companies have scaled back the layers ofnonsensical verbiage, put their thesauruses back on the shelf, and started writing in plainlanguage again, like their forefathers in advertising taught them The more your companyexercises this, the more effective and far-reaching its marketing material will be in themarket

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 andstream to find any speck of gold their prospecting neighbor up the stream left behind Inthe 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 andpeople would almost applaud This swath of abuse sent dozens of useful but relativelyuncommon 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?):

2 Erin Kissane, “Attack of the Zombie Copy,” A List Apart, October 24, 2005(www.alistapart.com/articles/zombiecopy)

Solution: Probably the poster child for corporate-speak abuse, this once great word

now appears on an incalculable number of company websites Unfortunately, whileelegant, it has little meaning when orphaned, especially in a site’s navigation Theword 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 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-

con-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 ment, but it more likely takes advantage of that investment instead.

invest-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-worldbenefits of your company’s product

Writing with clarity also requires the immediate cease-and-desist of trying to write withpomposity People who try to write over the heads of their audience nearly always fallshort; after all, what is the benefit of confusing your readers with sentences thicker thantar 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 perfectlydecent word, or the company regards its self-worth high enough to warrant its ownsecret language There are many rather funny examples, but just keep in mind thatverbing 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 turers to government agencies Very few are valid Just for fun, try to guess whatthese stand for: SERP, ECM, XSLT, OPML

manufac-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 vor to the package—and, like a pair of hot-pink knee-high Nancy Sinatras, can

fla-quickly become distasteful We discussed best-of-breed in the preceding list; class, unprecedented, and others also appear with uncomfortable frequency.

world-C O N T E N T

27

2

Write for your audience, not your ego

Avoiding obfuscation is the first critical step in a more readable website Thinking aboutwhat 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 Avoidthis Edit copy to a common denominator by assuming your reader knows nothing Thismeans offering the full story, in clear language, so search engines index you, readers findyou, and customers refer you

Larger companies have dedicated editors for web copy These folks understand the goldenrules of brevity and clarity Unfortunately, these wise companies are the minority, so it isimportant that web designers, information architects, and others involved with the projectunderstand what makes words work well so they can collaborate with the copywriter toproduce 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 youstarted 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 withdetail, whether marketing copy, testimonials, or illustrations Failing to adequately informreaders about what the company does and its methodologies results in only one thing: lessinterest

Short paragraphs

The print medium provides designers tremendous creative freedom If they want 2-inchcolumns, text set at 8 points and the background a light gray, there’s not a darn thing thereader can do about it This flexibility in design accommodates different content styles aswell; 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 oftext 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 exceedthree sentences This fast-paced style organizes thoughts into easily digestible chunks, andhelps 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 determinewhether they’re in the right place Here are some general guidelines:

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 yourmessage It is entirely too easy to truncate a complete thought so much that it becomesmeaningless to your readers

Reading level

Most television sitcoms are written at an eighth-grade reading level to appeal to the widestaudience possible News and editorial programs might be written for a more educatedaudience, but I would bet that if you sat a class of 13-year-olds in front of the TV, theywould understand almost every word on CNN Television is written by professionals whoknow how to speak to a broad demographic in a common language It would be wise forcompanies to follow TV’s lead It’s common to assume your audience is more educatedthan 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 takeanother look at the examples of the thick corporate speak referenced earlier, and see if wecan’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 hostedsolution, 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 thecacophony 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’smany kinds of content, increasing employee efficiency and helping to meet complianceregulations The software can be installed locally in your company, or hosted through ourdatacenter.”

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 mented into an enterprise system or interfaced as a particularized solution, our laboratorysoftware offers unparalleled functional competence.”

imple-C O N T E N T

29

2

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

This final example is just bad copy The writer is trying way too hard, and the final text is aplate of syrupy mush lacking any kind of intellectual nutrition The message is there, andit’s fairly simple once all the layers of language are peeled away:

Example 3 (edited): “Using a combination of marketing media, you can reach newcustomers.”

Design considerations for content

Some web designers may think they are perfectly justified in glazing over this chapter It isafter all, about content, not design, or even traditional information architecture But thereality 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 ingly conscious of web content—what messaging works and what doesn’t, how peoplereact to typography decisions, how people scan content within a page, and so forth Everyday new research offers deeper insight into how the masses interact with content Thosetheories and best practices filter down and permeate the decisions driving how interfaces,navigation elements, body text, and more are actually designed

increas-In a traditional marketing structure, designers design and writers write Large organizationsmight even have a dedicated copywriter for the Web A medium-sized business mightretain a copywriter who handles both print and web content But in a small company, oneperson could easily comprise the entire in-house marketing team, and their job is to bothwrite 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 canwork 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

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 edly approximates typical character distribution in an average passage of English text, and

suppos-is intended to force the viewer’s eyes to focus on the design of the text without gettinghung up on the actual words

While the technique has merit—especially when testing typefaces—designing a websitewithout 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, onlythat it’s about 3 by 2 feet and has some red in it While it can be done—and maybe evendone well if the framer guesses right—the end product will not be anywhere close to itspotential without understanding the context of the art

To execute the best possible work, designers and developers need the full story, and thatmeans real content Too often, clients, marketing departments, and writers instructgraphic artists to “just ‘greek’ in the text.”3While designers might have a general idea ofwhat 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 inconsistentbrowser 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 concreteguidelines

To serif or to sans?

The question over whether to use serif or sans serif fonts in body copy is actually a fairlyinteresting debate In the web design world, it has become an accepted precept that sansserif fonts are better for condensed body copy, and in the world of print, serif fonts arebetter 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

C O N T E N T

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 ofcontent without actual text

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, wecan 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 dowith the inability of most computer screens to elegantly render the subtleties ofserif fonts

Small sans serif fonts present difficulty for readers with dyslexia

Use common typefaces

When producing Windows 95, Microsoft commissioned celebrity typographer MatthewCarter 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 withArial, the inbred cousin of Helvetica—scored high with users in almost all categories,including reading time, perceived legibility, and overall font preference.4It would be acriminal understatement to say Matthew Carter succeeded in his goals

The advantage of Verdana and Georgia is that they are available on most PC- and based computers produced since 1995 (Arial is installed on all PCs, and its nearly identicaltwin Helvetica is installed on all Macs.) This widespread adoption, along with their

Mac-4 Michael Bernard, Melissa Mills, Michelle Peterson, and Kelsey Storrer, “A Comparison of PopularOnline Fonts: Which is Best and When?” Usability News 3.2, 2001 (psychology.wichita.edu/surl/usabilitynews/3S/font.htm)

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 messyinline <font> tags and other display-related markup In addition to creating far cleanerHTML, CSS allows for advanced typographic control, such as general styling (italicizing andbolding), employing small caps and drop caps, precise sizing through different units ofmeasurement, and much more.5With 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, butthe same cannot be said for older Mac-based computers, which often rely on the similarbut subtly different Helvetica.6To 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 iscommon on the Mac, but completely absent on most PCs, except for a rare variation thatproduces a grungy, distressed version of the classic Times New Roman To avoid theappearance 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, ormonospace It is foolhardy to assume any given machine has even the most generic fontinstalled, so a contingency rule must be added Otherwise, the browser will use its ownstyle sheet (and that is almost never desirable) Testing the website on all platforms will, ofcourse, 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 lines Some prefer dark text on a light background; others like their copy reversed

guide-Whatever the case, contrast—the level of color difference between the words and theirenvironment—must be set relatively high in web design A thousand different monitorswill produce a thousand different images For a deeper discussion on the topic and a list oftools to help discern contrast ratios, see Chapter 3

C O N T E N T

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 MarkSimonson’s article “The Scourge of Arial,” at www.ms-studio.com/articles.html

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 strongerfinished 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 productmakes it to the outside world

3 ACCESSIBILITY

Architecture and web design are close cousins Both vocations require focus in creativelydesigning 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 aseasy as possible A good web designer will research how people navigate a website, wheretheir eyes travel, and what visual cues they look for to get the information they need aseasily as possible.

One person moves through a building and follows the icons for the restroom; anothernavigates a website and finds an e-mail address by clicking Contact The craft of predictinguser movement exists in both environments, and the architecture of each is designed toassist that movement But what happens when not everyone moves the same way?Problems arise when architecture—both physical and digital—limits the movement of thevisitor 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 likeconference centers and hotels, you will notice the abundance of accessibility and usabilityaccommodations 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 publicspace 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 discriminateagainst those with disabilities

The issue of accessibility on the Web is not new However, for years, the issue has been egated to small designer mailing lists Only recently have web designers and corporatemarketing teams become aware of the potential problems inaccessible websites present,and how to overcome those challenges

rel-Accessibility is not just for the blind

While the design industry is slowly becoming more educated through the evangelism ofJoe Clark1and sites like Ian Lloyd’s Accessify,2many web designers still incorrectly equate

“disabled” with “blind.” While it is true that the Web plays host to a significant number ofpeople with visual impairments, to slice the definition of disability so narrow is a disservice

to the millions of users with other handicaps

1 www.joeclark.org

2 www.accessify.com

The 2000 US Census reported that 12.3 percent of Americans have a disability—includingsensory, physical, and mental disabilities That number adds up to almost 32 millionpeople.3There are very few businesses or institutions that would willingly turn away somany 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 theirsituation 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 Peoplewho are fully blind cannot see at all out of either eye; they rely completely on specializedequipment 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 nology like screen readers, or just increase the size of the text in their browser

tech-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 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

differ-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 keyboardexclusively since it requires fewer finite movements and less reliance on hand-eye coordi-nation Many people mentally stereotype mobility-impaired people as those confined towheelchairs, but in reality, most people in wheelchairs have no trouble using the Webbecause 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 itbecomes 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

A C C E S S I B I L I T Y

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 aquadriplegic person

becomes immediately inaccessible unless it contains closed captions As web designersbegin 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 thenyour visitor must use a braille device for consuming content.

Learning disabilities

“Learning disabled” is a somewhat harder category to narrow, because it encompasses arange 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 Thecondition 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 toword choice

Epilepsy

Epilepsy is not a learning disorder or mobility impairment, but a chronic neurological dition It must be mentioned, however, because certain designs (particularly rapidly flash-ing advertisements) can trigger epileptic seizures

con-Accessibility benefits everyone

It is probably true that the majority of a corporation’s website visitors will have passablevision, no significant learning disabilities, and not suffer from epilepsy It’s even commonfor 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 ence, and disabilities are more common than most believe (remember, about 32 million inthe United States alone) Beyond designing for that significant slice of the population,there are many reasons to consider accessibility in a corporate web project

audi-Keep the doors open

Imagine visiting a store where every tenth person was refused entry Imagine that of thosethat 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 arelooking 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

Stay out of the courtroom

The precedent for accessibility lawsuits has been set in the United States SouthwestAirlines, among others, was sued in 2002 for not accommodating disabled users, but thecase was later dismissed In early 2006, another lawsuit was filed against Target, which wasaccused of violating the California Unruh Civil Rights Act, the California Disabled PersonsAct, and the Americans with Disabilities Act because of simple accessibility failures like notproviding 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 couldhave been easily dodged The laws governing accessibility are a bit nebulous and vary fromcountry to country, and we will go over them later in this chapter, but it is easy to err onthe side of caution There is no reason Target should have been sued; by planning to buildaccessibility into their markup from the beginning of the development process, they couldhave avoided a snowstorm of bad press

Optimize for search engines

Google has been often referred to as “the blind billionaire.” When search engines crawl awebsite, they consume content like a blind person using a screen reader at warp 9 Onlyactual 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 titleattributes (Search engines are getting better at indexing Flash and PDF files, but screenreading technology continues to lag in these areas, and HTML remains the best way ofpublishing 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 abled visitor doesn’t buy from you, they might recommend you to five of their non-disabled friends

dis-Consider accessibility from the beginning

Building accessible websites is a habit It’s a mindset that should be adopted from the firstday of planning to the last hour of quality assurance An architect plans the wheelchairramps from the first building blueprints; a developer should always reference a mentalchecklist 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 legalrequirements for corporations and web developers This varies from country to countryand occasionally changes, but we’ll do our best to navigate those thorny paths Second, itcovers what you can do—today—to apply unobtrusive accessibility tactics to your sitewithout disrupting the design or architecture Even the smallest improvements in the

A C C E S S I B I L I T Y

41

3

markup can have tremendous benefits to a significant number of users, and we’ll cover thecritical basics before establishing a roadmap for future learning.

The accessibility landscape

As accessibility becomes a front-burner topic for web designers and corporations acrossthe 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),5more “specialists” publishing misleading information, and the escalating punditry withinthe blogosphere There are a number of accessibility checklists you can use when buildingyour 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 disseminatingthe differences and detailing which points designers, developers, and directors need to beconcerned about

The W3C

The W3C is a large, nonprofit organization comprised of hundreds of individuals andorganizations whose purpose is to establish standards and guidelines for the Web They aremost famous for establishing HTML, CSS, and XML, but also actively work on standards forthe PNG and Scalable Vector Graphics (SVG) graphic formats, SOAP and other web servicestandards, MathML, and much more

The WAI (Web Accessibility Initiative)6is the accessibility arm of the W3C Consisting ofrepresentatives from higher education, commercial companies, and independent volun-teers, the WAI sets a common standard for website accessibility through the Web ContentAccessibility 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 inMay 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 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 satisfyLevel 1 In a flash of brilliant vernacular, the W3C decided to also add the term

acces-Conformance Level as well—acces-Conformance Level A, acces-Conformance Level Double-A, and

Conformance Level Triple-A Amazingly, these conformance levels map to the prioritylevels, 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

5 www.w3.org

6 www.w3.org/WAI