By Jeffrey Zeldman
201 West 103rd Street, Indianapolis, Indiana 46290
Taking Your
Talent to the
Web
A Guide for the Transitioning Designer
00 0732 FM 4/24/01 1:38 PM Page i
Taking Your Talent to the Web:
A Guide for the Transitioning Designer
Copyright  2001 by New Riders Publishing
All rights reserved. No part of this book shall be reproduced, stored in
a retrieval system, or transmitted by any means—electronic, mechani-
cal, photocopying, recording, or otherwise—without written permission
from the publisher. No patent liability is assumed with respect to the
use of the information contained herein. Although every precaution
has been taken in the preparation of this book, the publisher and au-
thor assume no responsibility for errors or omissions. Neither is any li-
ability assumed for damages resulting from the use of the information
contained herein.
International Standard Book Number: 0-7357-1073-2
Library of Congress Catalog Card Number: 00-111152
Printed in the United States of America
First Printing: May 2001
05 04 03 02 01 7 6 5 4 3 2 1
Interpretation of the printing code: The rightmost double-digit number
is the year of the book’s printing; the rightmost single-digit number is
the number of the book’s printing. For example, the printing code 01-
1 shows that the first printing of the book occurred in 2001.
Trademarks
All terms mentioned in this book that are known to be trademarks or
service marks have been appropriately capitalized. New Riders Publish-

Chrissy Andry
Cover Designer
Allison Cecil
Interior Designer
Suzanne Pettypiece
Compositor
Suzanne Pettypiece
Proofreader
Jeannie Smith
Indexers
Lisa Stumpf
Larry Sweazy
00 0732 FM 4/24/01 1:38 PM Page ii
Contents at a Glance
Introduction 1
Part I WHY: Understanding the Web
Chapter 1 Splash Screen 5
Chapter 2 Designing for the Medium 13
Chapter 3 Where Am I? Navigation & Interface 69
Part II WHO: People, Parts, and Processes
Chapter 4 How This Web Thing Got Started 111
Chapter 5 The Obligatory Glossary 123
Chapter 6 What Is a Web Designer, Anyway? 135
Chapter 7 Riding the Project Life Cycle 147
Part III HOW: Talent Applied (Tools & Techniques)
Chapter 8 HTML, the Building Blocks of Life Itself 175
Chapter 9 Visual Tools 209
Chapter 10 Style Sheets for Designers 253
Chapter 11 The Joy of JavaScript 285
Chapter 12 Beyond Text/Pictures 327

Multimedia: All Talking! All Dancing! 37
The Server Knows 38
It’s the Bandwidth, Stupid 41
Web Pages Have No Secrets 42
The Web Is for Everyone! 44
iv
00 0732 FM 4/24/01 1:57 PM Page iv
It’s Still the Bandwidth, Stupid 45
Swap text and code for images 46
Trim those image files 46
Do more with less 47
Prune redundancy 47
Cache as Cache Can 49
Much Ado About 5K 50
Screening Room 51
Liquid Design 51
Color My Web 55
Thousands Weep 57
Gamma Gamma Hey! 59
Typography 62
The 97% Solution 62
Points of Distinction 63
Year 2000—Browsers to the Rescue 64
Touch Factor 65
Appropriate Graphic Design 65
Accessibility, the Hidden Shame
of the Web 65
User Knowledge 67
3 Where Am I? Navigation & Interface 69
What Color Is Your Concept? 70

1452 111
1836 111
1858 111
1876 112
Why We Mentioned These Things 112
1945 112
1962 112
1965 112
1966 113
1978 113
1981 113
1984 114
1986 114
1988 114
1989 115
1990 115
1991 115
1993 116
1994 116
1995 117
1996 118
1997 119
1998 120
1999 121
vi
00 0732 FM 4/24/01 1:38 PM Page vi
2000 121
The year web standards broke, 1 121
The year web standards broke, 2 122
The year web standards broke, 3 122

Works with team members 144
Visually and emotionally engaging 144
Easy to navigate 145
Compatible with visitors’ needs 145
Accessible to a wide variety of web browsers and other devices 145
Can You Handle It? 146
vii
00 0732 FM 4/24/01 1:38 PM Page vii
7 Riding the Project Life Cycle 147
What Is the Life Cycle? 148
Why Have a Method? 149
We Never Forget a Phase 151
Analysis (or “Talking to the Client”) 152
The early phase 153
Defining requirements 154
Design 156
Brainstorm and problem solve 156
Translate needs into solutions 157
Sell ideas to the client 158
Identify color comps 160
Create color comps/proof of concept 160
Present color comps and proof of concept 161
Receive design approval 162
Development 162
Create all color comps 163
Communicate functionality 164
Work with templates 165
Design for easy maintenance 165
Testing 166
Deployment 166

