Apress web design and marketing solutions for business websites aug 2007 ISBN 1590598393 pdf

Web Design and Marketing Solutionsfor Business Websites Kevin Potts... Web Design and Marketing Solutionsfor Business Websites Copyright © 2007 Kevin Potts All rights reserved.. Web Desi

and a focus on usability, readability, and accessibil-ity This book covers the fundamental aspects of

building a website that works for the company,

not against it It covers the essentials of strong

LEARN hOW ACCESSIBILITY ANd WEB STANdARdS APPLY TO CORPORATE SITES

also available

us $39.99 Mac/PC compatible

Web Design and Marketing Solutions

for Business Websites

Kevin Potts

Web Design and Marketing Solutions

for Business Websites

Copyright © 2007 Kevin Potts All rights reserved No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher

ISBN-13 (pbk): 978-1-59059-839-9 ISBN-10 (pbk): 1-59059-839-3 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book Rather than use a trademark symbol with every occurrence

of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark

owner, with no intention of infringement of the trademark.

Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or

indirectly by the information contained in this work

The source code for this book is freely available to readers at www.friendsofed.com in the

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.

CONTENTS AT A GLANCE

About the Author xviii

About the Technical Reviewer xix

Acknowledgments xx

Introduction xxi

Chapter 1: Overview 1

Chapter 2: Content 21

Chapter 3: Accessibility 37

Chapter 4: Architecture and Navigation 67

Chapter 5: The Homepage 89

Chapter 6: The About Section 111

Chapter 7: Products and Services 145

Chapter 8: Independent Validation 165

Chapter 9: The Corporate Blog 191

Chapter 10: Customer Support 221

Chapter 11: Contingency Planning 243

Chapter 12: Legalese 269

Chapter 13: Search Engine Optimization 285

Chapter 14: Outbound Marketing 315

Chapter 15: Online Advertising 343

Appendix: Resources 369

Index 377

About the Author xviii

About the Technical Reviewer xix

Acknowledgments xx

Introduction xxi

Chapter 1: Overview 1

What your website should do 2

Marketing 2

Selling a tangible product 3

Promoting services 3

The whole branding thing 4

Home as advertisement 4

Support 5

Providing extended information 5

The community 5

Customer love 6

Corporate information 7

News and press releases 7

Contact information 7

The corporate blog 7

Redesigning your site 8

Redesign justification 8

Internal pressure 9

Shiny new technology 9

The branding mind-meld 10

Planning the redesign 10

Primary objectives 11

Secondary objectives 12

Tertiary objectives 12

Selling the redesign 13

The research 13

The cold hard facts 13

The timeline 13

The cost 14

Website platforms 14

HTML vs Flash 14

Content management systems 16

WordPress 16

Textpattern 16

Drupal 16

ExpressionEngine 17

Vignette 17

Hosting considerations 18

Summary 18

Chapter 2: Content 21

To compete, you need to be found 22

To be found, you need to say something 24

Writing better copy for the Web 25

Avoiding corporate speak 25

Have mercy on the thesaurus 26

Write for your audience, not your ego 28

Provide the whole story 28

Short paragraphs 28

Bullets 28

Reading level 29

Examples of clarification 29

Design considerations for content 30

Insist on copy—refute lorem ipsum 31

Typography considerations 31

To serif or to sans? 31

Use common typefaces 32

Consider contrast 33

Summary 34

Chapter 3: Accessibility 37

Accessibility is not just for the blind 38

Visual impairment 39

Mobility impairment 39

Hearing impairment 39

Learning disabilities 40

Epilepsy 40

Accessibility benefits everyone 40

Keep the doors open 40

Stay out of the courtroom 41

Optimize for search engines 41

Karma 41

Consider accessibility from the beginning 41

The accessibility landscape 42

The W3C 42

WCAG 1.0 42

WCAG 2.0 43

Country-specific laws 44

Real-world accessibility 45

Standards-based development 45

Valid HTML 46

Semantic markup 47

Color considerations 47

Contrast 47

Using more than color to signify information 48

Supplemental navigation 49

