CYAN MAGENTA
YELLOW BLACK
In this book you’ll learn how to:
While a pleasing website is essential for any modern business, creating it is only a small piece of the online strategy. This book also discusses search engine optimization, using e-mail and RSS to communicate with customers and prospects, and advertising the corporate domain with paid search placement, online banners, text links, and more. The primary theme is using your corporate website to market the business effectively, from designing intelligent product pages to writing compelling e-mail newsYour visitors come to your site because they are letters. This book explores those ideas and offers interested in your business and are therefore potencompelling advice on how to take full advantage of tial customers. This book covers taking advantage the Web as a marketing medium. of that traffic by expanding the company’s story through a corporate blog and using testimonials, case studies, and other third-party validation to reinforce the marketing message. With this knowledge you will be able to create and maintain a highly professional, polished business site. Also Available
ISBN-13: 978-1-59059-839-9 ISBN-10: 1-59059-839-3 53999
Potts
he best business websites serve their readers with strong content, well-architected design, and a focus on usability, readability, and accessibility. This book covers the fundamental aspects of building a website that works for the company, not against it. It covers the essentials of strong copywriting, and then dedicates several chapters to designing user-centric About, Products and Services, and Support sections.
Web Design and Marketing Solutions Business Websites
T
for
Implement best practices in corporate web design, with a focus on common sections such as About, Products and Services, Customer Support, and more Use e-mail and RSS marketing to stay in touch with customers and prospects Apply simple and effective search engine optimization techniques to push your website higher in search engine results Advertise the site through e-mail, paid search placement, banner ads, and more Write professional, accessible, and usable pages to make your site available to everyone
Write strong web content Maximize your search engine marketing Learn how accessibility and web standards apply to corporate sites
SHELVING C ATEGORY 1. Web Design
Kevin Potts
US $39.99 Mac/PC compatible 9 781590 598399
www.friendsofed.com
this print for reference only—size & color not accurate
spine = 0.791" 416 page count
8393FM.qxd
8/8/07
2:45 PM
Page i
Web Design and Marketing Solutions for Business Websites
Kevin Potts
8393FM.qxd
8/8/07
2:45 PM
Page ii
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
[email protected] , or visit www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail
[email protected] , or visit www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly 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 Downloads section.
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
8393FM.qxd
8/8/07
2:45 PM
Page iii
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.
8393FM.qxd
8/8/07
2:45 PM
Page iv
8393FM.qxd
8/8/07
2:45 PM
Page v
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
v
8393FM.qxd
8/8/07
2:45 PM
Page vi
8393FM.qxd
8/8/07
2:45 PM
Page vii
CONTENTS
About the Author
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
About the Technical Reviewer Acknowledgments Introduction
xviii
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 1: Overview
xix xx xxi
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
vii
8393FM.qxd
8/8/07
2:45 PM
Page viii
CONTENTS Selling the redesign . . . . . . . The research . . . . . . . . The cold hard facts . . . . . The timeline . . . . . . . . . The cost . . . . . . . . . . . Website platforms . . . . . . . . . . HTML vs. Flash. . . . . . . . . . Content management systems . WordPress . . . . . . . . . . Textpattern . . . . . . . . . Drupal . . . . . . . . . . . . ExpressionEngine . . . . . . Vignette . . . . . . . . . . . Hosting considerations . . . . . Summary . . . . . . . . . . . . . . .
Chapter 2: Content
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
Chapter 3: Accessibility
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
22 24 25 25 26 28 28 28 28 29 29 30 31 31 31 32 33 34
37
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Accessibility is not just for the blind . Visual impairment . . . . . . . . . Mobility impairment . . . . . . . Hearing impairment. . . . . . . . Learning disabilities . . . . . . . . Epilepsy . . . . . . . . . . . . . . Accessibility benefits everyone . . . . Keep the doors open . . . . . . . Stay out of the courtroom . . . . Optimize for search engines . . . Karma . . . . . . . . . . . . . . .
13 13 13 13 14 14 14 16 16 16 16 17 17 18 18
21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
To compete, you need to be found . . . . To be found, you need to say something . Writing better copy for the Web . . . . . . Avoiding corporate speak . . . . . . . Have mercy on the thesaurus . . . Write for your audience, not your ego Provide the whole story . . . . . . Short paragraphs . . . . . . . . . . Bullets . . . . . . . . . . . . . . . . Reading level . . . . . . . . . . . . Examples of clarification . . . . . . . . Design considerations for content . . . . . Insist on copy—refute lorem ipsum . . Typography considerations . . . . . . . To serif or to sans? . . . . . . . . . Use common typefaces . . . . . . Consider contrast . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . .
viii
. . . . . . . . . . . . . . .
. . . . . . . . . . .
38 39 39 39 40 40 40 40 41 41 41
8393FM.qxd
8/8/07
2:45 PM
Page ix
CONTENTS Consider accessibility from the beginning. . . . . . . The accessibility landscape . . . . . . . . . . . . . . . The W3C . . . . . . . . . . . . . . . . . . . . . . . WCAG 1.0 . . . . . . . . . . . . . . . . . . . . WCAG 2.0 . . . . . . . . . . . . . . . . . . . . Country-specific laws . . . . . . . . . . . . . . Real-world accessibility . . . . . . . . . . . . . . . . . Standards-based development. . . . . . . . . . . Valid HTML . . . . . . . . . . . . . . . . . . . Semantic markup . . . . . . . . . . . . . . . . Color considerations . . . . . . . . . . . . . . . . Contrast . . . . . . . . . . . . . . . . . . . . . Using more than color to signify information Supplemental navigation . . . . . . . . . . . . . . Navigation aids . . . . . . . . . . . . . . . . . Invisible navigation . . . . . . . . . . . . . . . Access keys . . . . . . . . . . . . . . . . . . . Tab index . . . . . . . . . . . . . . . . . . . . Forms and tables . . . . . . . . . . . . . . . . . . Forms . . . . . . . . . . . . . . . . . . . . . . Tables . . . . . . . . . . . . . . . . . . . . . . Graphics and multimedia . . . . . . . . . . . . . . Graphics . . . . . . . . . . . . . . . . . . . . . Multimedia . . . . . . . . . . . . . . . . . . . Better Flash accessibility with SWFObject . . The accessibility statement . . . . . . . . . . . . . . . Common content . . . . . . . . . . . . . . . . . . Testing accessibility . . . . . . . . . . . . . . . . . . . Validate the site . . . . . . . . . . . . . . . . . . . Screen readers. . . . . . . . . . . . . . . . . . . . User testing . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 4: Architecture and Navigation . Organizing content . . . . . . . . . . . . Determining the big buckets . . . . . Visualizing the architecture . . . . . Mind mapping . . . . . . . . . . Hierarchical diagrams . . . . . . Collecting the content . . . . . . Navigation design . . . . . . . . . . . . . Navigation placement. . . . . . . . . Best practices . . . . . . . . . . . . . Design and development no-nos Drop-down menus . . . . . . . . Breadcrumb links . . . . . . . . . Flash-based navigation . . . . . . Smart labels . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
41 42 42 42 43 44 45 45 46 47 47 47 48 49 49 51 51 52 53 53 56 57 57 58 59 61 61 63 63 64 65 65
. . . . . . . . . . . . . .
68 69 70 70 72 73 74 75 77 77 79 80 80 82
ix
8393FM.qxd
8/8/07
2:45 PM
Page x
CONTENTS Site maps . . . . . . . . . . . . . . . . . Linking to HTML site maps . . . . . XML site maps for search engines . Summary . . . . . . . . . . . . . . . . .
Chapter 5: The Homepage .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83 84 85 86
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
All about the About pages . . . . . . . . . . . . . Linking to the About material . . . . . . . . . Content options . . . . . . . . . . . . . . . . . About the company . . . . . . . . . . . . . . . . . The grand overview . . . . . . . . . . . . . . . Services/products overview . . . . . . . . . . . Company history . . . . . . . . . . . . . . . . . Principals, leaders, and the board of directors Company culture. . . . . . . . . . . . . . . . . Philanthropy . . . . . . . . . . . . . . . . . . .
x
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
111 . . . . . . . . . .
112 112 113 116 116 117 118 118 119 119
8393FM.qxd
8/8/07
2:45 PM
Page xi
CONTENTS Career opportunities . . . . . . . . . . . The job list . . . . . . . . . . . . . . The job entry . . . . . . . . . . . . . Resume submission . . . . . . . . . Choosing the format . . . . . . The e-mail link. . . . . . . . . . The contact form . . . . . . . . Promoting job openings. . . . . . . News and press releases . . . . . . . . . Listing press releases . . . . . . . . The press release . . . . . . . . . . Investor relations . . . . . . . . . . . . . The stock . . . . . . . . . . . . . . . The stock price . . . . . . . . . Dividend and split history . . . Enhancing the display of tabular data . The table ruler . . . . . . . . . . . . SEC filings. . . . . . . . . . . . . . . Zebra tables . . . . . . . . . . . . . Sorting tables. . . . . . . . . . . . . Beyond EDGAR . . . . . . . . . Media and more . . . . . . . . . . . The contact page . . . . . . . . . . . . . The right information . . . . . . . . Include everything reasonable . Break up where necessary . . . Contact via the Web . . . . . . . . . Asking the right questions . . . Choosing required fields . . . . Usability considerations. . . . . Summary . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 7: Products and Services .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
Do you do products or services? . . . . . . Products . . . . . . . . . . . . . . . . . Services . . . . . . . . . . . . . . . . . . Products and services . . . . . . . . . . Finding the section . . . . . . . . . . . . . . Section naming. . . . . . . . . . . . . . Designing the Products and Services pages Product page design . . . . . . . . . . . The product landing page . . . . . The individual product page . . . . Services page design. . . . . . . . . . . Redefining the call to action . . . . Unique selling story . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
120 121 122 122 123 123 124 125 126 126 128 129 129 130 130 131 131 132 132 132 134 135 135 136 136 137 138 139 140 141 142
145 . . . . . . . . . . . . . .
146 146 147 148 149 150 150 151 152 154 159 160 162 163
xi
8393FM.qxd
8/8/07
2:45 PM
Page xii
CONTENTS
Chapter 8: Independent Validation .
. . . . . . . . . . . . . . . . . . . . . . . . .
Delivery of validation . . . . . . . . . . . . . . Section nomenclature and positioning . . The question of context. . . . . . . . . . . Acquiring the content . . . . . . . . . . . . . . Case studies and press releases. . . . . . . Identify the customer . . . . . . . . . . Contact the customer. . . . . . . . . . Conduct the interview . . . . . . . . . Produce the content . . . . . . . . . . Receive approval from the customer . Publish the content . . . . . . . . . . . Testimonials . . . . . . . . . . . . . . . . . Awards, recognition, and reviews . . . . . Designing the third-party validation . . . . . . The customer list . . . . . . . . . . . . . . Forbidden names and logo blitzkriegs. Case studies . . . . . . . . . . . . . . . . . Finding case studies . . . . . . . . . . . Listing case studies . . . . . . . . . . . Delivery. . . . . . . . . . . . . . . . . . Story length . . . . . . . . . . . . . . . Testimonials . . . . . . . . . . . . . . . . . Formats. . . . . . . . . . . . . . . . . . Delivery. . . . . . . . . . . . . . . . . . Awards, recognition, and reviews . . . . . Summary . . . . . . . . . . . . . . . . . . . . .
Chapter 9: The Corporate Blog .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Your blogging mileage . . . . . . . . . . Purpose of the business blog . . . . Tell the news . . . . . . . . . . . Insight into the process . . . . . All about the personality . . . . The bad, the good, and the better . The risks of business blogging . Tangible benefits . . . . . . . . Intangible benefits . . . . . . . Blogging platforms . . . . . . . . . . . . Hosted platforms . . . . . . . . . . Blogger . . . . . . . . . . . . . . WordPress.com . . . . . . . . . TypePad . . . . . . . . . . . . .
xii
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
165 . . . . . . . . . . . . . . . . . . . . . . . . . .
167 167 169 170 170 171 172 173 173 174 174 174 175 176 176 176 178 178 178 180 184 185 185 186 187 188
191 . . . . . . . . . . . . . .
193 193 193 195 195 196 196 197 197 198 198 199 200 201
8393FM.qxd
8/8/07
2:45 PM
Page xiii
CONTENTS Locally installed platforms . . . . . . . . . . . . . Movable Type . . . . . . . . . . . . . . . . . . Textpattern. . . . . . . . . . . . . . . . . . . . WordPress . . . . . . . . . . . . . . . . . . . . Drupal . . . . . . . . . . . . . . . . . . . . . . ExpressionEngine . . . . . . . . . . . . . . . . Custom applications . . . . . . . . . . . . . . . . . Implementation and architecture. . . . . . . . . . . . Adding the blog to the site menu . . . . . . . . . The URL structure . . . . . . . . . . . . . . . . . . Archive pages . . . . . . . . . . . . . . . . . . Look and feel. . . . . . . . . . . . . . . . . . . . . Blogging content . . . . . . . . . . . . . . . . . . . . . Who writes the content? . . . . . . . . . . . . . . Everyone in the company. . . . . . . . . . . . A defined team . . . . . . . . . . . . . . . . . An interesting individual (including the CEO) Topics and themes . . . . . . . . . . . . . . . . . . Original thoughts vs. reactionary writing . . . Best practices in content . . . . . . . . . . . . Comments and comment moderation. . . . . . . Moderating the human element . . . . . . . . Combating comment spam. . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 10: Customer Support .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
The ROI of support. . . . . . . . . . . . . . . . . . . . Save money . . . . . . . . . . . . . . . . . . . . . Improve customer satisfaction . . . . . . . . . . . Entice and inform prospects . . . . . . . . . . . . Support options . . . . . . . . . . . . . . . . . . . . . The FAQ . . . . . . . . . . . . . . . . . . . . . . . Avoid the easy yes/no. . . . . . . . . . . . . . Designing the FAQ . . . . . . . . . . . . . . . The Knowledgebase . . . . . . . . . . . . . . . . . Standardized format vs. the library approach Search: Don’t deploy without it . . . . . . . . Documentation . . . . . . . . . . . . . . . . . . . Best practices in long-format PDFs . . . . . . Forums . . . . . . . . . . . . . . . . . . . . . . . . Forum platforms . . . . . . . . . . . . . . . . Forum administration . . . . . . . . . . . . . . Dedicated support contact . . . . . . . . . . . . . Instant messaging . . . . . . . . . . . . . . . . Phone number. . . . . . . . . . . . . . . . . . The support contact form . . . . . . . . . . . Providing a simple e-mail address . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
202 202 203 204 204 204 205 206 206 207 208 209 210 210 211 211 212 213 214 214 216 216 217 218
221 . . . . . . . . . . . . . . . . . . . . .
223 223 224 224 225 225 225 226 227 228 229 230 230 230 232 232 234 234 234 235 236
xiii
8393FM.qxd
8/8/07
2:45 PM
Page xiv
CONTENTS Best practices in the support section. . . . . . . . . . . . . . Provide direct and helpful content. . . . . . . . . . . . . Adapt to customer needs . . . . . . . . . . . . . . . . . . Keep content current . . . . . . . . . . . . . . . . . . Embrace new technology (the rise of mobile access) Break through language barriers. . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 11: Contingency Planning
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Intellectual property . . . . . . . . . . . . . Copyright . . . . . . . . . . . . . . . . . Determining if copyright is owned. Work made for hire . . . . . . . . . . . . . Registering a copyright . . . . . . . Copyright infringement . . . . . . . Adding a copyright notice . . . . .
xiv
. . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
Redirects and error pages . . . . . . . . . . . . . . . . . . Crash course in status codes . . . . . . . . . . . . . . 200 OK . . . . . . . . . . . . . . . . . . . . . . . . 301 Moved Permanently and 302 Found . . . . . 404 Not Found . . . . . . . . . . . . . . . . . . . 500 Internal Server Error . . . . . . . . . . . . . . Site search . . . . . . . . . . . . . . . . . . . . . . . . . . Search as a navigation complement . . . . . . . . . . The small but mighty search box. . . . . . . . . . . . Practice good HTML. . . . . . . . . . . . . . . . . Page placement . . . . . . . . . . . . . . . . . . . Advanced search pages . . . . . . . . . . . . . . . Search results . . . . . . . . . . . . . . . . . . . . . . Handling errors in forms. . . . . . . . . . . . . . . . . . . Take responsibility . . . . . . . . . . . . . . . . . . . . Common problems (and the errors that love them) . Error message design . . . . . . . . . . . . . . . . Error message content . . . . . . . . . . . . . . . Positive reinforcement . . . . . . . . . . . . . . . Printing web pages . . . . . . . . . . . . . . . . . . . . . . Separate print-ready web pages . . . . . . . . . . . . Printing with CSS. . . . . . . . . . . . . . . . . . . . . Implementing the printer-friendly style sheet . . What stays, what goes . . . . . . . . . . . . . . . Sizing and measurement considerations . . . . . Doomsday page . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 12: Legalese
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
237 238 239 239 239 240 241
243 . . . . . . . . . . . . . . . . . . . . . . . . . . .
244 245 246 246 248 250 250 251 253 253 254 254 255 257 258 258 259 260 261 262 262 263 264 264 265 266 267
269 . . . . . . .
270 271 271 272 273 273 275
8393FM.qxd
8/8/07
2:45 PM
Page xv
CONTENTS Terms of use . . . . . . . . . . . . . . . . . Special licensing of content. . . . . . . GNU Free Documentation License. Creative Commons . . . . . . . . . Terms of use structure . . . . . . . . . Privacy policy . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
Chapter 13: Search Engine Optimization . What it is and why it matters . . . . . . Why the emphasis on Google? . . . Laying out an SEO strategy . . . . . . . Envision the end result . . . . . . . Three levels of keyword detail . Keyword selection . . . . . . . . . . . . Referring sites . . . . . . . . . . Focus on ROI . . . . . . . . . . . . . Regular review and analysis . . . . . WebTrends . . . . . . . . . . . . Mint. . . . . . . . . . . . . . . . Google Analytics. . . . . . . . . SEO tactics . . . . . . . . . . . . . . . . Internal strategies . . . . . . . . . . The importance of metadata . . URL structure . . . . . . . . . . Invisible page content. . . . . . Visible page content . . . . . . External strategies . . . . . . . . . . Building incoming links . . . . . Submitting to search engines . Directing search engine traffic . . . . . Robots meta tag . . . . . . . . . . . Robots.txt. . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 14: Outbound Marketing. E-mail newsletters . . . . . . . . . Newsletter content . . . . . . Strong subject lines . . . . Writing style . . . . . . . . Link excessively . . . . . . Legalize it . . . . . . . . . Subscription management . . Subscribing. . . . . . . . . Managing the subscription Unsubscribing . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
276 278 278 279 279 280 282
. . . . . . . . . . . . . . . . . . . . .
285
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
287 289 289 290 290 291 293 293 295 295 296 296 297 297 298 302 303 303 305 305 309 310 310 311 312
. . . . . . . . . . . . . . . . . . . . . . . . . .
315
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
316 317 318 320 320 321 321 321 323 323
xv
8393FM.qxd
8/8/07
2:45 PM
Page xvi
CONTENTS Newsletter design . . . . . . . . . . Structure . . . . . . . . . . . . . Images . . . . . . . . . . . . . . Styling . . . . . . . . . . . . . . Layout . . . . . . . . . . . . . . Publishing. . . . . . . . . . . . . . . Publication schedule . . . . . . Newsletter archive . . . . . . . Publishing platform . . . . . . . Reporting and metrics . . . . . . . . Unique URLs for web analytics . RSS feeds . . . . . . . . . . . . . . . . . Prime content for syndication . . . RSS for the website . . . . . . . RSS for marketing . . . . . . . . Implementation . . . . . . . . . . . Burn the feed . . . . . . . . . . Add the feed to the site . . . . Summary . . . . . . . . . . . . . . . . .
Chapter 15: Online Advertising .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Campaign tactics . . . . . . . . . . . . . . . . . Defining goals . . . . . . . . . . . . . . . . Brand and name exposure . . . . . . . Increased sales. . . . . . . . . . . . . . Lead generation . . . . . . . . . . . . . Target demographics . . . . . . . . . . . . Profiling current customers . . . . . . Defining desired demographics . . . . Adding personas. . . . . . . . . . . . . Advertising channels. . . . . . . . . . . . . Compiling an advertising program . . . . . Creating effective online advertising . . . . . . Paid search results . . . . . . . . . . . . . . How it works. . . . . . . . . . . . . . . Strategies for ROI . . . . . . . . . . . . E-mail advertising . . . . . . . . . . . . . . Plan e-mail marketing goals . . . . . . Effective creative . . . . . . . . . . . . Banners . . . . . . . . . . . . . . . . . . . . Find the right sites . . . . . . . . . . . Maximize the advertising opportunity. Creative considerations . . . . . . . . . Text links . . . . . . . . . . . . . . . . . . . Landing pages . . . . . . . . . . . . . . . . . . Strategies to entice visitors . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . .
xvi
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
324 325 326 327 329 331 331 331 332 333 335 335 336 337 337 338 338 340 341
343 . . . . . . . . . . . . . . . . . . . . . . . . . .
344 345 345 346 347 348 348 348 349 350 350 352 353 353 354 355 355 357 360 361 362 363 364 365 365 367
8393FM.qxd
8/8/07
2:45 PM
Page xvii
CONTENTS
Appendix: Resources
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
General web design . . . . . . . Books . . . . . . . . . . . . . Websites . . . . . . . . . . . Accessibility . . . . . . . . . . . . Articles . . . . . . . . . . . . Books . . . . . . . . . . . . . Websites . . . . . . . . . . . Further resources . . . . . . Corporate Blogging . . . . . . . Articles . . . . . . . . . . . . Books . . . . . . . . . . . . . Websites . . . . . . . . . . . Search Engine Optimization . . . Books . . . . . . . . . . . . . Websites . . . . . . . . . . . Further resources and tools Marketing . . . . . . . . . . . . . Books on marketing . . . . . Books on social behavior . . Websites . . . . . . . . . . .
Index .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
369 . . . . . . . . . . . . . . . . . . . .
370 370 370 371 371 371 371 371 372 372 372 372 373 373 373 373 373 373 374 374
377
xvii
8393FM.qxd
8/8/07
2:45 PM
Page xviii
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
8393FM.qxd
8/8/07
2:45 PM
Page xix
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
8393FM.qxd
8/8/07
2:45 PM
Page xx
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
8393FM.qxd
8/8/07
2:45 PM
Page xxi
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
8393FM.qxd
8/8/07
2:45 PM
Page xxii
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
8393FM.qxd
8/8/07
2:45 PM
Page xxiii
8393CH01.qxd
8/2/07
11:59 AM
Page xx
8393CH01.qxd
8/2/07
11:59 AM
Page 1
1 OVERVIEW
8393CH01.qxd
8/2/07
11:59 AM
Page 2
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
8393CH01.qxd
8/2/07
11:59 AM
Page 3
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
8393CH01.qxd
8/2/07
11:59 AM
Page 4
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.
8393CH01.qxd
8/2/07
11:59 AM
Page 5
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
8393CH01.qxd
8/2/07
11:59 AM
Page 6
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
8393CH01.qxd
8/2/07
11:59 AM
Page 7
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
8393CH01.qxd
8/2/07
11:59 AM
Page 8
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
8393CH01.qxd
8/2/07
11:59 AM
Page 9
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
8393CH01.qxd
8/2/07
11:59 AM
Page 10
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
8393CH01.qxd
8/2/07
11:59 AM
Page 11
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
8393CH01.qxd
8/2/07
11:59 AM
Page 12
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
8393CH01.qxd
8/2/07
11:59 AM
Page 13
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
8393CH01.qxd
8/2/07
11:59 AM
Page 14
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
8393CH01.qxd
8/2/07
11:59 AM
Page 15
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.
cde0567328d97b61f0005356e3aea2cf
15
8393CH01.qxd
8/2/07
11:59 AM
Page 16
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.
3. 4. 5.
16
www.wordpress.org www.textpattern.com www.drupal.org
8393CH01.qxd
8/2/07
11:59 AM
Page 17
OVERVIEW
1
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
8393CH01.qxd
8/2/07
11:59 AM
Page 18
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
8393CH01.qxd
8/2/07
11:59 AM
Page 19
8393CH02.qxd
8/6/07
3:59 PM
Page 20
8393CH02.qxd
8/6/07
3:59 PM
Page 21
2 CONTENT
8393CH02.qxd
8/6/07
3:59 PM
Page 22
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.
8393CH02.qxd
8/6/07
3:59 PM
Page 23
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
8393CH02.qxd
8/6/07
3:59 PM
Page 24
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
8393CH02.qxd
8/6/07
3:59 PM
Page 25
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
8393CH02.qxd
8/6/07
3:59 PM
Page 26
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).
8393CH02.qxd
8/6/07
3:59 PM
Page 27
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
8393CH02.qxd
8/6/07
3:59 PM
Page 28
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
8393CH02.qxd
8/6/07
3:59 PM
Page 29
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
8393CH02.qxd
8/6/07
3:59 PM
Page 30
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
8393CH02.qxd
8/6/07
3:59 PM
Page 31
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
8393CH02.qxd
8/6/07
3:59 PM
Page 32
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).
8393CH02.qxd
8/6/07
3:59 PM
Page 33
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. 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. 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.)Accessibility is Awesome ... rest of content, including main navigation ... 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. 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. 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., 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: 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: 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. 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%
, , 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 ...
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: tag like this: tag is typically used to load nonstandard content. Placing a QuickTime movie onto a web page might use code similar to this: <param name="src" value="/multimedia/mymovie.mov"> <param name="autoplay" value="true"> <param name="controller" value="true"> <embed src="/multimedia/mymovie.mov" width="300" height="200" ➥ autoplay="true" controller="true" ➥ pluginspage="http://www.apple.com/quicktime/download/"> This is a fairly complex tag. The nested <param> tags are customized to the type of content being loaded. (A Flash file, for instance, would have a different set of parameters than the QuickTime file.) The depreciated <embed> tag complicates matters by duplicating the information to satisfy older versions of Netscape and Microsoft Explorer. As you might imagine, alternative browsing devices do not do well here. In order to make multimedia files even a tiny bit accessible, you need to start with the basics. First, any wording within the tag is considered alternative text, similar in purpose to an image’s alt attribute. In fact, this content is not limited to pure text. Other HTML code—like in the following example—can provide alternative content if the multimedia file fails to load. <param name="src" value="/multimedia/mymovie.mov"> <param name="autoplay" value="true"> <param name="controller" value="true"> <embed src="/multimedia/mymovie.mov" width="300" height="200" ➥ autoplay="true" controller="true" ➥ pluginspage="http://www.apple.com/quicktime/download/"> News reel profiling our company's CEO Ted Cannon, shown on a ➥ local news channel on February 19, 2005.
and <embed> markup that is automatically generated by web development software like Dreamweaver. See Figure 3-6 for an example of SWFObject in action. ... alternative content ...
<script type="text/javascript"> var so = new SWFObject("foo.swf", "flash", "505", ➥ "150", "8", "#FFFFFF"); so.write("flashcontent"); Instead of using an or <embed> tag, the JavaScript aggregates the parameters through the script (the variables shown in the preceding code are the file name, ID, width, height, Flash version, and background color) and loads the Flash file dynamically. If JavaScript is disabled or the Flash plug-in is not installed, the user will see alternative content. This script addresses every accessibility issue listed in the previous section, with the added benefit of having the alternative content indexed by search engines. When it comes to best practices in using Flash on a website, SWFObject is by far the most accessible route. tags, but only a human reader would be able to tell if any text embedded in that image is written in a legible typeface. And while those same tags, only a real person can judge if the content makes sense and is not written over the heads of its audience. That being said, validation services offer a great place to start accessibility testing because they will pick up just about any technical problem that may interfere with access. Here are a few services: Watchfire WebXACT22 is a suite of purchasable applications that also offers a reduced set of functionality free on its website. After entering a domain, you will be presented with four tabs of content: General (covers page size, load time, metadata, and other stats), Quality (covers broken links, spelling errors, and alternative text), Accessibility (checks against WCAG 1.0 and indicates errors and warnings for each priority level), and Privacy (covers encryption levels, cookies, and more). This is a fantastic resource that offers a broad swath of information collected in one report. HiSoftware’s Cynthia Says23 is an older diagnostic tool, but still useful because it specifically checks markup against Section 508 compliance, which is an abbreviated version of WCAG 1.0 adopted by the US government. There’s nothing groundbreaking, but it will sniff around for missing alternate content, server-side imagemaps, and insufficient table markup. Site Valet24 is another online accessibility tool that has a more expansive feature set available for purchase. It takes a slightly different approach to its diagnostic output by generating the page’s HTML and then outlining warning areas. This makes it very easy to immediately target the naughty bits of the markup. The W3C’s Markup Validation Service25 does not test for accessibility specifically, but rather tries to validate HTML with the specified DOCTYPE. Since valid HTML and accessibility go hand in hand, it’s another solid checkpoint for the website. http://www.yourbusiness.com/ 2006-11-01 daily <priority>0.8 [email protected] or [email protected] or [email protected] . Even if you are the only person in the company, avoid using a specific name in the address. This is beneficial for two reasons. First, it offers a thin layer of anonymity, which can help keep the e-mail of stalkers and other creepy folk demanding why you haven’t hired them out of your personal inbox. Second, and on a related note, setting up a dedicated e-mail address allows for segregated workflow; you can check the account separately at leisure, and your personal address is not used when you respond to an applicant. Write the HTML so the e-mail’s subject reflects the title of the job: For instance, if a user clicks the e-mail link for the Inside Sales position, you can instruct their e-mail application to automatically insert Application for Inside Sales Position at Acme, Inc. into the subject field. The HTML is simple: Apply for this job! . Simply add the query for subject, and you have immediately saved your applicants a step as well as established the format of how the e-mail subjects appear in your inbox (which can be a productivity boon when collecting resumes for multiple open positions). tags, and make sure the tab index moves smoothly through the form for users confined to a keyboard. And whatever you do, don’t place a Reset button on the page—it’s a solution to a problem that doesn’t exist. The one big decision the developer and HR department needs to make is whether to allow users to upload the resumes and cover letters, or whether they must copy the contents into a field as part of the form. This is a decision not to be taken lightly. There are security risks and potential compatibility issues with foreign attachments, but long, plain-text e-mails generated from the contact form can be unwieldy and harder to differentiate by the recruiting team. Figure 6-5 demonstrates a well-organized job application form. Required fields are indicated both through color and an asterisk, the input fields accommodate lots of visible text, acceptable file formats are spelled out right above the uploading widgets, and the company’s hiring practice is clearly restated before the user hits Send Information., , and tags properly will aid in the general accessibility of your form. Also, dictating the tab index using the tabindex attribute ensures that keyboard users will flow through the form naturally. If using JavaScript to enhance the functionality of the form, make sure that the form works just as well if JavaScript is disabled.10 When creating error messages, make sure that they are explicit in telling the user what field is affected and what they can do to fix the problem. For instance, if there’s an error in the phone number field, a message like “Bad data” does not help anyone. But if the error is something like “Please make sure your phone number is at least seven characters long,” users can quickly discover where they went wrong. Once you’ve built your form, test it on different browsers with different length messages, and make sure they are being received by the proper inboxes. Remember that it’s always the small, simple things that go wrong, and there’s nothing more frustrating than breakdowns in communication—especially when they could have been avoided by some simple testing up front. 10. Simon Willison wrote a great article for SitePoint called “Simple Tricks for More Usable Forms.” It highlights some powerful enhancements that some minor client-side scripting can make to basic HTML forms. The article is available at www.sitepoint.com/article/ simple-tricks-usable-forms. that overlaps the main page. Both of these prevent the JavaScript from being embedded in the HTML, so the page size is kept small and the HTML remains semantically strong. Generally, opening links in new windows is regarded as bad usability and accessibility practice, but in this case, users expect a thumbnail to open a new window with a larger image. The one and only concrete rule about this entire discussion is to never make a thumbnail link to an image that is not bigger. If a higher-resolution version with increased detail is unavailable, do not link the thumbnail. Occasionally readers are provided more than one high-resolution image. If you are providing an individual link to each, the anchor text of the links must be explicit, so readers know what they are clicking to. (You might even provide miniature thumbnails next to
