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 [...]... PM Page xv 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... Windows on the World Get Your Together 307 308 Avoiding the Heartbreak of Linkitis 310 Browser Compensation JavaScript to the Rescue! Location, location, location 312 314 315 xi 00 0732 FM 4/24/01 1:38 PM Page xii Watching the Detection Going Global with JavaScript 321 Learning More 12 316 324 Beyond Text/Pictures 327 Prelude to the Afternoon of Dynamic Websites You Can Never Be Too Rich Media... the Salad? Web Designers and Plug-ins Making It Work: Providing Options The “Automagic Redirect” The iron-plated sound console from Hell 376 377 379 381 The Trouble with Plug-ins If Plug-ins Run Free 381 383 Parting Sermon 13 361 361 362 364 384 Never Can Say Goodbye 367 368 369 387 Separation Anxiety 387 From Tag Soup to Talk Soup: Mailing Lists and Online Forums A List Apart Astounding Websites The. .. Design, Programming, Content The Big Kahunas Beauty and Inspiration 393 393 395 396 The Independent Content Producer Refuses to Die! 401 Index 403 xiii 00 0732 FM 4/24/01 1:38 PM Page xiv 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),... 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 Dreaded Text Rollover The Event Handler Horizon Status Quo A Cautionary Note Kids, Try This at Home The fine print Return of the son of fine print The Not-So-Fine Print 294 295 297 299 299 299 300 300 The Ever-Popular Image Rollover A Rollover... Disadvantages of SSI 339 341 342 343 Cookin’ with Java Ghost in the Virtual Machine Where the web designer fits in Java Woes Java Woes: The Politically Correct Version Java Joys 343 344 346 347 347 349 Rich Media: Exploding the “Page” Virtual Reality Modeling Language (VRML) SVG and SMIL SMIL (through your fear and sorrow) SVG for You and Me Romancing the logo Sounds dandy, but will it work? Promises, Promises... 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,... 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 00 0732 FM... Dynamic Websites You Can Never Be Too Rich Media 329 330 The Form of Function: Dynamic Technologies Server-Side Stuff Where were you in ‘82? Indiana Jones and the template of doom Serving the project 330 331 332 332 334 Doing More Mini-Case Study: Waferbaby.com Mini-Case Study: Metafilter.com Any Size Kid Can Play 335 336 337 338 Take a Walk on the Server Side Are You Being Served? Advantages of SSI... Points of contention Point of no return: browsers of the year 2000 Pixels for fun and profit Absolute size keywords Relative keywords Length units Percentage units Looking Forward 11 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 . 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. 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,. 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