Navigation aids 49

Invisible navigation 51

Access keys 51

Tab index 52

Forms and tables 53

Forms 53

Tables 56

Graphics and multimedia 57

Graphics 57

Multimedia 58

Better Flash accessibility with SWFObject 59

The accessibility statement 61

Common content 61

Testing accessibility 63

Validate the site 63

Screen readers 64

User testing 65

Summary 65

Chapter 4: Architecture and Navigation 67

Organizing content 68

Determining the big buckets 69

Visualizing the architecture 70

Mind mapping 70

Hierarchical diagrams 72

Collecting the content 73

Navigation design 74

Navigation placement 75

Best practices 77

Design and development no-nos 77

Drop-down menus 79

Breadcrumb links 80

Flash-based navigation 80

Smart labels 82

Site maps 83

Linking to HTML site maps 84

XML site maps for search engines 85

Summary 86

Chapter 5: The Homepage 89

Purpose and goals of the homepage 91

Scope of the site 92

Overview of the company 92

Opportunities to learn more 93

Goal conversions 93

And, of course, branding 94

Anatomy of the homepage 95

Critical elements 95

Navigation 95

Company description 96

Search 96

Options a la carte 97

The billboard 97

Press releases and corporate news 99

The corporate blog 99

Featured products or services 100

Testimonials 101

Newsletter sign-up 101

Login 102

A survey of company sites 103

Design considerations for usability 105

The fold 105

The F pattern 107

The introduction page 107

Summary 109

Chapter 6: The About Section 111

All about the About pages 112

Linking to the About material 112

Content options 113

About the company 116

The grand overview 116

Services/products overview 117

Company history 118

Principals, leaders, and the board of directors 118

Company culture 119

Philanthropy 119

Career opportunities 120

The job list 121

The job entry 122

Resume submission 122

Choosing the format 123

The e-mail link 123

The contact form 124

Promoting job openings 125

News and press releases 126

Listing press releases 126

The press release 128

Investor relations 129

The stock 129

The stock price 130

Dividend and split history 130

Enhancing the display of tabular data 131

The table ruler 131

SEC filings 132

Zebra tables 132

Sorting tables 132

Beyond EDGAR 134

Media and more 135

The contact page 135

The right information 136

Include everything reasonable 136

Break up where necessary 137

Contact via the Web 138

Asking the right questions 139

Choosing required fields 140

Usability considerations 141

Summary 142

Chapter 7: Products and Services 145

Do you do products or services? 146

Products 146

Services 147

Products and services 148

Finding the section 149

Section naming 150

Designing the Products and Services pages 150

Product page design 151

The product landing page 152

The individual product page 154

Services page design 159

Redefining the call to action 160

Unique selling story 162

Summary 163

Chapter 8: Independent Validation 165

Delivery of validation 167

Section nomenclature and positioning 167

The question of context 169

Acquiring the content 170

Case studies and press releases 170

Identify the customer 171

Contact the customer 172

Conduct the interview 173

Produce the content 173

Receive approval from the customer 174

Publish the content 174

Testimonials 174

Awards, recognition, and reviews 175

Designing the third-party validation 176

The customer list 176

Forbidden names and logo blitzkriegs 176

Case studies 178

Finding case studies 178

Listing case studies 178

Delivery 180

Story length 184

Testimonials 185

Formats 185

Delivery 186

Awards, recognition, and reviews 187

Summary 188

Chapter 9: The Corporate Blog 191

Your blogging mileage 193

Purpose of the business blog 193

Tell the news 193

Insight into the process 195

All about the personality 195

The bad, the good, and the better 196

The risks of business blogging 196

Tangible benefits 197

Intangible benefits 197

Blogging platforms 198

Hosted platforms 198

Blogger 199

WordPress.com 200

TypePad 201

Locally installed platforms 202

Movable Type 202

Textpattern 203

WordPress 204

Drupal 204

ExpressionEngine 204

Custom applications 205

Implementation and architecture 206

Adding the blog to the site menu 206

The URL structure 207

Archive pages 208

Look and feel 209

