The Art & Science of Web Design

.headerlink { font-family: Verdana, Arial, ; font-size: 9px; color: #33CCFF; text-decoration: .sublinks { font-family: Verdana, Arial, H; text-decoration: none} .seperator { font-family: Verdana, Arial, } .links { font-family: Verdana, Arial, } .navform { font-family: Verdana, Arial, ; VEEN font-size: 10px; color: #ff9900; text-} .date { font-family: Verdana, Arial, Helvetica, color: #ff9900; text-decoration: none} .line { font-family: Verdana, Arial, Helvetica, } --></style> <script language="Javascript"> <td bgcolor=#336699 width=5 Art <td bgcolor=#FF9900 valign=top rowspan=5><a href="http://www.hotwired.com/webmonkey/index.htm src="http://a1112.g.akamai.net/7/1112/492/0201200 height=173 border=0 alt="Webmonkey"></a></td> <td bgcolor=#336699><table cellpadding=0 cellspac <iframe src="http://ln.doubleclick.net/adi/wm.ln/ & </td><td><img src="http://a1112.g.akamai.net/7/11 </table></td><td bgcolor=#336699><img src="http:/ <td bgcolor=#336699 width=50%><img src="http://a1 </tr><tr> Science <td bgcolor=#FFFF66 width=50%><img src="http://a1 </tr><tr><td bgcolor="#FF9900" width="50%"><img s <td bgcolor="#FF9900"><table border="0" cellpaddi src="http://a1112.g.akamai.net/7/1112/492/0201200 border="0" alt="Webmonkey"></a></td><td valign=bo <tr><td rowspan="3" bgcolor="#663300"><img src="h <td bgcolor=#663300><table border="0" cellpadding cellspacing="0"><tr><td><font size="1" face="Verd color="#FF9900"><div class="navform"><b>SEARCH WE <td bgcolor="#663300"><table border="0" cellpaddi <td rowspan="3" bgcolor="#663300"><img src="http <tr><td valign="bottom" bgcolor="#CC6600"> <table cellpadding="0" cellspacing="2" border="0" name="search"><td valign=bottom><font face="Verda of size="1"><div class="searchforms"><input type=hid <td valign=bottom><font size="1" face="Verdana,Ar </tr><tr><td colspan=2><font face=Verdana,Arial s href="http://r.hotwired.com/r/hw_wm_r_atomz/http </form></tr></table> Web Design Web </td><td valign="top" bgcolor="#CC6600"> <table cellpadding="0" cellspacing="2" border="0"><tr><form name="RedirectSearch" metho <div id="container"> <font size=1 face=Verdana,Arial,Helvetica color=# <img src="http://a1112.g.akamai.net/7/1112/492/02 name="instructions"> <div id="authoring" style="display: block" class= src="http://a1112.g.akamai.net/7/1112/492/0201200 name="authoringImg" align="absmiddle"><a href="/webmonkey/authoring/index.html" onclick="W class="headerlink" onmouseover="WM_imageSwap('ins 'http://a1112.g.akamai.net/7/1112/492/02012000/st <div id="authoringContent" style="display: none" <a href="/webmonkey/authoring/html_basics" class= <a href="/webmonkey/authoring/tables" class="subl <a href="/webmonkey/authoring/frames" class="subl <a href="/webmonkey/authoring/browsers/" class="s <a href="/webmonkey/authoring/tools/" class="subl <a href="/webmonkey/authoring/stylesheets" class= <a href="/webmonkey/authoring/dynamic_html" class <a href="/webmonkey/authoring/xml" class="sublink </div> <div id="design" style="display: block" class="he src="http://a1112.g.akamai.net/7/1112/492/0201200 align="absmiddle"><a href="/webmonkey/design" onclick="WM_collapse(2); return false" class="hea onmouseover="WM_imageSwap('instructions', 'http:/ onmouseout="WM_imageSwap('instructions', 'http://a1112.g.akamai.net/7/1112/492/02012000/st <div id="designContent" style="display: none" cla <a href="/webmonkey/design/site_building/" class= <a href="/webmonkey/design/graphics/" class="subl <a href="/webmonkey/design/fonts/" class="sublink </div> <div id="multimedia" style="display: block" class src="http://a1112.g.akamai.net/7/1112/492/0201200 name="multimediaImg" align="absmiddle"><a href="/webmonkey/multimedia/" onclick="WM_collaps class="headerlink" onmouseover="WM_imageSwap('ins 'http://a1112.g.akamai.net/7/1112/492/02012000/st ASWD_001121.qxd 11/27/00 11:17 AM Page 2 ASWD_001121.qxd 11/27/00 11:17 AM Page ii The Art & Science of Web Design Copyright © 2001 by Jeffrey Veen 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 For everyone who has ever looked at the Web and asked responsibility for errors or omissions. Nor is any liability assumed for damages resulting “Why?” rather than “How?” from the use of the information contained herein. International Standard Book Number: 0-7897-2370-0 Library of Congress Catalog Card Number: 99-069020 Printed in the United States of America First Printing: December, 2000 01 00 99 4 3 2 1 Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Que 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 or fitness is implied. The information provided is on an “as is” basis. The author 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. Executive Editor Karen Whitehouse Acquisitions Editor Michael Nolan Interior Design & Production by Douglas Bowman Indexing by Aamir Burki Proofreading by Victoria Elzey Cover by Jeffrey Veen Cover Image Wendy Skratt ASWD_001121.qxd 11/27/00 11:17 AM Page iv Contents Acknowledgments vii Introduction ix [ 1 ] Foundations 1 Good design comes from a deep understanding of the technologies behind the scenes. [ 2 ] Interface Consistency 30 Learning from convention will make your site better. [ 3 ] Structure 72 Information Architecture defined—from the Web’s biggest sites, to the simplest user experience, to an XML-enabled future. [ 4 ] Behavior 102 Designing with interactivity and self-aware content. [ 5 ] Browsers 134 With so many broken browsers, you’ll need a strategy for designing for them all. [ 6 ] Speed 168 The performance of your Web site is the most critical factor of its success. [ 7 ] Advertising 190 Being commercial is a reality. Is your site as effective as it could be? [ 8 ] Object-Oriented Publishing 212 Harness the power of dynamic, database-driven Web sites. Index 247 ASWD_001121.qxd 11/27/00 11:17 AM Page vi vi vii Acknowledgments “If I have seen further, it is by standing on the shoulders of giants.” — Isaac Newton, 1676 This book would not have been possible without years of collaboration with some of the most talented people in the industry. Specifically, I am eternally grateful to have had the opportunity to work with HotWired’s creative director Barbara Kuhr. Not only did she spark many of the theories and processes in this book, but put together an unbelievably competent and articulate design team. Two of those design- ers in particular, Eric Eaton and Douglas Bowman, have been indispensable sources of inspiration. Doug also designed this book, and spent long hours making sure every detail was perfect. I’m also thankful that I was able to convince Steven Champeon to edit this book. He suffered through countless iterations and desperate phone calls when I couldn’t find the words for the ideas I had. He has inspired much of this work, and has pointed me in the right direction on matters of small-batch bourbon and alternative country music. The folks at New Riders have been a joy to work with. Michael Nolan and Karen Whitehouse encouraged me to take on this project and pushed me to make it the best it could be. They also took me out to dinner a lot, which really helps. I also had many, many conversations during the writing of this book that helped to make it what it is. Among those who’s opinion I value are Joel Truher, Peter Merholz, Taylor, Tim Gasperak, Christina Wodke, Jon Littell, Drue Miller, Steven Johnson, Mike Kuniavsky, Nadav Savio, ASWD_001121.qxd 11/27/00 11:17 AM Page viii viii ix Jonathan Louie, Lance Arthur, John Shiple, Jesse James Introduction Garret, Alex Wright, Margaret Gould Stewart, Michael Kay, Kim Ladin, Frank Leahy, Dave Hendry, Michael Sippey, Greg Veen, Mark Hurst, June Cohen, David Reid, Jeffrey Zeldman, Derek Powazek, and a bunch of others whose names I’ve undoubtedly missed. Finally, none of this would have ever been possible without the unrelenting support and encouragement of my wife He is well-dressed, confident, standing before the staff Leslie. Thank you for reading chapter after chapter, telling meeting ready to present a “revolutionary change in how we me when things were good and bad, and not letting me drop view this company’s very identity.” The conference room out of school all those years ago. lights are dimmed and the LCD projector is humming. Someone types a URL into the 20 square feet of browser on the screen, and up pops one of those sites. “Loading...” the screen reports, and there’s a bit of nervous chatter in the room as half a meg of multimedia streams through the cor- porate T1. Suddenly the screen explodes into spinning text and bright-colored objects careening onto the page. A tech- no music loop thumps along as executives around the table lean in. “This is,” says the proud presenter, “EXACTLY what we should be doing online!” “Actually,” you shout over the maddening music, “this is the LAST thing we should EVER do with our online pres- ence.” The music stops.

The Art & Science of Web Design

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support