
CSS Zen Garden is 10 Years Old Today - youngerdryas
http://mezzoblue.com/archives/2013/05/07/10_years/
======
bbx
In 2006, I entered a web design class in a local private school. We "learned"
to design websites in Dreamweaver, using tables for the layout. I remember
once, the teacher told us that, in order to achieve a particular layout, we
had to _delete_ the doctype. It didn't strike me as stupid or even wrong. I
was still very new to the web world back then.

We then had a single accessibility class with a guest teacher. He taught us
accessibility guidelines, about the necessity to seperate content and design,
and eventually told us about CSS Zen Garden to showcase how it was possible to
achieve multiple layouts with a single content page. My friend and I looked at
each other and had that silent "Waou" look.

This revelation led me to buy a book about CSS, and got me my first job. If it
wasn't for CSSZG, I wouldn't have enjoyed web design as much as I did and
turned it into my job for 4 years. And I'm sure this simple project has
enlightened thousands of other web designers as well.

~~~
holloway
"in order to achieve a particular layout, we had to delete the doctype"

Hmm... must have been trying to invoke quirks mode.

~~~
johnbm
Most likely they didn't know about img { display: block } and wanted to get
rid of baseline spaces in their table-based layout.

------
eksith
This is the site that got me to move away from tables. My how time flies!
Remember the days when teeny tiny microfonts were in style? Also Photoshop
orbs... Everywhere, there were bloody orbs; from gaming forums to "tutorial
sites" (that linked to other sites). Part of me feels nostalgic, but another
feels it's good to grow out of all that.

In many ways, we were entering a Goldilocks zone for a semantic and accessible
web, but I fear we're starting to slip back a bit into a client-side dynamic
web phase that isn't accessible, not semantic and overall app focused. Which
is fine if you want the web to be a series of apps, but there's a heap of
content in there too. And it would be a shame if it only became accessible via
apps.

"Webkit-only designs will be discarded with prejudice... Graceful degradation
is acceptable, and in fact highly encouraged."

Can't tell you how happy I am to see that they haven't lost any of their
sensibilities.

~~~
modarts
> but I fear we're starting to slip back a bit into a client-side dynamic web
> phase that isn't accessible, not semantic and overall app focused

I agree with the overall sentiment that content should be accessible; but one
thing you aren't taking into account with the above statement are the channels
by which we access the content. Today REST APIs are that channel, and serve as
the backends for the dynamic heavy client apps, as well as a medium for other
services/applications/users to interact with and consume that content.

I'd argue that it allows for an even _more_ semantic manifestation of data and
content, since we aren't limited to defining semantics with just a series of
tags wrapping content; served to clients in large homogenous blobs of HTML in
readonly fashion.

Instead we expand our conceptual space to include HTTP verbs, headers, and
URLs to provide an interactive interface to data that far eclipses what the
"Semantic Web" movement was ever able to deliver.

~~~
eksith
Fair enough. But then a REST API isn't a panacea since browsers(or content
parsing apps) need go through a new iteration from rendering content "as-
styled" to "as-meant" for a semantic web. We don't have that yet and it
doesn't look like vendors are going down that path any time soon. Then there's
the question of text-only browsers like Lynx.

A semantic web as you describe isn't the current web at all, but a new
completely new layer on top of it.

~~~
dredmorbius
Readability, Instapaper, and Pocket all do a pretty good job of "as meant" for
sites.

The do this through a server-based solution, with some reliance on standards,
but also, I'll suspect, a large number of site-specific parsing and formatting
rules.

------
armandososa
Wow, 10 years is a long time. Getting a design of mine in the CSSZenGarden was
one of the biggest accomplishments of my life still to this day. I'm pretty
sure that it's responsible for bootstrapping my career.

~~~
Zikes
Out of curiosity, which design is yours?

~~~
draugadrotten
To my surprise, googling armando sosa zen garden will give you the design that
made it, and the design that didn't.

------
danmaz74
I remember when I discovered CSS Zen Garden I was astounded at what could be
accomplished just changing the CSS of a page, and it was a great inspiration
to learn how that worked. Thanks to the creators and the contributors.

~~~
rubinelli
Last month, I gave our interns a one-hour overview of HTML and CSS, and used
CSS Zen Garden as an example of how you can completely change the look and
layout of a page. They were appropriately impressed. :)

------
thekevan
I distinctly remember my "A-ha!" moment in understanding what CSS could do. It
was while looking at Zen Garden. I spent hours just clicking "next" and
examining the source code from each design.

~~~
shawnc
Me too. This site got me into CSS. I remember when it had less than 50
entries. Wow.

------
arocks
Ah, ten years of separating content from style. It promised then that if
designed properly, any page from the last decade can look contemporary by just
changing the CSS. I think CSS Zen Garden is itself a proof of that.

