Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Professional Web Design: Techniques and Templates Fourth Edition Clint Eccher Course Technology PTR A part of Cengage Learning Australia • Brazil • Japan • Korea • Mexico • Singapore • Spain • United Kingdom • United States Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Professio nal Web Design: Techniques and Templates Clint Eccher Publisher and General Manager, Course Technology PTR: Stacy L. Hiquet Associate Director of Marketing: Sarah Panella Manager of Editorial Services: Heather Talbot Marketing Manager: Mark Hughes Acquisitions Editor: Heather Hurley Project and Copy Editor: Marta Justak Technical Reviewer: Eric Hunley Interior Layout Tech: MPS Limited, A Macmillan Company Cover Designer: Mike Tanamachi DVD-ROM Producer: Brandon Penticuff Indexer: Sharon Shock Proofreader: Heather Urschel † 2011 Course Technology, a part of Cengage Learning. ALL RIGHTS RESERVED. No part of this work covered by the copyright herein may be reproduced, transmitted, stored, or used in any form or by any means graphic, electronic, or mechanical, including but not limited to photocopying, recording, scanning, digitizing, taping, Web distribution, information networks, or information storage and retrieval systems, except as permitted under Section 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the publisher. For product information and technology assistance, contact us at Cengage Learning Customer & Sales Support, 1-800-354-9706 For permission to use material from this text or product, submit all requests online at cengage.com/permissions Further permissions questions can be emailed to permissionrequest@cengage.com All trademarks are the property of their respective owners. All images † Cengage Learning unless otherwise noted. Library of Congress Control Number: 2010928007 ISBN-13: 978-1-4354-5715-7 ISBN-10: 1-4354-5715-3 Course Technology, a part of Cengage Learning 20 Channel Center Street Boston, MA 02210 USA Cengage Learning is a leading provider of customized learning solutions with office locations around the globe, including Singapore, the United Kingdom, Australia, Mexico, Brazil, and Japan. Locate your local office at: international.cengage.com/region Cengage Learning products are represented in Canada by Nelson Education, Ltd. For your lifelong learning solutions, visit courseptr.com Visit our corporate website at cengage.com Printed in the United States of America 1234567121110 eISBN-10: 1-4354-5716-1 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Christian, I never thought I would meet a woman like you. I am so grateful for having met someone who has traveled so many roads in search of self-awareness and self-improvement. Your heart, humor, and humanity are unparalleled. You have changed my life forever. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Acknowledgments Nancy Eccher—For all the photography that proves your father lives in you. Daniel Yu—To the guy who started me down the Web road so many years ago. It’s hard to believe this journey all started with the Lynx browser. Mark Celano—For being my Italian Yoda. Derrick Kuhn, Scott Grant, Megan Refner, and Michael Haynie—For helping bring back the fun to Web design. Chen Sun—For being a forward-thinking marketer who has been there since the first edition. Mikayla Eccher—To the girl whose creativity inspires and reminds me daily of how lucky I am to be an artist. Heather Hurley—To the editor whose professionalism and follow-through has made the writing and editing of this edition as painless as possible. Marta Justak—For editing my p’s and q’s and 1’s and 2’s. For all of A5design’s clients over the years—without you, none of this would have occurred. iv Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. About the Author Clint Eccher (Fort Collins, CO) is an award-winning Web desi gner with more than 15 years of experience designing and dev eloping professional Web sites. He is the owner of A5design, a Web design company that not only subcontracts to various marketing, advertising, and IT organizations, but also is commissioned by Fortune 500 companies, local and national non-profit orga nizations, and small businesses for Web design and development. In addition to authoring Professional Web Design: Techniques and Templates (Third Edition), which has been published in five different languages, he is also the author of Advanced Professional Web Design: Techniques and Templates. v Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Contents Introduction . . xv Chapter 1 Overview of Web Development Today 1 Defining Web Design 2 Knowing the Seven Rules of Web Design 5 Understanding Three Web-Design Philosophies 6 Usability Philosophy 7 Pros and Cons 8 Multimedia Philosophy 12 Pros and Cons 13 Mortised Philosophy 14 Pros and Cons 15 Summary 17 Chapter 2 Designing for the Past, Present, and Future 19 Feeling Browser Pains 19 Incorporating Usage Statistics 22 Branching Pages 25 Understanding Bandwidth . 25 Building on Previous Design Weaknesses 28 IFrames and Frames 29 Image Buttons 30 Background Images 32 Uncontrolled Color . 36 vi Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Uncompressed Images 37 Thumbnails 38 Summary 40 Chapter 3 Things to Consider Before Beginning 41 Using Requirements 41 Collecting the Requirements 43 Obtaining Front-End Requirements 46 Creating a Flowchart 47 Knowing Bandwidth Requirements 47 Deciding on Resolution 50 Designing Fixed versus Relative Sites 55 Creating Versions of a Site to Satisfy Differing Resolutions . 57 Deciding on Color Depth 57 Designing for Scalability 60 Using Include Files . . 60 Creating a Flexible Design 62 Summary 65 Chapter 4 Enhancing Usability. . 67 Simplifying Architecture 67 Use a Consistent Naming Convention 68 Limit the Clicking . . . 69 Avoid Linking the User Out of the Section 69 Create Cascading Architecture versus Flat Architecture 71 Creating Layout. 72 Scrolling versus Nonscrolling 72 Pros of Scrolling 72 Cons of Scrolling 72 Positioning Content . 73 Developing Navigation 74 Creating Consistency 74 Using Text for Menu Items. 76 Deciding Whether to Use a Horizontal or Vertical Structure 76 Allowing Enough Width 77 Understanding the Different Types of Menus . 77 Designing for Accessibility. . . 79 Designing for Content 79 Summary 82 Contents vii Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 5 Gathering Requirements and Creating a Comp 83 Gathering and Basing a Site on Requirements 85 Creating a Comp for the Client 89 Creating a Source Directory 90 Collecting and Documenting Stock Images. . . 92 Selecting Colors 94 Deciding Layout . . . 95 Developing Layers. . 96 Using Masks 99 Receiving a Decision on the Chosen Comp and Making Edits 100 Summary 101 Chapter 6 What Is Needed to Build Mortised Sites 103 Understanding the Concept of Mortising Images 104 Understanding XHTML 113 Using a Limited Number of Tags. 114 Understanding Graphics . . . 114 Understanding CSS 114 Understanding CSS Terminology 116 CSS Used in This Book 117 Block- and Line-Level Tags. . 118 Understanding the DocType Declaration 118 Linking to CSS Style Sheets 118 Including Print Style Sheets 121 Understanding Include Files 123 Summary 124 Chapter 7 Understanding Graphics 125 Learning about Vector and Bitmap Images 125 Learning about JPGs, PNGs, and GIFs 128 Using PNGs and GIFs 128 Knowing How PNG and GIF Compression Work 134 Using JPGs 137 Saving a Photograph . . 138 Saving an Image That Has Gradations 138 Saving Text on Top of a Photo 142 Misusing Image Formats . . . 143 Understanding Graphics/Compression Software 151 Summary 153 Contentsviii Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 8 Creating CSS Designs. 155 CSS-Based Design Versus XHTML Table Design 155 Advantages of CSS Designs 156 Disadvantages of CSS Designs 156 The Basics of CSS-Based Design Works Versus XHTML Table-Based Design. . 157 Understanding the Box Model 170 When to Use Tables 176 Validating Code 176 Testing Designs in Various Browsers 177 Summary 178 Chapter 9 Case Study: Low-Content CSS Design 179 Understanding the Design’s Structure 180 The Reasoning Behind Guides and Creating Slices in Photoshop Files 180 Understanding the Placement of CSS Containers 183 Building the Structure 185 Creating the XHTML and CSS Framework 185 Adding the Header Content 188 Adding <DIV> in Which to Nest Left and Right Columns . . . 192 Creating the Left Column 194 Adding the Center (Right) Column 201 Constructing Second-Level Pages 207 Adding a Floating Container for Additional Content 214 Summary 222 Chapter 10 Case Study: Medium-Content CSS Design 223 Understanding the Design’s Structure 223 Reasoning Behind Guides and Creating Slices in a Photoshop File 224 Understanding the Placement of CSS Containers 226 Building the Structure 228 Creating the XHTML and CSS Framework 228 Adding the Left Column 230 Adding <DIV> to Nest Center and Inside-Right Columns. . . 236 Adding the Top-Right Images 237 Adding the Bottom, Center, and Right Content Areas 244 Constructing Second-Level Pages 253 Contents ix Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... on top of specifications and standards Web specifications and standards are constantly changing and will continue to do so The designer should have a basic understanding of the latest techniques, which will affect future work CSS-driven Web design is one such example, which is what the revision of this book explains While the first edition explained how to create table-driven Web designs, this edition... communicate as effectively as possible For the designer who produces highly professional creative work, the market still provides many, many opportunities To be able to produce such sites, though, a Web designer needs to have a thorough understanding of the basics of Web design Defining Web Design Web design is an ambiguous term Web professionals define it differently all the time While one might define... involves creating dynamic Web sites that use other programming languages, for example, NET, JSP (JavaServer Pages), PHP, and ColdFusion, to interact with databases and browsers, along with XHTML (Extensible Hypertext Markup Language) pages, graphics, and CSS (Cascading Style Sheets) A well-rounded Web designer, therefore, needs to understand many of the technical and artistic aspects of Web design, although... if he/she does enough Web design The tips and techniques included in this book come from many years of troubleshooting, pitfalls, and flat-out stupid mistakes They have been fine-tuned, however, through creative solutions and technical common sense After having read through this book, the reader will have a strong understanding of what it takes to create a highly professional Web site DVD-ROM Contents... position and style elements Understanding Three Web- Design Philosophies One helpful way of understanding the more than 180 million estimated Web sites in the world today is to divide them into three distinct philosophies: usability, multimedia, and mortised Depending on the designer, any of the three Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Understanding Three Web- Design... Chapter 1 ■ Overview of Web Development Today 4 Crossover experience is something a designer needs to always strive for Professional Web design requires an understanding of the user’s needs, regardless of how the designer personally believes the aesthetic and technical aspects of the site should be designed Whatever the issue may be, a designer benefits from a comprehensive understanding of the many technical... www.verypdf.com to remove this watermark Introduction The methods and processes in which professional Web sites are created have not changed much since the first edition of this book Designers still need to understand requirements, realize the technical pros and cons of layouts, create comps, save images using the correct file types, and test sites similarly to how they have for more than a decade Some... then the site is going to be more inflexible and, depending on the site’s requirements, impractical Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Defining Web Design Many of the technical and artistic issues that Web designers should consider are discussed throughout this book Here are a few examples and explanations of what a Web designer must consider before commencing... factors of any site: ■ Aesthetics: How professional is the look and feel of the site? Is it consistent with the desired branding of the business or individual? ■ Usability: How quickly and easily can a user find and process information while being able to perform necessary tasks? ■ Functionality: Programming should enable the functional aspects of the site, such as forms and database-driven content Because... this watermark 3 4 Chapter 1 ■ Overview of Web Development Today Figure 1.2 Site that focuses more on aesthetic aspects Figure 1.3 Web site that brings together both the aesthetic and technical aspects of design Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Knowing the Seven Rules of Web Design For example, in Figure 1.3, the color and line to the left of the cow repeat vertically . and small businesses for Web design and development. In addition to authoring Professional Web Design: Techniques and Templates (Third Edition), which. www.verypdf.com to remove this watermark. Professio nal Web Design: Techniques and Templates Clint Eccher Publisher and General Manager, Course Technology PTR: Stacy