Take a (Re)Load Off 200
A Comment About <COMMENTS> 201
WYSIWYG, My Aunt Moira’s Left Foot 202
Code of Dishonor 202
WYS Is Not Necessarily WYG 203
Browser Incompatibilities: Can’t We All Just Get Along? 204
Publish That Sucker! 205
HTMHell 207
9 Visual Tools 209
Photoshop Basics: An Overview 209
Comp Preparation 210
Dealing with Color Palettes 210
Exporting to Web-Friendly Formats 210
Gamma Compensation 211
Preparing Typography 211
Slicing and Dicing 211
Rollovers (Image Swapping) 211
GIF Animation 212
Create Seamless Background Patterns (Tiles) 212
Color My Web: Romancing the Cube 212
Dither Me This 213
Death of the Web-Safe Color Palette? 215
A Hex on Both Your Houses 216
Was Blind, but Now I See 217
From Theory to Practice 217
Format This: GIFs, JPEGs, and Such 221
ix
00 0732 FM 4/24/01 1:38 PM Page ix
GIF 222
Loves logos, typography, and long walks in the woods 223

CSS Advantages: Long Term 261
Compatibility Problems: An Overview 261
Working with Style Sheets 263
Types of Style Sheets 266
External style sheets 267
Embedding a style sheet 268
Adding styles inline 269
x
00 0732 FM 4/24/01 1:38 PM Page x
Trouble in Paradise: CSS Compatibility Issues 271
Fear of Style Sheets: CSS and Layout 271
Fear of Style Sheets: Leading and Image Overlap 273
Fear of Style Sheets: CSS and Typography 274
Promise and performance 274
Font Size Challenges 276
Points of contention 276
Point of no return: browsers of the year 2000 277
Pixels for fun and profit 278
Absolute size keywords 280
Relative keywords 281
Length units 282
Percentage units 283
Looking Forward 284
11 The Joy of JavaScript 285
What Is This Thing Called JavaScript? 286
The Web Before JavaScript 286
JavaScript, Yesterday and Today 287
JavaScript, Unhh! What Is It Good For? 288
Sounds Great, but I’m an Artist. Do I Really Have to Learn This Stuff? 290
Educating Rita About JavaScript 291

Serving the project 334
Doing More 335
Mini-Case Study: Waferbaby.com 336
Mini-Case Study: Metafilter.com 337
Any Size Kid Can Play 338
Take a Walk on the Server Side 339
Are You Being Served? 341
Advantages of SSI 342
Disadvantages of SSI 343
Cookin’ with Java 343
Ghost in the Virtual Machine 344
Where the web designer fits in 346
Java Woes 347
Java Woes: The Politically Correct Version 347
Java Joys 349
Rich Media: Exploding the “Page” 350
Virtual Reality Modeling Language (VRML) 350
SVG and SMIL 352
SMIL (through your fear and sorrow) 352
SVG for You and Me 354
Romancing the logo 356
Sounds dandy, but will it work? 357
Promises, Promises 358
Turn on, Tune in, Plug-in 358
A Hideous Breach of Reality 360
The ubiquity of plug-ins 360
xii
00 0732 FM 4/24/01 1:38 PM Page xii
The Impossible Lightness of Plug-ins 361
Plug-ins Most Likely to Succeed 361

The Independent Content Producer Refuses to Die! 401
Index 403
xiii
00 0732 FM 4/24/01 1:38 PM Page xiii
About the Author
Jeffrey Zeldman has been designing websites since the Crimean War. His personal website at
www.zeldman.com has been visited by millions. Jeffrey is the publisher and creative director of A List
Apart (www.alistapart.com), a weekly magazine “For People Who Make Websites”; cofounder and
leader of the advocacy group, The Web Standards Project (www.webstandards.org); and founder of
Happy Cog (www.happycog.com), a web design agency. He is a featured columnist for publications in-
cluding Adobe Web Center, PDN-Pix Magazine, and Crain’s Creativity Magazine and speaks at web and
design conferences around the world. But what he really wants to do is direct.
xiv
00 0732 FM 4/24/01 1:38 PM Page xiv
About the Technical Editor
Steve Champeon is the CTO of hesketh.com, a web services firm in Raleigh, NC, that specializes in dis-
tinctive B2B and corporate sites, vibrant online communities, and high impact applications. He has pro-
vided technical editing on the topics of XML, XHTML, and other web-related topics and was the de-
velopment editor for Jeff Veen’s recent bestseller, The Art and Science of Web Design, published by New
Riders. In addition to his work as an editor, Champeon is a frequent contributor to online and print
magazines for web professionals and is the author of Building Dynamic HTML GUIs (published by IDG
Books Worldwide).
A highly sought-after speaker at trade conferences, Champeon regularly participates in CMP’s Web
conference circuit and Cool Site in a Day competition, Thunder Lizard, South by Southwest (SxSW), and
others, often speaking on DHTML and how to grow successful online communities.
xv
00 0732 FM 4/24/01 1:38 PM Page xv
Dedication
To Joan, whose love makes me feel happy and safe.
To my Dad, who taught me to be independent.

