CSS Off Results

Published by Chris Coyier

Alright so after one missed deadline, the results are here! You can browse all the scores and see peoples entries on the CSS Off results page.


Of course all these people did a great job. For their benefit, we're just going to nitpick offer a little constructive criticism.

1st Place - Steven Schrab - View entry

Notes: Take it a little easier on the image compression. CSS image replacement on title looked good, but would be impractical.

2nd Place - Edd Sowden - View entry

Notes: IE 8 could have used some fallback alpha transparency support. IE 6 had the raw stylesheet, which usually is awesome, but would have been good to support for this contest.

3rd Place - Mustafa Quilon - View entry

Notes: Would have preferred a Helvetica at the top of the font stack over Gill Sans. Missed the shadows on the footer lines as they go under the article page.

4th Place - Pam Griffith - View entry

Notes: The font-stretch property caused some big differences in the header type between WebKit and Gecko.

These winners have been contacted, who will then in turn select the winning commenters on the original post. Once they have been selected, those people will be contacted and then prize selecting will begin.

As a whole

Everyone who entered should pat themselves on the back. As a whole everyone did a great job and should be proud. It was a for a good cause and good practice. I just mention this because I'm sure there will be some of you who are unhappy with their score. Don't take it too seriously...


Entries were judged by myself and Doug Neiner. We each judged different alternating parts of each entry. You probably know me. Here is Doug:

Doug is a designer, developer, and owner of Pixel Graphic Design Studio. He is CTO of Fuel and blogger at Fuel Your Coding. He also has a personal website.


We judged on the following 100 point scale:

Clean, Consistent Style 1 – 10 points All code (HTML/CSS) organized and readable
Semantics 1 – 5 points Smart elements and class/ID names used. Bonus for HTML5
Folder Organization 1 – 5 points Structure of folder made sense and was organized
Matched Original Design 1 – 20 points How close it was to original mockup in a modern browser
Good Choice Points 1 – 20 points Made smart choices: things that should be text were text, the button was done in a smart flexible way, rollovers looked good, etc.
Modern Browser Support 1 – 10 points Firefox 3, Safari 4
Slightly Outdated Browser Support 1 – 5 points IE 7
Old Browser Support 1 – 5 points IE 6
File Size 1 – 10 points The largest (reasonable) entry got a 1, the smallest got a 10, then it was judged on that line
Image Quality 1 – 10 points How the images looked. This was to balance the file size. Most points to entries who balanced nice images with small file sizes.
Total 100 max

Specific Problem Areas

We were fairly lenient on fonts when it came to all the Helvetica Neue business. PC's don't come with that font, so if you used image replacement in the header, that was fine. Using image replacement for the article title isn't a good idea though, so that was taken off for. I would have rather seen a wrong font than something that unflexible.

After all that judging, these are the things that tripped people up the most:

1. Line Height

There was text all over this mockup, with a variety of line-heights. This was often overlooked or misjudged. Line height is crucial for displaying text that feels good to read.

2. Subtle Shadows

As the three little lines went under the article box, there was a subtle shadow there.

3. Grid

The legs of the clock lined up nicely with the edges of the three photo boxes in the mockup. Many designs didn't get that right. If the clock was placed in a fluid width manner yet lined up when the window size was about the size of the mockup, that was acceptable.

4. Web text

The text in the three "quote" boxes at the bottom was Georgia in three different colors. That definitely should have been web text sitting on top of those boxes, not an image, even if it was image replacement or had proper ALT text. Web text renders better, is easier to update, is selectable, etc.

Interesting Entries

None of these entries were winners, but they all did interesting stuff, check it out!

#103 - Fixed position footer and the content slides underneath it.
#117 - View source =)
#104 - One of the examples with animations for the arms of the clock
#58 - Total reinvention of the design
#127 - Maybe the only attempt at fixed positioning the clock
#11 - Used the MagicLine

Wrap up

It has been a long road! The important lesson we learned from putting on the event is that it's a lot more work that the original idea seemed to be. But we got through it! Next time we'll be more upfront about the timeframe and have the process more ironed out. Some sponsors will be good to to keep the thing cost neutral for everyone.

If you missed it up top, the results are here.