Web Design for Developers A Programmer s Guide to Design Tools and Techniques

Transcription

1 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 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.

2

3 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 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: ISBN-13: Printed on acid-free paper. P1.0 printing, December 2009 Version:

4 Contents 1 Introduction Before We Get Started The Design Process in Action YourFoodbox.com Ready to Go? Acknowledgments I The Basics of Design 21 2 The Basics of Site (Re)design: Redesigning Foodbox The Existing Site Gathering Requirements Know Your Purpose Where to Go from Here Sketching Your Ideas Sketch Selection Summary Choosing Colors The Basics of Color Color Context Evoking Emotion with Color Color Schemes The Web-Safe Color Palette Building Color Schemes Choosing Your Scheme Summary

5 CONTENTS 10 4 Fonts and Typography Font Anatomy Font Types Dealing with Font Limitations Selecting Our Fonts Using the Baseline Grid Summary II Adding Graphics 79 5 Designing the Foodbox Logo Setting Up a Working Folder The Foodbox Logo What If We Need to Create Our Own Logo? Summary Design Mock-up: The Structure A Bit About Layers The Basic Structure Placing the Logo Organizing Our Composition with Layer Groups Adding a Reflection to Our Logo The Footer Wrapping Up Design Mock-up: The Content Creating the Search Box The Browse Recipes Tag Cloud Scope Creep Mocking Up a Tasty Masthead Main Content Simulating the Browser Summary CLICK HERE to purchase this book now.

6 CONTENTS 11 8 Putting the Finishing Touches on the Mock-Up Creating the Search Icon Creating the Sign-up and Login Buttons You ve Got Content! Summary III Building the Site Building the Home Page with HTML Working with Web Standards The Home-Page Structure Semantic Markup The Home-Page Skeleton The Header The Sidebar The Main Content The Footer Validating Your Markup HTML Summary Creating Assets from Our Mock-Up Graphics Optimization Dealing with Different Graphics Formats Slicing Up Our Document Creating Slices Extracting the Banner as a Transparent PNG Exporting the Rest of the Elements Summary Defining Your Layout with CSS Browsers Are Awful The Basics of CSS How Browsers Use CSS Creating and Linking a New CSS Style Sheet Defining the Basic Structure, Header, and Footer Turning One Column into Two Applying Margins to Content Main Content Revisiting the Footer Summary CLICK HERE to purchase this book now.

7 CONTENTS Replacing the Section Headings Using the Cover-up Method The Cover-up Method Explained Preparing the HTML to Be Replaced Covering the Text Replacing the Other Headings Replacing Links Downsides of This Method Summary Adding Styles Setting Up the Colors and Fonts The Tag Clouds The Search Form The Footer Cleaning Up Some Loose Ends Summary Making a Printer-Friendly Page Preparing for Print Linking a Print Style Sheet Removing Unnecessary Elements Setting Margins, Widths, and Fonts Fixing Links Dealing with Surprised Users Summary IV Preparing for Launch Working with Internet Explorer and Other Browsers Deciding What to Support Browser Statistics Internet Explorer: The Evil You Can t Ignore Internet Explorer Internet Explorer Internet Explorer Other Browsers Summary CLICK HERE to purchase this book now.

8 CONTENTS Accessibility and Usability What Does Accessibility Mean to You? Basic Accessibility Issues Being All-Inclusive! Critical Business Issues Improving Our Site s Accessibility Tabbing Accessibility Testing Checklist Summary Building a Favicon Creating a Simple Icon Creating the Favicon Summary Search Engine Optimization Content Is King Choosing Keywords Reconciling Our Content Don t Optimize Your Users Away! Links and You It All Comes Down to Common Sense Summary Designing for Mobile Devices Mobile Users Thinking About the (Very) Small Screen JavaScript Serving Mobile Content Deciding What to Support Restructuring for Mobile Users Summary Testing and Improving Performance Strategies for Improving Performance Determining Performance Issues Addressing Performance Image Optimization Summary CLICK HERE to purchase this book now.

9 CONTENTS Where to Go Next Additional Pages and Templates Advanced Templating Grid Systems and CSS Frameworks CSS Alternatives Don t Forget to Buy the Stock Images! Visual Effects Experiment and Practice! Recommended Reading Color Resources Books on Fonts and Typography Technical Books Web sites A Bibliography 310 Index 312 CLICK HERE to purchase this book now.

10 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 Source code from this book, errata, and other resources. Come give us feedback, too! Register for Updates Be notified when updates and new books become available. Join the 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 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: PROG ( ) Online Orders: Customer Service: Non-English Versions: Pragmatic Teaching: Author Proposals: orders@pragprog.com translations@pragprog.com academic@pragprog.com proposals@pragprog.com