My Zen Garden Design | September 26, 2003

Hi Folks,

I spent last Friday and Saturday evening coming up with a Zen Garden design.

Basically I wanted to create something clean and clear. Not too flashy or full of complicated CSS trickery. Just something simple that would inspire people to say, "hay, I could do something like that!"

I was also keen on getting the job done quickly (busy man and all) and not trying to impress people with my (limited) CSS knowledge. As such I wrote the bulk of the code in about an hour. I realise that it's a bit sloppy and uncommented. I've used the box model hack far more times than I usually would. However on the whole I think it's turned out quite well.

I've tested it on a few browsers and it seems mostly fine. However I'd really appreciate it if people could give it a once over before I submit it to the Garden, in order to catch any lurking bugs.

Also I'd really like to know what you think, and any suggestions you may have to make it better.

Cheers

Posted at September 26, 2003 2:10 PM

Comments

Didier Hilhorst said on September 26, 2003 2:49 PM

Lovely entry!

I am impressed with the header (and header graphic) of your submission. Sweet! Fresh and simple. Oh and I like the little logo you have added to the CSS Zen Garden name (I am a sucker for logo’s and things alike). Colors are perfect I would not change a bit of hex code of that.

After the love comes critique (or whatever). I think that the main textual areas are missing “un je ne sais quoi” or to put it in plain english: there’s something missing. It is hard to exactly pinpoint what it is. Maybe the titles need more emphasis. The list items are fine. Just the central text is a little plain (although this might be your intention).

Another suggestion might be to expand the green background color of the list items all the way down. In the header the part “lime” might look good in a darker yellowish orange shade instead of green.

Bottomline: good design. Fresh and comprehehensive layout. Don’t take my suggestions too seriously. I’m just another designer adding his $2 cents.

Phil said on September 26, 2003 3:08 PM

It’s the best one yet! Congratulations.

Ben Saunders said on September 26, 2003 3:09 PM

Nice! I’d agree with Didier in that the white background (bottom left column) looks a little empty. No problems with “plain” text, though - simple is good…

Scrivs said on September 26, 2003 3:28 PM

Very impressed by the simplicity mixed with beauty. Very hard to achieve and you pulled it off. It works in Firebird 0.61 on Linux.

Critique: The text above the navigation that starts “A demonstration of what…” can be kind of hard to read with the white font on the light background. Perhaps a darker green font against the background.

JBlount said on September 26, 2003 3:29 PM

Just a thought, the side column (left) looks short. IMO it’d look a lot more put cleaner if it came down all the way by defining it’s height. Just a thought.

On the whole, it looks great. very clean.

Egor Kloos said on September 26, 2003 4:19 PM

Very nice! Clean but not to simple and great to look at. I, personally have no problem with the white area under the left-hand menu section, and actually, I kind of like it. In fact I’d wouldn’t change it because it gives the page some breathing space and lets you know where you are, not at the top. Browser wise I can’t see any problem viewing it in my default browser Safari.

The titles in the main content section (“The Road to Enlightenment” etc.) have the same color as the body text below. They don’t seem to standout as much as they could. Changing the color my ruin the clean effect you have now but the page may also benefit from a bit more differentiation.

But hey, nitpicking like this say’s a lot about your work. Nothing but good things of course ;)

jon hicks said on September 26, 2003 4:29 PM

Like Didier, I think your zen garden logo is real gem. Great design - amazing what you can do in an hour!

Looks the same in Opera 7, Mozilla 1.4 and IE6 as it does in Safari. One odd thing though - the first letters of the archive and resources menu links are missing. Were you doing some fancy pseudo thing?

Have you enjoyed the experience? I wonder if a Zen Garden submission is going to be seen as a sort of ‘rite of passage’!

tomjleeds said on September 26, 2003 4:50 PM

Very cool. I can see where people are coming from about the whitespace on the bottom-left although personally I think it looks fine. To overcome this, I used an image and aligned it correctly, then set it to repeat-y. Nice and simple.

Andy Budd said on September 26, 2003 5:08 PM

Thanks for all the comments so far. Glad everybody seems to like the design, and people don’t think it’s too simple.

I take peoples point about the left menu. Personally I’d prefer it if it extended to the bottom as well. However I’m not sure of a simple way of doing this.

I could add the panel colour to the containers background image. However this could cause problems at the top of the page, so i’d have to do something with the background colours of the header and preamble to hide it there.

Alternatively I could add it to the backgrounds of the right col.

