Extracted from: Web Design for Developers A Programmer s Guide to Design Tools and Techniques This PDF file contains pages extracted from Web Design for Developers, published by the Pragmatic Bookshelf. For more information or to purchase a paperback or PDF copy, please visit http://www.pragprog.com. Note: This extract contains some colored text (particularly in code listing). This is available only in online versions of the books. The printed versions are black and white. Pagination might vary between the online and printer versions; the content is otherwise identical. Copyright 2009 The Pragmatic Programmers, LLC. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf and the linking g device are trademarks of The Pragmatic Programmers, LLC. Every precaution was taken in the preparation of this book. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein. Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://www.pragprog.com Copyright 2009 Brian P. Hogan. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of the publisher. Printed in Canada. ISBN-10: 1-934356-13-1 ISBN-13: 978-1-9343561-3-5 Printed on acid-free paper. P1.0 printing, December 2009 Version: 2009-12-21
Contents 1 Introduction 15 1.1 Before We Get Started..................... 15 1.2 The Design Process in Action............... 16 1.3 YourFoodbox.com...................... 18 1.4 Ready to Go?......................... 19 1.5 Acknowledgments...................... 19 I The Basics of Design 21 2 The Basics of Site (Re)design: Redesigning Foodbox 22 2.1 The Existing Site...................... 22 2.2 Gathering Requirements.................. 25 2.3 Know Your Purpose..................... 26 2.4 Where to Go from Here................... 28 2.5 Sketching Your Ideas.................... 29 2.6 Sketch Selection....................... 33 2.7 Summary........................... 33 3 Choosing Colors 35 3.1 The Basics of Color..................... 35 3.2 Color Context........................ 38 3.3 Evoking Emotion with Color................ 39 3.4 Color Schemes........................ 43 3.5 The Web-Safe Color Palette................ 48 3.6 Building Color Schemes.................. 49 3.7 Choosing Your Scheme................... 60 3.8 Summary........................... 63
CONTENTS 10 4 Fonts and Typography 64 4.1 Font Anatomy........................ 64 4.2 Font Types.......................... 65 4.3 Dealing with Font Limitations............... 67 4.4 Selecting Our Fonts..................... 71 4.5 Using the Baseline Grid.................. 73 4.6 Summary........................... 78 II Adding Graphics 79 5 Designing the Foodbox Logo 80 5.1 Setting Up a Working Folder................ 80 5.2 The Foodbox Logo...................... 81 5.3 What If We Need to Create Our Own Logo?....... 86 5.4 Summary........................... 87 6 Design Mock-up: The Structure 88 6.1 A Bit About Layers..................... 88 6.2 The Basic Structure.................... 89 6.3 Placing the Logo....................... 95 6.4 Organizing Our Composition with Layer Groups.... 96 6.5 Adding a Reflection to Our Logo............. 96 6.6 The Footer.......................... 98 6.7 Wrapping Up......................... 98 7 Design Mock-up: The Content 99 7.1 Creating the Search Box.................. 99 7.2 The Browse Recipes Tag Cloud.............. 101 7.3 Scope Creep......................... 102 7.4 Mocking Up a Tasty Masthead.............. 102 7.5 Main Content........................ 105 7.6 Simulating the Browser.................. 106 7.7 Summary........................... 108 CLICK HERE to purchase this book now.
CONTENTS 11 8 Putting the Finishing Touches on the Mock-Up 109 8.1 Creating the Search Icon.................. 109 8.2 Creating the Sign-up and Login Buttons........ 114 8.3 You ve Got Content!..................... 117 8.4 Summary........................... 119 III Building the Site 120 9 Building the Home Page with HTML 121 9.1 Working with Web Standards............... 122 9.2 The Home-Page Structure................. 123 9.3 Semantic Markup...................... 124 9.4 The Home-Page Skeleton.................. 126 9.5 The Header.......................... 136 9.6 The Sidebar......................... 137 9.7 The Main Content...................... 143 9.8 The Footer.......................... 147 9.9 Validating Your Markup.................. 151 9.10 HTML 5............................ 153 9.11 Summary........................... 156 10 Creating Assets from Our Mock-Up 157 10.1 Graphics Optimization................... 157 10.2 Dealing with Different Graphics Formats........ 159 10.3 Slicing Up Our Document................. 163 10.4 Creating Slices....................... 163 10.5 Extracting the Banner as a Transparent PNG..... 166 10.6 Exporting the Rest of the Elements............ 168 10.7 Summary........................... 169 11 Defining Your Layout with CSS 170 11.1 Browsers Are Awful..................... 170 11.2 The Basics of CSS...................... 171 11.3 How Browsers Use CSS.................. 177 11.4 Creating and Linking a New CSS Style Sheet...... 180 11.5 Defining the Basic Structure, Header, and Footer... 181 11.6 Turning One Column into Two.............. 186 11.7 Applying Margins to Content............... 191 11.8 Main Content........................ 192 11.9 Revisiting the Footer.................... 195 11.10 Summary........................... 195 CLICK HERE to purchase this book now.
CONTENTS 12 12 Replacing the Section Headings Using the Cover-up Method 196 12.1 The Cover-up Method Explained............. 196 12.2 Preparing the HTML to Be Replaced........... 196 12.3 Covering the Text...................... 197 12.4 Replacing the Other Headings............... 197 12.5 Replacing Links....................... 199 12.6 Downsides of This Method................. 200 12.7 Summary........................... 200 13 Adding Styles 201 13.1 Setting Up the Colors and Fonts............. 201 13.2 The Tag Clouds....................... 204 13.3 The Search Form...................... 205 13.4 The Footer.......................... 206 13.5 Cleaning Up Some Loose Ends.............. 206 13.6 Summary........................... 208 14 Making a Printer-Friendly Page 209 14.1 Preparing for Print..................... 209 14.2 Linking a Print Style Sheet................ 210 14.3 Removing Unnecessary Elements............. 210 14.4 Setting Margins, Widths, and Fonts........... 211 14.5 Fixing Links......................... 212 14.6 Dealing with Surprised Users............... 214 14.7 Summary........................... 215 IV Preparing for Launch 216 15 Working with Internet Explorer and Other Browsers 217 15.1 Deciding What to Support................. 217 15.2 Browser Statistics...................... 219 15.3 Internet Explorer: The Evil You Can t Ignore...... 219 15.4 Internet Explorer 7..................... 221 15.5 Internet Explorer 6..................... 222 15.6 Internet Explorer 8..................... 228 15.7 Other Browsers....................... 229 15.8 Summary........................... 230 CLICK HERE to purchase this book now.
CONTENTS 13 16 Accessibility and Usability 231 16.1 What Does Accessibility Mean to You?.......... 231 16.2 Basic Accessibility Issues................. 232 16.3 Being All-Inclusive!..................... 241 16.4 Critical Business Issues.................. 244 16.5 Improving Our Site s Accessibility............ 245 16.6 Tabbing............................ 249 16.7 Accessibility Testing Checklist.............. 251 16.8 Summary........................... 253 17 Building a Favicon 254 17.1 Creating a Simple Icon................... 254 17.2 Creating the Favicon.................... 254 17.3 Summary........................... 256 18 Search Engine Optimization 257 18.1 Content Is King....................... 257 18.2 Choosing Keywords..................... 259 18.3 Reconciling Our Content.................. 261 18.4 Don t Optimize Your Users Away!............. 262 18.5 Links and You........................ 262 18.6 It All Comes Down to Common Sense.......... 263 18.7 Summary........................... 263 19 Designing for Mobile Devices 264 19.1 Mobile Users......................... 264 19.2 Thinking About the (Very) Small Screen......... 266 19.3 JavaScript.......................... 267 19.4 Serving Mobile Content................... 267 19.5 Deciding What to Support................. 268 19.6 Restructuring for Mobile Users.............. 275 19.7 Summary........................... 275 20 Testing and Improving Performance 276 20.1 Strategies for Improving Performance.......... 276 20.2 Determining Performance Issues............. 277 20.3 Addressing Performance.................. 279 20.4 Image Optimization..................... 286 20.5 Summary........................... 288 CLICK HERE to purchase this book now.
CONTENTS 14 21 Where to Go Next 289 21.1 Additional Pages and Templates............. 289 21.2 Advanced Templating.................... 292 21.3 Grid Systems and CSS Frameworks........... 293 21.4 CSS Alternatives...................... 298 21.5 Don t Forget to Buy the Stock Images!.......... 300 21.6 Visual Effects........................ 300 21.7 Experiment and Practice!................. 306 22 Recommended Reading 307 22.1 Color Resources....................... 307 22.2 Books on Fonts and Typography............. 307 22.3 Technical Books....................... 308 22.4 Web sites........................... 308 A Bibliography 310 Index 312 CLICK HERE to purchase this book now.
The Pragmatic Bookshelf The Pragmatic Bookshelf features books written by developers for developers. The titles continue the well-known Pragmatic Programmer style, and continue to garner awards and rave reviews. As development gets more and more difficult, the Pragmatic Programmers will be there with more titles and products to help you stay on top of your game. Visit Us Online Web Design for Developers Home Page http://pragprog.com/titles/bhgwad Source code from this book, errata, and other resources. Come give us feedback, too! Register for Updates http://pragprog.com/updates Be notified when updates and new books become available. Join the Community http://pragprog.com/community Read our weblogs, join our online discussions, participate in our mailing list, interact with our wiki, and benefit from the experience of other Pragmatic Programmers. New and Noteworthy http://pragprog.com/news Check out the latest pragmatic developments in the news. Buy the Book If you liked this PDF, perhaps you d like to have a paper copy of the book. It s available for purchase at our store: pragprog.com/titles/bhgwad. Contact Us Phone Orders: 1-800-699-PROG (+1 919 847 3884) Online Orders: Customer Service: Non-English Versions: Pragmatic Teaching: Author Proposals: www.pragprog.com/catalog orders@pragprog.com translations@pragprog.com academic@pragprog.com proposals@pragprog.com