Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Garden Feedback

May 09, 2003

Wow, this has been quite a trip for me.

The feedback so far has been overwhelmingly positive, and I appreciate everbody who has taken the time to view the work and comment. It took till this morning to see my first negative comment, when I was expecting far more of them off the mark. I knew I rushed to get it up, so Mac testing was a bit on the light side. Most people have understood this, and supported the project.

Stormweather has, of course, been the biggest problem. Seems like most every Mac browser cringed, with the added bonus of assorted Mozilli 1.3 onwards balking too. Which is odd, because Netscape 7 and Mozilla 1.0 didn’t seem to have any problems with it. Ain’t life grand? I received an e–mail from Phillipe Wittenbergh this morning with a corrected style sheet. Thanks Phillipe!

A couple of submissions have made their way across my inbox, and I hope to get my first user submission up over the weekend. This is where the project starts to get real interesting.

On to the reviews. Pardon me as I toot my own horn for a bit, but it’s comments like these that put the perma–grin on my face yesterday.

How cool is this. Via Simon Willison comes news of the CSS Zen garden, a stunning “demonstratation of what can be accomplished visually through CSS–base design.” What a fantastic idea.

— Jeremy Hedley, AntiPixel

Want to see some wonderful, and strikingly different, designs for the same content? Want to contribute your own themes? Then get on over to the CSS Zen Garden. I have two reactions: delight and jealousy.

— Eric Meyer, MeyerWeb (among others)

We need more examples which show the integration of beautiful design and solid structure. Mezzoblue’s Zen Garden is certainly one of them. It’s this kind of stuff which inspires me to the core and makes me want to contribute.

— Douglas Bowman, StopDesign (emphasis his)

That rocks. Thanks also due to Craig Saila, Nathan Steiner of Web Graphics, Simon Willison of Incutio, Ian Lloyd of Accessify, the esteemed Jeffrey Zeldman, and many, many more. It’s your great comments and constructive criticism that have made the past month of work worthwhile.


Reader Comments

Dave S. says:
May 09, 06h

Eric - no brushing off will occur on this site. ;)

I respect the work that the structurists are doing, and I see the semantic web as a potentially beautiful and useful thing. I’m sold on the concept, which is why I’ve bent over backward to make sure that my code is real nice. XHTML1.1 was a big step for me, AAA even more so.

But a lot of the really good, solid designers are code-ignorant. And a lot of the structurists are color-blind. There’s not a lot of common ground between them, they’ll rarely play in the same sandbox.

The Garden is probably a little more on the semantic side, than the design side, if I had to be honest. The sites that have been linking to it are ALL from the ‘standards’ crowd. The ‘sexy design’ crowd (K10k, DiK, WellVetted, SurfStation, PixelSurgeon and so forth) haven’t made a peep. This is why a project like this is so difficult; you can’t be all things to all people.

There has to be some sort of reconciliation; we all work in the same medium, for God’s sake, why are we always disrespecting each other’s work? Misunderstanding, I believe. Show me a structurist that ‘gets’ the design sites I linked above, and I’ll show you a guy worth ten times more than the rest of them. And vice-versa.

I don’t claim to be the guy that’ll bring both crowds together; I don’t see it happening any time soon. But somewhere along the way, somebody has to point out that, hey, we all want the same thing. Great, usable web sites that make our clients rich, offer a fantastic user experience, and look good on our portfolios. Hopefully the Zen Garden is a step in the right direction.

Addressing your points:

1) The ideal markup probably wouldn’t even need first and final, it would simply rely on CSS selectors. I would have loved to let it go at #preamble>p+p+p, but it’s simply not pratical enough right now, browser support being what it is. I made a really serious attempt at not assigning classes to those <p>’s, but I needed the extra flexibility. The Hack Hotbot contest I participated in recently was far too constraining for some of the ideas I had in mind; I made sure not to make that mistake with the Garden.

2) Yep, I dropped the ball on that. Douglas Bowman was the first to point that out to me, and I’ve no doubt he won’t be the last. I’m not quite sure how I didn’t see it, but… I didn’t see it. Oh well. Maybe I’ll whip up a v1.1 before I get too many submissions…

unofficial point 3) Again, flexibility is my main concern. I want the submitted designs to really be things of beauty; I don’t want the creators to have to worry about excessive hacking of existing elements for the subtle effects that need to go into an effective design. As it happens, I only used one of those on the main design and didn’t touch them for the others, but it’s still comforting to know they’re there if I need ‘em for future designs. Once the dust clears, I’m going to go back and play some more.

May 09, 11h

The Zen Garden is really really nice. And you know what is even nicer? I poped it’s url into the text browser Lynx, and it displayes perfectly, as you can see in the screen shot I made:
http://www.xslf.com/temp/css-zen-garden.jpg
Now show me a table based layout that looks this good in graphical browsers, and in the same time works so well in a text only browser!
:-)

Eric says:
May 09, 11h

First of all, kudos to you for taking the initiative to get designers on board with CSS. I would like to offer some constructive criticism that might be useful if you do another version of the page. Please don’t brush this off as the rantings of a structural purist, I would simply like to illuminate some points that will probably come up when designer and programmer meet.

1. The p classes p1, p2, p3 aren’t very semantically relevant. The ideal markup would denote first and final. So it would be something like:

<p class=”first”>foo</p>
<p>foo</p>
<p>foo</p>
<p class=”last”>foo</p>

Now if you only have one item, it should be

<p class=”first last”>foo</p>

or possibly a new class

<p class=”single”>foo</p>

2. Lists should be lists. Your span class=”iL” should be li elements. Why? Because you are denoting a list, which non-css agents will render well, typically as a bulleted list. Using spans means they will render inline and will be tough to distinguish as individual pieces. You shouldn’t lose any flexibility by putting them in li but you will definitely gain a better page under degredation (like Lynx)

Regarding the extra spans and the empty divs that a purist would complain about, you obviously have some good experience making pages and know how necessary these are. The purist who really understands the concept behind the specs and recommendations should realize this and also realize that you aren’t really hurting the semantic strength of the document.

All in all, excellent work, I might even submit a design…

Virginia says:
May 10, 05h

The Zen Garden is a fabulous idea and beautifully done. Perfect for a mention on Web Teacher!

Dave S. says:
May 14, 10h

A note for anyone checking this in the future: I’ve modified the Garden and all current submissions to address Eric’s point #2 in the above comments. I built it using <span class=”iL”> for the various link lists, which rightly should have been <li>’s from the start. One more step towards semantic purity…