- •Taking Your Talent to the Web
- •Introduction
- •1 Splash Screen
- •Meet the Medium
- •Expanding Horizons
- •Working the Net…Without a Net
- •Smash Your Altars
- •Breath Mint? Or Candy Mint?
- •Where’s the Map?
- •Mars and Venus
- •Web Physics: Action and Interaction
- •Different Purposes, Different Methodologies
- •Web Agnosticism
- •Point #1: The Web Is Platform-Agnostic
- •Point #2: The Web Is Device-Independent
- •The 18-Month Pregnancy
- •Chocolatey Web Goodness
- •’Tis a Gift to Be Simple
- •Democracy, What a Concept
- •Instant Karma
- •The Whole World in Your Hands
- •Just Do It: The Web as Human Activity
- •The Viewer Rules
- •Multimedia: All Talking! All Dancing!
- •The Server Knows
- •It’s the Bandwidth, Stupid
- •Web Pages Have No Secrets
- •The Web Is for Everyone!
- •Swap text and code for images
- •Prune redundancy
- •Cache as Cache Can
- •Much Ado About 5K
- •Screening Room
- •Liquid Design
- •Color My Web
- •Thousands Weep
- •Gamma Gamma Hey!
- •Typography
- •The 97% Solution
- •Points of Distinction
- •Year 2000—Browsers to the Rescue
- •Touch Factor
- •Appropriate Graphic Design
- •User Knowledge
- •What Color Is Your Concept?
- •Business as (Cruel and) Usual
- •The Rise of the Interface Department
- •Form and Function
- •Copycats and Pseudo-Scientists
- •Chaos and Clarity
- •A Design Koan: Interfaces Are a Means too Often Mistaken for an End
- •Universal Body Copy and Other Fictions
- •Interface as Architecture
- •Ten (Okay, Three) Points of Light
- •Be Easily Learned
- •Remain Consistent
- •Continually Provide Feedback
- •GUI, GUI, Chewy, Chewy
- •It’s the Browser, Stupid
- •Clarity Begins at Home (Page)
- •I Think Icon, I Think Icon
- •Structural Labels: Folding the Director’s Chair
- •The Soul of Brevity
- •Hypertext or Hapless Text
- •Scrolling and Clicking Along
- •Stock Options (Providing Alternatives)
- •The So-Called Rule of Five
- •Highlights and Breadcrumbs
- •Consistent Placement
- •Brand That Sucker!
- •Why We Mentioned These Things
- •The year web standards broke, 1
- •The year web standards broke, 2
- •The year web standards broke, 3
- •The year the bubble burst
- •5 The Obligatory Glossary
- •Web Lingo
- •Extranet
- •HTML
- •Hypertext, hyperlinks, and links
- •Internet
- •Intranet
- •JavaScript, ECMAScript, CSS, XML, XHTML, DOM
- •Web page
- •Website
- •Additional terminology
- •Web developer/programmer
- •Project manager
- •Systems administrator (sysadmin) and network administrator (netadmin)
- •Web technician
- •Your Role in the Web
- •Look and feel
- •Business-to-business
- •Business-to-consumer
- •Solve Communication Problems
- •Brand identity
- •Restrictions of the Medium
- •Technology
- •Works with team members
- •Visually and emotionally engaging
- •Easy to navigate
- •Compatible with visitors’ needs
- •Accessible to a wide variety of web browsers and other devices
- •Can You Handle It?
- •What Is the Life Cycle?
- •Why Have a Method?
- •We Never Forget a Phase
- •Analysis (or “Talking to the Client”)
- •The early phase
- •Design
- •Brainstorm and problem solve
- •Translate needs into solutions
- •Sell ideas to the client
- •Identify color comps
- •Create color comps/proof of concept
- •Present color comps and proof of concept
- •Receive design approval
- •Development
- •Create all color comps
- •Communicate functionality
- •Work with templates
- •Design for easy maintenance
- •Testing
- •Deployment
- •The updating game
- •Create and provide documentation and style guides
- •Provide client training
- •Learn about your client’s methods
- •Work the Process
- •Code Wars
- •Table Talk
- •XHTML Marks the Spot
- •Minding Your <p>’s and q’s
- •Looking Ahead
- •Getting Started
- •View Source
- •A Netscape Bonus
- •The Mother of All View Source Tricks
- •Doin’ it in Netscape
- •Doin’ it in Internet Explorer
- •Absolutely Speaking, It’s All Relative
- •What Is Good Markup?
- •What Is Sensible Markup?
- •HTML as a Design Tool
- •The Frames of Hazard
- •Please Frame Safely
- •Framing Your Art
- •<META> <META> Hiney Ho!
- •Search Me
- •Take a (Re)Load Off
- •WYSIWYG, My Aunt Moira’s Left Foot
- •Code of Dishonor
- •WYS Is Not Necessarily WYG
- •Publish That Sucker!
- •HTMHell
- •9 Visual Tools
- •Photoshop Basics: An Overview
- •Comp Preparation
- •Dealing with Color Palettes
- •Exporting to Web-Friendly Formats
- •Gamma Compensation
- •Preparing Typography
- •Slicing and Dicing
- •Rollovers (Image Swapping)
- •GIF Animation
- •Create Seamless Background Patterns (Tiles)
- •Color My Web: Romancing the Cube
- •Dither Me This
- •Death of the Web-Safe Color Palette?
- •A Hex on Both Your Houses
- •Was Blind, but Now I See
- •From Theory to Practice
- •Format This: GIFs, JPEGs, and Such
- •Loves logos, typography, and long walks in the woods
- •GIFs in Photoshop
- •JPEG, the Other White Meat
- •Optimizing GIFs and JPEGs
- •Expanding on Compression
- •Make your JPEGS smaller
- •Combining sharp and blurry
- •Animated GIFs
- •Creating Animations in ImageReady
- •Typography
- •The ABCs of Web Type
- •Anti-Aliasing
- •Specifying Anti-Aliasing for Type
- •General tips
- •General Hints on Type
- •The Sans of Time
- •Space Patrol
- •Lest We Fail to Repeat Ourselves
- •Accessibility, Thy Name Is Text
- •Slicing and Dicing
- •Thinking Semantically
- •Tag Soup and Crackers
- •CSS to the Rescue…Sort of
- •Separation of Style from Content
- •CSS Advantages: Short Term
- •CSS Advantages: Long Term
- •Compatibility Problems: An Overview
- •Working with Style Sheets
- •Types of Style Sheets
- •External style sheets
- •Embedding a style sheet
- •Adding styles inline
- •Fear of Style Sheets: CSS and Layout
- •Fear of Style Sheets: CSS and Typography
- •Promise and performance
- •Font Size Challenges
- •Points of contention
- •Point of no return: browsers of the year 2000
- •Absolute size keywords
- •Relative keywords
- •Length units
- •Percentage units
- •Looking Forward
- •11 The Joy of JavaScript
- •What Is This Thing Called JavaScript?
- •The Web Before JavaScript
- •JavaScript, Yesterday and Today
- •Sounds Great, but I’m an Artist. Do I Really Have to Learn This Stuff?
- •Educating Rita About JavaScript
- •Don’t Panic!
- •JavaScript Basics for Web Designers
- •The Dreaded Text Rollover
- •The Event Handler Horizon
- •Status Quo
- •A Cautionary Note
- •Kids, Try This at Home
- •The Not-So-Fine Print
- •The Ever-Popular Image Rollover
- •A Rollover Script from Project Cool
- •Windows on the World
- •Get Your <HEAD> Together
- •Avoiding the Heartbreak of Linkitis
- •Browser Compensation
- •JavaScript to the Rescue!
- •Location, location, location
- •Watching the Detection
- •Going Global with JavaScript
- •Learning More
- •12 Beyond Text/Pictures
- •You Can Never Be Too Rich Media
- •Server-Side Stuff
- •Where were you in ‘82?
- •Indiana Jones and the template of doom
- •Serving the project
- •Doing More
- •Mini-Case Study: Waferbaby.com
- •Any Size Kid Can Play
- •Take a Walk on the Server Side
- •Are You Being Served?
- •Advantages of SSI
- •Disadvantages of SSI
- •Cookin’ with Java
- •Ghost in the Virtual Machine
- •Java Woes
- •Java Woes: The Politically Correct Version
- •Java Joys
- •Rich Media: Exploding the “Page”
- •Virtual Reality Modeling Language (VRML)
- •SVG and SMIL
- •SMIL (through your fear and sorrow)
- •Romancing the logo
- •Sounds dandy, but will it work?
- •Promises, Promises
- •Turn on, Tune in, Plug-in
- •A Hideous Breach of Reality
- •The ubiquity of plug-ins
- •The Impossible Lightness of Plug-ins
- •Plug-ins Most Likely to Succeed
- •Making It Work: Providing Options
- •The “Automagic Redirect”
- •The iron-plated sound console from Hell
- •The Trouble with Plug-ins
- •If Plug-ins Run Free
- •Parting Sermon
- •13 Never Can Say Goodbye
- •Separation Anxiety
- •A List Apart
- •Astounding Websites
- •The Babble List
- •Dreamless
- •Evolt
- •Redcricket
- •Webdesign-l
- •When All Else Fails
- •Design, Programming, Content
- •The Big Kahunas
- •Beauty and Inspiration
- •Index
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