Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Zen Archives++

September 07, 2005

I’m happy to report the Zen Garden archives have (finally) undergone a major re-tooling.

The css Zen Garden has been desperate for some TLC for a while now. Submissions have been increasing steadily (sometimes 6 or 7 per day), but management and archiving has been a frustrating problem for quite some time. So I fixed some of the major problems.

Categorization

Since its launch on this domain over two years ago, the css Zen Garden archives have undergone numerous changes to cope with the growing volume of designs.

It seems hard to believe now, but at one point in time all designs I had received fit on one page. When that page grew too weighty, I chopped it into a handful of categories and gave each of those their own page. Then they had to be further subdivided into their own series of pages.

However, the categories themselves have become mostly meaningless, with ‘Conceptual’ becoming a default placeholder for just about any non-official design, unless I found a way to cram it into one of the other categories instead.

But fixing the problem either meant way more work for me, or adding a large degree of automation to the publishing process. So I opted for automation.

Automation

After spending the better part of last year writing a book on the site, it became obvious that my manual addition process was going to need to be addressed, and soon. So in January or so I started tinkering with MySQL databases to see what I could come up with.

By February, all new submissions were going into a database. Not a very good database, mind you, but it was enough to allow me to write a quick manager for the site during the spring. All submissions went into a database, which allowed me to categorize and automatically generate HTML that I could copy and paste into various templates. Handy, but not good enough.

About a month back, I needed help screen-scraping the list of Zen Garden designs. This was to facilitate Version 2 of the manager, which would contain a full database of all Zen Garden designs, so that publishing would be automatic from now on. And barring some publishing settings which will take a bit longer to enable, it’s finally done. The publishing workflow is almost completely automated, so all I have to do upon categorizing a design is hit the big ‘Publish’ button. (Official designs take a bit more manual work, but that’s a necessary evil.)

Archive Improvements

So now that I can update the site without planning my schedule in advance, what can we expect?

Well immediately, you’ll see that the archives finally have screenshots. It’s been a long time coming, and the lack of having them has bugged me too. Now that I spend less time updating, I can spend a bit more time to grab these for the official designs. This is a manual process, which involves Safari and Photoshop — until it can be automated on the server as well (and I have my doubts this is possible, barring an API from BrowserCam or similar), screenshots will only exist for official designs. We’ll see what this does to my bandwidth though…

As well, I can do fun things like creating ‘recently added designs’ lists, and even offer an alternative archive format in the ‘View Designs By Date’ page. This is a bit broken for existing designs due to missing publish dates — creating metadata manually is no fun at all, thanks — but it ought to become a lot more useful as new designs are added.

The categorization problem above? So fixed. Now instead of a handful of meaningless categories, designs can exist in any number of the 50+ categories which describe things like layout type, dominant colours, and themes. I’m basically treating them as tags, and can add new ones at any time. For now, I’ve only re-categorized the 180 official designs, but as new ones come in I’ll be more accurately categorizing any and all that get published. The new problem is going to be categorizing the categories; I’ve reserved a ‘group’ column in the table for precisely that, whch will be implemented in due time.

What else? Oh, a couple new RSS feeds, which are going to be ‘experimental’ for now. The designs listed are screwy at the moment (expect them to be completely innaccurate) and I’m not 100% convinced they do what they’re supposed to yet, that will take a few updates to figure out. But you can expect they’ll eventually work.

Long Term

So that solves a few problems, and leaves a couple of questions hanging about what has yet to be done:

How about Comments/Ratings?
I’ve considered comments, but I’m not going to do it. Browse any major CSS design listing site to experience first hand why not. Anonymous commentary-free ratings might be a possibility, but very low priority.
Ads?
No. Well, kind of. Since I’ve spent far more (billable) time than I should have on this upgrade, I’m likely going to run some ads on the archive pages for a few months. Only to recoup the costs, and then they’ll be removed. I have a specific dollar value in mind, so they’ll only run until that has been reached. If you have a cool product that’s relevant to the type of people likely to be viewing the Zen Garden, get in touch. Otherwise it’ll just be AdSense.
Why are the archives still on mezzoblue.com?

Legacy and overhead. The site was originally launched on this domain, and since the purpose of the site is to re-skin a common body of content after all, picking just one of those and just using it for the archives and supporting material seemed a little silly. But forcing submitters to style more variations would have been more time-consuming for them, and the barrier to entry would be a lot higher. This was a real concern at the time, so I dropped the supporting material in this site’s template to side-step the problem.

