23 June 2005 11 am edt

The rebooter’s children go rebootless

Once again this year it was my honor to be one of the judges of May 1st Reboot. Viewing participating sites yielded a handful of gems and two striking observations:

  1. There is more talent than originality out there.
    There are always more copiers than innovators, of course, even in a creative field like design. But freshness seemed in especially short supply this year. The same color schemes, the same bisected rectangles and diagonal stripes, the same single-spaced, grey 9px Arial text set against the same ever-so-slightly lighter or darker grey backgrounds could be found on dozens of submitted sites. Maybe redesigning for the sake of redesigning is not enough: to communicate visually one must first have something to communicate about. Or maybe too many design schools are teaching students how to imitate successful styles instead of how to communicate visually.
  2. There was little content and even less user science.
    Many sites submitted had no concern for the user on the most basic levels. Rarely could you identify an idea or purpose behind the site, or name a possible user goal the site was intended to facilitate. There was no flow, no legibility, no usability. It wasn’t so much that the designers had contempt for their users as that they seemed never to have been taught to think about users at all. One gets the feeling that the web design curriculum at too many colleges and universities consists of little more than tips on how to use Flash to imitate sites that won awards five years ago.

To be fair, many who participated in this year’s Reboot are young and are still finding their voices and styles. Today they imitate; tomorrow they may innovate. Hopefully, too, those who currently know nothing about user science will soon work with writers, information architects, and senior art directors who guide them to realize that design is not something you do in a vacuum nor is it something that is just about itself.

I am not worried about these mostly very talented designers; I am worried about what the schools are teaching them, and even more about what they are not teaching them. If schools can teach graphic design, mathematics, music, medicine, filmmaking and even rocket science, why is it so hard to teach web design as it really practiced?

But even if educational questions shadowed the landscape of this year’s Reboot entries, many bright spots still shone brilliantly, including...

Stolen
Content and a sense of humor: two good things that go better together, and two things ’most every personal site should have. The design combines playful, paper-bag, Comedy-Central-bumper style silliness with vintage Dover books elements. It feels throwaway but is carefully balanced — a hallmark of this style. For fun, mouse over Jessey “Neo” White-Cinis’s masthead.
Oscar Asmoarp
Not the first site to do this kind of portfolio, but does it very, very well.
V. Brunetti Studios
Wow! Beautifully textured, naturalistic container is unusual and well done and brings a feeling of calm to the viewing of the designer’s work. Many small, good details, including audio touches. Not crazy about the logo, but impressed with the overall originality and skill.
Ultragrand
Talented designer, understated presentation, glitzy hip-hop logo. If only the porfolio didn’t create ugly scroll bars on my Mac. Also, the flashing of the reverse hover effects in the nav are startling at first but become the tiniest bit annoying after a while. Still, the work is clean and bold. The designer was not afraid to stake out a direction and follow it all the way.
Subsystence.net
Content, baby! I love web magazines, and this one is off to a promising start. Simple but effective color scheme and layout make you interested in the content instead of merely calling attention to themselves for their own sakes. Beginning designers might not be impressed, but this is good design: it does its job without shouting, it is pleasant to look at and easy to interact with, and you won’t get tired of seeing it as you return to it for new content. (With fancier sites, you’re more excited the first time you see them, but after one or two viewings you never want to see them again.)
Seriph.com
Good portfolio of design projects, nice spatial feeling to the site, fine logo mark. I especially like what happens visually and aurally when you hover over the logo. I wish the logo’s typography was as well considered as the mark. I also wish the site’s design felt more like a fully conceived brand space and less like a random abstraction.
ITOMI
Different. And in this case, different is good.

I want to thank May 1st Reboot and my fellow judges, Thomas Brodahl, Justin Crawford, Jens Karlsson, Michael Schmidt, and Paul A. Szypula.

16 June 2005 12 noon edt

CSS: A Designer’s Guide

Some CSS books are revelations, others are lightbulbs. Revelation books, typically organized around a single big idea, are like religious experiences: reading them alters your reality. Lightbulb books, built on a gently climbing path of small, connected ideas, are less intense but no less valuable. In the world of standards-based design, a revelation book converts you to the gospel of semantic markup and CSS layout; a lightbulb book shows you how-to.

Charles Wyke-Smith’s Stylin’ With CSS: A Designer’s Guide is a great lightbulb book, partly because it is clearly and entertainingly written, but mainly because it tells ’most everything you need to know about CSS layout—including things many people reading this page “know” but find hard to remember.

For instance, two best practices have emerged for creating three-column layouts in CSS. One method adds a pinch of non-semantic markup to clear the three columns before creating the footer. It’s dirty, but it works. The other method uses the CSS2 :after pseudo-class to insert and hide non-floated content. That one works because browsers like Firefox, Safari, and Opera understand the CSS2 :after pseudo-class while IE/Win, which doesn’t, clears floats by default even though the CSS spec says not to.

There are geeks out there who’ve memorized both techniques and can argue passionately in defense of one or the other, but I am not one of them. Although I am fairly adept at CSS layout, I cannot keep track of all the tricks and hacks—partly because I prefer to think about content and design. (No offense is intended to those for whom CSS is an art form in itself; different strokes.)

If professional CSS expertise required knowing only five or six workarounds, my browser’s bookmarks would fill in for my missing brain cells. But we all know what happens with bookmarks: we soon have so many, it’s like having none at all. I must have compiled at least 100 “important” CSS bookmarks before I gave up on bookmarking as a means of maintaining my coding knowledge.

Stylin’ With CSS is great precisely because it puts together all the knowledge (or close to it) you’d have from bookmarking the most important sites and pages—and it does so while pulling the ideas together in a coherent and readable fashion.

If you’re good at CSS but you can’t keep track of all the little hacks and tricks, this slim book has you covered. Yet it’s equally good for people coming from a print (or Dreamweaver) background, in that it explains CSS progressively and clearly, avoiding the confusing jargon and off-putting, doctrinal ranting that mar some CSS “how-to” books.

Wyke-Smith is not a visionary, but he is a solid writer with a clear understanding of what designers need to know about CSS and in what order they need to learn it. I recommend this book.