An experiment by Robert Giordano
When a web site is designed carefully, according to web standards, the appearance of every
page can be changed with a single stylesheet.
This is powerful stuff. Pages load faster, mobile devices can be supported, and the
creative possibilities are endless. Imagine being able to redesign an entire site without
touching any of the HTML pages!
Inspired by the famous CSS Zen Garden, This ongoing event will give top designers a chance to showcase their talents once again. The challenge will be to create a stylesheet that works for an entire web site. What site? This one of course! The Design215 site itself.
The concept is simple. Take an HTML page without any color, font, or layout information.
Let a separate stylesheet determine the look of the page using CSS. With all styles turned off,
the page may not look as pretty, but remains fully functional and accessible.
This is the idea behind Dave Shea's CSS Zen Garden project. The Zen Garden is a single HTML page. Graphic artists are invited to change the design of the page as much as they want but they cannot touch the HTML page itself. They have to do it all with stylesheets. The results have been nothing less than incredible. The best designs become an official part of the Zen Garden site. Each artist is rewarded by having thousands of visitors see their design and connect it with their name and their web site.
While many of the Zen Garden designs are simply amazing, they won't work for a
"normal" web site that has many different pages and fluid content. Some cite this as a
reason why the Zen Garden approach would never work in the "real world".
About a year ago, I read this article and it made perfect sense. Create a structure that keeps presentation separated from content. When I started building the new Design215 site, I was very careful to keep the structure of the HTML flexible enough to allow as much creative freedom as possible. The challenge was to build an entire web site where a single stylesheet has complete control over its appearance. I feel that I've accomplished my goal.
The benefits of building sites this way are numerous. Pages are smaller, take less
time to download, and are easier to edit. Stylesheets are cached so they don't have to
be loaded again each time a new page is loaded. When a change is made to a stylesheet,
every page on the site will instantly reflect that change. From an artist's standpoint,
its easier to work with a stylesheet than it is to work with HTML. The list goes on
The good news is that designers and graphic artists are starting to catch on. Unfortunately, many companies still rely on the "old fashioned" way of building a web site, circa 1998. We're here to do our part in pushing standards based design. C'mon, it's 2006 already!
Your job will be to make a single stylesheet to replace the one currently used for
this site. Stylesheets I accept will become official designs and will be listed on
this page. During the week we will use our normal stylesheet. On a certain day
(I haven't decided if its going to be every week or every other week) the stylesheet
will change to an artist submission. Your name and link will be credited on the welcome
page during that day.
We encourage the following:
Look for an announcment sometime in March!!
(yes it used to say February, but I've been much busier than I thought I would be ;)
To be announced...
We will annnounce the start of this project by testing a few of our own designs.
Here are the first custom stylesheets for this site. After I
finish with all of the tweaks, I'll post a complete package with
all of the necessary information to create custom stylesheets for this
by Robert Giordano
by Robert Giordano