------
zhwang
Well. Suddenly I'm hit by memories of childhood days thinking FrontPage was
the best thing ever... and maybe was it Nvu before or after that? (Who
remembers Nvu of all things?) And Java applets taken from a book just to have
fancy rollover buttons, the obligatory tables-everywhere, soon enough the rise
of Flickr, with the following trends of vowel dropping and glossy images
everywhere with Trebuchet MS in hand, or maybe using Flash text replacement,
and soon enough we're here.

How things change. Here's to another ten years.

------
malgorithms
A dream never realized...(sadly)...that one day websites would be redesigned
by only changing the CSS. I'd love to hear everyone's opinion on why this
doesn't seem to happen, in practice.

~~~
Silhouette
Unfortunately, something that CSS Zen Garden has also demonstrated, however
unintentionally, is that to have so much flexibility with CSS you also need a
bunch of extra non-semantic mark-up in the original HTML. We've developed a
few tricks over the years using things like pseudo-elements to avoid some of
this, but the HTML+CSS model isn't _quite_ powerful enough at the moment to
really live up to the ideal of complete separation of content from
presentation.

------
arb99
I remember that site back when I was first making web pages in Frontpage (and
uploading them on a tripod.com free hosting account i think). I am pretty sure
that site was one of the main reasons I wanted to learn css, after realising
stylesheets can do more than just style a:visited and a:hover. took a while
before it clicked though!

------
fallenhitokiri
I remember my first design without tables. It was for my private blog and I am
not sure how many different designs I looked up on Zen Garden to find out how
to do something with only CSS.

After some struggle and building two or three designs I finally understood why
this was a good idea. It is one of the resources I am really thankful for.

------
JoeKM
Dave Shea's ZenGarden, MezzoBlue and AListApart were, and still are, huge
inspirations to web designers. I followed those blogs intently in High School.
ALA's 2004 CSS sprites post was largely responsible for its widespread
adoption.

~~~
antidaily
And a great replacement for gross _MM_swapImgRestore JS that people were
getting from Dreamweaver.

~~~
kibibu
People _still_ use that. I had the great pleasure of working with a site that
used _MM_preloadimages just the other week.

------
chrisrickard
CSS Zen Garden single-handedly taught me both coding standards, and coding
hacks. Happy birthday guys, you shaped a lot of lives.

------
rimantas
I've used CSS Zen Garden as a powerful example what CSS is capable of. I did a
lot of teaching, preaching and evangelisation for the fellow developers stuck
in old ways. I've used wired.com, espn.com, fastcompany.com as an example of
"serious" sites employing CSS and Zen Garden as a showcase for flexibility.
Good times…

------
stygiansonic
Wow, I feel old! I remember stumbling upon this site back in the day when I
was getting educated about CSS and separation of presentation from content.

It was a great inspiration and led to much self-improvement and learning. Some
good times, for sure. OTOH, I don't miss IE6 and box-model hacks one bit.

------
maaaats
Back in the days I was always amazed of what people pulled off with just CSS.
With the enhanced capabilities of today's CSS I look forward to see the
results.

The 'mission' may be a bit different now, though. Instead of advocating the
use of CSS, CSS is now the standard.

------
obviouslygreen
Call me ignorant, and I may be missing the point... but did anyone else notice
this does not scale _at all_ on being resized to tablet or even phone
resolution?

~~~
rhizome31
It's old. In those days tablets didn't exist. Web-enabled mobile phones
weren't a common thing (except maybe in Japan) and they were based on specific
technology like WAP.

Most of those designs aren't even good designs by today's standards. They're
too cluttered with visual decorations. But at that time it was great!

------
baby
I check it from times to times but it hasn't had a new design in ages. It
makes me very sad. I wish someone would make the new CSSZG.

------
lukeholder
I just realized I have been doing web development for at least 10 years.

------
CyberDroiD
The bizarre rationalization of "a necessity to separate content and design" is
false, but I understand if it helps graphic designers.

However it is bizarre. Rich-Text-Fields are what the customers want, and that
combines text, audio and video and all text formatting.

Just make sure your website works without Javascript or CSS enabled.

~~~
untog
The bizarre rationalization of "make sure your website works without
Javascript or CSS enabled" is false, but I understand if it helps programmers.

However it is bizarre. Functional sites are what the customer wants, and that
combines HTML, Javascript and CSS. which every browser worth mentioning is
capable of rendering.

(if you can't think of why anyone would care about separating content and
design, think of a site that needs to work in both mobile and desktop
browsers. How can you achieve that without separating design?)

~~~
anonymoushn
> (if you can't think of why anyone would care about separating content and
> design, think of a site that needs to work in both mobile and desktop
> browsers. How can you achieve that without separating design?)

Well, you could serve the normal page (with the normal stylesheets) to mobile
browsers and not disable zoom. This would make your web site one of the better
mobile web sites.

~~~
untog
I do not understand why people say this. The zoomed experience is often
absolutely terrible.

