Effective Web Design Effective Web Design, Second Edition Ann Navarro SYBEX® Associate Publisher: Cheryl Applewood Contracts and Licensing Manager: Kristine O'Callaghan Acquisitions and Developmental Editor: Raquel Baker Editors: Joseph A Webb, James A Compton, Colleen Wheeler Strand Production Editor: Dennis Fitzgerald Technical Editor: Marshall Jansen Book Designer: Maureen Forys, Happenstance Type-O-Rama Graphic Illustrator: Tony Jonick Electronic Publishing Specialist: Maureen Forys, Happenstance Type-O-Rama Proofreaders: Nelson Kim, Nancy Riddiough, Leslie E.H Light Indexer: Ann Rogers CD Coordinator: Christine Harris CD Technician: Kevin Ly Cover Designer: Design Site Cover Illustrator/Photographer: Dan Bowman Copyright © 2001 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA 94501 World rights reserved page Effective Web Design The author(s) created reusable code in this publication expressly for reuse by readers Sybex grants readers limited permission to reuse the code found in this publication or its accompanying CD-ROM so long as (author(s)) are attributed in any application containing the reusable code and the code itself is never distributed, posted online by electronic transmission, sold, or commercially exploited as a standalone product Aside from this specific exception concerning reusable code, no part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic, or other record, without the prior agreement and written permission of the publisher An earlier version of this book was published under the title Effective Web Design © 1998 SYBEX Inc Library of Congress Card Number: 2001088112 ISBN: 0-7821-2849-1 SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc in the United States and/or other countries Screen reproductions produced with FullShot 99 FullShot 99 © 1991–1999 Inbit Incorporated All rights reserved FullShot is a trademark of Inbit Incorporated Screen reproductions produced with Collage Complete Collage Complete is a trademark of Inner Media Inc The CD interface was created using Macromedia Director, COPYRIGHT 1994, 1997-1999 Macromedia Inc For more information on Macromedia and Macromedia Director, visit http://www.macromedia.com Netscape Communications, the Netscape Communications logo, Netscape, and Netscape Navigator are trademarks of Netscape Communications Corporation Netscape Communications Corporation has not authorized, sponsored, endorsed, or approved this publication and is not responsible for its content Netscape and the Netscape Communications Corporate Logos are trademarks and trade names of Netscape Communications Corporation All other product names and/or logos are trademarks of their respective owners Internet screen shot(s) using Microsoft Internet Explorer 4.5 reprinted by permission from Microsoft Corporation TRADEMARKS: SYBEX has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software whenever possible Portions of the manuscript may be based upon prerelease versions supplied by software manufacturer(s) The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book Photographs and illustrations used in this book have been downloaded from publicly accessible file archives and are used in this book for news reportage purposes only to demonstrate the variety of graphics resources available via electronic access Text and images available over the Internet may be subject to copyright and other rights owned by third parties Online availability of text and images does not imply that they may be reused without the permission of rights holders, although the Copyright Act does permit certain unauthorized reuse as fair use under 17 U.S.C Section 107 Manufactured in the United States of America 10 Having a presence on the web is no longer the exception—it's the rule Everyone has web sites—even people's pets! Unfortunately, there is a huge difference between building a web site and building a good web site On the Internet you can find thousands of examples of poorly designed web sites with broken links, bad color schemes, inscrutable menus, and the like You can also find a few examples of really good web sites A good web site has a clean, functional design It is accessible by everyone It doesn't use proprietary features so that it is portable among operating systems and browsers If you are building a site for your page Effective Web Design pet, it may not be important to you that it be a good web site; if you are setting up an online take-out ordering system for your restaurant, it is essential After all, the goal of any web presence should be that your users are not distracted, can find what they want easily, and will continue to use your resource A clean, efficient, and portable design will help ensure your users have a positive experience Developing a good web site is not always easy—but it is almost always required Through Effective Web Design, you can learn the techniques that will make your web presence, whether for your pet or your restaurant, one that people will return to again and again —Shane McCarron, Applied Testing and Technology, Inc Editor, W3C Modularization of XHTML Proposed Recommendation Dedication To Scott Artigue, my favorite Cajun, who gave me the ability to find the peace of mind that let the words flow For Dave Navarro, my husband, business partner, and dearest friend, for putting up with all this again Now we can head under the sea for that cheeseburger in paradise —Ann Software License Agreement Terms and Conditions The media and/or any online materials accompanying this book that are available now or in the future contain programs and/or text files (the "Software") to be used in connection with the book SYBEX hereby grants to you a license to use the Software, subject to the terms that follow Your purchase, acceptance, or use of the Software will constitute your acceptance of such terms The Software compilation is the property of SYBEX unless otherwise indicated and is protected by copyright to SYBEX or other copyright owner(s) as indicated in the media files (the "Owner(s)") You are hereby granted a single-user license to use the Software for your personal, noncommercial use only You may not reproduce, sell, distribute, publish, circulate, or commercially exploit the Software, or any portion thereof, without the written consent of SYBEX and the specific copyright owner(s) of any component software included on this media In the event that the Software or components include specific license requirements or end-user agreements, statements of condition, disclaimers, limitations, or warranties ("End-User License"), those End-User Licenses supersede the terms and conditions herein as to that particular Software component Your purchase, acceptance, or use of the Software will constitute your acceptance of such End-User Licenses By purchase, use, or acceptance of the Software you further agree to comply with all export laws and regulations of the United States as such laws and regulations may exist from time to time Reusable Code in This Book The author created reusable code in this publication expressly for reuse for readers Sybex grants readers permission to reuse for any purpose the code found in this publication or its accompanying CDROM so long as the author is attributed in any application containing the reusable code, and the code itself is never sold or commercially exploited as a stand-alone product Software Support Components of the supplemental Software and any offers associated with them may be supported by the specific Owner(s) of that material but they are not supported by SYBEX Information regarding any available support may be obtained from the Owner(s) using the information provided in the appropriate read.me files or listed elsewhere on the media Should the manufacturer(s) or other Owner(s) cease to offer support or decline to honor any offer, SYBEX bears no responsibility This notice concerning support for the Software is provided for your information only SYBEX is not the agent or principal of the Owner(s), and SYBEX is in no way responsible for providing any support for the Software, nor is it liable or responsible for any support provided, or not provided, by the Owner(s) Warranty SYBEX warrants the enclosed media to be free of physical defects for a period of ninety (90) days after purchase The Software is not available from SYBEX in any other form or media than that enclosed herein or posted to www.sybex.com If you discover a defect in the media during this warranty period, page Effective Web Design you may obtain a replacement of identical format at no charge by sending the defective media, postage prepaid, with proof of purchase to: SYBEX Inc Customer Service Department 1151 Marina Village Parkway Alameda, CA 94501 (510) 523-8233 Fax: (510) 523-2373 e-mail: Web: http://www.sybex.com After the 90-day period, you can obtain replacement media of identical format by sending us the defective disk, proof of purchase, and a check or money order for $10, payable to SYBEX Disclaimer SYBEX makes no warranty or representation, either expressed or implied, with respect to the Software or its contents, quality, performance, merchantability, or fitness for a particular purpose In no event will SYBEX, its distributors, or dealers be liable to you or any other party for direct, indirect, special, incidental, consequential, or other damages arising out of the use of or inability to use the Software or its contents even if advised of the possibility of such damage In the event that the Software includes an online update feature, SYBEX further disclaims any obligation to provide this feature for any specific duration other than the initial posting The exclusion of implied warranties is not permitted by some states Therefore, the above exclusion may not apply to you This warranty provides you with specific legal rights; there may be other rights that you may have that vary from state to state The pricing of the book with the Software by SYBEX reflects the allocation of risk and limitations on liability contained in this agreement of Terms and Conditions Shareware Distribution This Software may contain various programs that are distributed as shareware Copyright laws apply to both shareware and ordinary commercial software, and the copyright Owner(s) retains all rights If you try a shareware program and continue using it, you are expected to register it Individual programs differ on details of trial periods, registration, and payment Please observe the requirements stated in appropriate files Copy Protection The Software in whole or in part may or may not be copy-protected or encrypted However, in all cases, reselling or redistributing these files without authorization is expressly forbidden except as specifically provided for by the Owner(s) therein Acknowledgments Any book project requires the effort and dedication of a great many people beyond the author credited on the front cover That includes editors, reviewers, publishers, production staff, and various contributors and personal supporters of the author This is where I get to acknowledge each of you for the role you've played in making this book the best that it could be At Sybex, thanks to Raquel Baker, my acquisitions editor; project manager Dennis Fitzgerald; editor Joe Webb; and technical editor Marshall Jansen Thanks goes to my agents David Rogelberg and Neil Salkind along with the support staff at Studio B Productions, who so deftly handle the business aspects of my writing career Your efforts clear the way for me to concentrate on transferring the thought from the brain, through the fingers, and into the computer I can't forget Tim Berners-Lee, for having invented that first system that blossomed into this incredible online world that we all now live in Many thanks must go to Shane McCarron, my friend and colleague on the W3C HTML Working Group, who went above and beyond the call of duty in surrendering numerous hours of his own scarce spare time helping me work through bugs, queries, and other trivia that results when writing about a specification that's not quite finalized Beyond your technical expertise, your wit helped to keep me afloat when I needed it most page Effective Web Design And finally, a very special thanks to Susan Zachman and Bob Kennedy; you know why —Ann Navarro page Effective Web Design Table of Contents Effective Web Design, Second Edition Introduction Part I XHTML Fundamentals Chapter - XHTML and the Cross-Compatibility Concept Chapter - Browser Basics Chapter - Designing with the XHTML Document Chapter - Working with Text and Images in XHTML Chapter - Creating Tables Chapter - Working with Frames Chapter - Style Sheets Chapter - Communicating through Forms Part II Chapter The Site Design Process - Navigating Your Site Chapter 10 - Search Engines Chapter 11 - Validating Your Work Chapter 12 - Knowing Your Audience Chapter 13 - Planning the Design of Your Web Site Chapter 14 - Effective Visual Presentation Chapter 15 - Making a Statement with Fonts Chapter 16 - Color on the Web Chapter 17 - Creating Professional Graphics Chapter 18 - Multimedia on the Web Chapter 19 - Doing Business on Your Site Chapter 20 - Accessibility Issues Part III Moving Forward with XHTML Chapter 21 - XHTML 1.1 and XHTML Modularization Chapter 22 - Creating Your Own XHTML Module Appendix A - XHTML Abstract Module Definitions Appendix B - XHTML Element and Attribute Quick Reference Color Section page Effective Web Design Introduction To get the most out of this book, please take the time to read these next few pages I'll discuss how the book came into being, who the intended audience is, and what you can expect to learn By reviewing these items, you'll know quickly when your expectations will be met and which portions of the book may be useful as a quick reference if you need to dive into a specific segment first before starting with Chapter Why This Book? This book was born out of the frustration of reading other texts on HTML and Web design and being told repeatedly that one had to perform one set of tasks in order for a site to look good in the Internet Explorer browser and one other set of tasks for the site to be viewed in the Navigator browser Surely, it wasn't necessary for designers to go to those lengths simply to produce a functional and effective Web site, was it? After much rumination and quite a bit of experimentation, I brought together techniques that obviated the need for such client-dependent authoring The result is known as the cross-compatibility concept Cross-compatibility relies on two basic principles: A valid document is exponentially more likely to perform as the author intended than an invalid document When a browser can't handle something in a valid document, perhaps because it's an older browser faced with new-yet-valid content, the result shall be a graceful degradation of the intended result or, at worst, simply passing the element content through in its original state to the browser By subscribing to the cross-compatibility concept, Web authors will rarely, if ever, need to provide browser-specific versions of their Web sites or exclude users who don't have a certain browser That, of course, is the essence of Effective Web Design Who Should Read This Book This book can serve two audiences The first group consists of those who are just coming into Web design or have traditionally relied upon design tools to create Web sites and for the first time want to learn how everything under the hood works The second audience is composed of designers who know HTML and have even written it by hand extensively but are now looking to learn the new XHTML specification, either as an end in itself or as a step toward working with XML Both the novice and the experienced designers should come away from this book with new knowledge and techniques to incorporate in their design arsenal Who Should Read This Book This book can serve two audiences The first group consists of those who are just coming into Web design or have traditionally relied upon design tools to create Web sites and for the first time want to learn how everything under the hood works The second audience is composed of designers who know HTML and have even written it by hand extensively but are now looking to learn the new XHTML specification, either as an end in itself or as a step toward working with XML Both the novice and the experienced designers should come away from this book with new knowledge and techniques to incorporate in their design arsenal Part I: XHTML Fundamentals HTML knowledge is not a prerequisite for learning from this book—hence this part on fundamentals However, the HTML enthusiast should not skip past this part You will learn about XHTML in the same fashion that you'd learn HTML, assimilating the changes between HTML and XHTML along the way The novice to either language will simply learn XHTML from the start and may find the references to the differences enlightening from a historical perspective Chapter The first chapter gives a short discussion of the history of HTML, beginning at the lab in Switzerland where Tim Berners-Lee first envisioned the system up to HTML and XML Chapter This chapter reviews the history and availability of Web browsers, including new advances in browsing from alternative devices such as PDAs and cellphones Chapter The third chapter teaches you how to build a basic XHTML document, beginning with selecting your editor and introducing the required segments of every XHTML document page Effective Web Design Chapter This chapter goes further into XHTML document content and covers text, images, and special characters Chapter The pages here present techniques for creating tables, including advanced features such as row or column grouping and shading and spacing options Chapter The chapter talks about working with frames, including creating the shell for the frameset and supplying content to the framed window spaces Chapter The seventh chapter tells you everything you need to know to get working with Cascading Style Sheets and presents a brief introduction to style in XML using the Extensible Stylesheet Language Chapter The last chapter of Part I introduces you to the world of user feedback through XHTML forms You'll learn how to collect data in a variety of formats Part II: The Site Design Process Knowing how to work with elements and attributes will get you started, but effective Web design also requires effective presentation Chapter Chapter discusses preproduction planning, designing navigational menus, and the construction of image maps used for navigation Chapter 10 The next chapter digs into the mechanics of search engines and Website indexers such as Yahoo! and Alta Vista Chapter 11 Chapter 11 introduces the process of validating your work and correcting errors both in your XHTML and CSS documents Chapter 12 The next chapter describes the information about your audience that you'll want to collect and how that data needs to be managed to secure privacy and user confidence Chapter 13 Planning is important, and Chapter 13 teaches you how to plan the design of your Website, step by step Chapter 14 The next chapter reviews effective visual-presentation techniques, including the use of images, text and white space, and designing to proven predefined grids Chapter 15 Chapter 15 covers the diversity of fonts available and tips for getting the most out of text for both design effect and readability Chapter 16 The next chapter provides a full primer on color theory as it applies to the output on a computer monitor or other digital-display device Chapter 17 Chapter 17 teaches how to create professional-looking graphics and examines the tools currently favored by Web designers and what to if drawing is not exactly your forte Chapter 18 The pages here review the advancements made in multimedia presentation on the Web, including Shockwave and Flash presentations and streaming video, and audio Chapter 19 Chapter 19 covers doing business on your site E-commerce options for the small business are discussed, including information on server security, shopping carts, and taxation issues Chapter 20 The last chapter in Part II looks at accessible design techniques, that is, providing for equal access for people with disabilities Accessible design techniques often mimic the needs of users of small or nontraditional devices such as WebTV, PDAs, and cellphones Part III: Moving Forward with XHTML In this section, I'll look at where XHTML is going, now that XHTML has become a full W3C Recommendation Many more features are coming out of the standards process, and this is your chance to learn what's on the cutting edge Chapter 21 Chapter 21 introduces the next wave of XHTML development: Modularization XHTML 1.1 is built using Modularization techniques to create a closer-to-XML version of XHTML than was found in XHTML Chapter 22 The last chapter guides you through the process of reading and authoring document type definitions, the basis of XHTML modules and XML documents Appendices Appendix A The XHTML Element and Attribute Reference is your one-stop source of quick information about each XHTML element and the attributes available for them Indicators for inclusion in XHTML Strict vs Transitional are also provided page Effective Web Design Appendix B Each of the Abstract Module Definitions found in the Modularization of XHTML specification is found here for easy reference Color Section This page section is a selection of images that bring you the most benefit when seen in color, versus the grayscale found elsewhere in the book What's on the CD-ROM The CD-ROM contains a series of files that will be used for the tutorials and exercises in the book In several places in the book, you will be directed to the CD-ROM, either to read a file at the beginning of an exercise or to see the illustrated result of an exercise I've included a copy of the most recent versions of popular browsers, so you can be sure to have the most up-to-date tools available while learning about XHTML You'll find XHTML design tools, such as text editors, validation tools, and other editing programs Graphics programs are also loaded on the CD, giving you a chance to try out some of the most popular programs available on the Web or at retail outlets Contacting the Author Ann may be reached at , or you can visit http://www.webgeek.com/books/ewd2/ Known errors, omissions, or other errata will be listed on the Web site until a new print run takes care of the matter Please check the Web site before reporting a problem Conventions Used in This Book Tips provide extra information that will be helpful in completing the task at hand When you see this icon, the note discusses matters pertaining to the cross-compatibility concept Warnings alert you to situations where particular care must be taken to avoid problems WWW The globe icon alerts you to where to find specific information and resources on the World Wide Web Sidebars Sidebars develop specific ideas and expand upon information that is related to the chapter's primary information Sidebars also present related troubleshooting techniques and sources for additional information As you read this book and learn about effective Web design, remember one thing above all—have fun! page Effective Web Design dfn Core Attribute Set Event Attribute Set I18N Attribute Set em Core Attribute Set Event Attribute Set I18N Attribute Set font (T) Core Attribute Set I18N Attribute Set size=CDATA color=color face=CDATA i Core Attribute Set Event Attribute Set I18N Attribute Set ins Core Attribute Set Event Attribute Set I18N Attribute Set cite=URI datetime=date/time value kbd Core Attribute Set Event Attribute Set I18N Attribute Set q Core Attribute Set Event Attribute Set I18N Attribute Set cite=URI s (T) Core Attribute Set Event Attribute Set I18N Attribute Set samp Core Attribute Set Event Attribute Set I18N Attribute Set small Core Attribute Set Event Attribute Set I18N Attribute Set span (T) Core Attribute Set Event Attribute Set I18N Attribute Set page 331 Effective Web Design strike (T) Core Attribute Set Event Attribute Set I18N Attribute Set strong Core Attribute Set Event Attribute Set I18N Attribute Set sub (T) Core Attribute Set Event Attribute Set I18N Attribute Set sup (T) Core Attribute Set Event Attribute Set I18N Attribute Set tt Core Attribute Set Event Attribute Set I18N Attribute Set u (T) Core Attribute Set Event Attribute Set I18N Attribute Set Images, Objects, and Applets applet (T) Core Attribute Set codebase=URI archive=CDATA code=CDATA object=CDATA alt=text name=NMTOKEN width=length height=length align=value hspace=pixels vspace=pixels area Core Attribute Set Event Attribute Set I18N Attribute Set shape=shape coords=coordinates href=URI nohref=nohref alt=text tabindex=number accesskey=character onfocus=script onblur=script target=name (T) page 332 Effective Web Design img Core Attribute Set Event Attribute Set I18N Attribute Set src=URI alt=text name=NMTOKEN (T) longdesc=URI height=length width=length usemap=URI ismap=ismap align=value (T) border=length (T) hspace=pixels (T) vspace=pixels (T) map Event Attribute Set I18N Attribute Set id=ID class=CDATA style=style sheet title=text name=CDATA object Core Attribute Set Event Attribute Set I18N Attribute Set declare=declare classid=URI codebase=URI data=URI type=content type codetype=content type archive=URI List standby=text height=length width=length usemap=URI name=NMTOKEN tabindex=number align=value (T) border=pixels (T) hspace=pixels (T) vspace=pixels (T) param id=ID name=CDATA value=CDATA valuetype=(data|ref|object) type=content type page 333 Effective Web Design Form Elements form Core Attribute Set Event Attribute Set I18N Attribute Set action=URI method=(get|post) name=NMTOKEN (T) enctype=content type onsubmit=script onreset=script accept=content types accept-charset=character set codes target=name (T) label Core Attribute Set Event Attribute Set I18N Attribute Set for=IDREF accesskey=character onfocus=script onblur=script input Core Attribute Set Event Attribute Set I18N Attribute Set type=text name=cdata value=CDATA checked=checked disabled=disabled readonly=readonly size=CDATA maxlength=number src=URI alt=CDATA usemap=URI tabindex=number accesskey=character onfocus=script onblur=script onselect=script onchange=script accept=content types align=value (T) select Core Attribute Set Event Attribute Set I18N Attribute Set name=CDATA size=number multiple=multiple disabled=disabled tabindex=number onfocus=script page 334 Effective Web Design onblur=script onchange=script optgroup Core Attribute Set Event Attribute Set I18N Attribute Set disabled=disabled label=text option Core Attribute Set Event Attribute Set I18N Attribute Set selected=selected disabled=disabled label=text value=CDATA textarea Core Attribute Set Event Attribute Set I18N Attribute Set name=CDATA rows=number cols=number disabled=disabled readonly=readonly tabindex=number accesskey=character onfocus=script onblur=script onselect=script onchange=script fieldset Core Attribute Set Event Attribute Set I18N Attribute Set legend Core Attribute Set Event Attribute Set I18N Attribute Set accesskey=character align=value (T) button Core Attribute Set Event Attribute Set I18N Attribute Set name=CDATA value=CDATA type=(button|submit|reset) disabled=disabled tabindex=number accesskey=character onfocus=script onblur=script page 335 Effective Web Design isindex (T) Core Attribute Set I18N Attribute Set prompt=text Table Elements table Core Attribute Set Event Attribute Set I18N Attribute Set summary=text width=length border=pixels frame=value rules=value cellspacing=length cellpadding=length align=value (T) bgcolor=color (T) caption Core Attribute Set Event Attribute Set I18N Attribute Set align=value (T) colgroup Core Attribute Set Event Attribute Set I18N Attribute Set span=number width=length align=value char=character charoff=length valign=value col Core Attribute Set Event Attribute Set I18N Attribute Set span=number width=length align=value char=character charoff=length valign=value thead Core Attribute Set Event Attribute Set I18N Attribute Set span=number width=length align=value char=character charoff=length page 336 Effective Web Design valign=value tfoot Core Attribute Set Event Attribute Set I18N Attribute Set span=number width=length align=value char=character charoff=length valign=value tbody Core Attribute Set Event Attribute Set I18N Attribute Set span=number width=length align=value char=character charoff=length valign=value tr Core Attribute Set Event Attribute Set I18N Attribute Set span=number width=length align=value char=character charoff=length valign=value bgcolor=color th Core Attribute Set Event Attribute Set I18N Attribute Set abbr=text axis=CDATA headers=IDREFS scope=value rowspan=number colspan=number span=number width=pixels align=value char=character charoff=length valign=value bgcolor=color (T) height=pixels (T) td Core Attribute Set Event Attribute Set I18N Attribute Set page 337 Effective Web Design abbr=text axis=CDATA headers=IDREFS scope=value rowspan=number colspan=number span=number width=pixels align=value char=character charoff=length valign=value bgcolor=color (T) height=pixels (T) Color Section In this section, I've selected images that bring you most benefit when you can see them in living color, versus the grayscale found elsewhere in the book Some images you'll recognize from chapters you've already read All the images demonstrate fundamental color pronciples and how color is rendered on the Web By studying these pages, I hope to leave you with some fresh ideas, and a kick-start for your own colorful imagination page 338 Effective Web Design page 339 Effective Web Design page 340 Effective Web Design page 341 Effective Web Design page 342 Effective Web Design page 343 Effective Web Design page 344 ... page Effective Web Design And finally, a very special thanks to Susan Zachman and Bob Kennedy; you know why —Ann Navarro page Effective Web Design Table of Contents Effective Web Design, Second Edition. . .Effective Web Design Effective Web Design, Second Edition Ann Navarro SYBEX® Associate Publisher: Cheryl Applewood Contracts... about effective Web design, remember one thing above all—have fun! page Effective Web Design Chapter 1: XHTML and the Cross-Compatibility Concept Overview What makes a specific Web design effective?