Information about http://webstandardscreativity.com/downloads/wsc-toc.pdf
Web Standards Creativity: Innovations in Web Design with XHTML, CSS,…
Tags: 987654321, adams mark, andy clarke, apress, collison, e mail, editorial fashion, featherstone, information storage, jeff croft, mail orders, marcotte, mark boulton, sensis, springer verlag new york, trademark owner, trademark symbol, trademarked name, trademarked names, white pages,Pages: 6
Language: english
Created: Wed Mar 28 12:52:59 2007
Display cached document
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Web Standards Creativity:
Innovations in Web Design
with XHTML, CSS, and
DOM Scripting
Cameron Adams
Mark Boulton
Andy Clarke
Simon Collison
Jeff Croft
Derek Featherstone
Ian Lloyd
Ethan Marcotte
Dan Rubin
Rob Weychert
Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting
Copyright © 2007 by Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Derek Featherstone,
Ian Lloyd, Ethan Marcotte, Dan Rubin, Rob Weychert
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system,
without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-803-0
ISBN-10 (pbk): 1-59059-803-2
Printed and bound in China
987654321
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a
trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner,
with no intention of infringement of the trademark.
The White Pages® Online screenshots (Chapter 9, Figures 9-3 and 9-4) have been reproduced with the permission of
Sensis Pty Ltd.® Registered trade mark of Telstra Corporation Limited.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013.
Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710.
Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, or visit www.apress.com.
The information in this book is distributed on an "as is" basis, without warranty. Although every precaution has been taken in
the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to
any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section.
Credits
Lead Editor Assistant Production Director
Chris Mills Kari Brooks-Copony
Technical Reviewer Compositor
Molly Holzschlag Diana Van Winkle,
Van Winkle Design Group
Editorial Board
Steve Anglin, Ewan Buckingham, Proofreader
Gary Cornell, Jason Gilmore, Lori Bring
Jonathan Gennick, Jonathan Hassell,
James Huddleston, Chris Mills, Indexer
Matthew Moodie, Dominic Shakeshaft, Brenda Miller
Jim Sumser, Keir Thomas, Matt Wade
Interior Designer
Project Manager Diana Van Winkle,
Kylie Johnston Van Winkle Design Group
Copy Edit Manager Cover Designer
Nicole Flores Kurt Krames
Copy Editors Manufacturing Director
Marilyn Smith, Nicole Flores Tom Debolski
Contents
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Getting Creative with Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
PART 1: LAYOUT MAGIC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 1: Semantic Structure, Dirty Pretty Presentation . . . . . . . 2
The brief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Semantic structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Dirty pretty presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Background images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Background, masthead, and menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Content highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Chapter 2: Taming a Wild CMS with CSS, Flash, and JavaScript . . . 24
Setting the scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
A crash course on CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
The CMS challenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Design on a dime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The visual elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The markup is but a shell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The layout and styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
The typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Spit and polish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Issues with the design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Such a #teaser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Taking care of Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapter 3: New York Magazine: My, What a Classy . . . . . 50
Mo' metro, mo' style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Structuring the CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Adding a layer of style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Negative margins and columns and stuff! Oh my! . . . . . . . . . . . . . . . . . . . . 58
Getting column-tastic (finally) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
My class-fu is unstoppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Intelligent modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Additional classes, additional control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Starting small (980 pixels' worth) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Tying in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Chapter 4: Designing for Outside the Box . . . . . . . . . . . . . . . . . . . 78
Worries? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Worrying about the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Designing for WorrySome.net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Stop worrying, start with markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding the content elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding divisions from the content out . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Satisfying your soul (with CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Styling WorrySome.net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Dealing with legacy browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
No worries! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Chapter 5: Creative Use of PNG Transparency in Web Design . . 108
PNG, GIF, and JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
What is PNG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
So why is GIF still so popular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
What about JPEG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Some great uses for the humble PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The image that needs to work on any background . . . . . . . . . . . . . . . . . . . 112
The translucent HTML overlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
The watermark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
The color-changing icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
OK, but what browsers does it work in? . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
The Internet Explorer workaround: AlphaImageLoader . . . . . . . . . . . . . . . . . 126
A real-world use of AlphaImageLoader . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
vi
PART 2: EFFECTIVE PRINT TECHNIQUES
APPLIED TO CSS DESIGN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Chapter 6: Grid Design for the Web . . . . . . . . . . . . . . . . . . . . . . 130
What is a grid system? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Through the ages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Ratios and the canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Putting grid systems into practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Beginning with the pen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Breaking down the elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Designing the columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Adding gutters, margins, and padding . . . . . . . . . . . . . . . . . . . . . . . . . . 139
What about colors and other visual elements? . . . . . . . . . . . . . . . . . . . . . . 140
Building the XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Building the CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
It's starting to look like a website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Issues with the design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapter 7: Bridging the Type Divide:
Classic Typography with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
A brief history of type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Know your text face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Introducing Georgia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
The process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
The right man for the job . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
A page for Poe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
A readable line length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Paragraph indents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Drop caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
All caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Text figures vs. titling figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Small caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
PART 3: DOM SCRIPTING GEMS . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Chapter 8: Print Magic:
Using the DOM and CSS to Save the Planet . . . . . . . . . . . . . . . . 182
A printing technique is born . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
The basic idea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Preparing the foundations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Sectioning the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Identifying the sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Pseudocode first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Event planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
From pseudocode to real code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Recap: what these scripts do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
vii
What about the CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
A couple of refinements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Let's see it in action, already! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Sliding in the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Styling the print links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Pulling it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Never mind all that--what about saving the planet? . . . . . . . . . . . . . . . . . . . . 205
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Chapter 9: Creating Dynamic Interfaces Using JavaScript . . . . . 208
Different layouts
for different needs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Resolution-dependent layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Browser size, not resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Multiple CSS files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Turning on the style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Optimizations for Internet Explorer 5.x . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Modular layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
The markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Expanding and collapsing modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Reorganizing modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Keeping track of changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Chapter 10: Accessible Sliding Navigation . . . . . . . . . . . . . . . . . . 242
The killer feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Accessibility basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Accessibility guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Accessibility and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
The accessible solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Starting with pristine HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Adding the presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Switching between CSS states with JavaScript . . . . . . . . . . . . . . . . . . . . . . 250
Adding sliding behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Where does the accessibility come in to it? . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Low vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Voice recognition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Screen readers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Keyboard-only use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
viii