Taking Your Talent to the Web

A Guide for the Transitioning Designer

By Jeffrey Zeldman

201 West 103rd Street, Indianapolis, Indiana 46290

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, mechanical, 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 author assume no responsibility for errors or omissions. Neither is any liability 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 Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.

Warning and Disclaimer

Every effort has been made to make this book as complete and as accurate as possible, but no warranty of fitness is implied. The information provided is on an “as is” basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book.

Publisher

David Dwyer

Associate Publisher

Al Valvano

Executive Editor

Karen Whitehouse

Acquisitions Editor

Michael Nolan

Technical Editor

Steve Champeon

Development Editor

Victoria Elzey

Product Marketing

Manager

Kathy Malmloff

Managing Editor

Sarah Kearns

Project Editor

Jake McFarland

Copy Editor

Chrissy Andry

Cover Designer

Allison Cecil

Interior Designer

Suzanne Pettypiece

Compositor

Suzanne Pettypiece

Proofreader

Jeannie Smith

Indexers

Lisa Stumpf

Larry Sweazy

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
Chapter 13	Never Can Say Goodbye	387
Index		403

Table of Contents

	Introduction	1
Part I	WHY: Understanding the Web	3
1	Splash Screen	5
	Meet the Medium	6
	Expanding Horizons	7
	Working the Net…Without a Net	9
	Smash Your Altars	11
2 Designing for the Medium		13
	Breath Mint? Or Candy Mint?	14
	Where’s the Map?	19
	Mars and Venus	20
	Web Physics: Action and Interaction	20
	Different Purposes, Different Methodologies	23
	Web Agnosticism	23
	Open Standards—They’re Not Just for Geeks Anymore	27
	Point #1: The Web Is Platform-Agnostic	27
	Point #2: The Web Is Device-Independent	29
	Point #3: The Web Is Held Together by Standards	29
	The 18-Month Pregnancy	31
	Chocolatey Web Goodness	32
	’Tis a Gift to Be Simple	32
	Democracy, What a Concept	32
	Instant Karma	34
	The Whole World in Your Hands	35
	Just Do It: The Web as Human Activity	35
	The Viewer Rules	36
	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

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
Business as (Cruel and) Usual	71
The Rise of the Interface Department	72
Form and Function	74
Copycats and Pseudo-Scientists	77
Chaos and Clarity	78
A Design Koan: Interfaces Are a Means too Often Mistaken for an End	80
Universal Body Copy and Other Fictions	80
Interface as Architecture	81
Ten (Okay, Three) Points of Light	82
Be Easily Learned	82
Remain Consistent	82
Continually Provide Feedback	84
GUI, GUI, Chewy, Chewy	84
It’s the Browser, Stupid	85

v

	Clarity Begins at Home (Page)	87
	I Think Icon, I Think Icon	88
	Structural Labels: Folding the Director’s Chair	90
	The Soul of Brevity	90
	Hypertext or Hapless Text	91
	Scrolling and Clicking Along	95
	Stock Options (Providing Alternatives)	97
	Hierarchy and the So-Called Three Click Rule	97
	The So-Called Rule of Five	99
	Highlights and Breadcrumbs	101
	Consistent Placement	102
	Brand That Sucker!	103
Part II	WHO: People, Parts, and Processes	109
4	How This Web Thing Got Started	111
	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

	2000	121
	The year web standards broke, 1	121
	The year web standards broke, 2	122
	The year web standards broke, 3	122
	The year the bubble burst	122
	2001	122
5	The Obligatory Glossary	123
	Web Lingo	124
	Extranet	124
	HTML	125
	Hypertext, hyperlinks, and links	125
	Internet	125
	Intranet	126
	JavaScript, ECMAScript, CSS, XML, XHTML, DOM	127
	Web page	128
	Website	128
	Additional terminology	129
	Roles and Responsibilities in the Web World	129
	Web developer/programmer	129
	Project manager	130
	Systems administrator (sysadmin) and network administrator (netadmin)	131
	Web technician	131
	Your Role in the Web	133
6	What Is a Web Designer, Anyway?	135
	What We Have Here Is an Opportunity to Communicate	137
	The Definition Defined	138
	Look and feel	138
	Business-to-business	139
	Business-to-consumer	140
	Solve Communication Problems	140
	Brand identity	141
	Web-specific	141
	Restrictions of the Medium	142
	Technology	143
	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

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
The updating game	167
Create and provide documentation and style guides	168
Provide client training	169
Learn about your client’s methods	169
Work the Process	170