Blogging content 210

Who writes the content? 210

Everyone in the company 211

A defined team 211

An interesting individual (including the CEO) 212

Topics and themes 213

Original thoughts vs reactionary writing 214

Best practices in content 214

Comments and comment moderation 216

Moderating the human element 216

Combating comment spam 217

Summary 218

Chapter 10: Customer Support 221

The ROI of support 223

Save money 223

Improve customer satisfaction 224

Entice and inform prospects 224

Support options 225

The FAQ 225

Avoid the easy yes/no 225

Designing the FAQ 226

The Knowledgebase 227

Standardized format vs the library approach 228

Search: Don’t deploy without it 229

Documentation 230

Best practices in long-format PDFs 230

Forums 230

Forum platforms 232

Forum administration 232

Dedicated support contact 234

Instant messaging 234

Phone number 234

The support contact form 235

Providing a simple e-mail address 236

Best practices in the support section 237

Provide direct and helpful content 238

Adapt to customer needs 239

Keep content current 239

Embrace new technology (the rise of mobile access) 239

Break through language barriers 240

Summary 241

Chapter 11: Contingency Planning 243

Redirects and error pages 244

Crash course in status codes 245

200 OK 246

301 Moved Permanently and 302 Found 246

404 Not Found 248

500 Internal Server Error 250

Site search 250

Search as a navigation complement 251

The small but mighty search box 253

Practice good HTML 253

Page placement 254

Advanced search pages 254

Search results 255

Handling errors in forms 257

Take responsibility 258

Common problems (and the errors that love them) 258

Error message design 259

Error message content 260

Positive reinforcement 261

Printing web pages 262

Separate print-ready web pages 262

Printing with CSS 263

Implementing the printer-friendly style sheet 264

What stays, what goes 264

Sizing and measurement considerations 265

Doomsday page 266

Summary 267

Chapter 12: Legalese 269

Intellectual property 270

Copyright 271

Determining if copyright is owned 271

Work made for hire 272

Registering a copyright 273

Copyright infringement 273

Adding a copyright notice 275

Terms of use 276

Special licensing of content 278

GNU Free Documentation License 278

Creative Commons 279

Terms of use structure 279

Privacy policy 280

Summary 282

Chapter 13: Search Engine Optimization 285

What it is and why it matters 287

Why the emphasis on Google? 289

Laying out an SEO strategy 289

Envision the end result 290

Three levels of keyword detail 290

Keyword selection 291

Referring sites 293

Focus on ROI 293

Regular review and analysis 295

WebTrends 295

Mint 296

Google Analytics 296

SEO tactics 297

Internal strategies 297

The importance of metadata 298

URL structure 302

Invisible page content 303

Visible page content 303

External strategies 305

Building incoming links 305

Submitting to search engines 309

Directing search engine traffic 310

Robots meta tag 310

Robots.txt 311

Summary 312

Chapter 14: Outbound Marketing 315

E-mail newsletters 316

Newsletter content 317

Strong subject lines 318

Writing style 320

Link excessively 320

Legalize it 321

Subscription management 321

Subscribing 321

Managing the subscription 323

Unsubscribing 323

Newsletter design 324

Structure 325

Images 326

Styling 327

Layout 329

Publishing 331

Publication schedule 331

Newsletter archive 331

Publishing platform 332

Reporting and metrics 333

Unique URLs for web analytics 335

RSS feeds 335

Prime content for syndication 336

RSS for the website 337

RSS for marketing 337

Implementation 338

Burn the feed 338

Add the feed to the site 340

Summary 341

Chapter 15: Online Advertising 343

Campaign tactics 344

Defining goals 345

Brand and name exposure 345

Increased sales 346

Lead generation 347

Target demographics 348

Profiling current customers 348

Defining desired demographics 348

Adding personas 349

Advertising channels 350

Compiling an advertising program 350

Creating effective online advertising 352

Paid search results 353

How it works 353

Strategies for ROI 354

E-mail advertising 355

Plan e-mail marketing goals 355

Effective creative 357

Banners 360

Find the right sites 361

