Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Reviewed April 30th, 2007 @ 02:37PM

[Book Cover] Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting by Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Derek Featherstone, Ian Lloyd, Ethan Marcotte, Dan Rubin, and Rob Weychert —whew—was an excellent resource for any web developer. Each of the authors had their own chapter based on different aspects to create accessible, usable, and standards based websites. Andy Budd wrote the introduction and let readers know that this book was an extension to his previously published CSS Mastery—and I would agree. This book was broken into 3 main sections and 10 total chapters.

The first section was dedicated to Layout Magic. The chapters covered such topics as background images, page structure and contents such as menus, content highlights, and the masthead. We got a glimpse of how you can best manage, or tame, a wild CMS using CSS, Javascript, and Flash (sIFR). We move on to discussions related to switching your layouts based on your body selectors. This chapter exposes tips and tricks to create a website with several layout options—by switching a class on the body—all of the underlying markup is the same. Next we take our skills and apply them to a layout that jumps out of the grid or boxy layout. For those of you who have read Transcending CSS this chapter will be familiar as Andy Clarke walks us through a layout while using element selectors, descendant selectors, and adjacent sibling selectors. If you love pink, you will love this layout! The last chapter in this section discusses some creative uses of PNG’s. I would say this was one of my favorite chapters of the entire book. Jeff Croft does a great job discussing the different image formats, their uses, and why PNG is now a viable option for your websites. He shows some great examples with the alpha transparency and it’s uses for things like image captions, icons, and even watermarking and masking. This section gives you a solid foundation to begin creating some very exciting layouts.

The second section bridges the gap between print design and web design. Mark Boulton starts this section off by giving a brief history to the grid in print design and how this can be applied to the web. He shows us how to use background images and a little bit of math, allowing you to create websites that align to a horizontal grid. For those who have seen subtraction.com, or even Mark’s personal site, markboulton.co.uk, you can see this example in action. The next chapter talks about Typography. I think that this chapter could have been expanded into it’s own book—there is much to be discussed here. This chapter gives you the tools you need to creatively use elegant typography in your layouts’without sacrificing accessibility. These two chapters give a great primer on getting inspiration from other areas of design—including print.

The final section is related to the DOM and some tricks to enhance your website. The first chapter talks about printing. Using a mixture of print stylesheets and the DOM we are able to print specific sections of a page, while hiding the unnecessary elements of the page. The user is given total control—so this solution only helps to save a user from wasting mass amounts of paper (they can select to print the entire page if they would like). The next chapter discusses extending your layouts based on the size of the browser port (resolution-dependent, though not directly dependent on the screen resolution). The tricks here allow you to create a layout that looks great in a smaller viewport, and re-arranges the layout for those who use more screen real estate. This is not stretching with the viewport (fluid), but actually re-arranging your columns and navigation based on the viewport. Some very valuable tips in this chapter. The last chapter finishes us off with an accessible sliding navigation. This example can be found all around the web, but most of them don’t always address the accessibility needs and issues that may arise. Derek Featherstone does a great job of putting accessibility at the forefront of creating the sliding navigation, while still giving you a stunning end product.

This book was a great read, and is packed full of great tips, tricks, and usable scripts to enhance the overall usability of your website. All of this is done without hindering the accessibility for the widest audience. This book is highly recommended for those who are looking for the best practices to achieve different effects. To be honest, some of the chapters were very elementary—while others were more advanced—but everything was explained very well by the authors and the code examples.