Web Design for Developers
Total Page:16
File Type:pdf, Size:1020Kb
What Readers Are Saying About Web Design for Developers This is the book I wish I had had when I started to build my first web- site. It covers web development from A to Z and will answer many of your questions while improving the quality of the sites you produce. Shae Murphy CTO, Social Brokerage As a web developer, I thought I knew HTML and CSS. This book helped me understand that even though I may know the basics, there’s more to web design than changing font colors and adding margins. Mike Weber Web application developer If you’re ready to step into the wonderful world of web design, this book explains the key concepts clearly and effectively. The comfortable, fun writing style makes this book as enjoyable as it is enlightening. Jeff Cohen Founder, Purple Workshops This book has something for everyone, from novice to experienced designers. As a developer, I found it extremely helpful for my day-to- day work, causing me to think before just putting content on a page. Chris Johnson Solutions developer From conception to launch, Mr. Hogan offers a complete experience and expertly navigates his audience though every phase of develop- ment. Anyone from beginners to seasoned veterans will gain valuable insight from this polished work that is much more than a technical guide. Neal Rudnik Web and multimedia production manager, Aspect This book arms application developers with the knowledge to help blur the line that some companies place between a design team and a development team. After all, just because someone is a “coder” doesn’t mean he or she can’t create an attractive and usable site. Jon Kinney Ruby on Rails architect, Avastone Technologies Web Design for Developers emphasizes practical, easy-to-master tech- niques. Achieving a professional look is possible, even by those whose idea of symmetry is a balanced set of curly braces. Craig Castelaz Principle software engineer, at a mind-boggling immense software company Web Design for Developers A Programmer’s Guide to Design Tools and Techniques Brian P. Hogan The Pragmatic Bookshelf Raleigh, North Carolina Dallas, Texas Many of the designations used by manufacturers and sellers to distinguish their prod- ucts 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 transmit- ted, 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-15 Contents 1 Introduction 13 1.1 Before We Get Started... .................. 13 1.2 The Design Process in Action ............... 14 1.3 YourFoodbox.com ...................... 16 1.4 Ready to Go? ......................... 17 1.5 Acknowledgments ...................... 17 I The Basics of Design 19 2 The Basics of Site (Re)design: Redesigning Foodbox 20 2.1 The Existing Site ...................... 20 2.2 Gathering Requirements .................. 23 2.3 Know Your Purpose ..................... 24 2.4 Where to Go from Here ................... 26 2.5 Sketching Your Ideas .................... 27 2.6 Sketch Selection ....................... 31 2.7 Summary ........................... 31 3 Choosing Colors 33 3.1 The Basics of Color ..................... 33 3.2 Color Context ........................ 36 3.3 Evoking Emotion with Color ................ 37 3.4 Color Schemes ........................ 41 3.5 The Web-Safe Color Palette ................ 46 3.6 Building Color Schemes .................. 47 3.7 Choosing Your Scheme ................... 58 3.8 Summary ........................... 61 CONTENTS 8 4 Fonts and Typography 62 4.1 Font Anatomy ........................ 62 4.2 Font Types .......................... 63 4.3 Dealing with Font Limitations ............... 65 4.4 Selecting Our Fonts ..................... 69 4.5 Using the Baseline Grid .................. 71 4.6 Summary ........................... 76 II Adding Graphics 77 5 Designing the Foodbox Logo 78 5.1 Setting Up a Working Folder ................ 78 5.2 The Foodbox Logo ...................... 79 5.3 What If We Need to Create Our Own Logo? . 84 5.4 Summary ........................... 85 6 Design Mock-up: The Structure 86 6.1 A Bit About Layers ..................... 86 6.2 The Basic Structure .................... 87 6.3 Placing the Logo ....................... 93 6.4 Organizing Our Composition with Layer Groups . 94 6.5 Adding a Reflection to Our Logo ............. 94 6.6 The Footer .......................... 96 6.7 Wrapping Up ......................... 96 7 Design Mock-up: The Content 97 7.1 Creating the Search Box .................. 97 7.2 The Browse Recipes Tag Cloud .............. 99 7.3 Scope Creep ......................... 100 7.4 Mocking Up a Tasty Masthead .............. 100 7.5 Main Content ........................ 103 7.6 Simulating the Browser .................. 104 7.7 Summary ........................... 106 Report erratum this copy is (P1.0 printing, December 2009) CONTENTS 9 8 Putting the Finishing Touches on the Mock-Up 107 8.1 Creating the Search Icon .................. 107 8.2 Creating the Sign-up and Login Buttons ........ 112 8.3 You’ve Got Content! ..................... 115 8.4 Summary ........................... 117 III Building the Site 118 9 Building the Home Page with HTML 119 9.1 Working with Web Standards ............... 120 9.2 The Home-Page Structure ................. 121 9.3 Semantic Markup ...................... 122 9.4 The Home-Page Skeleton .................. 124 9.5 The Header .......................... 134 9.6 The Sidebar ......................... 135 9.7 The Main Content ...................... 141 9.8 The Footer .......................... 145 9.9 Validating Your Markup .................. 149 9.10 HTML 5 ............................ 151 9.11 Summary ........................... 154 10 Creating Assets from Our Mock-Up 155 10.1 Graphics Optimization ................... 155 10.2 Dealing with Different Graphics Formats ........ 157 10.3 Slicing Up Our Document ................. 161 10.4 Creating Slices ....................... 161 10.5 Extracting the Banner as a Transparent PNG . 164 10.6 Exporting the Rest of the Elements ............ 166 10.7 Summary ........................... 167 11 Defining Your Layout with CSS 168 11.1 Browsers Are Awful ..................... 168 11.2 The Basics of CSS ...................... 169 11.3 How Browsers Use CSS .................. 175 11.4 Creating and Linking a New CSS Style Sheet . 178 11.5 Defining the Basic Structure, Header, and Footer . 179 11.6 Turning One Column into Two .............. 184 11.7 Applying Margins to Content ............... 189 11.8 Main Content ........................ 190 11.9 Revisiting the Footer .................... 193 11.10 Summary ........................... 193 Report erratum this copy is (P1.0 printing, December 2009) CONTENTS 10 12 Replacing the Section Headings Using the Cover-up Method 194 12.1 The Cover-up Method Explained ............. 194 12.2 Preparing the HTML to Be Replaced ........... 194 12.3 Covering the Text ...................... 195 12.4 Replacing the Other Headings ............... 195 12.5 Replacing Links ....................... 197 12.6 Downsides of This Method ................. 198 12.7 Summary ........................... 198 13 Adding Styles 199 13.1 Setting Up the Colors and Fonts ............. 199 13.2 The Tag Clouds ....................... 202 13.3 The Search Form ...................... 203 13.4 The Footer .......................... 204 13.5 Cleaning Up Some Loose Ends .............. 204 13.6 Summary ........................... 206 14 Making a Printer-Friendly Page 207 14.1 Preparing for Print ..................... 207 14.2 Linking a Print Style Sheet ................ 208 14.3 Removing Unnecessary Elements ............. 208 14.4 Setting Margins, Widths, and Fonts ........... 209 14.5 Fixing Links ......................... 210 14.6 Dealing with Surprised Users ............... 212 14.7 Summary ........................... 213 IV Preparing for Launch 214 15 Working with Internet Explorer and Other Browsers 215 15.1 Deciding What to Support ................. 215 15.2 Browser Statistics ...................... 217 15.3 Internet Explorer: The Evil You Can’t Ignore . 217 15.4 Internet Explorer 7 ..................... 219 15.5 Internet Explorer 6 ..................... 220 15.6 Internet Explorer 8 ..................... 226 15.7 Other Browsers ....................... 227 15.8 Summary ........................... 228 Report erratum this copy is (P1.0 printing, December 2009) CONTENTS 11 16 Accessibility and Usability 229 16.1 What Does Accessibility Mean to You?