At some point I think there will be a ‘master’ design for the supporting material, which will then see it and the archives pushed over to the csszengarden.com domain. At that point, the page that greets you when you visit the site will change to more of an explanation/design listing, to solve some of the lingering problems around the fact that I can’t change the markup structure these days. But I’m not quite ready for that step yet.

Is it still relevant?

Truth be told, my idea of what the site is has changed quite a bit recently, perhaps yours has too. Keeping in mind that it’s a lot of things to a lot of people, and designers new to CSS are still stumbling across it for the first time every day, its original purpose hasn’t gone away. But for those of us who get CSS design now, and that’s a significant lot of us, the initial impact has long since faded.

What was reinforced to me as I went through the archives for screenshots and categorization, is what a wide and diverse body of work we’ve created. Hundreds of designers are solving the exact same problem in so many diverse and unique ways. That work continues to be relevant, and although much has changed about the techniques and coding we use in the past few years, a good design is still a good design. And there are a lot of them. And there will continue to be more of them.

As it says in the wording of the site, which is long obsolete, “One day this gallery will be a historical curiosity; that day is not today.” This may be true of the markup that makes up the site (more divs and classes than necessary today), the site navigation (woefully inadequate), and even the wording itself (oh how I wish I could edit), the main point of the site — the designs people submit — will continue to be relevant as long as I continue to receive them.


September 07, 01h

I know of gnome-web-photo, which can be used to automate the screenshot process, but it is probably a pain to install and setup right now.

http://cvs.gnome.org/viewcvs/gnome-web-photo/

September 07, 01h

Well Dave if you don’t accept donations, then perhaps I could help out taking screenshots of Zen Garden submissions.

Zach says:
September 07, 01h

Given the way the web design community has rallied around the Garden, I have no doubt that if Dave asked for help in any area he would get an overwhelming response.

I am just impressed with the devotion and patience that has gone into making this project what it is, and keeping it up for as long as he has.

Great work.

September 07, 02h

Great news, the improvements work well!

Does this mean you will look at those submitted designs? :)

September 07, 04h

Dave-
Thanks for all the hard work. The list looks great. Now I know why it’s been so long since the last post.

September 07, 04h

The categorization is much easier to browse what you’re looking for from a newbie standpoint. However the oldies that knew exactly where to look for an old design in a long large list…it can become daunting. But no big deal. It needed it.

I’d still like to see a ZenBrowser which browses the templates through a framed browser, much like the themes for WordPress.

September 07, 12h

Looking good. While I can understand your lack of desire to support comments on the site it might be nice to have a way to mark a design as “broken”

What I mean by broken, typically, are those unofficial designs that no longer have their CSS online (for whatever reason).

Here are a couple I found while testing out the new archive system:

Under All Other Deigns:
Marimbondo by Lucas Sigrist
http://csszengarden.com/?cssfile=http://www.petgarden.com.br/lucas/marimbondo.css

homework by nailman
http://csszengarden.com/?cssfile=http://info.wsisiz.edu.pl/~jaworskm/mj.css

September 07, 12h

You might want to check out Paparazzi for screenshots until you can come up with something more automated.

http://www.derailer.org/paparazzi/

September 07, 12h