However both of these seem a bit nasty as you’re adding backgrounds to elements other than the element your wanting to add the background to (if you know what I mean).

If anybody has any suggestions, please let me know. I’m probably missing something obvious.

gaston said on September 26, 2003 6:44 PM

Beautiful work. It looks great, and I don’t think the menu’s height looks bad.

I don’t know what operating system you use, but it looks great in Firebird, and IE 6 in windows.

Congrats!

Jeff Croft said on September 26, 2003 6:45 PM

Andy-

It’s great. If this gets into the Garden, it will surley be one of my three or four favories! Keep up the great work.

Jeff

Charles Stuart said on September 26, 2003 10:09 PM

Compliments:
Looks good. Nice and minimal. Really appreciate it.

Critique:
The white “by” text in the left menu becomes a bit over-figurative for me. The repetitiveness of it reminds me of a bullet… but it doesn’t serve that function.

The top pixelated graphic is kewl. I do like it. However, I think I might appreciate it more if it was more revealing - maybe if it was a barely recognizable pixelated mushroom or other garden entity. Less is more sort of thing. Kind of constantly puzzles me as I try and figure out what it could be. Maybe that’s the point though?

I think a footer might look nice. The text in the main content area seems a bit tight with the bottom of the viewport.

I believe I agree concerning the height of the left menu. Yes, setting height in css is a pain. I don’t have any quick suggestions. Could you set the green into the body background image and have it repeat-y? And then set the left menu to transparent? A pixel off per browsers would look bad though..

In Safari, the descenders (sp?) on your header text are cut off I believe because of the height value is set.

Your link color I believe works better on your left menu than it does in your main content area. It’s very figurative in the right, almost a bit distracting.

That’s about it. I think yours is one of my favorites along with:

http://www.csszengarden.com/?cssfile=/031/031.css&page=1

http://www.csszengarden.com/?cssfile=/036/036.css&page=1

and this one i guess:

http://www.csszengarden.com/?cssfile=/025/025.css&page=2

Keith said on September 27, 2003 1:01 AM

I like it. It’s clean and I’m diggin’ the color scheme you picked. I like the fact that you wen’t simple and didn’t try to over do it. Anyway - nice work, now submit that sucka!

Cheah Chu Yeow said on September 27, 2003 4:19 AM

I came across your site from reading Whitespace and your Zen Garden submission blew me over as well. That’s one of my favorite designs now.

I read the rest of your entries and I really like the topics you’re on too.

If I could bother you to ping blo.gs or weblogs.com on every blog update, so I can add you to my blo.gs-powered blogroll? Thanks.

Andy Budd said on September 27, 2003 11:49 AM

Hi folks. Thanks again for all the great feedback. I’ve made a couple of slight tweaks this morning and was wondering if people could give the design a quick check to make sure I haven’t broke anything.

My original design had a yellow footer for the “bandwidth donated by” text. I didn’t add it initially as I thought it’d be a bit tricky. However the bottom of the page was looking a little bare so thought I’d give it a go. It seems to work on most (not Opera 6 Mac) of the browsers I’ve tested it on, but any extra testing would be much appreciated.

I’d usually test all my designs using Virtual PC. However I stupidly deleted all my disk images while trying to free up some disk space the other day, and don’t have the disks I need at home to re-install them. Doh!

Oh, and I’ve reduced the text size slightly and increased the line spacing so it looks more like the original design. However if people think the font size is now to small, let me know.

Cheers

Scrivs said on September 27, 2003 2:18 PM

Still checks out in Firebird 0.61 Linux.

Scrivs said on September 27, 2003 2:19 PM

Oh and font-size is fine on my side. 1600×1200 res.

Dan R. said on September 29, 2003 9:10 AM

Hey Andy, great design! I love the pixellated lime halves too — nice touch ;-)

I don’t see anything wrong with this design, in fact, it has inspired me to get back to work on my 2nd and 3rd zengarden submissions, which have been sitting idle for too long now.

Lehnhard Lützen said on October 9, 2003 9:55 PM

This Design is very nice. After “Zunflower” and “White Lilly” my third favorite. But I can’t understand why the headers “The road of Enlightenment” and “So what is about?” was made with images…
XXX
in CSS
h3{margin: 10px;background:#C6CF9C; padding:0px 17px;font-size:16px;text-align:left;}
h3 span{background:#a5b67b;margin:0px;padding:0px 10px;color:#FFF;}
will give the same result