Part III HOW: Talent Applied (Tools & Techniques)	173
8 HTML, the Building Blocks of Life Itself	175
Code Wars	176
Table Talk	176
XHTML Marks the Spot	177
Minding Your <p>’s and q’s	178
Looking Ahead	179
Getting Started	181
View Source	183
A Netscape Bonus	184
The Mother of All View Source Tricks	184

viii

Doin’ it in Netscape	184
Doin’ it in Internet Explorer	185
Absolutely Speaking, It’s All Relative	185
What Is Good Markup?	188
What Is Sensible Markup?	189
HTML as a Design Tool	190
Plug-ins and Tables and Frames, Oh My!	193
The Frames of Hazard	194
Please Frame Safely	195
Framing Your Art	195
<META> <META> Hiney Ho!	197
Search Me	197
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

GIF	222
Loves logos, typography, and long walks in the woods	223
GIFs in Photoshop	224
JPEG, the Other White Meat	226
Optimizing GIFs and JPEGs	228
Expanding on Compression	231
Make your JPEGS smaller	231
Combining sharp and blurry	231
Compression Breeds Style: Thinking About the Medium	234
PNG	236
Animated GIFs	237
Creating Animations in ImageReady	238
Typography	239
The ABCs of Web Type	240
Anti-Aliasing	241
Specifying Anti-Aliasing for Type	243
General tips	244
General Hints on Type	244
The Sans of Time	244
Space Patrol	245
Lest We Fail to Repeat Ourselves	245
Accessibility, Thy Name Is Text	246
Navigation: Charting the Visitor’s Course	247
Slicing and Dicing	248
Thinking Semantically	251

10 Style Sheets for Designers	253
Tag Soup and Crackers	254
CSS to the Rescue…Sort of	256
Designing with Style: Cascading Style Sheets (CSS)	257
Separation of Style from Content	258
Disadvantages of Traditional Web Design Methods	258
CSS Advantages: Short Term	259
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

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
Don’t Panic!	292
JavaScript Basics for Web Designers	292
The Dreaded Text Rollover	294
The Event Handler Horizon	295
Status Quo	297
A Cautionary Note	299
Kids, Try This at Home	299
The fine print	299
Return of the son of fine print	300
The Not-So-Fine Print	300
The Ever-Popular Image Rollover	302
A Rollover Script from Project Cool	303
Windows on the World	307
Get Your <HEAD> Together	308
Avoiding the Heartbreak of Linkitis	310
Browser Compensation	312
JavaScript to the Rescue!	314
Location, location, location	315

xi

Watching the Detection	316
Going Global with JavaScript	321
Learning More	324

12 Beyond Text/Pictures	327
Prelude to the Afternoon of Dynamic Websites	329
You Can Never Be Too Rich Media	330
The Form of Function: Dynamic Technologies	330
Server-Side Stuff	331
Where were you in ‘82?	332
Indiana Jones and the template of doom	332
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

