Web Standards Creativity (Book review)

Some people tend to think that using Web Standards will somehow stifle their creativity. That usually changes once those same people have learned about Web Standards and how to use them. For me it’s quite the opposite. Having standards to work with lets me spend my brain cycles on solving other problems.

Web Standards Creativity is a book that wants to show you that creativity and Web Standards can go hand in hand. In the book, ten well known web designers (if you’ve been reading standards and accessibility blogs for a while you will recognise all of them) get together and contribute one chapter each, explaining their creative approach to solving a specific problem while remaining standards compliant and accessible.

There are three main parts to this book, each with a slightly different focus:

  • Layout magic consists of five chapters that contain examples of advanced CSS layout techniques, which include making use of advanced CSS selectors and PNG alpha transparency.
  • Effective print techniques applied to CSS design is made up of two chapters that take some techniques that work well in the print world and adapt them to the Web. Grid design and typographic principles are explained in depth here.
  • DOM scripting gems comprises the final three chapters of the book and explains how DOM scripting can be used to improve your website. The examples include a printing technique that saves paper, resolution dependent layouts, and an accessible sliding navigation menu.

I think it works out rather well, though the writing style and attention to detail varies with the author. That’s probably unescapable in a book with ten authors, but it was slightly distracting to me.

Overall the examples keep the promise the book makes in that they are creative, standards compliant and up-to-date, but there is just a little bit too much inaccessible image replacement going on for my taste. Not a huge problem, but I would have liked to see at least one example of image replacement that has a fallback for when images aren’t available, or at least a mention of the issue to make the reader aware of it.

A couple of problems I had while reading this book are related to its physical appearance rather than the content itself. Every page is in full colour and printed on paper that is a bit too glossy for me to read comfortably. I had to keep adjusting the angle I was holding the book. And the text is really hard to read on some of the pages because of the colour combinations. Colour contrast is important for readability in print as well as on-screen.

All in all though, I’d recommend this book to anyone looking for techniques that go beyond theory and useful tips that you can use in your projects now.

Web Standards Creativity
Authors: Andy Budd, Andy Clarke, Ian Lloyd, Cameron Adams, Rob Weychert, Ethan Marcotte, Dan Rubin, Jeff Croft, Mark Boulton, Simon Collison, Derek Featherstone
ISBN-10: 1590598032
ISBN-13: 978-1590598030

Posted on September 18, 2007 in Reviews, Web Standards

Comments

  1. I had the same qualms, that the book was designed rather poorly (odd, for a creative book). I found some chapters extremely hard to read given the backgrounds and colors. But, once you can get past this (it isn’t on every page), the contents of the book are excellent.

    I like that it wasn’t just another CSS book - but one that took the time to challenge your thinking and process to help you create a great web experience.

  2. Thanks for the review, Roger! :)

  3. How can someone teach creativity if they aren’t themselves is what I ask myself. Might give a chance thouhg if it’s “not just another CSS book” as Nate puts it. Thanks for the review.

  4. I noted the same things regarding the book’s design when I was flipping through it. I haven’t actually read it though.

  5. Indeed, had the same feeling about this one. The layout sometimes disturbs the overall great content and makes reading a p in the a.

  6. This book is a great example of real world application for all of the techniques we often read about. It was very interesting for me to see the similarities and differences between the authors’ code and my own.

    There are definitely a few chapters in here that make picking up this book worth it, but there were also others that I glossed over and will probably never read in their entirety.

    As others have said, I did have a major issue with the coloring and printing of this book. Having every page a different color is annoying, but something I can live with since overall I thought the book was pretty good. I just thought it was very ironic for a book that preaches accessibility and open standards.

  7. Nice review - thanks muchly for it as it is one I’ve considered Amazoning-to-Australia.

    On degradable image replacement, is the overlying absolutely positioned span element the option you refer to?

  8. September 19, 2007 by Roger Johansson (Author comment)

    Joel:

    On degradable image replacement, is the overlying absolutely positioned span element the option you refer to?

    Yep.

  9. @Roger: have you found glitches in IE when scrolling and using that method?

  10. September 19, 2007 by Anders

    I never had problems reading the book because of glossy paper and layout.

    It’s a great book - one of the best web books I’ve ever bought. But I also noticed the inaccessible image replacement method. Anyone got an accessible method? I need one in a project right now…

  11. Regarding the image replacement:

    If you need a image headline. What is the bad thing of using simply a img-tag with a proper alt attribute? Roger use this right here and I use it on my homepage too. Try it out: go to my homepage an disable images. It looks the same as with images. Is the alt attribute a disadvantage regarding SEO?

  12. The problem I see with relying on the image’s alt attribute would be if images and CSS were disabled. Since it’s “just an image” and not a true headline it will lose it’s importance in the hierarchy of the page.

  13. September 19, 2007 by Roger Johansson (Author comment)

    Joel:

    have you found glitches in IE when scrolling and using that method?

    No, though I don’t use image replacement enough to say for certain that I have run into all possible situations that may trigger a bug like that. Do you have a specific example?

    Anders:

    But I also noticed the inaccessible image replacement method. Anyone got an accessible method?

    THe Gilder/Levin Method, as described by Dave Shea in Revised Image Replacement is the least inaccessible method I am aware of.

    Alexander:

    What is the bad thing of using simply a img-tag with a proper alt attribute?

    Not too much as long as it’s inside an appropriate header element. It’s less flexible though, and I feel it doesn’t degrade as well when images or CSS is off. And using an image to control the look of a heading sounds an awful lot like presentation, which is what we use CSS for. I also believe (but have nothing to back it up with so I may be wrong) that alt text, despite being inside a heading element, will not be as good for SEO as a real heading.

    My personal preference is to avoid image replacement though. I just mentioned it in this review because of the examples that are in the book.

  14. @Roger: I’ll try to grab the one that I found. It’s at home on the local server there.

  15. Roger, I could not find the example I had using the absolutely positioned span element, however using the negative text-indent definitely had this issue. I’ll keep searching when I’m around IE6 again.

  16. Depending on what you want to do with your image replacement, dynamic text replacement (article at a list apart, by Stewart Rosenberger) will allow you to dynamically replace text with images of the text. Obviously, only any good if your image is just text (eg you need a fancy font for a heading) but the bonus is that the heading is still there, and correctly marked up as a heading for the search engines, screen readers, etc. If css or images are turned off, you get the heading text as you would expect.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.