Awesome...I can't remember the last time I've visited this site...but I can't remember a resource on CSS that I ever read before this one...
Even though it's "just CSS"...I think CSS Zen Garden, and other sites like it, were absolutely critical to my web development career. Not because I specialized in web design, but because it demonstrated that CSS was cool...and not just some other syntax to learn (which, when you're new to web development, can be quite intimidating).
Zen Garden inspired me to learn CSS...and it wasn't the CSS itself that was important, but the concept that CSS is based on: separation of presentation and content...something that is very hard to grok until you just do it...Zen Garden's fantastic demos encouraged me to try it out, even if I could never match the site's artistry.
And if I had never gotten the concept of separation down...I don't think I would be a web developer today. I think the maintenance of even a simple personal website built on inline HTML would've driven me to quit web development long ago...
That said, in my career (which admittedly hasn't been focused on design), I've never been in a situation where a client has wanted to redesign the site and to do so was just a task of rewriting the CSS sheets, no matter how well-written the HTML templates were. Redesigns almost always go hand-in-hand with addition of new features, technology, and content...the architectural ideal that CSS Zen Garden strives for is a great one, but it doesn't seem to occur often in professional work.
I'm sure I'm not alone - this site really inspired me to first get into web design and development. Great to see it alive and contributions as imaginative as ever.
I'm not nostalgic about the old, low-resolution monitors though. The content in those design fits into 630/700 pixel wide columns and the 11 pixel text in Orchid Beauty looks tiny on my screen!
It is not only the text size. It is also the low contrast. Add to that the fixed size layout, the orchids in the titles, the images replacing the titles (albeit with a proper fallback), the unmotivated plus-icon in the list…
Those old designs were great in the past to show what is possible, but now they are a reminder of the long way web design has behind.
I think relative font-sizing with "em" and "rem" [1] is a popular and good choice these days. "em" has been popular since 2004 after an article by Rutter [2].
IE9- (and Android 1.6-) didn't scale/zoom well when the font was set in px. But using px was widespread despite these (and other) cons because it was easy, reliable and consistent to implement across browsers. [3]
Pt (point type) are only for printer style sheets [4], not screen style sheets. Using them for screen styles is not-done and doesn't make much sense. [5]
That wouldn't help. Without wanting to go too deep into OT-territory:
Even if the DPI could be known (and afaik normally it isn't, it is just set to a value) and it would be possible to convert in into real inches (btw, I have no idea how big that is in real units) to be displayed on a monitor, how would a designer know how big any element, even text, should be? It depends on the available space, which depends on the size of the monitor/the size of the window.
To think about how absurd that would be, try to find a situation where someone would say "this heading should be 2 cm tall".
px as size lead to the same problem with the available space, but they at least correspond to the resolution.
Ditto! I had the most heated arguments with people who complained that tables "just worked". It didn't help that Photoshop was (is?) king and web slices split into table/tr/td backgrounds was the most common way to display fancier layouts.
I also think existing software played a large part in the proliferation of tables. E.G. WordPress/B2 and phpBB (as well as practically every other forum system) layouts at the time were all heavily dependent on tables. There was really no incentive other than "well, CSS is a better way!" Until you came up with your own examples, there was no convincing.
It was a slow and arduous process, but I hope we keep going forward and not backward into JS-only land.
It's interesting that some of the designs look very contemporary but only use CSS 1 and 2. Suggests the change in web design is driven more by fashion (or maybe hardware) than by rendering technology.
On the subject of CSS, I've often thought it would be great if somebody made a sort of 'CSS koans.' Like each koan would be a little puzzle where you manipulate the box model etc. to get the desired physical layout.
How to put this? Most CSS proponents seem to focus on "beauty" for individual elements and fairly simple data representation. It'd be useful to see more design aimed at representing LOTS of data in a way which retains uncluttered "good looks" without throwing away multiple navigation options.
People with large, rich databases -especially- need ideas on how to represent that data from many potential angles-of-view while maintaining clarity. 4 or 5 pretty boxes on a page with minimal text just don't suffice. Such ideas are vanishingly rare on most sites dedicated to CSS.
Why is all the content squashed into the middle of the page when I view on a laptop? Am I supposed to think it looks good like that or is it designed for a phone/tablet? Shouldn't the site be showcasing technology that allows pages to look good on desktop and mobile? (Honest, and probably stupid question -- I would like to understand.)
As a young web developer, I had been using tables and frames to organize my layout. CSS Zen Garden taught me to separate style and content. I credit this site for making me a better web developer.
Probably. Except for the two most recent designs (the new default and "Robot Boy"), the designs are aimed at something more along the lines of Firefox 1.0, Netscape 6, IE6 and whatever version of Safari was contemporary with them, running on a Pentium III/4 with under a gig of RAM. I'm having no trouble with either of the new designs using an Atom-based Win7 netbook and Chrome 28.
I am so happy CZG has been relaunched and updated.
This site was my inspiration for a senior project in an independent study class on web design where I surprised and completely redesigned my teacher's website while only changing the CSS file, and the original site was not designed well –- at all.
Currently used to designing websites, when I found out about this in class I was so excited. The only problem I found was that I wasn't sure what theme to make it as most of them follow a certain style but I guess that's down to myself.
CSS Zen Garden was so useful when I started. It was the first time I saw that you could separate markup and style. I impressed my boss by telling him that we could just build one functional site and have different skins and we could save money.
Was at a conference last October where Dave Shea talked about the impact of CSS Zen Garden - but said that the web didnt need it or another one anymore. I wonder what changed his mind?
Maybe I'm a curmudgeon but to me the vast majority of these examples are outright painful to the eye, they remind me of myspace pages and the like. Can anyone really imagine spending any significant amount of time reading / exploring a website that is based on one of these designs? The exception is the main landing page, I like that one.
I could be wrong but it seems to me that only the latest two designs (A Robot Named Jimmy and Verde Moderna) are what would be considered "modern" designs and the rest are from before the relaunch.
Well that's a very subjective statement. So easy to criticize when there's no objective standard. I think a more useful observation would be that most of the designs are dominated by one or more completely non-interactive visual elements. Function follows form, which nowadays annoys users more than simple lack of artistry or visual appeal. I'll say that from my own subjective POV, most of the designs are interesting or beautiful in some way; in the sense of a painting if not a website.
not sure why you got down votes. some of the examples, i agree with you, aren't pleasing. quite a few are.
it's been a great tool to show beginners, imo. it clearly demonstrates the effect/power of CSS on the aesthetics of a site. the fact that some examples are "so ugly" can be used to convey that impact...
I think the downvotes are coming from people who have known and been inspired by CSS Zen Garden "back in the day".
The thing you need to remember is that CSS Zen Garden was big around 2004 and most of the designs are from that period. The site was a big inspiration at the time to show that with a single HTML file, you could completely change the appearance of a site. This was huge!
So the downvotes are likely coming with a thought along the line of "how dare you show disrespect for that venerable site!".
Even though it's "just CSS"...I think CSS Zen Garden, and other sites like it, were absolutely critical to my web development career. Not because I specialized in web design, but because it demonstrated that CSS was cool...and not just some other syntax to learn (which, when you're new to web development, can be quite intimidating).
Zen Garden inspired me to learn CSS...and it wasn't the CSS itself that was important, but the concept that CSS is based on: separation of presentation and content...something that is very hard to grok until you just do it...Zen Garden's fantastic demos encouraged me to try it out, even if I could never match the site's artistry.
And if I had never gotten the concept of separation down...I don't think I would be a web developer today. I think the maintenance of even a simple personal website built on inline HTML would've driven me to quit web development long ago...
That said, in my career (which admittedly hasn't been focused on design), I've never been in a situation where a client has wanted to redesign the site and to do so was just a task of rewriting the CSS sheets, no matter how well-written the HTML templates were. Redesigns almost always go hand-in-hand with addition of new features, technology, and content...the architectural ideal that CSS Zen Garden strives for is a great one, but it doesn't seem to occur often in professional work.