CSS Extreme Makeover

An experiment by Robert Giordano

What is it?

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

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.

The Challenge

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". I disagree.

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 Advantages

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 and 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!

The Details

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 will give you a sample stylesheet that is heavily commented to help you.
  • All files must reside on your own server. If we accept your design, we will archive your files on our server. You retain the copyright on all of your artwork.
  • If we really like your design, we may want to hire you.
  • Keep in mind that this is a working web site and we rely on it for our business. Any and all offensive designs will be rejected.
  • A large part of this site is about photography and images are used heavily. Your design must work well with displaying various photographs. Be careful with photographic images in backgrounds so they don't clash with the content on the site.
  • Please do not submit designs themed around a person, singer, actor, or any famous celebrity.

We encourage the following:

  • Seasonal themes: spring, summer, fall, winter.
  • Nature themes: leaves, flowers, rocks, trees, etc.
  • Minimal themes: shades of a single color, small accents, etc.
  • Travel themes: different countries, regions, continents, etc.
  • High Tech themes: cables, wires, 3D elements, chrome, etc.
  • Color themes: gothic, urban chic, art deco, art nouveau, etc.
  • Imagination: come up with something bizarre that still works with our content.


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 ;)



 

Project Status:


To be announced...
We will annnounce the start of this project by testing a few of our own designs.

Custom Styles:

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 site.

"Dark Water"
by Robert Giordano

"Escalator"
by Robert Giordano


Default Styles:

Normal
Mobile
Printer

styles OFF

  

Leave a Comment

subject / name:

email: (NOT PUBLISHED)

comment (html=OFF)