Love, thanks, and respect to Brian M. Platz, co-founder of A List Apart back when it was a mailing list
for web designers. To Bruce Livingstone, Nick Finck, Webchick, and Erin Kissane, who help keep ALA go-
ing. And to the fine writers who make it worth reading, including Joe Clark, J. David Eisenberg, Curt
xvii
00 0732 FM 4/24/01 1:38 PM Page xvii
Cloninger, Alan Herrell, Scott Kramer, Jeffrey Veen, John Allsopp, Robin Miller, Denice Warren, Jason
Kottke, Lance Arthur, Glenn Davis, Alyce McPartland, Ryan Holsten, Julia Hayden, Peter-Paul Koch,
Wayne Bremser, D.K. Robinson, L. Michelle Johnson, Mattias Konradsson, Steven Champeon (again),
Chris Schmitt, Marlene Bruce, Lee Moyer, Bob Stein, Dave Linabury, Mark Newhouse, Bob Jacobson, Eri-
ka Meyer, Ross Olson, Rich Robinson, Bill Humphries, Scott Cohen, Peter Balogh, Robert Miller,
Shoshannah L. Forbes, Pär Almqvist, Simon St. Laurent, Jennifer Lindner, Nick Finck (again), Jim Byrne,
Makiko Itoh, Ben Henick, George Olsen (again), and Chris MacGregor.
Thanks to everyone who’s ever looked at any site I’ve had a hand in creating, and especially to those
who’ve written (even if you wrote to say it stank). Thanks to all the web designers and developers who
joined The Web Standards Project.
Hello? Thanks to Tim Berners-Lee for inventing the Web. Thanks to the Web’s first teachers: Jeffrey Veen
(again), Glenn Davis (again), Dan Shafer, David Siegel, and Lynda Weinman. Thanks to Jim Heid and
Steve Broback of Thunder Lizard for support, encouragement, great programs, and fine hotel accom-
modations.
Thanks to Michael Schmidt and Toke Nygaard for the secret work you did on this book, for the incred-
ible work you do on the Web, and for your friendship. Similar thanks to the incredible Carlos Segura.
Thanks to Todd Fahrner and Tantek Çelik for contributing to my knowledge and (more importantly) to
the sane advancement of the Web. Likewise, each in their own way: Tim Bray, Steven Champeon (again),
Rachel Cox, B.K. DeLong, Sally Khudairi, Tom Negrino, Dori Smith, Simon St. Laurent, Eric Meyer, Eric
Costello, J. David Eisenberg (again), Dave Winer, Stewart Butterfield, Carl Malamud, Joe Jenett, Evan
Williams, Robert Scoble, and Peter-Paul Koch (again).
Huge shout-outs to my supremely talented web designer pals. I value your friendship and love your
work. You know who you are, and if you didn’t know you might get a clue from the fact that I am al-
ways linking to you or referring obliquely to you, and if that’s not enough, you’ll find yourselves in the
Exit Gallery at zeldman.com.

Web vs. Print: A Note About URLs
The Web is an ever-changing flow of ideas, designs, and redesigns. Sites evolve and decay. Some move
to new locations. Others disappear. By the time you read this book, some of the sites it describes will
surely have changed, while others may have vanished altogether.
This flow and flux is natural to the Web, and in some ways it is even healthy. It’s good when mediocre
sites improve, and it’s inevitable that pointless sites (like pointless products) eventually fade away.
But healthy and natural or not, the medium’s constant dynamism can wreak havoc with books about
the Web, and thus with those books’ readers. You read about an interesting design or technological de-
cision, fire up your web browser, and discover that the site no longer demonstrates what was discussed
in the book.
Fortunately, dear reader, you can minimize the damage by bearing these things in mind:
1. Most of the concepts and techniques discussed here are fairly widespread. If Site A no longer
sports a nifty rollover technique we’ve described, you’ll probably find it at Site B or Site C. The
principles are more important than the specific examples.
2. Sites should not arbitrarily change page locations, but unfortunately, many do. If a particular web
page seems to have disappeared, try factoring the URL to a simpler version. For instance, if
www.yahoo.com/games/thrills/ no longer works, go back to its purest form, www.yahoo.com/,
and see if you can navigate to the page’s new location that way.
3. Finally, if a site we’ve hailed as an example of creative excellence or touted as a superb resource
for further learning seems to have disappeared, try visiting the zeldman.com Exit Gallery at
www.zeldman.com/exit.html. If the site is truly special and has moved to a new location on the
Web, you’ll find that new address in our Exit Gallery. If the site has actually changed its name,
we’ll mention the former name to help you get your bearings.
Now go forth, design, and conquer.
xx
00 0732 FM 4/24/01 1:38 PM Page xx