00 0732 FM 4/24/01 1:38 PM Page i Taking Your Talent to the Web A Guide for the Transitioning Designer By Jeffrey Zeldman 201 West 103rd Street, Indianapolis, Indiana 46290 00 0732 FM 4/24/01 1:38 PM Page ii Taking Your Talent to the Web: Publisher A Guide for the Transitioning Designer David Dwyer Copyright 2001 by New Riders Publishing Associate Publisher Al Valvano All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means—electronic, mechani- Executive Editor cal, photocopying, recording, or otherwise—without written permission Karen Whitehouse from the publisher. No patent liability is assumed with respect to the Acquisitions Editor use of the information contained herein. Although every precaution Michael Nolan 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- Technical Editor ability assumed for damages resulting from the use of the information Steve Champeon contained herein. Development Editor Victoria Elzey International Standard Book Number: 0-7357-1073-2 Product Marketing Library of Congress Catalog Card Number: 00-111152 Manager Kathy Malmloff Printed in the United States of America Managing Editor First Printing: May 2001 Sarah Kearns Project Editor 05 04 03 02 01 7 6 5 4 3 2 1 Jake McFarland Interpretation of the printing code: The rightmost double-digit number Copy Editor is the year of the book’s printing; the rightmost single-digit number is Chrissy Andry 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. Cover Designer Allison Cecil Trademarks Interior Designer All terms mentioned in this book that are known to be trademarks or Suzanne Pettypiece service marks have been appropriately capitalized. New Riders Publish- Compositor ing cannot attest to the accuracy of this information. Use of a term in Suzanne Pettypiece this book should not be regarded as affecting the validity of any trade- mark or service mark. Proofreader Jeannie Smith Warning and Disclaimer Indexers Every effort has been made to make this book as complete and as ac- Lisa Stumpf curate as possible, but no warranty of fitness is implied. The informa- Larry Sweazy 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. 00 0732 FM 4/24/01 1:57 PM Page iii 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 iv 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:38 PM Page v 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 vi 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 vii 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 viii 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 ix 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 x GIF 222 Loves logos, typography, and long walks in the woods 223 GIFs in Photoshop 224 JPEG, the Other