This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Credits Lead Editor Matthew Moodie Technical Reviewer Brian Warren Editorial Board Steve Anglin, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jason Gilmore, Jonathan Hassell, Chris Mills, Matthew Moodie, Jeffrey Pepper, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager Katie Stence Copy Editor Damon Larson
Assistant Production Director Kari Brooks-Copony Production Editor Laura Esterman Compositor Dina Quan Artist April Milne Proofreader Linda Seifert Indexer Julie Grady Interior and Cover Designer Kurt Krames
Manufacturing Director Tom Debolski
There are many things in life where the simplicity of the final product belies the intense process of creation. Making sausage is one, writing a book is another. Web Design and Marketing Solutions for Business Websites is the culmination of not only my time, but my family’s as well, which was largely spent wondering where I’d gone to for a year. This book was only possible with their love. My wife, who has dubbed the project “the other woman in my life,” has been supportive beyond the call of duty. My three children, who are my sun and air, have shown a patience that is beyond their young years, even when demanding their evening bottle or asking to watch Cars with them for the 912th time. I love you all, and this book—in its own technical, nerdy, plotless way—is dedicated to each one of you.
ABOUT THE AUTHOR Kevin Potts has been working on the Web for almost 11 years, having started his online journey designing his first employer’s website with Netscape and Notepad. He has spent the bulk of his design and development career working in small agencies, in-house design departments, and independently as a grizzled freelancer. His focus is usability, accessibility, and clarity. His portfolio contains work for businesses of all sizes in an array of industries, from Fortune 100 companies to sole proprietorships. His professional side is represented at www.kevinpotts.com, and his unconventional and widely read writing finds a home at www.graphicpush.com.
xviii
ABOUT THE TECHNICAL REVIEWER Brian Warren has been designing for the Web for over ten years. He is living his dream, running his own web design firm, Be Good Not Bad, in Denver, Colorado. Brian also cofounded Method Arts, a creative consortium of freelance web designers. He has a passion for improving his ninja skills, especially in the realm of CSS and HTML. Brian also enjoys photography, going on walks with his wife, and brewing his own beer. His website, which houses his blog and portfolio, is http://begoodnotbad.com.
xix
ACKNOWLEDGMENTS Special thanks go to everyone involved in this book’s creation. The entire team at friends of ED has been especially helpful and knowledgeable, with fantastic support from the project management, editing, and production teams. You guys make a writer’s life easier. All of the companies that offered their support for the book—and ultimately allowed themselves to be represented—have been especially accommodating and supportive. And finally a very special thanks to Brian Warren for reviewing the technical aspects of the manuscript, which is always best left in the hands of a trained professional.
xx
INTRODUCTION The Internet encompasses all types of websites, from social media monoliths to individual blogs, from Justin Timberlake fan sites to Fortune 500 businesses. Everyone has a voice, and the medium has become the ultimate level playing field for those seeking to interact with the world through an always-on, instantly available, nearly ubiquitous venue. Fewer benefit more than businesses. In this sense, the term business is encompassing; we’re talking about mom-and-pop stores, global giants, local nonprofits, churches, and more— anyone who seeks to create a conversation with customers, clients, patrons, members, and prospects. Web Design and Marketing Solutions for Business Websites was written to help make those websites better. Since the lifeblood of business is fostering customer relationships, it is imperative that a website serve that purpose unequivocally. From the very first contact with a prospect, to guiding them through the conversion funnel, to sustaining them with ample support material, to maintaining contact through proactive communication—all of this is designed to attract customers and keep them satisfied for the duration of the relationship with your company. This book covers the many facets of building a site that serves customers and maintains a positive marketing light on the company. First, the basics: content, accessibility, and architecture. Next, the guts of the website: the homepage, the About section, products and services, support, and the blog. After that, enhancing the website: testimonials, legal material, and strong contingency design. Finally, promoting the website: search engine optimization, customer newsletters, and advertising. A site that maintains a strong blend of all these aspects will serve the business well, and only help to complement the company’s other marketing goals.
Who this book is for This book is written for everyone involved in building a business website. Designers, copywriters, developers, information architects, and marketing experts will all find the content interesting—and even applicable in most parts. The book is about web design for businesses,
xxi
INTRODUCTION so whether you are a freelancer consulting with organizations or a member of an in-house team, this book is for you. If you are looking for hardcore code examples, in-depth explanations of deprecated tags in XHTML, or complicated CSS hacks to get Internet Explorer to work right, there are many other books in the friends of ED catalog that will serve you better. Web Design and Marketing Solutions for Business Websites is for those who want to improve the performance of their business site through better writing, stronger design, effective usability, and practical analysis—all with an eye toward serving the customer a better experience.
Layout conventions To keep this book as clear and easy to follow as possible, the following text conventions are used throughout. Important words or concepts are normally highlighted on the first appearance in bold type. Code is presented in fixed-width font. New or changed code is normally presented in bold fixed-width font. Pseudo-code and variable input are written in italic fixed-width font. Menu commands are written in the form Menu ➤ Submenu ➤ Submenu. Where I want to draw your attention to something, I’ve highlighted it like this:
Ahem, don’t say I didn’t warn you.
Sometimes code won’t fit on a single line in a book. Where this happens, I use an arrow like this: ➥. This is a very, very long section of code that should be written all ➥ on the same line without a break.
Contacting the author E-mail: [email protected] Writing: www.graphicpush.com Business website: www.kevinpotts.com
xxii
1 OVERVIEW
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES In the awkward growing stages of the Internet, many companies naively contracted designers to move their printed brochures online, expecting waves of business from an online populace that was just learning how a browser’s Back button worked. But after a year or two, when business only trickled in and few companies saw any return on investment, it was apparent that simply broadcasting a glorified business card did not convince prospects to do business with you. Since then, the web community has greatly matured. More people know how to navigate the Internet more efficiently and effectively, and they expect more for their efforts. In addition, both businesses and web developers are getting smarter about content, design, usability, and accessibility, and the advent of mass broadband and sophisticated development languages has enabled levels of interactivity simply not possible—or even imagined— in the 1990s. The Web is now a leading avenue of business, and companies that do not take the medium seriously raise serious red flags in the eyes of a savvy web surfer. Users have almost no patience for poorly designed websites. From a competitive angle, the Web levels the playing field—every business is lined up on the same street, marketing to the same customers. Companies either thrive or flounder in this flat environment. To thrive, you must deliver beyond customer expectations; better content, sharper design, smarter architecture, and more proactive communication and interaction are all components of websites that produce exceptional results for corporations.
What your website should do Traditionally, corporate websites have been offensive, built to sell. But offense is not enough. In sports, there are three facets to every successful team: offense, defense, and coaching. The most effective websites have a similar three-pronged approach: marketing to new customers (offense), supporting existing customers (defense), and providing general corporate information that supports the other two (coaching). Let’s examine these three key tiers more closely.
Marketing It is nearly impossible to find a corporate website that isn’t selling anything. All businesses—from Ted’s Towing in Wichita, Kansas, to the global mega-conglomerate General Electric—exist to make money. Even churches and nonprofits need to collect revenue in order to keep their doors open. Sometimes “selling” isn’t literal. (It would be difficult for McDonald’s to literally sell you a Big Mac and chocolate shake via an online shopping cart.) In fact, sometimes the primary marketing on the Web is accomplished through calculated brand reinforcement.
2
OVERVIEW
Selling a tangible product Businesses who can sell products via the Web should build an online shopping cart and provide customers with a means of ordering merchandise. Businesses that manufacture products, but can’t logistically distribute them through the Web (like our McDonald’s example, or Caterpillar, maker of industrial construction equipment), still need to provide a comprehensive outline of their offerings as well as information on where (and how) to buy it.
1
Starbucks offers an effective hybrid model. Both the company’s physical stores and its online store sell bags of coffee and merchandise, though its branches generate additional revenue selling freshly brewed beverages. While Starbucks would have a difficult time shipping a double tall nonfat latte to your house, it does offer a comprehensive menu of available coffees on its website (www.starbucks.com), as shown in Figure 1-1, along with nutritional information. This is smart offensive design.
Figure 1-1. Starbucks not only allows users to purchase its coffee and merchandise online, but also provides a comprehensive list of coffees available at branch locations.
Promoting services The world’s economy is becoming host to an increasing number of service providers. These companies don’t actually sell a physical product, but rather their knowledge, expertise, and opinions. A technology analyst and consulting company like Gartner is the purest form of this business model—Gartner meets and talks with companies, makes recommendations on technology purchases, and then charges for its time doing so. Some companies offer physical products and knowledge services. IBM, for instance, sells laptops and servers, but it also makes a considerable amount from its network of consultants.
3
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
The whole branding thing A lot has been written about branding on the Web, and how companies can take advantage of the medium to push their corporate presence further into the marketplace. Unfortunately, so many factors of branding are intangible qualities—how something feels—that the move from traditional media like print advertising is not always a smooth conversion. That being said, the Web presents an entirely new set of tools to sell a company’s brand story to their audience. Design and copy are as important as they have always been, and so is the flavor—or overall thematic feeling—of the presentation, like “professional,” “customer-centric,” “fun,” “engaging,” “family-oriented,” and so forth. Internet technology allows a deeper immersion into the story through interactive conversations. A few companies—especially in the commercial sector—build complex viral sites to help reinforce their brand.1 Some agonize over the graphical nuances of a button to ensure it matches the company’s established visual motif. Others reinvent their marketing language to appeal to a more global audience. The ageless problem of brand marketing is the difficulty in quantifying return on investment. Most smart companies know they have to invest in their brand development, and constantly tweak messaging to do so, but never fully understand exactly how that investment is being rewarded. On the living Web—where content grows exponentially, new technology is rolled out every few months, and trends come and go faster than reality shows on MTV—building a brand can be a daunting task for any corporation. It takes time, money, and brio. (It may also take nagging the director of marketing to get the green light.)
Home as advertisement To build market awareness, a company traditionally purchased advertising space in magazines, on billboards, and in other printed media that they hoped would be seen by their target audience; radio ads that might be heard by the right people; and television spots that might be seen by their future customers. Unless your business is an ice cream stand or boutique clothing store, you can count on few people actually driving by to purchase anything without having seen an advertisement first. On the Web, the rules have changed. The funnel is flipped. The “headquarters” have become the single most efficient place to advertise. Instead of a physical building trying to cast a wide net of advertising to procure new business, corporations can purchase laserprecise media or write link-worthy content that lures potential customers back to the website, where carefully designed pages make the final sale through a shopping cart or push them into making contact with the company. Few companies have truly embraced the marketing potential of new media. Too many websites are built as static, uninviting brochures that fail to engage the customer; like a corporate office park, the veneer turns people away instead of inviting them to learn more about the institutions. A good website, by contrast, invites prospects in to learn more, poke around, and talk to a salesperson. 1.
4
Burger King, for instance, has several viral sites. www.subservientchicken.com is probably the most famous because it was pioneering in both its content and its subtle brand treatment.
OVERVIEW
Support Once a company has its first customer, the need for customer support becomes immediate and unavoidable. Different businesses will see their customer support manifest in different ways. Software companies need to provide a host of support options, while a manufacturer of cement mix might only need a frequently asked questions (FAQ) page and a phone number to call with questions. Whatever the case, a corporate website should provide patrons with as many tools as possible to get the answer they need without jumping through hoops, and if possible, without calling the company.
1
Providing extended information No matter how simple your business model, product or patented process, someone out there will need a better explanation than your homepage provides. The FAQ page is a great place to start. The FAQ can also straddle the marketing sphere; while it addresses questions, the answers could have a marketing spin. Beyond the high-level FAQ, a company needs to provide in-depth documentation on its products or services. A software company should provide manuals, security updates, and bug fixes on its website; a restaurant should post its menu (and nutritional information if possible); a company that manufactures wood polish should provide information on how to best apply the chemicals. In other words, your company must discuss the practical use of its products or services.
The community The community is a public forum or similar environment in which customers of the company can interact with one another and representatives of the host corporation. The goal is for users to ask questions knowing they are in the right place, asking the right people. Sometimes the community is simply a message board; sometimes it’s a rich suite of services. The goal of the community is threefold. First, it relieves a business from having to predict and answer every single question on their own support section. Second, it alleviates stress on the support team when users can simply ask each other instead of submitting support tickets. Third, when people discover others using the same product or service, their purchase becomes immediately validated, and a network of more confident patrons is born. A strong community not only becomes a powerful first line of defense in helping answer customer questions, but a self-sustaining internal marketing vehicle as well. Opera Software makes the Opera browser, an alternative to Internet Explorer. The user base is relatively small (an estimated 1 percent of web users), but extremely enthusiastic. Sensing this zealotry, Opera built a rich community portal that has user-authored blogs, downloads for customizing the software, an active forum, and even photo galleries.2 The site boasts over half a million members (see Figure 1-2).
2.
http://my.opera.com/community
5
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
Figure 1-2. Opera Software provides a rich community portal for its fan base.
Customer love As the old cliché goes, “the best defense is a good offense.” That’s partly true. In the realm of customer support, the best defense is a proactive one. Constantly reaching out to your existing client base and showing your appreciation can have tremendous payoff in both the immediate future and down the road. A well-timed e-mail might retain a customer who was about to leave. That same person, with continued customer care, might personally recommend you down the road. One of the best ways to earn customer appreciation is to make them feel rewarded for being your customer. This can be done through incentives—offering them special discounts, customer appreciation rewards, and so forth—or through special members-only benefits. A customer appreciation newsletter doesn’t just keep them in the loop of the latest company developments, but also contains exclusive offers. In customer support, the balance between budget and service capability constantly teeters on a fine line. Staffing call centers costs money. A good support section of a website can save money and customers—by offering as much information as possible up front, the likelihood of customers calling with a question easily answered on the website site is greatly reduced.
6
OVERVIEW
Corporate information Finally, there are areas of the corporate site that do not directly sell or support products and services. While they might help promote the company in peripheral ways, company information is fairly neutral when it comes to customer relations. A well-written blog post might bring ambient search engine traffic and a well-organized About Us section might help candidates find and apply for open positions, but there is little marketing material and even less customer support.
1
News and press releases The concept of press releases goes back to 1906, when an agency working for the Pennsylvania Railroad issued a statement to the press about a train accident before the press had any time to write their own story. Since then, press releases have been used to officially inform media of significant, newsworthy events. Sometimes it’s centered on the company itself—like the grand opening of a new office—and sometimes it’s tied to the company’s offerings, like the launch of a new product or the acquisition of a key competitor. While the role of press releases has not changed much with the Internet, the means of delivery has. Companies can now archive news on their own website, building a public library of documents that researchers and investors can use for research. In addition, press releases are now distributed to both online and offline media. Besides submitting to the regular avenues, a PR department can cast their net wider with a host of (mostly free) press release websites.
Contact information It is critical for any company to provide sufficient contact information. This includes the following: Physical mailing address, even if it’s a PO box All public phone numbers—main line, support, sales, and so on A contact form for fielding online inquiries. This is preferred over a plain e-mail address, although those can be important as well Additional contact information for key personnel or departments, such as company principals, account executives, the public relations department, and so forth A company without clear contact information is difficult to trust. If a business provides only a simple contact form and no phone number or address, visitors might assume they are obfuscating for a reason, and that is never a good way to start a dialog with potential customers.
The corporate blog For better or worse, the advent of blogs has penetrated corporate websites, and many companies now publish blogs about their company, industry, and competitors. This informal writing style—which can be candid, irreverent, and reactionary—has supporters and detractors arguing both sides of the issue.
7
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES It’s easy to see the cons of corporate blogging, or at least predict them. Without an editor, or at least a filter, any employee could regularly lambaste the competition down the street. Unlike controlled writing avenues like press releases, brochures, and speeches, the immediate nature of blogs presents a minefield of legal and professional issues. Despite this, some companies like Microsoft do not use any editorial staff or controlled publishing medium for their employee blogs. But the pros are equally easy to see. If the right person or team authors the blog, and the writing is interesting and topical, all types of new traffic will be generated—not only from search engines, but from readers passing along a blog post to their coworkers and friends. It is an also a powerful means to demonstrate the company’s expertise and passion for their industry.
Redesigning your site While there are many people reading this book interested in building a new company’s website, chances are there are just as many people looking to improve an old one. Redesigning can be a major undertaking. Depending on the magnitude, it can be as challenging as a brand new design. But listing the reasons for the revamp and the goals the site will accomplish, and then selling the whole idea to your management team, can help make your site better than ever. It can be assumed that any business that wishes to compete in the globalized world market has a website. The medium has been mature for over a decade. College dorm startups, old-world companies (think Ford or Coca-Cola), small businesses, and worldwide megacorporations have all benefited from and praised the return on investment that a strong Internet presence brings.
Redesign justification At this point, and probably for the foreseeable future, online initiatives are a given in any corporate marketing plan. A startup might use this book to help build its first website. However, almost any in-house creative department or web design agency will employ this book as a guide for a website redesign. Changing a website can happen for any number of reasons: The marketing director is still not satisfied with the overhaul from just two months ago and wants to see new ideas (again). The current website, built on static HTML, has grown beyond its original scope and now needs a content management system to handle the virtual library of content. Government or advocacy groups have insisted that the business meet compliance and accessibility standards. The company’s lead web designer has learned new techniques that will greatly benefit visitors and the site’s content managers (such as upgrading to a CSS-based layout, adding some nonintrusive JavaScript enhancements, or expanding functionality on the back-end to meet customer demand). Changing the visual brand is a part of your annual marketing plan.
8
OVERVIEW Whatever the case, it is critical to ensure that the planned redesign addresses the current website’s shortcomings. These could come in many forms.
Internal pressure
1
Internal pressure is probably the most common driver of website redesigns. In a company of any substantial size, there is a network of people who influence the web presence, from the CEO and director of marketing at the top, down to the creative director, productionlevel web designers, and content creators. All of them have good ideas, and all of them want to be heard. Within that collective of influencers, the business probably has one key figure that pulls the trigger on any major website decisions, and they spend a good part of their tenure bracing against a constant gale of suggestions. It’s inevitable that one of these suggestions will be the catalyst for a redesign. Many changes will be visually driven. One of the penalties of operating in a globalized economy is the pressure to constantly cycle through creative ideas, to stay fresh with branding and reinvent the look and feel of your business in order to remain relevant. Sometimes these changes are subtle (maybe a new tagline or an expanded media initiative), and sometimes the changes are huge (massive branding campaigns, a logo redesign, or a new set of core messages). It’s the designer’s job to make sure those changes are reflected in the corporate website. New products or services can also be the genesis for redesigning the website. This is especially relevant to smaller businesses, although larger companies have been known to upheave their web presence in order to back a new product.
Shiny new technology There is a certain level of nerdiness all web designers possess. In order to succeed in the industry, it is their responsibility to have their finger on the pulse of the development world, and to forecast the influence of new technologies before they render their current techniques obsolete. No web designer wants their director of marketing (whose job has nothing to do with following web development technology trends) asking about a technology they’ve never heard of. One of the true thrills of building websites is digging deep into the vast toolbox of technologies and techniques. Since the Web as a medium is constantly refreshing, old tools are being refined and new toys regularly land in the laps of savvy developers: New CSS techniques Search engine optimization tips JavaScript widgets and frameworks Upgrades to Flash Usability studies Accessibility techniques Server-side languages Updates to content management systems Groundbreaking books on web design, like this one
9
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Sometimes the arrival of a significant new technology can single-handedly drive a redesign. When CSS-based design went mainstream in the early 2000s, thousands of designers immediately saw the benefit of removing presentational markup, and overhauled website code bases to take advantage of this blossoming technology. Similarly, every new version of Flash upgrades the end-user’s experience, from increased usability and accessibility to ever more complex interactive environments.
The branding mind-meld The increasing number of high-profile mergers and acquisitions is another piece of globalization fallout. The world market is becoming smaller as major competitors devour one another like sharks in a fishing pond. If nothing else, the constant business activity keeps web designers in business as companies constantly find themselves needing to rebuild or reinvent their websites in order to accommodate the influx of technology and branding clout. This is a very situational redesign. When a company swallows another one whole, like Oracle did with PeopleSoft in December of 2005, little can be done to stop the identity from being assimilated. However, in the case of Sprint and Nextel, the merger blended the two identities to create a unified public face and eventually a whole new website highlighting the dual offerings under one domain, as shown in Figure 1-3.
Figure 1-3. When Sprint and Nextel merged, the web design and development team brought the two unique identities under one domain. The screenshot on the left shows Sprint before the merger.
Planning the redesign Redesigning a site can be just as stressful, time-consuming, and rewarding as building a site from scratch. Even small changes need ample preparation time to ensure that every piece is covered, and reconfiguring a site’s architecture can require hours in front of flowcharts, wireframes, and mind-mapping software. While it is advantageous to have a starting point with the old site, noting where the original design and messaging fell short, this is countered by the vastly higher expectations of interested parties. After all, if a corporation’s management team is going to invest money in the project, they are going to want a substantial return for their efforts.
10
OVERVIEW To that end, it is critical to craft a detailed list of objectives that the redesign will address. Most (if not all) of the objectives need to be quantitative, not qualitative; the better the results can be measured with hard evidence, the more successful the design will be. For instance, it is easy to promise that the redesign will “look better,” because that is a purely subjective gauge no one can logically refute. However, if the objective is to be WCAG 1.0 Priority Level 1 compliant, or rank in the top ten results for a particular keyword string, or halve the time required for a copy editor to add text through the CMS, then the final product can be compared against these tangible measuring sticks.
1
Some goals are fundamental to the redesign, while others provide only peripheral benefits. In drafting a list of targets, rank them by importance.
Primary objectives Primary objectives are the big targets, the mountains in the path of the river. These are the core driving factors of the redesign, and as stated previously, should be clearly and objectively measurable. You may very well have only one primary goal, such as making your site Section 508 compliant because you do business with the United States government. On the other hand, you may want to accomplish several core objectives in the redesign. Consider the following wish list for a fictional redesign:
1. Make the website standards compliant by using semantic markup and CSS-based design. Construct the site with valid XHTML.
2. Reduce the average page weight by half to decrease load time. 3. Make the website more accessible by complying with WCAG 1.0 Priority Level 1 guidelines.
4. Add the new company logo and implement the revised style guide for corporate colors.
5. Create consistency in the site’s navigation by replacing the current disparate menus with a collective drop-down menu.
6. Halve the number of steps in the shopping cart checkout process. 7. Use Ajax widgets to improve the interactivity of the shopping cart process. 8. Add a corporate blog written by the CEO. While these are all good objectives, tagging each one as a critical, red-alert, priority-one intention simply dilutes the resources for the core, must-meet goals. Budget, time, and technology constraints might force a team of designers and developers to distill the list down to only two or three. These few top-level goals are unique to every situation, and only the web developer and his marketing team would be able to accurately rank the preceding list. For instance, it may be critical to get more customers to finish the sales process, so the sixth item might be most important. In addition, the first objective directly contributes to the second, third, and potentially fourth and fifth, so that would also be the primary objective. After consideration, our primary goals might look like this:
11
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 1. Make the website standards compliant by using semantic markup and CSS-based design. Construct the site with valid XHTML.
2. Halve the number of steps in the shopping cart checkout process.
Secondary objectives When it comes to a corporate website, there are many vested interests, and one person’s top priority is another person’s afterthought. Web developers often find themselves mediators between divided parties. Take advantage of your secondary objectives list to appease disgruntled marketing folk, because these objectives should receive attention during the redesign process, and are likely to be implemented. Looking at our preceding list, and after huddling with different team members, we might identify secondary objectives as the following:
1. Reduce the average page weight by half to decrease load time. 2. Make the website more accessible by complying with WCAG 1.0 Priority Level 1 guidelines. By making the site standards compliant from the outset, reducing the page weight will be a given and you’ll already be halfway done with accessibility efforts, since standards compliance and accessibility overlap in quite a few areas.
3. Create consistency in the site’s navigation by replacing the current disparate menus with a collective drop-down menu. The director of marketing, for example, not being tech-savvy, may have a hard time finding his way around the site and will want to see a much improved navigation. A lead designer and information architect will also see considerable room for improvement and mark this as a very important secondary objective.
4. Add a corporate blog written by the CEO. This is something the marketing team has been buzzing about for a while, and the redesign is the perfect opportunity to launch this new section.
Tertiary objectives The third level of priority could also be called the “nice to have” category, or maybe the “why not, we’re already 90 percent there” category, or even the “hey wait, look what else we get for free” category. In other words, it’s the stuff that is not mission critical, or even all that important, but will make the site better if there’s time to work it in. From the preceding list, and taking suggestions from other team members, a list of tertiary or peripheral benefits might look like this:
1. Add the new company logo and implement the revised style guide for corporate colors.
2. Construct the site with valid XHTML 1.0 Strict. 3. Use Ajax widgets to improve the interactivity of the shopping cart process.
12
OVERVIEW Since the redesign is probably happening regardless, it’s a good time to work in the company colors to the CSS file and be done with it. Similarly, having code validate to XHTML 1.0 Strict might come with making the website standards compliant, but it’s certainly not a requirement. And as for the Ajax, that falls clearly into the “if time permits” category.
1
Selling the redesign After defining the redesign’s needs and objectives, it’s time to sell the idea to the people who make the decisions—management. If you’re working in-house, it might be your boss, or your boss’s boss, or even that really important guy on the 33rd floor. If freelancing or working in an agency, you’re targeting the same people, but your job is made all that much harder by not working inside the company. In smaller companies, selling a redesign might come easily if the site doesn’t have much traffic yet, the company is still trying to define its overall market position, and the lack of managerial layers facilitates a more communicative environment. In larger companies, a redesign proposition might be daunting for an outside agency. Bureaucratic red tape is notorious for stifling change. Any major marketing decisions—even if you can prove they will clearly benefit the company—have to be addressed formally and thoughtfully. In other words, politics often come into play. The better your proposal, the better chance it has for approval. Please note that “better” does not mean “longer.” In fact, getting a proposal read and checked off requires brevity, accuracy, and conviction, but in order to do that, you need to acquire several things.
The research First and foremost, digging in and researching the industry and technology will provide a strong background going forward. Answer the fundamental questions. What is the state of the browser market and standards compliance? What skill sets need to be acquired to complete the redesign?
The cold hard facts What will be the tangible, measurable benefits of the redesign? These are the primary, secondary, and tertiary goals just discussed—the quantifiable benefits to the company’s bottom line, spelled out in numbers and ranked by importance. These need to be prominent and explained in plain language. Any type of inner-circle nomenclature, buzzword-laden prose, or technobabble will make as much headway with a management team as a pillow through concrete. Simple words, clear messages.
The timeline Define the length of the redesign process, from start to finish. It’s important to spell this out in as much detail as possible, taking into account the team’s current workload, learning curves for new technology, testing phases, and whatever else is pertinent. There are two key rules in laying out the project timeline:
13
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Indicate major landmarks for the process: Don’t package the redesign as one lump project; break the timeline into manageable chunks approvers can understand and measure against. Make sure each milestone can be proven with a tangible product, like a wireframe, a functional comp, or a fully operational beta. Be honest about the time: Never over-promise and under-deliver; if the project will take six to eight weeks, tell the decision-makers it will take ten, and then surprise them by delivering after only seven.
The cost The preceding page of advice can be largely ignored, since this is the page every person is going to flip to right away without reading anything else. For that reason, it needs to be meticulous, articulate, convincing, and above all, deliverable. The cost can be measured and broken down several ways: First, and most easily quantifiable, is the outlay of cash. Does the upgrade require a new server, software upgrade, or more bandwidth? These hard costs should be itemized, grouped by relevance, and totaled. Second, and harder to predict, are the miscellaneous costs that might arise during the process. Will there be travel costs, or will freelance help be needed to make a deadline? Build a cushion of cash into the budget to plan for the unexpected. Third, and most difficult to gauge, is the time cost. This includes not only the number of man-hours on the project, but also downtime, meetings, other pressing projects that can inconveniently come up, and more. An agency has a definitive hourly rate to work from. For an in-house group, the cost of time can be difficult to translate to stable numbers; if in doubt, simply offer a total number of hours with a quick translation to larger metrics like days, weeks, or months.
Website platforms There are numerous platforms on which to develop a corporate website—some are turnkey (meaning that everything works right out of the box), and others are customizable solutions ranging from small, free, and open source to large, expensive, and proprietary. Some websites are built entirely in Flash, others in static HTML, and others in closed platforms like Lotus Notes and Domino.
HTML vs. Flash Flash has grown from crude animation software to a mature application development environment. Many design agencies specialize in Flash websites, and their creations are often rich interactive experiences built to wow the audience. While it is possible to build a corporate website entirely in Flash, there are several key disadvantages to the platform:
14
OVERVIEW Slow loading time: Flash sites can take minutes to download before the visitor even reaches content. Despite the courtesy of status bars showing the remaining load time, it is still aggravating to wait for content that should be instant. A great deal of the frustration in this point stems from the fact that business sites are almost always architected with content as the focal point. When a person has to wait for a Flash interface to load, they are being withheld the real meat of the website because some designer placed their interests—a glamorous but painstakingly slow design— ahead of the interests of the general audience. This is the definition of bad usability.
1
Inaccessibility: Although Adobe promotes the accessibility features of recent Flash versions, the fact remains that the tools are weak, and few developers even use them. If a blind or motor-impaired user ever visited a company’s Flash-based website, there’s a good chance they would be completely unable to discern the content. See Figure 1-4 as an example of a Flash website that has no meaningful content inside the code. Search engine hindrances: Because Flash obfuscates text inside SWF files, search engines have no means of reading and indexing the content, because they rely on HTML text to not only see the actual words, but also how those words are organized into a meaningful structure, like headers, paragraphs, and links. Usability issues: Besides the load-time and accessibility hindrances, Flash introduces other usability concerns, such as breaking the browser’s Back button and the inability to bookmark individual pages.
Figure 1-4. While Flash websites like this one designed by Geary Interactive can often bring the wow factor to visitors, they present numerous usability and accessibility challenges.
15
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES For these reasons and more, traditional HTML is usually the best route when it comes to corporate information websites. The markup language is fundamentally designed to handle text, and browsers are by nature built to quickly and accurately display HTML pages. This allows the greatest number of users to access your information with the fewest possible hindrances.
Content management systems The goal of a content management system (CMS) is to control a site’s content—text, pictures, links, ads, videos, and more—in one single application. The software runs on the server, is tied to a database, and is written with a server-side language like PHP, ASP.NET, Ruby on Rails, or Python. Once a user logs in, they can easily add, update, and delete content, as well as control the templates that drive the presentation of the site. There are literally hundreds of CMSs—many of them free and open source—so it is impossible to detail them all, but here are a few mainstream examples.
WordPress A blog is a basic example of a CMS: the author logs in, writes a post, and clicks “publish.” WordPress embodies that simplicity, but in doing so, pigeonholes itself as blogging software without much potential as a true CMS that the rest of the nonblogging company can use.3 However, it is free, has a shallow learning curve, and boasts an impressive library of plug-ins.
Textpattern Once known as a blogging platform, Textpattern has expanded into a true CMS designed to manage all aspects of a corporate website.4 Administrators can control contributing authors’ permission levels, and the extensible templating system allows for a range of architectural possibilities. Nontechnical authors also praise its elegant and easy-to-use back-end system (shown in Figure 1-5). Like WordPress, Textpattern is free and boasts a dedicated community.
Drupal Drupal is another free CMS, but it offers a very deep set of functionality far beyond the scope of WordPress or Textpattern.5 It was designed from the get-go to be enterpriseready, and it offers a considerable range of modules, including simple blogging, integrated forums, user registration, statistics packages, and more. It is free, but demands a much higher learning curve.
Figure 1-5. Textpattern offers a clean and easy-to-use interface. Administrators can limit content permissions for different user levels.
ExpressionEngine For businesses looking for a solid, all-in-one package, ExpressionEngine is designed to be a CMS first and foremost, which means both designers and developers will be able to absorb its mild learning curve without much trouble.6 The system comes in both free and commercial licenses. One of the benefits of a commercial license is paid, dedicated support— something that is very important to many companies.
Vignette In contrast to the free and open source systems, Vignette is a very expensive, proprietary system that is deployed on enterprise-class databases (usually Oracle) and requires a dedicated support staff.7 While it is true overkill for 99.999 percent of all sites on the Web, it does power some very high-traffic domains like Wired, Motorola, and Ogilvy & Mather.
6. 7.
www.expressionengine.com www.vignette.com
17
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
Hosting considerations No matter how the corporate website is built, the company will need to procure hosting services. Some companies have their own data centers, which might or might not include a web server. For small companies, hosting is best acquired through a third party. The cost of offsite website hosting has become a deal almost too good to be true; for a paltry monthly fee, any company can get gigs of space and bandwidth they’ll probably never use. When choosing a host, consider several metrics: First, make sure the host is compatible with your publishing platform. If the sites are constructed with static HTML or authored in Flash, this is not a concern, but any CMS will have a minimum set of requirements the host needs to meet. An ASP.NET application will need a Windows server, while the PHP-based WordPress and Textpattern installations work best on Apache with MySQL databases. Get the most bang for your buck. Compare prices and features, and absolutely do not accept any advertisements on your site placed there by the host. Go with a respected name in hosting. Media Temple, Rackspace, Go Daddy, and DreamHost have all been in the game a long time, possess large customer bases, and boast good support. Too many small hosts have unreliable uptime and questionable customer service.
Summary Your corporate website is a complex beast, subject to the whims of management, marketing, your own design tastes, and customer feedback. When building or redesigning your site, it is critical to keep the company’s primary objectives in the forefront of design activity, and let the form follow the function. It is also critical to consider the best development platforms, from choosing the right CMS to getting the best deal in hosting. These decisions set the tone for the rest of the site’s construction, and many future headaches can be avoided with some smart planning.
18
2 CONTENT
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES While it would be easy to start this book diving headfirst into design, it would be a disservice to the first cornerstone of the Internet: the written word. Text is the Web’s foundational 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, language 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 layout 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 consume 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 everyone 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
1.
22
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.
CONTENT 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.
2
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 competitor 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 different set of results, but at the top of each ranking will sit the company who wrote about these topics in plain, clear, concise language.
23
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
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
24
CONTENT 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 songwriter 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.
2
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 historical 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 examples 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 organizational efficiency, and concentrate on governance and compliance through the direct management and explicit control of content.” Example 2: “A person-centric architecture is at the core of our products. Whether implemented into an enterprise system or interfaced as a particularized solution, our laboratory software offers unparalleled functional competence.”
25
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 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 subconsciously 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?):
2.
26
Erin Kissane, “Attack of the Zombie Copy,” A List Apart, October 24, 2005 (www.alistapart.com/articles/zombiecopy).
CONTENT 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 connote 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 unintended 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.
2
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 thesaurus 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 investment, 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 toolbox 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 manufacturers 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 flavor 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; worldclass, unprecedented, and others also appear with uncomfortable frequency.
27
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
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 further. 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 information retention to plummet. Because of this unpredictability, the best web content is written 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:
28
CONTENT 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.
2
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 organizational efficiency, and concentrate on governance and compliance through the direct management 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, simplified 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 implemented into an enterprise system or interfaced as a particularized solution, our laboratory software offers unparalleled functional competence.”
29
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 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 possible 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 increasingly 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, understanding the text can only help them appreciate the company’s needs, which will ultimately result in a stronger design.
30
CONTENT
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 supposedly 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.
2
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 master 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 unpredictable 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 conclusively either way, but you can see an example of the difference in Figure 2-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.
31
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
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 subjection 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 Macbased 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
4.
32
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).
CONTENT 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 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 definitions that accommodate different platforms.
2
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 platforms, 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 guidelines. 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. 5.
6.
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. 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.
33
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
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 content, 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 content is presented, and must work with copywriters to ensure that the best possible product makes it to the outside world.
34
3 ACCESSIBILITY
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Architecture and web design are close cousins. Both vocations require focus in creatively designing tangible experiences and environments that facilitate movement. A good architect 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 supplement stairs for those with wheelchairs or children’s strollers. In many seminars, sign language 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 relegated 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 Clark1 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.
1. 2.
38
www.joeclark.org www.accessify.com
ACCESSIBILITY 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 impairment, from visual impairment to learning disabilities. Following are some common handicaps many everyday web users have to contend with.
3 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 technology 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 difference between red and green hues, blue-yellow (much rarer) makes it difficult to discriminate 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 coordination. 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 auditory triggers are the only source of direction or content. Also, any type of video content 3. 4.
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. 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.
39
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES becomes immediately inaccessible unless it contains closed captions. As web designers begin taking advantage of increasing bandwidth to deliver high-impact interactive presentations, 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 person’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 condition. It must be mentioned, however, because certain designs (particularly rapidly flashing 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 audience, 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 anything. If brick-and-mortar stores operated like web stores, there would be a lot of momand-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.
40
ACCESSIBILITY
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 producing an inaccessible imagemap-based navigation.
3
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 visually 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 disabled visitor doesn’t buy from you, they might recommend you to five of their nondisabled 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
41
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 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 increasingly 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 volunteers, the WAI sets a common standard for website accessibility through the Web Content Accessibility Guidelines (WCAG). These guidelines are the starting point for building accessible 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 version, 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 accessibility 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 meeting Conformance Level A. Sound needlessly convoluted? It is.
5. 6.
42
www.w3.org www.w3.org/WAI
ACCESSIBILITY 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 contrast 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.
3
Here are the 14 guidelines.7 Some guidelines are more obvious than others, and the checkpoints 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
7. 8.
W3C, “Web Content Accessibility Guidelines 1.0” (www.w3.org/TR/WAI-WEBCONTENT/ #Guidelines). Joe Clark, “To Hell with WCAG 2,” A List Apart, May 2006 (www.alistapart.com/articles/ tohellwithwcag2).
43
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 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 versions of the WCAG, such as images and multimedia requiring text alternatives, form elements 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 19989 is the US government’s formal accessibility law and very closely mirrors WCAG 1.0. Its legality only reaches federal websites 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.
ACCESSIBILITY 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.
3
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 language 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 quantifiable 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 accessibility. 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 presentation, and JavaScript and the DOM (Document Object Model) for enhanced functionality.
11. www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp
45
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
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 accurately 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 tags. Bottom line: A site that passes a validation test does not automatically equate to full accessibility, 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.
46
ACCESSIBILITY
Semantic markup The advent of CSS enabled web designers to toss out muddy presentational tags like 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
, lists use
, , or , and forms use . 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.)
3
Color considerations Because the Web is a medium that relies heavily on visual display, those with visual disabilities 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 information 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 subjective, and variables like monitor quality and lighting conditions are completely unpredictable. 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 backgrounds. 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 Consortium12 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.
12. www.wat-c.org/tools/CCA/1.1
47
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
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.
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; second, 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.
48
ACCESSIBILITY
3
Figure 3-3. In this fictional e-commerce book site, the design on the left uses icons whose designs are indistinguishable to those with certain types of color blindness. By contrast, the design on the right uses icons that express their meaning through both color and imagery, leaving no doubt to their meaning.
Supplemental navigation Traditional navigation menus can sometimes be unsuitable for those with disabilities. While designers and developers should strive to use simple, semantic HTML markup for drafting a site’s navigation, some sites still rely on Flash, server-side imagemaps, and other inaccessible mediums for menu systems. Despite this, there are ways to make life easier for those with mobility impairment or screen reading devices.
Navigation aids Navigation aids are additional, global links that appear in the metadata section of a web page using the tag. Their purpose is to offer top-level navigation before a user digs too deep into a page’s content. Some common links include Home, Contents, Next, Forward, Help, Last, Copyright, Search, and Author. While there are no written rules, including Home, Contents, Search, and Author should be a standard minimum since they are applicable to the entire site and provide users immediate access to important pages. These should appear on every single page for consistency. (Note that all title and href attributes are examples; use whatever works best for your site.) Home should go to the corporate website’s homepage:
Contents should go to your site map or equivalent list of links:
49
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Search should go to a dedicated page to search your company’s site:
Author is just an e-mail address. This helps users avoid searching for a contact form that
they may or may not be able to use: If the website has linear content that flows from one page to the next, it is highly recommended to include the relative navigation aids First, Previous, Next, and Last. This is good practice for blogs or press release pages where entries appear in a chronological order, or where a corporate document (like an annual report) is broken into sections. The markup is very similar to that just shown. First goes to the first entry, first chapter, or whatever is the leading page of content for the site or section:
Prev goes to the page prior to the one currently being viewed:
Next goes to the page after the one currently being viewed:
Last goes to the very last page in the series. This could be an appendix, a summary, or just the last entry:
Like all metadata, navigation aids are invisible to the average browser. However, they offer a greatly simplified navigation experience for users on certain software; a screen reader will read these links first, before the content, and a text-only browser like Lynx will display them before any other content. Certain browsers can also present these links as an additional toolbar appended to the normal browsing window. In Opera, click View ➤ Toolbars ➤ Navigation Bar to enable the navigation aids at the top of the screen. In Mozilla, click View ➤ Show/Hide ➤ Site Navigation Bar. This functionality is not native to Firefox, but can be used after installing either the Link Toolbar or the Site Navigation Bar extensions.13
13. The Link Toolbar extension is available at http://cdn.mozdev.org/linkToolbar, and the Site Navigation Bar extension is available at http://addons.mozilla.org/en-US/firefox/ addon/1949.
50
ACCESSIBILITY
Invisible navigation Whereas navigation aids provide a persistent global navigation system that people can employ to skip around the site, it is also beneficial to provide document-relevant navigation to help users more swiftly move about a web page. These links should appear at the top of the HTML, below the primary header but before the main navigation. Here’s an example: ... Accessibility is Awesome
Skip navigation ➥ and go to content
Go to ➥ search
Go to ➥ navigation
... rest of content, including main navigation ...
3
These links provide a way to instantly leap to different sections of a single document. The most critical link is the one to skip navigation and go right to the content. Because menus can be long and complex—especially if they contain drop-downs—screen reader users appreciate being able to access the content without wading through a sea of links first. These links are also valuable when accessing the Web on a mobile device. Because cell phone and PDA screens are so small, there is often a gratuitous amount of scrolling that gets done before the real content is reached. A single link at the beginning of the document allows users to jump past all the riffraff. This supplemental navigation may or may not be visible to a normal browser, depending on how the page is designed. In development circles, there are arguments either way. In reality, keeping the navigation visible provides little value to visitors without visual disabilities—there is no point in providing a link to navigation that is plainly visible in a normal browser. Hiding the navigation in the preceding example can be done through a simple CSS rule: #accessnav { visibility: hidden; }.
Access keys Access keys offer the audience keyboard shortcuts to do something or go somewhere without having to move the mouse, just like standard software programs. This is an advantage for those using screen readers, those with limited mobility, or power users who like to move around a website more quickly. If the business has any type of online system where users spend extended periods of time—such as an e-mail application, CRM, or billing platform—providing simple keyboard commands can significantly speed up navigation.
51
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Since access keys are specified with the accesskey attribute in HTML, they are very easy to set up. For instance, this could be any company’s main navigation:
Home
Products
Downloads
Contact
An access key is attached to each navigation item and identified in the title of the link. All browsers support access keys, but use different means to trigger them. In Internet Explorer, press Alt+access key and then the Enter key. In Firefox, simply press Alt+access key. Likewise, in Safari for the Mac OS X platform, simply press Ctrl+access key. Unfortunately, access keys have one deal-breaking drawback in real-world environments. Certain character combinations conflict with shortcuts already reserved by browsers and assistive technologies like screen readers. Since access keys take precedence over the native program’s commands, serious usability issues come to light when a user is accustomed to pressing Alt+H in Internet Explorer for help and suddenly finds herself going to the website’s homepage because the developer chose access key H for that action. In fact, in a study done by WATS (Web Accessibility Testing and Services),14 it was discovered that between all current browsers and assistive devices, only three unclaimed, non-conflicting keys remained: slash, backslash, and right square bracket. Since these are awkward to type and lack semantic value, they are of little interest to most web designers. Thankfully, many programs use similar keyboard shortcuts for major functionality, so it’s easy to avoid the characters that would offer severe usability issues. Unless there is some mission-critical reason to do so, avoid using D, E, F, H, T, V, or W as access keys. There is no official recommendation regarding which access keys to use for what links, but there are a few consistencies around the Web: Access key 1 goes to the home page. Access key 2 skips the navigation and goes right to the content. Access key 9 goes to the contact page. Access key 0 goes to the accessibility statement.
Tab index The Tab key on a keyboard provides an efficient way to linearly navigate the contents of a web page. Every time it’s pressed, the cursor jumps to the next actionable item, whether
14. WATS, “Accesskeys and Reserved Keystroke Combinations” (www.wats.ca/show. php?contentid=43).
52
ACCESSIBILITY that is a link or a form element. When the HTML document is well written, the order of the tabbing flows intelligently through the page, from the very first links in the menu to the final links in the footer. The tabindex attribute allows the web developer to dictate the order of the tabbing. It is used within tags that offer functionality to the user: a link, a form field, a button, and so forth. It is most commonly found in forms, where the order of tabbing through various fields is vitally important to the usability of the page. Functionally, it is the equivalent of clicking inside a field before typing. Applying the attribute is very simple:
3
The tab index order does not have to start with 1. In fact, it can be any integer up to 32,000. Because of this, it works better to group blocks of content into levels of tab index values. For instance, the search box might be the 100 level, (shown in the preceding code), the main menu the 200 level, internal content the 300 level, and any footer links the 400 level. This helps organize tab index values and allows for plenty of headroom when adding more links. If a page contains a search box, the first tab index should always jump to the input field.
Forms and tables Standard, out-of-the-box HTML offers a host of tags and attributes, yet many of the minor tags are forgotten about in day-to-day development, even when they offer tremendous semantic value. For instance, forms comprise a critical facet of the Web—allowing the visitor to instigate communication—yet are rarely written with proper HTML. Similarly, many of the markup nuances that describe tabular data were lost to the overwhelming abuse of
and
when it was in vogue to build pages using tables for structure. The more accurately and effectively the correct HTML tags are used in the correct situations, the more meaningful the data becomes. And the better you can semantically describe the contents of a web document, the more accessible it becomes. And the more accessible your web pages, the more awesome you become.
Forms Just about every corporate site employs forms, if only on the contact page to collect visitor inquiries. These can be configured any way the designer chooses, from three text fields and a submit button to nine pages of drop-downs, radio buttons, check boxes, verification scripts, and more. It’s easy to see how forms become less accessible as their complexity grows, so it is imperative to structure them with proper HTML. Use labels, fieldsets, and legends. The tag is a beautiful piece of semantic markup that links a field to its text description. It provides a larger hit area for the control; for instance, clicking the text Name in the example shown in Figure 3-4 would automatically move the cursor into the correct field.
53
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES
Figure 3-4. This type of contact form is very common. Using the tag on the text increases the hit area of the form. For instance, when a user clicks Name, their cursor moves into the corresponding field.
The markup is dead simple. The attribute for must correspond with the id of the form element: ... Name: ... One of the lesser-known HTML tags, , allows a developer to intelligently group sections of a form. For instance, in an online order form, one fieldset might wrap around a person’s shipping address, while another fieldset might wrap around their credit card information. Even in smaller forms, a single fieldset is preferable to none. The fieldset also benefits from its own proprietary tag, called a legend, marked up, amazingly enough, with . The legend provides a descriptive caption to the fieldset: Your Shipping Address ... name, address, country, etc ... Billing Information ... credit card number, expiration date, blood of first born ... Using the and tags allows form data to be more organized both semantically and visually, thus easier to understand and navigate. Be careful with submission. In general, it is recommended to use HTML buttons rather than images as submission buttons, if only to prevent end-users from leaving your form impotent if they turn off the display of images. If images are used, include a descriptive alt attribute, like so:
54
ACCESSIBILITY This ensures that the user—whether on a standard browser or a screen reader—knows exactly what will happen when the button is clicked. As a general rule of thumb, never use standard links to submit form content, as they are not proper form controls and might be ignored by screen readers. Clearly label required fields. Many forms require that certain fields contain content before the form can be submitted. These are usually things like name, e-mail, message, and so forth. There is nothing inherently wrong about this, but the design of the form must clearly communicate exactly which fields are required and which ones are optional.
3
Designers need to not only indicate which ones are required, but also explain how they’re indicating that. For instance, it is common practice to add a small character or icon next to the label of an obligatory field, like an asterisk. However, somewhere near the form, there needs to be a small key explaining exactly what the asterisk indicates (see Figure 3-5 for an example). Also keep in mind that color alone should not be used to denote a required field; as we explored earlier in this chapter, some color combinations are impossible to tell apart by those with certain types of visual impairment.
Figure 3-5. This typical contact form uses an asterisk and red text to indicate which fields are required. In addition, it also explains what the asterisk means.
55
WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES JavaScript enhancements should be nonintrusive. Adding functionality to a form can greatly enhance usability, but only if the JavaScript is nonintrusive, meaning that the form works equally well when JavaScript is turned off. One of the greatest offenders is a drop-down menu used for site navigation. These can be difficult to manage in the first place for people with limited mobility, but are doubly dangerous because developers commonly attach a script that activates the link as soon as the drop-down selection is clicked. If JavaScript is disabled, nothing happens. Drop-downs for navigation, like any form, must have a proper form button for submission.
Tables A long time ago, in a galaxy far, far away, HTML tables were used for displaying data. Then in the mid-1990s, designers got clever and started using tables for site structure, building towers of teetering markup that balanced nested tables six or seven layers deep in order to craft pixel-perfect, graphically heavy designs. This practice generated tremendous code bloat. With the widespread adoption of CSS and the ability to control a website’s visual structure with a single style sheet, the technique of table-based page structure became antiquated. Today, designers are once again employing tables for their intended purpose: displaying tabular data. The HTML 4.01 spec offers site builders a rich library of tags for rendering table-based information. To produce the most accessible document possible, you must mark up a table with more than the standard
and
. Use your head(ers). In addition to the data cell tag
, there is also a table header tag that sits inside a
. These table headers, marked up with
, provide column headings to better define data. Here’s an example:
Region
2003
2004
2005
West Coast
30%
32%
41%
East Coast
29%
12%
19%
56
ACCESSIBILITY In addition, the , , and tags further define the sections of a large table. These are not necessary for smaller tables like the preceding one, but can prove valuable when constructing more complex arrays of data, like those commonly found in annual reports. Caption and summarize data. Like forms, tables have a proprietary tag for titling the information. In forms, it’s ; in tables, it’s called a caption, and it’s marked up with the very unambiguous tag. It sits right inside the opening
tag, like so:
Sales Growth Year Over Year ... table data ...
3
The summary attribute is the other important device in our toolbox for providing contextual information about a table. This sits inside the
tag, and is intended to provide a short description of the data the table contains. Like the title attribute of a link, this text is not displayed:
... table data ...
Graphics and multimedia Providing alternative text equivalents may be the single most valuable initiative for increasing a website’s accessibility. Text is the lowest-common-denominator format. It can be read by any device rendering the Web, and thus provides a consistent last line of defense for multimedia elements that either don’t get through a user agent or cannot be understood by the user.
Graphics Because graphics are so prevalent, it is important to support them with alternate textbased descriptions. Blind users benefit greatly; since images cannot be interpreted by a screen reader or other device, the visually impaired rely on the content within an image’s alt attribute to either appear in place of an image or be read aloud by screen readers. This also benefits visitors with low connection speeds, since many turn off images when browsing. The markup is easy: . This technique avoids JavaScript, which might be disabled; the disadvantage is that the target attribute is deprecated in XHTML 1.0 and beyond, and if included, will prevent the page’s markup from passing the W3C validator.
2. To open a new window while keeping the page valid, many developers use JavaScript. A basic version would look like this: .
3. The previous JavaScript examples only load the images in a new window, but the language also has the power to dictate the design of the browser window, such as the width and height, whether the navigation items are visible, and whether the window is resizable. Building off the previous example, a simple version might look like