Maximize the advertising opportunity 362

Creative considerations 363

Text links 364

Landing pages 365

Strategies to entice visitors 365

Summary 367

Appendix: Resources 369

General web design 370

Books 370

Websites 370

Accessibility 371

Articles 371

Books 371

Websites 371

Further resources 371

Corporate Blogging 372

Articles 372

Books 372

Websites 372

Search Engine Optimization 373

Books 373

Websites 373

Further resources and tools 373

Marketing 373

Books on marketing 373

Books on social behavior 374

Websites 374

Index 377

ABOUT THE AUTHOR

Kevin Potts has been working on the Web for almost 11 years,

hav-ing started his online journey designhav-ing his first employer’s websitewith Netscape and Notepad He has spent the bulk of his design anddevelopment career working in small agencies, in-house designdepartments, and independently as a grizzled freelancer His focus isusability, accessibility, and clarity His portfolio contains work forbusinesses of all sizes in an array of industries, from Fortune 100companies to sole proprietorships His professional side is repre-sented at www.kevinpotts.com, and his unconventional and widelyread writing finds a home at www.graphicpush.com

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 NotBad, in Denver, Colorado Brian also cofounded Method Arts, a cre-ative consortium of freelance web designers He has a passion forimproving his ninja skills, especially in the realm of CSS and HTML.Brian also enjoys photography, going on walks with his wife, andbrewing his own beer His website, which houses his blog and port-folio, is http://begoodnotbad.com

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 projectmanagement, editing, and production teams You guys make a writer’s life easier All of thecompanies that offered their support for the book—and ultimately allowed themselves to berepresented—have been especially accommodating and supportive And finally a very specialthanks to Brian Warren for reviewing the technical aspects of the manuscript, which is alwaysbest left in the hands of a trained professional

The Internet encompasses all types of websites, from social media monoliths to individualblogs, from Justin Timberlake fan sites to Fortune 500 businesses Everyone has a voice, andthe medium has become the ultimate level playing field for those seeking to interact withthe 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 site serve that purpose unequivocally From the very first contact with a prospect, to guidingthem through the conversion funnel, to sustaining them with ample support material, tomaintaining contact through proactive communication—all of this is designed to attract cus-tomers 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 apositive marketing light on the company First, the basics: content, accessibility, and architec-ture 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, andstrong contingency design Finally, promoting the website: search engine optimization, cus-tomer newsletters, and advertising

web-A site that maintains a strong blend of all these aspects will serve the business well, and onlyhelp 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, writers, developers, information architects, and marketing experts will all find the contentinteresting—and even applicable in most parts The book is about web design for businesses,

copy-so whether you are a freelancer consulting with organizations or a member of an in-houseteam, this book is for you.

If you are looking for hardcore code examples, in-depth explanations of deprecated tags inXHTML, 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

perform-ance of their business site through better writing, stronger design, effective usability, andpractical 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 areused 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:

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: kevin@graphicpush.com

Writing: www.graphicpush.com

Business website: www.kevinpotts.com

Ahem, don’t say I didn’t warn you.

1 OVERVIEW

In the awkward growing stages of the Internet, many companies naively contracted ers to move their printed brochures online, expecting waves of business from an onlinepopulace that was just learning how a browser’s Backbutton worked But after a year ortwo, when business only trickled in and few companies saw any return on investment, itwas apparent that simply broadcasting a glorified business card did not convince prospects

design-to do business with you

Since then, the web community has greatly matured More people know how to navigatethe Internet more efficiently and effectively, and they expect more for their efforts Inaddition, both businesses and web developers are getting smarter about content, design,usability, and accessibility, and the advent of mass broadband and sophisticated develop-ment 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 nottake the medium seriously raise serious red flags in the eyes of a savvy web surfer Usershave almost no patience for poorly designed websites

From a competitive angle, the Web levels the playing field—every business is lined up onthe 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 communicationand interaction are all components of websites that produce exceptional results forcorporations

What your website should do

