CSSOff Winners 2012

cssoff-winners

CSSOff has been one of the biggest undertakings we’ve done here at UMS, and we put on a live conference each year too. We’ve gotten so much out of this from reviewing all of the entries, but the main thing is to say congratulations to Danny Connell and thank you to everybody who submitted for the hard work and patience. So take a look at the entries and make sure to read some of our initial thoughts below.

Every entrant will be receiving an email with their score and any feedback/notes that were left for them in the next day or so. Keep an eye out for that and you can always follow us on twitter @unmatchedstyle to keep up with what’s going on with everything.

For now, let’s just get down to business and list out the top 25 winners:

Danny Connell 1st place

dconnell.co.uk | @danny__connell

Final Score

85.03pts

View Entry #0421

Scoring Breakdown

Code Cleanliness: 8.25
Code Semantics: 7.75
Code Validation: 5
Match Original Design: 8.8
Good Choice Points: 7.83
Interactions: 9.4
Modern Browser Support: 8
Legacy Browser Support: 5
Overall Project Size: 9
Resource Optimization: 8
Responsive Implementation: 8

Matt Agar 2nd place

Final Score

82.92pts

View Entry #0188

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 8.75
Code Validation: 5
Match Original Design: 8
Good Choice Points: 8.67
Interactions: 8
Modern Browser Support: 9
Legacy Browser Support: 3
Overall Project Size: 9
Resource Optimization: 7
Responsive Implementation: 8

Andrea Verlicchi 3rd place

andreaverlicchi.eu | @verlok

Final Score

81.60pts

View Entry #0119

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 8
Code Validation: 5
Match Original Design: 8.6
Good Choice Points: 8.5
Interactions: 9
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 7
Resource Optimization: 7
Responsive Implementation: 8

Luke Williams 4th place

red-root.com | @luke_redroot

Final Score

79.78pts

View Entry #0183

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 7.75
Code Validation: 5
Match Original Design: 7.6
Good Choice Points: 7.33
Interactions: 6.6
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 9
Resource Optimization: 8
Responsive Implementation: 8

Bartek Stankowski 5th place

bstankowski.pl | @art_stk

Final Score

79.75pts

View Entry #0324

Scoring Breakdown

Code Cleanliness: 8.25
Code Semantics: 8.5
Code Validation: 5
Match Original Design: 8.8
Good Choice Points: 8
Interactions: 6.2
Modern Browser Support: 9
Legacy Browser Support: 4
Overall Project Size: 8
Resource Optimization: 6
Responsive Implementation: 8

Ben Plum 6th place

benjaminplum.com | @benplum

Final Score

79.33pts

View Entry #0134

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 8
Code Validation: 5
Match Original Design: 8.8
Good Choice Points: 8.83
Interactions: 9.2
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 5
Resource Optimization: 6
Responsive Implementation: 8

Luke Desroches 7th place

imawebdesigner.com | @LTDesroches

Final Score

78.45pts

View Entry #0266

Scoring Breakdown

Code Cleanliness: 7.25
Code Semantics: 7.5
Code Validation: 5
Match Original Design: 8.2
Good Choice Points: 7.5
Interactions: 8
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 8
Resource Optimization: 7
Responsive Implementation: 8

Andrew Heins 8th place

andrewheins.ca | @andrewheins

Final Score

78.07pts

View Entry #0242

Scoring Breakdown

Code Cleanliness: 8.25
Code Semantics: 8.75
Code Validation: 5
Match Original Design: 8.2
Good Choice Points: 7.67
Interactions: 7.2
Modern Browser Support: 8
Legacy Browser Support: 3
Overall Project Size: 6
Resource Optimization: 7
Responsive Implementation: 9

Rafał Krupiński 9th place

rafalkrupinski.pl | @rkrupinski

Final Score

77.97pts

View Entry #0005

Scoring Breakdown

Code Cleanliness: 7.5
Code Semantics: 7.5
Code Validation: 4.5
Match Original Design: 8.6
Good Choice Points: 5.67
Interactions: 6.2
Modern Browser Support: 9
Legacy Browser Support: 5
Overall Project Size: 8
Resource Optimization: 8
Responsive Implementation: 8

Sherri Alexander 10th place

sherri-alexander.com | @sherrialexander

Final Score

77.22pts

View Entry #0264

Scoring Breakdown

Code Cleanliness: 7.25
Code Semantics: 8
Code Validation: 5
Match Original Design: 8
Good Choice Points: 8.17
Interactions: 7.8
Modern Browser Support: 9
Legacy Browser Support: 5
Overall Project Size: 5
Resource Optimization: 6
Responsive Implementation: 8