The Impossible Lightness of Plug-ins	361
Plug-ins Most Likely to Succeed	361
RealPlayer (www.real.com)	362
QuickTime (www.apple.com/quicktime/)	364
Windows Media Player (WMP)
(http://www.microsoft.com/windows/windowsmedia/)	367
Beatnik (http://www.beatnik.com/)	368
Shockwave/Flash
(www.macromedia.com, www.macromedia.com/software/flash/)	369
Who Makes the Salad? Web Designers and Plug-ins	376
Making It Work: Providing Options	377
The “Automagic Redirect”	379
The iron-plated sound console from Hell	381
The Trouble with Plug-ins	381
If Plug-ins Run Free	383
Parting Sermon	384

13 Never Can Say Goodbye	387
Separation Anxiety	387
From Tag Soup to Talk Soup: Mailing Lists and Online Forums	389
A List Apart	390
Astounding Websites	390
The Babble List	390
Dreamless	391
Evolt	391
Metafilter	391
Redcricket	392
Webdesign-l	392
When All Else Fails	392
Eye and Brain Candy: Educational and Inspiring Sites	393
Design, Programming, Content	393
The Big Kahunas	395
Beauty and Inspiration	396
The Independent Content Producer Refuses to Die!	401
Index	403

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 including 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

About the Technical Editor

Steve Champeon is the CTO of hesketh.com, a web services firm in Raleigh, NC, that specializes in distinctive B2B and corporate sites, vibrant online communities, and high impact applications. He has provided technical editing on the topics of XML, XHTML, and other web-related topics and was the development 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

Dedication

To Joan, whose love makes me feel happy and safe.

To my Dad, who taught me to be independent.

To my Mom, who loved books. I wish she could have seen this one.

xvi

Acknowledgments

I cannot possibly name all the people whose creativity has inspired me, or those I’ve been lucky enough to collaborate with over the years. It would take hundreds of pages to properly thank those I’ve worked with this year alone.

In childhood, I attended a wedding where the bride and groom thanked the special people in their lives. In the flush of the moment, they forgot to name one friend. He harbored a resentment that deepened over the years. Ultimately, a tragedy ensued, in which innocent bystanders lost their lives. But I digress.

Rather than make a similar mistake, I’m going to deliberately omit the names of many special people who contributed to my knowledge of the Web and thus, however unwittingly, to this book. Even if you are not named below, I love you and am grateful to you, and you should buy this book regardless.

To Steve Crozier of Populi, who envisioned an intelligent method of teaching web design, and to Margaret Alston and Cheryl Stockton, who collaborated with me on the development of the Populi Curriculum, my sincere and endless thanks.

My deep gratitude to Michael Nolan for asking me to write this book. To Michael and Karen Whitehouse for shepherding it safely through the minefields of the publishing industry. To development editor Victoria Elzey for keeping it real. And to my friend and this book’s technical editor Steven Champeon for finding all the mistakes and not telling anyone but me.

To my beloved friends Fred Gates, Leigh and TJ Baker-Foley, and Katherine Sullivan: thank you for sharing your lives, keeping me sane, and forgiving the disappearances, hibernation, and mood swings that accompanied the writing of this book.

To Jim, who asked only an occasional phone call and got nothing but months of silence: I wrote this book for you, I owe you more than these words express, and I promise to start calling again, really.

To Don Buckley, my friend and first web client, and to my first web design partners, Steve McCarron and Alec Pollak, sincere thanks and respect.

All web designers owe thanks to Glenn Davis for contributions too numerous to describe here. Similarly, respect and thanks to George Olsen, Teresa Martin, and Michael Sweeney. You know what you did.

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 going. And to the fine writers who make it worth reading, including Joe Clark, J. David Eisenberg, Curt

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, Erika 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 accommodations.

Thanks to Michael Schmidt and Toke Nygaard for the secret work you did on this book, for the incredible 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 always 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.

The paragraph above and the one you’re now reading constitute the toughest part of writing this book. In the six years I’ve spent designing websites, I’ve met or corresponded with tens of thousands of talented people, worked with or gotten close to hundreds. I can’t list you all. This is so painful I feel like canceling the book, but my publisher insists otherwise. Please accept these tragically empty paragraphs as my attempt to embrace you all in love and gratitude.

Love and thanks to Peyo Almqvist, Derek Powazek, Josh Davis, Heather Champ, Daniel Bogan, Craig Hockenberry, Lance Arthur, Michael Cina, Heather Hesketh, Dave Linabury, Dan Licht, Brian Alvey, Shauna Wright, Halcyon, Hasan, Matt, Jason, Big Dave, Lmichelle, Fish Sauce, Toke, Michael, Leigh, and Uncle Joe.

xviii

Foreword

I wrote this book for four people:

For Jim, a print designer who’s tired of sending his clients to someone else when they need a website.

For Sandi, a gifted art director, who’s hit a wall in her advertising career, and is eager to move into fulltime interactive design.

For Billy, whose spare-time personal site has gotten so good, he’d like to become a professional web designer—but is unsure about what is expected or how to proceed.

And for Caroline, a professional web designer who wants to better understand how the medium works and where it is going.

I did not make up these names or descriptions: These are real people. I knew the book was finished when it had covered everything they needed to know.

An entire curriculum, a year of work and thought, and 100 years of professional experience (mine, my editors’, and my collaborators’) have gone into this book.

Enjoy.

Jeffrey Zeldman

1 April 2001

New York City

xix

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 decision, 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