Traditionally, corporate websites have been offensive, built to sell But offense is notenough In sports, there are three facets to every successful team: offense, defense, andcoaching The most effective websites have a similar three-pronged approach: marketing

to new customers (offense), supporting existing customers (defense), and providing eral corporate information that supports the other two (coaching) Let’s examine thesethree key tiers more closely

gen-Marketing

It is nearly impossible to find a corporate website that isn’t selling anything Allbusinesses—from Ted’s Towing in Wichita, Kansas, to the global mega-conglomerateGeneral Electric—exist to make money Even churches and nonprofits need to collectrevenue in order to keep their doors open Sometimes “selling” isn’t literal (It would bedifficult for McDonald’s to literally sell you a Big Mac and chocolate shake via an onlineshopping cart.) In fact, sometimes the primary marketing on the Web is accomplishedthrough calculated brand reinforcement

Selling a tangible product

Businesses who can sell products via the Web should build an online shopping cart andprovide customers with a means of ordering merchandise Businesses that manufactureproducts, but can’t logistically distribute them through the Web (like our McDonald’sexample, 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) tobuy it

Starbucks offers an effective hybrid model Both the company’s physical stores and itsonline store sell bags of coffee and merchandise, though its branches generate additionalrevenue selling freshly brewed beverages While Starbucks would have a difficult timeshipping a double tall nonfat latte to your house, it does offer a comprehensive menu ofavailable coffees on its website (www.starbucks.com), as shown in Figure 1-1, along withnutritional information This is smart offensive design

1

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, ise, and opinions A technology analyst and consulting company like Gartner is the purestform of this business model—Gartner meets and talks with companies, makes recommen-dations on technology purchases, and then charges for its time doing so

expert-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 ofconsultants

The whole branding thing

A lot has been written about branding on the Web, and how companies can take tage of the medium to push their corporate presence further into the marketplace.Unfortunately, so many factors of branding are intangible qualities—how something

advan-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 brandstory 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 sations A few companies—especially in the commercial sector—build complex viral sites

conver-to help reinforce their brand.1Some agonize over the graphical nuances of a button toensure it matches the company’s established visual motif Others reinvent their marketinglanguage to appeal to a more global audience

The ageless problem of brand marketing is the difficulty in quantifying return on ment Most smart companies know they have to invest in their brand development, andconstantly tweak messaging to do so, but never fully understand exactly how that invest-ment is being rewarded On the living Web—where content grows exponentially, newtechnology is rolled out every few months, and trends come and go faster than realityshows 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.)

invest-Home as advertisement

To build market awareness, a company traditionally purchased advertising space in zines, on billboards, and in other printed media that they hoped would be seen by theirtarget audience; radio ads that might be heard by the right people; and television spotsthat might be seen by their future customers Unless your business is an ice cream stand orboutique clothing store, you can count on few people actually driving by to purchase any-thing without having seen an advertisement first

maga-On the Web, the rules have changed The funnel is flipped The “headquarters” havebecome the single most efficient place to advertise Instead of a physical building trying tocast a wide net of advertising to procure new business, corporations can purchase laser-precise media or write link-worthy content that lures potential customers back to the web-site, where carefully designed pages make the final sale through a shopping cart or pushthem into making contact with the company

Few companies have truly embraced the marketing potential of new media Too manywebsites are built as static, uninviting brochures that fail to engage the customer; like acorporate office park, the veneer turns people away instead of inviting them to learn moreabout the institutions A good website, by contrast, invites prospects in to learn more,poke around, and talk to a salesperson

1 Burger King, for instance, has several viral sites www.subservientchicken.com is probably themost famous because it was pioneering in both its content and its subtle brand treatment

Once a company has its first customer, the need for customer support becomes ate and unavoidable Different businesses will see their customer support manifest in dif-ferent ways Software companies need to provide a host of support options, while amanufacturer of cement mix might only need a frequently asked questions (FAQ) pageand a phone number to call with questions Whatever the case, a corporate website shouldprovide patrons with as many tools as possible to get the answer they need without jump-ing through hoops, and if possible, without calling the company

immedi-Providing extended information