Paul Sprangers 11th place

interactivestudios.nl | @paulspr

Final Score

76.68pts

View Entry #0321

Scoring Breakdown

Code Cleanliness: 8.25
Code Semantics: 8
Code Validation: 5
Match Original Design: 8.6
Good Choice Points: 7.83
Interactions: 8
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 6
Resource Optimization: 7
Responsive Implementation: 6

Tai Palmgren 12th place

taipalmgren.com | @taip

Final Score

76.20pts

View Entry #0376

Scoring Breakdown

Code Cleanliness: 7.75
Code Semantics: 8.25
Code Validation: 5
Match Original Design: 8
Good Choice Points: 8
Interactions: 7.2
Modern Browser Support: 7
Legacy Browser Support: 2
Overall Project Size: 9
Resource Optimization: 7
Responsive Implementation: 7

Lewis Howles 13th place

lewishowles.co.uk | @lewishowles

Final Score

75.98pts

View Entry #0120

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 7.25
Code Validation: 4.5
Match Original Design: 8
Good Choice Points: 7.33
Interactions: 6.4
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 7
Resource Optimization: 7
Responsive Implementation: 8

Ashley Callahan 14th place

ashleycallahan.net | @ashleycallahan

Final Score

75.62pts

View Entry #0373

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 8.75
Code Validation: 5
Match Original Design: 8
Good Choice Points: 8.17
Interactions: 7.2
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 6
Resource Optimization: 6
Responsive Implementation: 6

Matt Lawson 15th place

lawlesscreation.com | @lawlesscreation

Final Score

75.37pts

View Entry #0192

Scoring Breakdown

Code Cleanliness: 8.25
Code Semantics: 8.25
Code Validation: 5
Match Original Design: 7.6
Good Choice Points: 6.67
Interactions: 6.6
Modern Browser Support: 7
Legacy Browser Support: 4
Overall Project Size: 5
Resource Optimization: 8
Responsive Implementation: 9

Stephan van Opstal 16th place

vanopstal.eu | @st3phan

Final Score

75.37pts

View Entry #0132

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 5.5
Code Validation: 4.5
Match Original Design: 7.6
Good Choice Points: 6.67
Interactions: 5.6
Modern Browser Support: 8
Legacy Browser Support: 5
Overall Project Size: 10
Resource Optimization: 8
Responsive Implementation: 6

George Stephanis 17th place

Stephanis.info | @Daljo628

Final Score

75.20pts

View Entry #0103

Scoring Breakdown

Code Cleanliness: 6.75
Code Semantics: 8.25
Code Validation: 5
Match Original Design: 7.8
Good Choice Points: 7
Interactions: 6.4
Modern Browser Support: 8
Legacy Browser Support: 3
Overall Project Size: 10
Resource Optimization: 7
Responsive Implementation: 6

Jim Nielsen 18th place

jim-nielsen.com | @jimniels

Final Score

74.90pts

View Entry #0238

Scoring Breakdown

Code Cleanliness: 7.75
Code Semantics: 8.25
Code Validation: 5
Match Original Design: 7.2
Good Choice Points: 7.5
Interactions: 7.2
Modern Browser Support: 8
Legacy Browser Support: 5
Overall Project Size: 6
Resource Optimization: 5
Responsive Implementation: 8

Natalia Lastukhina 19th place

codeinuse.net | @lastukhina

Final Score

74.83pts

View Entry #0197

Scoring Breakdown

Code Cleanliness: 7.75
Code Semantics: 8.25
Code Validation: 5
Match Original Design: 8.6
Good Choice Points: 6.83
Interactions: 5.4
Modern Browser Support: 6
Legacy Browser Support: 4
Overall Project Size: 8
Resource Optimization: 7
Responsive Implementation: 8

Tyler Gaw 20th place

tylergaw.com | @thegaw

Final Score

73.93pts

View Entry #0249

Scoring Breakdown

Code Cleanliness: 8.5
Code Semantics: 8
Code Validation: 5
Match Original Design: 7.4
Good Choice Points: 7.83
Interactions: 6.2
Modern Browser Support: 7
Legacy Browser Support: 3
Overall Project Size: 6
Resource Optimization: 7
Responsive Implementation: 8

Tyler Smith 21st place

flex.madebymufffin.com | @mbmufffin

Final Score

73.90pts

View Entry #0270

Scoring Breakdown

Code Cleanliness: 8
Code Semantics: 8
Code Validation: 5
Match Original Design: 8.2
Good Choice Points: 7.5
Interactions: 7.2
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 6
Resource Optimization: 6
Responsive Implementation: 6