It’s looking great Dave. Quick idea on the automated screenshot front - perhaps you could use SnapWeb ( http://braintickling.8k.com/snapweb.html ) along with some Applescript to resize and upload the screenshot?

I’ve a little experience myself with this after building SiteVista ( http://www.sitevista.com/ ) - it’s similar to BrowserCam.

If you ever have a crack at it and get stuck, drop me an email, I could send you some sample Applescript that I wrote to do the Safari tests in SiteVista.

September 07, 12h

Come now Dave, you know there are people who are more than willing to donate. Of course usually in the world of freelance web design, we are usually tight on money, especially the young among us ( Ahem, myself. ).

Dave S. says:
September 07, 12h

Bill - Yes, a ‘broken’ list is definitely in the works for future upgrades. I did some pretty careful weeding a month or two ago, but it’s an ever-changing thing. Further complicating matters is that sometimes the servers are just down for a while, or slow, and so removing it outright leads to even more work when I get an email from the designer asking me why I removed it. I have some ideas on this, but it’s not the highest item on the priority list yet.

Brian / Paul - Thanks for the suggestions, I came across both Papparazzi and Site Vista in my searches, but Snapweb is new to me. I suspect the bandwidth concern is the bigger problem of the two, though.

Dave S. says:
September 07, 12h

Joseph - thanks, but I’m not looking for donations. Given the book, the site toes a funny line between commercial (albeit indirectly so) and non-profit. I like to think of it as the latter, but the argument could be made toward the former. For tax purposes, and just plain the sense that donating to a site that indirectly benefits me seems wrong, I’m not considering donations.

Ethan says:
September 09, 03h

I took a quick look at Hotlinks[1], to see what they were using. Looks like they’re using some scripts[2] to automate screencaps from the command line, which is itself based on khtml2png[3].

Of course, since my eyes cross any time I see the words “Gtk” or “X server,” installing any of these lovely little scripts is way beyond me.

[1] http://dev.upian.com/hotlinks/
[2] http://www.hackdiary.com/archives/000055.html
[3] http://www.babysimon.co.uk/khtml2png/

September 09, 06h

Re: broken sites. The answer is so simple (and has been suggested to Dave before): just host all the entries on Mezzoblue! Then absolutely nothing will ever happen to them, unless Mezzoblue itself goes down. In other words, they will remain 100% intact, a true historical record.

Otherwise, it’s a case of clicking each one to find several don’t work. After a few seconds staring at an unstyled screen, I cancel the attempt, and go back to try another entry instead. Not good. That’s always been a problem here.

I doubt they would take up much server space, so how about it?

As for donations, many people would be more than willing to support the site. It seems strange not to have them set up, especially if it paid for extra server space to host all those designs (hint). I guess Dave has some moral objections to them, which of course, I respect. I just don’t feel ads would cover a tiny fraction of the potential revenue from donations.

September 09, 08h

Well, letting people leave comments on each design would open a can of worms. Dave do not go that road please.

It would be great if each designer is instead to submit design notes explaining why he designed the way he did, thus viewers are allowed to see what went on the designer’s mind. That would only be fair to both viewers and designers as the viewer would feel obliged to read the design notes before he rubbishes a particular design.

Css Zen Design is a massive understaking, let’s face. We are ever grateful for your effort.

September 10, 08h

Dave, I have read your CSS Zen Garden book - it was great.

I have an idea. Why not write a CSS Zen Garden 2 with a detailed look at the designs on the Zen Garden? It would be the collaborative work of all the contributors in a way for a complete and better understanding of CSS for the readers.

September 10, 10h

Oliver, that’s a pretty good idea although I suggest Dave wait a little until some new technology comes out, just so it isn’t Zen of CSS Design with a new coat of paint.

18
Calrion says:
September 11, 06h

I second Oliver’s idea: CSS Zen Garden, version 2. A new HTML page, with new text, navigation and the rest; designers submitting new Zen Garden designs would use the version 2 HTML, and the version 1 HTML would be kept in an archive section.

You could launch this at the same time you launch the support site. Of course, you’ve probably had just about enough of all this Zen Garden nonsense for the moment!

On another note, I got the book out of lay-by today (LOVE the cover!); nice. I look forward to getting Molly’s signature at WE05 (and yours?).

September 14, 01h

Excellent piece of work!

I wanted to refer someone having questions about horizontal designs to a couple of Garden entries a while ago, and never got around to digging them up; in the past ten minutes before posting this comment, I not only found the examples I had in my head, but a whole bunch of others, too!

September 15, 03h

I agree with Mohodin Rageh. I would love to see design notes and an explaination much like what Douglas Bowman did at http://www.stopdesign.com/log/2003/05/27/in_the_garden.html and http://www.stopdesign.com/articles/design_process/.

Jan! says:
September 28, 04h

When I open a lot of designs in tabs, I don’t know the name of the one I’m looking at. Could you add it to the document’s title?

If that’s not possible, a quick hack would be to add &title=DesignNameHere to the end of the URL, so we can look at the address bar to help us remember.

Ann says:
January 04, 01h

The categorization is much easier to browse what you’re looking for from a newbie standpoint. However the oldies that knew exactly where to look for an old design in a long large list…it can become daunting. But no big deal. It needed it.