No matter how simple your business model, product or patented process, someone outthere will need a better explanation than your homepage provides The FAQ page is agreat place to start The FAQ can also straddle the marketing sphere; while it addressesquestions, the answers could have a marketing spin

Beyond the high-level FAQ, a company needs to provide in-depth documentation on itsproducts or services A software company should provide manuals, security updates, andbug fixes on its website; a restaurant should post its menu (and nutritional information ifpossible); 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 pany can interact with one another and representatives of the host corporation The goal

com-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 ofservices

The goal of the community is threefold First, it relieves a business from having to predictand 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 supporttickets Third, when people discover others using the same product or service, their pur-chase becomes immediately validated, and a network of more confident patrons is born Astrong community not only becomes a powerful first line of defense in helping answercustomer questions, but a self-sustaining internal marketing vehicle as well

Opera Software makes the Opera browser, an alternative to Internet Explorer The userbase 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.2Thesite boasts over half a million members (see Figure 1-2)

1

2 http://my.opera.com/community

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 yourexisting client base and showing your appreciation can have tremendous payoff in boththe immediate future and down the road A well-timed e-mail might retain a customerwho was about to leave That same person, with continued customer care, might person-ally recommend you down the road

One of the best ways to earn customer appreciation is to make them feel rewarded forbeing 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 pany developments, but also contains exclusive offers

com-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 cansave money and customers—by offering as much information as possible up front, thelikelihood of customers calling with a question easily answered on the website site isgreatly reduced

Corporate information

Finally, there are areas of the corporate site that do not directly sell or support productsand services While they might help promote the company in peripheral ways, companyinformation is fairly neutral when it comes to customer relations A well-written blog postmight bring ambient search engine traffic and a well-organized About Us section mighthelp candidates find and apply for open positions, but there is little marketing materialand even less customer support

News and press releases

The concept of press releases goes back to 1906, when an agency working for thePennsylvania Railroad issued a statement to the press about a train accident beforethe 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 onthe company itself—like the grand opening of a new office—and sometimes it’s tied tothe company’s offerings, like the launch of a new product or the acquisition of a keycompetitor

While the role of press releases has not changed much with the Internet, the means ofdelivery has Companies can now archive news on their own website, building a publiclibrary of documents that researchers and investors can use for research In addition, pressreleases are now distributed to both online and offline media Besides submitting to theregular avenues, a PR department can cast their net wider with a host of (mostly free)press release websites

The corporate blog

For better or worse, the advent of blogs has penetrated corporate websites, and manycompanies now publish blogs about their company, industry, and competitors This infor-mal writing style—which can be candid, irreverent, and reactionary—has supporters anddetractors arguing both sides of the issue

1

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 thestreet Unlike controlled writing avenues like press releases, brochures, and speeches, theimmediate nature of blogs presents a minefield of legal and professional issues Despitethis, some companies like Microsoft do not use any editorial staff or controlled publishingmedium for their employee blogs

But the pros are equally easy to see If the right person or team authors the blog, and thewriting is interesting and topical, all types of new traffic will be generated—not only fromsearch 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 fortheir industry

Redesigning your site

While there are many people reading this book interested in building a new company’swebsite, 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 chal-lenging as a brand new design But listing the reasons for the revamp and the goals the sitewill accomplish, and then selling the whole idea to your management team, can help makeyour site better than ever

It can be assumed that any business that wishes to compete in the globalized world ket 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 mega-corporations have all benefited from and praised the return on investment that a strongInternet presence brings

mar-Redesign justification

At this point, and probably for the foreseeable future, online initiatives are a given in anycorporate 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

The company’s lead web designer has learned new techniques that will greatlybenefit visitors and the site’s content managers (such as upgrading to a CSS-basedlayout, adding some nonintrusive JavaScript enhancements, or expanding function-ality on the back-end to meet customer demand)

Changing the visual brand is a part of your annual marketing plan

Whatever the case, it is critical to ensure that the planned redesign addresses the currentwebsite’s shortcomings These could come in many forms.

