Taking Your Talent to the Web- P1 pptx

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 permis

By Jeffrey Zeldman

201 West 103rd Street, Indianapolis, Indiana 46290

Taking Your Talent to the

Web

A Guide for the Transitioning Designer

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 20001-1.

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

Contents at a Glance

Part I WHY: Understanding the Web

Part II WHO: People, Parts, and Processes

Part III HOW: Talent Applied (Tools & Techniques)

Table of Contents

Meet the Medium 6 Expanding Horizons 7 Working the Net…Without a Net 9 Smash Your Altars 11

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

It’s Still the Bandwidth, Stupid 45

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

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

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

2000 121

2001 122

Web Lingo 124

Extranet 124

Internet 125 Intranet 126

Website 128

Roles and Responsibilities in the Web World 129

Systems administrator (sysadmin) and network administrator (netadmin) 131

Your Role in the Web 133

What We Have Here Is an Opportunity to Communicate 137 The Definition Defined 138

Business-to-business 139 Business-to-consumer 140

Solve Communication Problems 140

Web-specific 141

Restrictions of the Medium 142

Technology 143

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

Design 156

Development 162

Testing 166 Deployment 166

Create and provide documentation and style guides 168

Work the Process 170

Part III HOW: Talent Applied (Tools & Techniques) 173

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

Doin’ it in Netscape 184

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

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

JPEG, the Other White Meat 226 Optimizing GIFs and JPEGs 228 Expanding on Compression 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 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

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

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

Font Size Challenges 276

Looking Forward 284

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

xi

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

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

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

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

SVG for You and Me 354

Promises, Promises 358 Turn on, Tune in, Plug-in 358

A Hideous Breach of Reality 360

The Impossible Lightness of Plug-ins 361 Plug-ins Most Likely to Succeed 361

Windows Media Player (WMP) (http://www.microsoft.com/windows/windowsmedia/) 367

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 Trouble with Plug-ins 381

If Plug-ins Run Free 383 Parting Sermon 384

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

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.

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