Taking Your Talent to the Web: A Guide for the Transitioning Designer- P1 ppt

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 [...]... 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... 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. .. 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... 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. .. 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... The Joy of JavaScript 271 271 273 274 274 276 276 277 278 280 281 282 283 284 285 What Is This Thing Called JavaScript? The Web Before JavaScript JavaScript, Yesterday and Today 286 286 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 Don’t Panic! 291 292 JavaScript Basics for Web Designers 292 The. .. 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,... 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,... 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. .. 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 . 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. 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,. 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, Shau- na