Internal pressure

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, fromthe CEO and director of marketing at the top, down to the creative director, production-level web designers, and content creators All of them have good ideas, and all of themwant to be heard Within that collective of influencers, the business probably has one keyfigure that pulls the trigger on any major website decisions, and they spend a good part oftheir tenure bracing against a constant gale of suggestions It’s inevitable that one of thesesuggestions will be the catalyst for a redesign

Many changes will be visually driven One of the penalties of operating in a globalizedeconomy is the pressure to constantly cycle through creative ideas, to stay fresh withbranding 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 tive), and sometimes the changes are huge (massive branding campaigns, a logo redesign,

initia-or a new set of cinitia-ore messages) It’s the designer’s job to make sure those changes arereflected in the corporate website

New products or services can also be the genesis for redesigning the website This is cially relevant to smaller businesses, although larger companies have been known to up-heave their web presence in order to back a new product

espe-Shiny new technology

There is a certain level of nerdiness all web designers possess In order to succeed in theindustry, it is their responsibility to have their finger on the pulse of the developmentworld, and to forecast the influence of new technologies before they render their currenttechniques obsolete No web designer wants their director of marketing (whose job hasnothing to do with following web development technology trends) asking about a tech-nology they’ve never heard of

One of the true thrills of building websites is digging deep into the vast toolbox of nologies and techniques Since the Web as a medium is constantly refreshing, old tools arebeing refined and new toys regularly land in the laps of savvy developers:

tech-New CSS techniquesSearch engine optimization tipsJavaScript widgets and frameworksUpgrades to Flash

Usability studiesAccessibility techniquesServer-side languagesUpdates to content management systemsGroundbreaking books on web design, like this one

1

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 designersimmediately saw the benefit of removing presentational markup, and overhauled websitecode 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 toever more complex interactive environments

The branding mind-meld

The increasing number of high-profile mergers and acquisitions is another piece of ization fallout The world market is becoming smaller as major competitors devour oneanother like sharks in a fishing pond If nothing else, the constant business activity keepsweb designers in business as companies constantly find themselves needing to rebuild orreinvent their websites in order to accommodate the influx of technology and brandingclout

global-This is a very situational redesign When a company swallows another one whole, likeOracle did with PeopleSoft in December of 2005, little can be done to stop the identityfrom being assimilated However, in the case of Sprint and Nextel, the merger blended thetwo identities to create a unified public face and eventually a whole new website high-lighting 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 sitefrom 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 pointwith the old site, noting where the original design and messaging fell short, this is coun-tered by the vastly higher expectations of interested parties After all, if a corporation’smanagement team is going to invest money in the project, they are going to want a sub-stantial return for their efforts

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 theresults can be measured with hard evidence, the more successful the design will be Forinstance, it is easy to promise that the redesign will “look better,” because that is a purelysubjective gauge no one can logically refute However, if the objective is to be WCAG 1.0Priority Level 1 compliant, or rank in the top ten results for a particular keyword string, orhalve the time required for a copy editor to add text through the CMS, then the finalproduct can be compared against these tangible measuring sticks

Some goals are fundamental to the redesign, while others provide only peripheral fits In drafting a list of targets, rank them by importance

bene-Primary objectives

Primary objectives are the big targets, the mountains in the path of the river These are thecore driving factors of the redesign, and as stated previously, should be clearly and objec-tively measurable You may very well have only one primary goal, such as making your siteSection 508 compliant because you do business with the United States government Onthe 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-baseddesign 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 1guidelines

4.Add the new company logo and implement the revised style guide for corporatecolors

5.Create consistency in the site’s navigation by replacing the current disparate menuswith 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-oneintention simply dilutes the resources for the core, must-meet goals Budget, time, andtechnology constraints might force a team of designers and developers to distill the listdown to only two or three

These few top-level goals are unique to every situation, and only the web developer andhis marketing team would be able to accurately rank the preceding list For instance, itmay 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 consid-eration, our primary goals might look like this:

1

1.Make the website standards compliant by using semantic markup and CSS-baseddesign 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’stop priority is another person’s afterthought Web developers often find themselves medi-ators between divided parties Take advantage of your secondary objectives list to appeasedisgruntled marketing folk, because these objectives should receive attention during theredesign process, and are likely to be implemented

