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