Web Design for Developers

Transcription

1 > Web Design for Developers A Programmer's Guide to Design Tools and Techniques Brian P. Hogan The Pragmatic Bookshelf P. ~ Kaleigh, Norlli Carolina Dallas, Texas

2 Contents 1 Introduction Before We Get Started The Design Process in Action YourFoodbox.com Ready to Go? Acknowledgments 5 1 The Basics of Design 7 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 21 3 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 51

3 viii CONTENTS 4 Fonts and Typography S3 4.1 Font Anatomy Font Types Dealing with Font Limitations Selecting Our Fonts Using the Baseline Grid Summary 67 II Adding Graphics 69 5 Designing the Foodbox Logo Setting Up a Working Folder The Foodbox Logo What If We Need to Create Our Own Logo? Summary 78 6 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 89 7 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 100

4 ix 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 Ill 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 190

5 p. CONTENTS 12 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 Summaiy 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 211 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 228

6 xl 16 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 289

7 xii CONTENTS 21 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 Websites 310 A Bibliography 313 Index 315