Regis Philibert 22nd place

regisphilibert.com | @regisphilibert

Final Score

72.78pts

View Entry #0291

Scoring Breakdown

Code Cleanliness: 7.75
Code Semantics: 7.5
Code Validation: 5
Match Original Design: 8
Good Choice Points: 7.33
Interactions: 7.2
Modern Browser Support: 7
Legacy Browser Support: 4
Overall Project Size: 4
Resource Optimization: 7
Responsive Implementation: 8

Jimmy Rittenborg 23rd place

rittencommedia.dk | @JimmyRittenborg

Final Score

72.55pts

View Entry #0365

Scoring Breakdown

Code Cleanliness: 8
Code Semantics: 8.25
Code Validation: 5
Match Original Design: 7.2
Good Choice Points: 7.5
Interactions: 6.6
Modern Browser Support: 8
Legacy Browser Support: 2
Overall Project Size: 7
Resource Optimization: 7
Responsive Implementation: 6

Samuel King 24th place

ehousestudio.com | @lightofmind

Final Score

72.25pts

View Entry #0353

Scoring Breakdown

Code Cleanliness: 7.25
Code Semantics: 8.5
Code Validation: 5
Match Original Design: 7.8
Good Choice Points: 7.5
Interactions: 6.2
Modern Browser Support: 7
Legacy Browser Support: 3
Overall Project Size: 7
Resource Optimization: 7
Responsive Implementation: 6

Steven Moye 25th place

jixustudios.com

Final Score

71.95pts

View Entry #0334

Scoring Breakdown

Code Cleanliness: 5
Code Semantics: 6.25
Code Validation: 5
Match Original Design: 7.8
Good Choice Points: 7.5
Interactions: 7.4
Modern Browser Support: 8
Legacy Browser Support: 4
Overall Project Size: 9
Resource Optimization: 7
Responsive Implementation: 5

Overall

Whew. We’re finally done. All of the judges spent many, many hours judging over 400 entries. We’ve tried to be as thorough and as fair as possible. The scores you see above are averages of all of the judges individual scores. Collectively, the judges spent time on each and every entry. Running validation, looking at html, css and javascript, opening them in multiple browsers and devices, and thoroughly examining how each and every entry was put together. We’ve got a lot of thoughts and a lot of data that we continue to pore over and we’ll be making follow-up posts to pull out some of our favorite details from the submissions. It was a lot of work and there were many, many solid entries, and overall it was very impressive that the majority showed a solid grasp on current standards and techniques.

Some Things We Found

To start with, most people did a great job of matching layout and typography and most entries rendered and behaved well in modern browsers. There was a surprisingly high number of entries that didn’t work so well in IE8, however. While it may not be the modern browser we all want it to be, the fact is that it is still a very common browser. We also included IE6/7 support as a challenge to see how thorough you could be (and maybe just to be a little sadistic..) and a number of entries performed very well, showing that it can be done. Additionally, a number would have fared better in IE6 if they had just included a PNG fix of some sort.

One of the more interesting parts of the contest is how the form was handled. Since the design didn’t really show how these were to be handled, we hoped the entries would show creativity. There were a lot of variations on validation and interactions on the form elements. We’ll be doing a post showing some of the more interesting ways that people handled this.

We also included responsive design as a criteria since it is probably the most important thing happening in web design and development right now and it’s important that someone building websites knows how to implement it. For a number entries, this turned out to be a differentiator. Many failed to attempt any sort of responsive approach, resulting in no score for that section. Many others were responsive in the browser, but not when pulled up on a device, resulting in a lower score. As a result, many if not all of the top entries are fully responsive.

Another major issue that we saw was a lack of attention paid to image size. This was a challenging design in that essentially the whole thing had to be covered by some sort of image, whether it was a texture or a large object of some sort. There were instances when similar images from entry to entry could range in file size from a few kilobytes to 5-600k.

What Next?

So this CSSOff is over but we’re already planning the next one. Hopefully you guys will all come back and try it out. We also have plans to fully explore all the data we’ve collected from your 400+ entries. We’ll be sharing all of this in the coming weeks/months so we sincerely hope you’ll check it out.

Thank You

Thank you to each and every one of you who entered the CSSOff and thank you to all the judges.

Author

Gene Crawford

With over a decade of experience in the industry he has overseen the design and architecture of hundreds of web sites and applications. An active member in the design community, he's the editor & producer of unmatchedstyle.com, the ConvergeSE, ConvergeFL, ConvergeRVA and the Breaking Development conference series.