Taking Your Talent to the Web- P1 pptx

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-

ing 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 trade-
mark or service mark.
Warning and Disclaimer
Every effort has been made to make this book as complete and as ac-
curate as possible, but no warranty of fitness is implied. The informa-
tion provided is on an “as is” basis. The authors and the publisher shall
have neither liability nor responsibility to any person or entity with re-
spect 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
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

Chapter 13 Never Can Say Goodbye 387
Index 403
00 0732 FM 4/24/01 1:57 PM Page iii
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
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

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
00 0732 FM 4/24/01 1:38 PM Page 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
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

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

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
00 0732 FM 4/24/01 1:38 PM Page 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
00 0732 FM 4/24/01 1:38 PM Page 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
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

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
00 0732 FM 4/24/01 1:38 PM Page 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
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

RealPlayer (www.real.com) 362
QuickTime (www.apple.com/quicktime/) 364
Windows Media Player (WMP)
( 367
Beatnik ( 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
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