Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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 Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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 Te chn ologies 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 Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info Web Design for Developers A Programmer’s Guide to Design Tools and Techniques Brian P. Hogan The Pragmatic Bookshelf Raleigh, North Carolina Dallas, Texas Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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 boo k. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of infor mat ion (including progr am listi ngs) contained herein. Our Pragmatic courses, workshops, and other products can help you and your team create better softwa re 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 Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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 Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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) Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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) Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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) Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info [...]... covers the web- design process for programmers who have little to no design background Underneath all the pretty colors and nice layouts, websites require an awful lot of programming to get just right You must follow rules and best practices when working with Java, Ruby, or C#; the same is true of designing websites if you want to achieve the desired result 1.1 Before We Get Started Good web design is... as a guide to make your own design As you implement your own design, you’ll learn a lot about the theory behind web design It is my hope that the site you design will look completely different from the example shown at the end of the book Your programming experience will help you build an attractive web page For the first half of this book, you will live in the world of the designer You will learn about... good design You’ll also learn how to use the tools and techniques that designers prefer Once we cover the appropriate theory, you’ll have some code to write After all, that’s what you expect from a book for programmers, right? 1.2 The Design Process in Action A good way to understand the typical web- design process is to follow Ron, a busy web developer, as he works with a client to create a small web. .. http://www.yourfoodbox.com You’ll notice we’re aiming for a simple, straightforward design that is perfect for demonstrating the techniques in this book This design might not please every reader, but it’s simple enough for a beginner to implement It’s also important to realize that in the world of design, one person’s masterpiece is another person’s terrible design Your challenge is to take what’s in this... and usability for granted, your users will hate your site even more Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info T HE D ESIGN P ROCESS IN A CTION There Is No One True Way This book is aimed at the programmer who wants to learn about web design The method this book uses is an effective entrylevel web- design process, and although it’s certainly not the only way to build websites, the... 19 Designing for Mobile Devices 19.1 Mobile Users 19.2 Thinking About the (Very) Small Screen 19.3 JavaScript 19.4 Serving Mobile Content 19.5 Deciding What to Support 19.6 Restructuring for Mobile Users 19.7 Summary 20 Testing and Improving Performance 20.1 Strategies for Improving Performance 20.2 Determining Performance... template for the site You’ll learn how to make web forms look a little nicer, and you’ll learn assorted tips and tricks to make your site work across multiple browsers and platforms After you finish building the site, you’ll learn how to make it friendlier to search engines, as well as how to squeeze a few more drops of performance out of your pages You’ll also find that it’s important to me that your website... Wisconsin-Eau Claire, for their friendship, support, questions, and answers Special thanks goes to Marian for fostering an environment where we can all learn, grow, and be challenged Thanks to Bobby Pitts for teaching me how to really use design tools When I reach for the Pen tool, I remember the classes Thank you Chris Warren, Kevin Gisi, Gary Crabtree, Carl Hoover, Josh Anderson, and Adam Ludwig for allowing... time Thank you all for being so wonderful and supportive I do it all for you Report erratum Prepared exclusively for ALESSANDRO CAROLLO this copy is (P1.0 printing, December 2009) 18 www.it-ebooks.info Part I The Basics of Design Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info Chapter 2 The Basics of Site (Re )design: Redesigning Foodbox Foodbox, our example site, is an online community... receive a Photoshop file (PSD) from a graphic artist Part of a developer’s job is to incorporate that design into a web application, and learning how to handle PSDs is part of the design process We will use Photoshop mock-ups in this book for two reasons They are good vehicles for describing many parts of the design process, and it’s easier to learn CSS concepts when you have working color mock-ups to follow . exclusively for ALESSANDRO CAROLLO www.it-ebooks.info 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. company Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info Prepared exclusively for ALESSANDRO CAROLLO www.it-ebooks.info Web Design for Developers A Programmer’s Guide to Design Tools and Techniques Brian. 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