HAVE YOU HEARD of the World Wide Web? If so, your understanding of this exciting new medium has probably evolved somewhat over the past few years. Here is a common evolutionary trajectory:
When things change this fast, humans have a hard time adapting, keeping up, and just plain understanding what's going on. But people's reactions to the Web changed so fast precisely because so few of us really understood what it is. In fact, most of us didn't have the time to think hard about how Web sites could truly be useful and good things and how important sound design principles are to making them so.
Frenzied anxiety forced us to rush to legions of "experts" who played upon our fears that "we didn't get it." Through hype and jargon (not to mention wildly creative business modeling), they bullied us back to where we are today: square one.
As we return to the drawing board to figure out what we should do with the Web and our Web sites, what we needed all along becomes clear: fundamentals and fundamentally sound advice to help us think for ourselves and design for our users.
Fortunately, this wonderful little book is still here to show us those fundamentals. Patrick Lynch and Sarah Horton aren't trying to scare you with hype or jargon. They're just trying to get you to slow down, take a deep breath, and think for yourself. They'll teach you basic design principles as well as tricks of the trade, ranging from interaction design to typography, so that you can develop your own Web site or better understand and communicate with the people who are doing that work for you. More important, they will give you a broad framework that will help you understand the Big Picture of Web design. Even if you don't agree with all of their advice, you'll have a starting point from which to develop your ideas and practices.
If you're new to the Web, this is the book for you. It will give you a broad overview of a very complicated subject and get you started in the right direction. It will also make you look very smart when you carry it into meetings with your Web team.
And if you're battle-scarred, weary, and preparing mentally to do battle again, this is the book for you. It will help you synthesize what you've learned over these past few years and reshape your approach to Web site design from a more reasoned and realistic perspective. And it will also make you look very smart when you carry it into meetings with your Web team.
Now get back to it!
— Louis Rosenfeld
AS IS THE CASE WITH MANY innovations, the Web has gone through a period of extremes. At its inception, the Web was all about information. Visual design was accidental at best. Web pages were clumsily assembled, and "sites" were accumulations of hyperlinked documents lacking structure or coherence. Designers then took over and crafted attractive, idiosyncratic, and often baffling containers for information. The Web became a better-looking place, but many users hit up against barriers of large graphics, complex layouts, and nonstandard coding. Every site was different, and each required users to relearn how to use the Web, because "real" designers could not be bound by standards or conventions. Instead, designers pushed the boundaries of HTML, using workarounds, kludges, and sleight of hand to design on the cutting edge.
Today, the field of Web design is seen much more as a craft than an art, where function takes precedence over form and content is king. Innovative designs using fancy navigational doodads are generally seen as an annoyance standing between the user and what he or she seeks. Large graphic eye-candy, no matter how pleasing, is simply wasted bandwidth. Like 1960s architecture, much of yesterday's Web design now makes users wince and wonder how it could ever have been fashionable. Instead, today's Web designers are also information architects and usability engineers, and a user-centered design approach is the key to a successful Web site. Instead of constantly requiring users to relearn the Web, sites are beginning to look more alike and to employ the same metaphors and conventions. The Web has now become an everyday thing whose design should not make users think.
The guidance we offer in Web Style Guide has always been grounded on the functional aspects of design. In this second edition we extend our focus on functionality with additional sections on Web site accessibility, Cascading Style Sheets, and flexible page design. We include additional sections on information architecture, site maintenance, and multimedia design. And we have added illustrations and updated our Web site examples to reflect current best practices.
In addition to all those who contributed to the first edition of Web Style Guide, and whom we acknowledge at the end of the first edition preface, we thank Jean Thomson Black, Laura Jones Dooley, Joyce Ippolito, Maureen Noonan, Nancy Ovedovitz, Deborah Patton, and Amy Steffen at Yale University Press for their hard and high-quality efforts in producing this second edition. We are particularly grateful to Lou Rosenfeld for supplying such a lively and cogent foreword.
I extend heartfelt thanks to my friends and colleagues at Yale Center for Advanced Instructional Media and the School of Medicine's Web Design and Development unit: Carl Jaffe, Phillip Simon, Sean Jackson, Kimberly Pasko, Jim Soha, Janet Miller, Victor Velt, Crystal Gooding, Michael Flynt, Kathryn Latimer, Venkat Reddy, and Russell Shaddox. In particular, I'd like to thank Carl Jaffe for fifteen years of friendship, wise counsel, and practical advice, much of which now appears on these pages. I'd also like to acknowledge and thank my co-author and dear friend Sarah Horton for her friendship, for her partnership in this enterprise, and for convincing me that converting our Web Style Guide site into a book was a good idea.
I am especially grateful to the following individuals for their comments, suggestions, assistance, and counsel over the development of this book and companion Web site: Anne Altemus, Emmett Barkley, Richard Beebe, David Bolinsky, Stephen Cohen, Frank Gallo, Scott Hines, Peter Kindlmann, Howard Newstadt, John Paton, Noble Proctor, Stacy Ruwe, Virginia Simon, William Stewart, Lynna Stone-Infeld, Jan Taylor, Frans Wackers, and Cheryl Warfield.
— PL
I thank my excellent colleagues in Curricular Computing at Dartmouth College: Jeffrey Bohrer, Malcolm Brown, Barbara Knauff, Mark O'Neil, Susan Simon. I also thank the Dartmouth faculty whose sites we use as examples: Joan Campbell, Sheila Culbert, Eva Fodor, Karen Gocsik, Sally Hair, Julie Kalish, Allen Koop, Thomas Luxon, and Gerard Russo. Finally, I am grateful to Andrew Kirkpatrick at the CPB/WGBH National Center for Accessible Media (ncam.wgbh.org) for casting a knowledgable eye on the sections on Web site accessibility.
— SH
THIS BOOK IS FOR ALL THOSE who wish to publish durable content on the Web. Durable content is not guided by trends; good design will withstand the test of time, whereas trends quickly become frivolous. Success in Web design goes beyond technology and fashion. To create Web sites that endure you need only to communicate your ideas clearly and effectively to your readers.
Though still young, the World Wide Web has already undergone several transformations. The framers of the Web were scientists who wanted to create a device-independent method for exchanging documents. They devised HTML (HyperText Markup Language) as a method for "marking up" the structure of documents to allow for exchange and comparison. Their focus was on the structural logic of documents, not the visual logic of graphic design.
But the Web quickly caught on as a publishing medium; no communication device is more inexpensive or far-reaching. As a tool for communication, however, Web authoring with HTML has limitations. With their focus on the structure of documents, the originators of the Web ignored those visual aspects of information delivery that are critical to effective communication. Once the Web was established as a viable publishing medium, these limitations became obvious and cumbersome. Pages that conformed to HTML standards lacked visual appeal, showing little evidence of the past five centuries of progress in print design. Graphic designers took this relatively primitive authoring and layout tool and began to bend and adapt it to a purpose it was never intended to serve: graphic page design.
The Web viewing audience was also beginning to refine its tastes. The pioneering Web "surfers" who were content to skim the surface of Internet documents are now outnumbered. People are turning to the Web for information — information with depth, breadth, and integrity.
Our purpose for writing this book is to offer basic design principles that you can use to make your content as easy to understand as possible. We explain how to use design as a tool, not as an objective; your Web design should be almost transparent to the reader. We show you how to create a user interface that will allow visitors to your site to navigate your content with ease. We offer suggestions on how to write Web documents; this is a new genre with its own style and guidelines. We delve deep into Web images — color, resolution, compression, and formats — and discuss the benefits of publishing images on the Web. We cover the stylistic and technical issues surrounding the addition of dynamic media to your Web site. All the guidance we offer shares a single purpose: to make your message clear to your readers.
This is not an HTML manual, nor is it a book on graphic design. It is a practical guide to help you design Web sites for the long run.
Many people have given generously of their time and advice during the preparation of this book and of the Web site that preceded the book. At Yale University Press we extend our warmest thanks to Jean Thomson Black, Laura Jones Dooley, and James J. Johnson. We also thank Craig Locatis, Donald Norman, and Edward Tufte for their valuable contributions.
I extend heartfelt thanks to my friends and colleagues at Yale University Center for Advanced Instructional Media: Carl Jaffe, Phillip Simon, Sean Jackson, Kimberly Pasko, Marsha Vazquez, and Jeff Colket. In particular, I'd like to thank Carl Jaffe for over ten years of friendship, wise counsel, and practical advice, much of which now appears on these pages. I'd also like to acknowledge and thank my co-author and good friend Sarah Horton for her friendship, for her partnership in this enterprise, and for convincing me that converting our Web Style Guide site into a book was a good idea.
I am especially grateful to the following individuals for their comments, suggestions, assistance, and counsel over the development of this book and companion Web site: Anne Altemus, Emmett Barkley, Richard Beebe, David Bolinsky, Stephen Cohen, Frank Gallo, Kathryn Latimer, Howard Newstadt, Noble Proctor, Lynna Stone-Infeld, Jan Taylor, Mi Young Toh, Tom Urtz, and Cheryl Warfield.
— PL
I thank my co-author, Patrick Lynch, for asking me to join him as co-author of the second edition of the online Web Style Guide. Little did he know where that invitation would lead, and I am grateful for his unfailing friendship and good humor throughout the development of this book. I am deeply indebted to Pat and his colleagues at Yale University Center for Advanced Instructional Media for taking me in some years back and teaching me how to see.
I am indebted to my many colleagues and friends at Dartmouth College for their support, suggestions, and counsel, especially John Hawkins, Sheila Culbert, D. Randall Spydell, Ned Holbrook, and Robert M. Murray. I also thank the faculty whose sites appear in this book: Joan Campbell, Eva Fodor, Sally Hair, Allen Koop, Thomas Luxon, and Gerard Russo.
I also thank Malcolm Brown for his steadfast support.
— SH