snap from Veerle's Duoh! circa 1997

Veerle is one of my favorite Web designers. She came clean recently and republished her first website circa 1996! She cited Jason Santamaria’s recent post about his own earliest Web work. OK so now I have another new favorite Web designer.

What’s so cool is how unappetizing, especially Veerle’s, early sites are. To be fair, hers was perpetrated four years before Jason’s. And those were four big years too. But my intention is not to criticize.

What strikes me about this exercise is that it shows once again that there is no such thing as overnight success. You see in the decade-or-so of work a progression from ugh/ho-hum to pow! Take heart. Keep working.

The Thought Propulsion™ corporate site is up and running. For the technically inclined, here are some interesting facts:

• hosted on Amazon EC2
• using the extremely slick EC2 On Rails Ubuntu/Ruby on Rails virtual appliance
• there’s a tasty microformatted hcard on the contact page (check it out with Operator)
• OpenID login (foreshadowing)

And of course a nice gray and orange theme just in time for Halloween.

Flash wins again. Notice how hovering over the thumb yields a time-indexed image popup. Very fluid, very useful.

What is a little surprising is the page’s departure from the common practice of using anchor tags within the list items. Instead of each list item containing a hyperlink, it contains plain old text. Since there is no hyperlink, the browser won’t provide a visual cue that the item is navigable/clickable. That’s kind of ok since most designers go to pains to undo some of the cue anyway — I’m talking about eliminating underlining. The other cue — changing the cursor to the pointer image when mousing over the “active” list item, is implemented via a CSS rule. Then all that’s left is to catch the click events in JavaScript code.  Here’s the markup:

It’s a pretty design and it works really nice. On the other hand it is not an example of “unobtrusive JavaScript” or of “graceful degradation”. I am pointing this out not to be dogmatic about these things, rather to cite it as evidence of the difficulty of applying the aforementioned philosophies.  Here you have a lovely page, built by the best designers money can buy. It doesn’t get much more high profile than this. And these guys went ahead and built a page that requires JavaScript. Made me think. I hope it makes you think too.

This feels like it’s going to be a bit of a recurring theme here (see the recent Tableful Grace post). Graceful degradation with respect to JavaScript, CSS, heck even background images; separation of behavior from content; table-less layout — these are great philosophies. But the practice is riddled with subtlety and compromise. And you wouldn’t really know it from reading the short “gee look what I can do” type articles.

I’m curious to know how you feel about these new sacred cows now that we’ve had a little experience with them. For example, are you implementing whole applications with graceful degradation or only pieces of your application? If it’s the latter, are you getting any real benefit? Does graceful degradation double your testing effort?

So what’s my first thought when encountering such a site (well maybe my second thought — right after “can I preorder my copy of Harry Potter #7“)? Why it’s: “let’s see what Firebug can tell us about the site’s construction” of course! Here’s what I found interesting in about three minutes:

1. the site pretty much uses table-less layout — yippee! divs and floats my friends
2. elastic layout
3. font resizing works pretty well in content areas but not in navigation controls

Something I’m particularly interested in these days is that old chestnut of web design: the rounded corner. The approach on the Powells site was so, well, heinous, that it prompted me to inaugurate what I hope will become a regular feature here. Without further ado, I give you:

Heinous Corner-Rounding of the Day Award (HCROD) #1: Powells Books (div per image)

Got some content you’d like to render in a rounded box? Well then, simply wrap it in six divs — one each for: right, bottom, and each of the corners. That way you can hang CSS rules on each of those divs to apply your rounded/shadowed images. Semantic HTML my foot. Dig: