Dave Shea is bringing back his legendary site for a new generation of designers. .net spoke with him about the site's rest and rebirth, and what he hopes to see from new designs
.net: We’re happy to see CSS Zen Garden return, but why did it go on hiatus in the first place? DS: Well, I’ve had proposals over the years for a CSS Zen Garden for ‘X’. That 'X' has come in the form of many things: CMS; mobile; and front-end languages of choice. By far the most popular has been the idea of a CSS3/HTML5/responsive web design refresh. I have not been able to get away from that one—it keeps coming up!
But for a long time I felt the reason the site existed—convincing the world why web standards were a good thing—was the same reason why a modern rehash wasn't necessary. It's hard to remember a time when CSS was seen as a black art that normal people would never use, but that was exactly the environment the site was launched within. Today, it's an afterthought.
So without that agenda I've been hesitant to update the Zen Garden.
Latest Videos From Creative Bloq
.net: In that case, why are you bringing the site back to life? DS: A ten-year anniversary for a website doesn't come along that often! But really I’m not sure the new site would have happened without two unrelated events. One, I presented a retrospective of the site at re:build in Indianapolis last fall, and Jenn Lukas came up to me after the talk in mock indignation that I wasn't planning on doing something special for the anniversary. That planted the seed. Two, I stumbled across a post about how the site was fading as a teaching tool.
The latter nurtured the idea into something I wanted to proceed with. I think I was too blinded by what the site had already accomplished to see how much future potential a lack of updates would squander. Those of us who have been around forever take the site for granted, but the entire reason it remains relevant is because new people are entering the industry and using it as a reference point. If I'm not keeping up with the latest developments, I'm failing them.
Also, it’s perhaps unrelated, but something that helped my mindset in all this is now being in a hiring role for the first time ever. I'm evaluating resums, I’m seeing where the talent in the industry lies, and there's still so much work to do.
.net: What are you hoping to see from new entries? DS: Responsive is a big one. Mobile was never on the original Zen Garden's radar, but now it's essential. We're well down the road of advancing the responsive web design cause as industry best practice, but a showcase of great responsive designs still feels like something that would be a useful resource.
Animation and interactivity is another big one. About a year and a half after launching the original site, I had someone submit a design that used JavaScript to animate some elements. That kicked off a big discussion about what was in scope and what would ruin the original intent, and in the end I'm glad we didn't go down that road.
But I've still always wondered—with the sort of advanced animation, effects and interaction that good JavaScript can contribute—what more would the static layouts of the Zen Garden be capable of doing? What might have been an interesting opportunity then is now largely achievable with just CSS, and so I think we're going to see some answers to that question.
.net: Have other advances in CSS impacted on what we’re likely to see from modern entries? DS: I think so. One of the most persistent criticisms of the original site was it showed what CSS could do with images, but didn't necessarily show what CSS could do on its own. The thing is, CSS back then wasn't really capable of much beyond simple layout and text formatting. But with all the effects we've been able to consider using in recent years, I feel we can now address that particular criticism head-on and do really interesting things. And, you know, don't get me started on what Adobe's up to and what that'll allow!
.net: What can our readers do to help the project along? DS: At this point, there are three ways to contribute. First, take a look at the GitHub repo and see if there are any outstanding issues you can provide advice or code patches for. Secondly, using the same GitHub repo, take a look at the existing translations and fix errors or contribute new ones. Finally, create new and amazing CSS3 designs and submit them!