Looking at our preceding list, and after huddling with different team members, we mightidentify 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 1guidelines

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 pliance and accessibility overlap in quite a few areas

com-3.Create consistency in the site’s navigation by replacing the current disparate menuswith a collective drop-down menu

The director of marketing, for example, not being tech-savvy, may have a hard time ing his way around the site and will want to see a much improved navigation A leaddesigner and information architect will also see considerable room for improvement andmark this as a very important secondary objective

find-4.Add a corporate blog written by the CEO

This is something the marketing team has been buzzing about for a while, and theredesign 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 evenall that important, but will make the site better if there’s time to work it in From the pre-ceding list, and taking suggestions from other team members, a list of tertiary or periph-eral benefits might look like this:

1.Add the new company logo and implement the revised style guide for corporatecolors

2.Construct the site with valid XHTML 1.0 Strict

3.Use Ajax widgets to improve the interactivity of the shopping cart process

Since the redesign is probably happening regardless, it’s a good time to work in the pany colors to the CSS file and be done with it Similarly, having code validate to XHTML1.0 Strict might come with making the website standards compliant, but it’s certainly not arequirement And as for the Ajax, that falls clearly into the “if time permits” category.

com-Selling the redesign

After defining the redesign’s needs and objectives, it’s time to sell the idea to the peoplewho 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 orworking in an agency, you’re targeting the same people, but your job is made all that muchharder by not working inside the company

In smaller companies, selling a redesign might come easily if the site doesn’t have muchtraffic yet, the company is still trying to define its overall market position, and the lack ofmanagerial layers facilitates a more communicative environment In larger companies, aredesign proposition might be daunting for an outside agency Bureaucratic red tape isnotorious for stifling change Any major marketing decisions—even if you can prove theywill clearly benefit the company—have to be addressed formally and thoughtfully In otherwords, 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 astrong background going forward Answer the fundamental questions What is the state ofthe browser market and standards compliance? What skill sets need to be acquired tocomplete the redesign?

The cold hard facts

What will be the tangible, measurable benefits of the redesign? These are the primary, ondary, and tertiary goals just discussed—the quantifiable benefits to the company’s bot-tom line, spelled out in numbers and ranked by importance These need to be prominentand explained in plain language Any type of inner-circle nomenclature, buzzword-ladenprose, or technobabble will make as much headway with a management team as a pillowthrough concrete Simple words, clear messages

sec-The timeline

Define the length of the redesign process, from start to finish It’s important to spell thisout in as much detail as possible, taking into account the team’s current workload, learn-ing curves for new technology, testing phases, and whatever else is pertinent There aretwo key rules in laying out the project timeline:

1

Indicate major landmarks for the process: Don’t package the redesign as one lump

project; break the timeline into manageable chunks approvers can understand andmeasure 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 surprisethem by delivering after only seven

The cost

The preceding page of advice can be largely ignored, since this is the page every person isgoing to flip to right away without reading anything else For that reason, it needs to bemeticulous, articulate, convincing, and above all, deliverable The cost can be measuredand broken down several ways:

First, and most easily quantifiable, is the outlay of cash Does the upgrade require anew server, software upgrade, or more bandwidth? These hard costs should beitemized, grouped by relevance, and totaled

Second, and harder to predict, are the miscellaneous costs that might arise duringthe process Will there be travel costs, or will freelance help be needed to make adeadline? 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 num-ber of man-hours on the project, but also downtime, meetings, other pressingprojects that can inconveniently come up, and more An agency has a definitivehourly 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 hourswith 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 areturnkey (meaning that everything works right out of the box), and others are customizablesolutions 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 plat-forms like Lotus Notes and Domino

HTML vs Flash

Flash has grown from crude animation software to a mature application developmentenvironment Many design agencies specialize in Flash websites, and their creations areoften rich interactive experiences built to wow the audience While it is possible to build acorporate website entirely in Flash, there are several key disadvantages to the platform: