Web Standards Creativity:Innovations in Web Designwith XHTML, CSS, andDOM Scripting
Cameron AdamsMark BoultonAndy ClarkeSimon CollisonJeff CroftDerek FeatherstoneIan LloydEthan MarcotteDan RubinRob 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 9 8 7 6 5 4 3 2 1
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 [email protected], 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 [email protected], 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 inthe 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.
CreditsLead Editor
Chris Mills
Technical ReviewerMolly Holzschlag
Editorial BoardSteve Anglin, Ewan Buckingham,
Gary Cornell, Jason Gilmore,Jonathan Gennick, Jonathan Hassell,
James Huddleston, Chris Mills,Matthew Moodie, Dominic Shakeshaft,
Jim Sumser, Keir Thomas, Matt Wade
Project ManagerKylie Johnston
Copy Edit ManagerNicole Flores
Copy EditorsMarilyn Smith, Nicole Flores
Assistant Production Director Kari Brooks-Copony
CompositorDiana Van Winkle,Van Winkle Design Group
ProofreaderLori Bring
IndexerBrenda Miller
Interior DesignerDiana Van Winkle,Van Winkle Design Group
Cover DesignerKurt Krames
Manufacturing DirectorTom Debolski
Contents at a GlanceAbout the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ixAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiGetting Creative with Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
PART 1: LAYOUT MAGIC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 1: Semantic Structure, Dirty Pretty Presentation . . . . . . . . . . . 2
Chapter 2: Taming a Wild CMS with CSS, Flash, and JavaScript . . . . . . 24
Chapter 3: New York Magazine: My, What a Classy <body> . . . . . . . . . 50
Chapter 4: Designing for Outside the Box . . . . . . . . . . . . . . . . . . . . . . 78
Chapter 5: Creative Use of PNG Transparency in Web Design. . . . . . . 108
PART 2: EFFECTIVE PRINT TECHNIQUES APPLIED TO CSS DESIGN . . . . . 129
Chapter 6: Grid Design for the Web . . . . . . . . . . . . . . . . . . . . . . . . . 130
Chapter 7: Bridging the Type Divide: Classic Typography with CSS . . . 156
PART 3: DOM SCRIPTING GEMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Chapter 8: Print Magic: Using the DOM and CSS to Save the Planet . . 182
Chapter 9: Creating Dynamic Interfaces Using JavaScript . . . . . . . . . . 208
Chapter 10: Accessible Sliding Navigation . . . . . . . . . . . . . . . . . . . . . 242
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
ContentsAbout the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ixAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiGetting Creative with Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
PART 1: LAYOUT MAGIC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 1: Semantic Structure, Dirty Pretty Presentation . . . . . . . 2
The brief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Semantic structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Dirty pretty presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Background images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Background, masthead, and menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Content highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Chapter 2: Taming a Wild CMS with CSS, Flash, and JavaScript . . . 24
Setting the scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26A crash course on CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28The CMS challenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Design on a dime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The visual elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30The markup is but a shell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32The layout and styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35The typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Spit and polish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Issues with the design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Such a #teaser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Taking care of Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapter 3: New York Magazine: My, What a Classy <body>. . . . . 50
Mo’ metro, mo’ style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Structuring the CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Adding a layer of style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Negative margins and columns and stuff! Oh my! . . . . . . . . . . . . . . . . . . . . 58Getting column-tastic (finally) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60My class-fu is unstoppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Intelligent modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Additional classes, additional control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Starting small (980 pixels’ worth) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Tying in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Chapter 4: Designing for Outside the Box . . . . . . . . . . . . . . . . . . . 78
Worries? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Worrying about the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Designing for WorrySome.net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Stop worrying, start with markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Adding the content elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Adding divisions from the content out . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Satisfying your soul (with CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Styling WorrySome.net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Dealing with legacy browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106No worries! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Chapter 5: Creative Use of PNG Transparency in Web Design . . 108
PNG, GIF, and JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110What is PNG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110So why is GIF still so popular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110What about JPEG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Some great uses for the humble PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111The gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111The image that needs to work on any background . . . . . . . . . . . . . . . . . . . 112The translucent HTML overlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113The watermark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118The mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121The color-changing icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
OK, but what browsers does it work in? . . . . . . . . . . . . . . . . . . . . . . . . . . . 126The Internet Explorer workaround: AlphaImageLoader . . . . . . . . . . . . . . . . . 126A 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? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Through the ages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Ratios and the canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Putting grid systems into practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135Beginning with the pen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136Breaking down the elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136Designing the columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138Adding gutters, margins, and padding . . . . . . . . . . . . . . . . . . . . . . . . . . 139What about colors and other visual elements? . . . . . . . . . . . . . . . . . . . . . . 140Building the XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Building the CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144It’s starting to look like a website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Issues with the design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapter 7: Bridging the Type Divide:Classic Typography with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
A brief history of type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Know your text face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Introducing Georgia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158The process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159The right man for the job . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
A page for Poe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160A readable line length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Paragraph indents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166Drop caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170All caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Text figures vs. titling figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176Small 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184The basic idea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184Preparing the foundations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Sectioning the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185Identifying the sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Pseudocode first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Event planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188From pseudocode to real code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Recap: what these scripts do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
vii
What about the CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197A couple of refinements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198Let’s see it in action, already! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Sliding in the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201Styling the print links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Pulling it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Never mind all that—what about saving the planet? . . . . . . . . . . . . . . . . . . . . 205Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Chapter 9: Creating Dynamic Interfaces Using JavaScript . . . . . 208
Different layouts for different needs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210Resolution-dependent layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Browser size, not resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Multiple CSS files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Turning on the style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218Optimizations for Internet Explorer 5.x . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Modular layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223The markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226Expanding and collapsing modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226Reorganizing modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Keeping track of changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Chapter 10: Accessible Sliding Navigation . . . . . . . . . . . . . . . . . . 242
The killer feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Accessibility basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Accessibility guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Accessibility and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
The accessible solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246Starting with pristine HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248Adding the presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249Switching between CSS states with JavaScript . . . . . . . . . . . . . . . . . . . . . . 250Adding sliding behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Where does the accessibility come in to it? . . . . . . . . . . . . . . . . . . . . . . . . . . 254Low vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Voice recognition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256Screen readers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259Keyboard-only use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
viii
About the Technical Reviewer
Molly E. Holzschlag is a well-known Web Standards advocate, instructor, and author.She is Group Lead for the Web Standards Project (WaSP) and an invited expert to theHTML and GEO working groups at the World Wide Web Consortium (W3C).
Through each of these roles, Molly works to educate designers and developers onusing web technologies in practical ways to create highly sustainable, maintainable,accessible, interactive, and beautiful websites for the global community.
Among her 30-plus books is the The Zen of CSS Design, coauthored with Dave Shea.The book artfully showcases the most progressive csszengarden.com designs. Apopular and colorful individual, Molly has a particular passion for people, blogs, andthe use of technology for social progress.
AcknowledgmentsMark Boulton
I’d like to thank Khoi Vinh for the grid background tech-nique, and Phil Wright for his constructive feedback andfor being just about the best design writer I know. Ofcourse, the Britpack members deserve a mention, tal-ented bunch that they are. Last, but certainly not least, tothank is my wife, Emma, for her unwavering patience as Iprattle on about design. Every. Single. Day.
Andy ClarkeI wish that I had invented all of the techniques that I usedto create the WorrySome.net site design and that you willbe re-creating throughout the pages of my chapter.Instead I invented a machine that reads brainwaves andprojects them onto a large screen in my secret laboratory.With this machine, I stole the thoughts of the many peo-ple who came up with these remarkable solutions.
I would like to thank all of the hundreds of designers anddevelopers who dreamed up and then shared their ideas,albeit unwittingly and in their sleep. I am sorry that insome cases my early experiments in thought extractionhave led to your madness. Don’t worry—working in thisindustry, who is going to notice?
Special thanks go to editor Chris Mills and to my scooter-riding, parka-wearing colleagues in the Britpack for theirfriendship and inspiration. Thanks also to those jollyJohnny foreigners who ask me to design, code, and speakto them at conferences and workshops from San Fran-cisco to Southend to Sydney.
My love goes to my family. My chapter is for my son Alex,14 years old and already twice the man that I will ever be.
Simon CollisionI must thank Agenzia for allowing me to feature the DirtyPretty Things website, and also Creation Management andVertigo Records for allowing me to go on and on and onabout what I’ve done for the band. Images of the bandare by Roger Sargeant and Max Vadukul, and the sourceartwork for the website is by Hannah Bays. The website isbuilt with the incomparable ExpressionEngine contentmanagement system, handling 35,000 Dirty Pretty fansadmirably, and is managed by the lovely administratorsKirsty and Kirsty.
Jeff CroftThanks to everyone who helped make this book possible,and there are a lot of you.
To Chris Mills for giving me this wonderful opportunity,and to all of my coauthors, who are a constant source ofinspiration. It has been an honor to work with each andevery one of you, and I hope it’s not the last time.
To everyone else at Apress and friends of ED, you’ve allbeen a joy to work with.
To Jeffrey Zeldman, for being the guy who got me—and aheckuva lot of other people—on board with this wholeWeb Standards thing. And to all the great minds in theWeb Standards community who share their discoveriesand wonderful personalities with us through blogs, books,and other resources. I can’t name you all here, but youknow who you are. I never cease to be amazed at theinspiration you guys and gals provide.
To all of my friends at World Online who are among thesmartest people I’ve ever met and have given me theopportunity to do what I love to do every day instead of“going to work.”
To my girlfriend Michelle, who never gets frustrated withall the time I spend working on projects like this insteadof tending to her. I love you, Meesh.
To my entire family, especially my mom and dad, whosupported me in countless ways instead of balking when Idropped out of college to pursue “this Internet thing.”I love you guys more than I could ever possibly explain.
To my incredible daughter Haley, who is the reason I doeverything I do.
And of course to you, for reading.
Ian LloydThanks to all the people who commented on my blogabout the original proof-of-concept that I put together,and particularly to those who suggested improvementsand fine-tuning. Thanks also to beer and junk TV, whichalways have the uncanny ability of compressing a reason-able time scale for writing into the usual last-minutepanic. But I wouldn’t have it any other way!
Dan RubinMany thanks to Lee Hammond and Geffen/UniversalMedia for giving the OK to use this project as a case study(not to mention hiring me to do it in the first place), andfor being such a wonderful client to begin with. Thanksare also due to Lifehouse and the band’s management, toMike Rundle (aka “phark”) for the image replacementtechnique I use every day, and to Mike Davidson, ShawnInman, Tomas Jogin, and Mark Wubben (collectively “ThesIFR Gang”) for creating and improving the only way toaccurately control live text rendering on sites built withWeb Standards.
To Chris Mills and the Apress/friends of ED team, I leavemy—wait, wrong document—thanks for the late and oh-so-sleepless nights; the complimentary cricket bat made itall worthwhile. Special thanks to Kristina Horst for makingme look astonishingly dashing in my headshot. Oh, andlet’s not forget good old mum and dad; my brother Alexfor the constant support he provides (in and out of theoffice); and, of course, Larry, the lizard who lives in mycloset, for his completely random but curiously comfort-ing and almost omniscient presence and countenance.
xii
Getting Creative with Web Standards
“Not another Web Standards book!” I hear you cry, “I already own a copy of CSS Mastery, so why would I need anythingelse?” Well, if you can give me a couple of minutes, I’d like to explain why you should buy this book.
Web Standards have come a long way since the first glimmer in W3C’s eye. In the early days, CSS was the preserve of codersand gained a reputation of being “boxy but good.” Pioneers like Jeffrey Zeldman and Eric Meyer helped popularize the useof standards and inspired designers like Douglas Bowman and Todd Dominey to create some of the first commerciallysuccessful standards-based sites around (see Figures 1 and 2).
Figure 1. Wired News was redesigned in October 2002 by DouglasBowman. This was one of the first major commercial sites to adoptWeb Standards and prompted many companies to follow suit.
Figure 2. Designed by Todd Dominey in 2003, the 85th PGAChampionship website showed that standards-based designs couldbe as beautiful as their table-based counterparts.
However, it was Dave Shea’s Zen Garden that showed a whole new generation of web designers that standards-based designcould be sexy and fun (see Figures 3, 4, and 5). Out went the boxy layouts and in came experimental pieces more at homein a graphic design portfolio.
Figure 4. Another early addition to thegarden, but still as beautiful as the dayit was created, is Mike Picks' “What LiesBeneath.”
Figure 3. One of the very first ZenGarden designs was “Golden Mean,” a beautiful study of typography andcomposition from Douglas Bowman.
xiv
Designers ran with this new freedom, and we now see beautiful CSS designs appearing every day. If you don’t believe me,just check out the likes of Stylegala, CSS Beauty, CSS Thesis (see Figure 6), and the million or so other CSS design galleriesthat have sprung up over the last couple of years.
Figure 6. CSS Thesis is a beautifullysimple site and one of many places to get your daily fix of CSS designinspiration.
Figure 5. The Zen Garden is still goingstrong, as demonstrated by this recentsubmission from Ray Henry ofREH3design.
xv
xvi
The basics of CSS are relatively easy to master, but theproblems start when you try to turn your designs into real-ity. Knowing how to mark up the document, applying theright CSS techniques, and working around browser incon-sistencies become key. This information comes withexperience and cannot be learned from reading the CSSspecification alone. With CSS Mastery, I tried to bridge thisgap and show people some of the latest tips, tricks, andtechniques. At the end of my book, all this information wasput into practice through two amazing case studies fromCameron Moll and Simon Collison.
There is nothing like learning from the masters, and this iswhere Web Standards Creativity comes in. This book picksup where my book left off, with a series of advanced casestudies for you to dissect. Here, some of the best standards-based designers in the world will show you how they take aproject from inception to completion (be it an entire web-site design or a cool technique or widget they've developed).
Each chapter is like sitting down with a design master for aprivate lesson. They will share with you their uniqueprocesses: how they look at a design, deconstruct it, andthen reassemble it using XHTML and CSS (and sometimesJavaScript, too, or even other technologies!). Along theway, you’ll learn some fantastic tricks that you can startusing on your projects immediately. Hey, even I learned afew new tricks while reading this book.
Yes, I mentioned JavaScript in the previous paragraph.Scripting is also a big part of this book. For many years,JavaScript was used to create superfluous effects thatadded little to the overall user experience. We saw effectsthat did things like scroll the text or shake the browser win-dow. The code required for these effects was often bloatedand inaccessible, going against the new philosophy of sep-aration. This led to a backlash, and JavaScript fell out offashion for a long time. Then along came Ajax, and every-thing changed.
People started to develop a renewed interest in JavaScript,as pioneers like Jeremy Keith advocated new ways of sepa-rating content and presentation from behavior (see Figure7). Developers rediscovered the power of the DocumentObject Model (DOM), and JavaScript became cool again. Byusing JavaScript in a responsible manner, web developersare now able to add advanced interactivity to their webpages—interactivity that can help improve the user experi-ence and make better websites. As well as covering XHTMLand CSS, Web Standards Creativity contains a whole partdedicated to modern JavaScript techniques for web design.
If you ever wanted a crash course in practical standards-based design, this book is for you. So stop reading theintroduction, turn to page 1, and start getting creative withWeb Standards.
Andy BuddBrighton, England, October 2006
Author, CSS Mastery
Figure 7. Check out DOM Scripting:Web Design with JavaScript and theDocument Object Model by JeremyKeith, for more information on this subject.
