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 and the ConvergeSE.com conference.

  • http://www.martinbean.co.uk/ Martin Bean

    Naturally disappointed I didn’t make the Top 25, but just wondered if individual feedback would be provided, just so we can compare ourselves to those who did make the Top 25?

  • http://www.unmatchedstyle.com Gene Crawford

    Yes, we’ll be emailing each entrant with their scores and feedback if they have it over the next couple of days.

  • http://twitter.com/rkrupinski Rafa? Krupi?ski

    It’s Krupi?ski, not Krupi?sk :D

  • http://www.martinbean.co.uk/ Martin Bean

    Awesome! Look forward to seeing that.

  • http://www.red-root.com Luke Williams

    Thanks very much guys, really enjoyed working on it, and I agree it was especially interesting to do the form, I love the different implementations of the form

  • Arvid

    Will every entry be published along with the scores like last CSS Off or just the top 25?

  • http://nikibrown.com Niki Brown

    It was so much fun to judge this contest! Thanks for having me!

    On another note – I tried to leave specific notes and feedback for most entries that I judged. So when they send out the results to everyone you should have some notes!

    Yay!

  • sky

    im 1/1/1 :)

    thats so cool!!1

  • http://www.unmatchedstyle.com Gene Crawford

    @Arvid: Just the top 25.

    @Luke: Great to hear from you, enjoyed your entry too man!

  • http://jixustudios.com Steven Moye

    Didn’t do as well as I hoped (can’t say I’m psyched about being at the bottom of the list of ‘winners’), but I’m still glad I participated. At the end of the day, I think it’ll be a great learning experience for me – good for letting me know which areas of development I need to get better at.

    Thanks for doing all this, and looking forward to doing better next year.

  • http://www.lewishowles.co.uk Lewis Howles

    Awesome! Completely out of the blue result for me there. Many thanks to the judges for all their hard work on this.

    Already looking at my own entry and listing countless things in my head I’d improve if I were doing it again today! Can’t wait for the next.

  • Shajith

    Congratulations Danny!!..
    Disappointed with my performance not even comes in top 25…

  • http://carlosagosto.com Carlos Agosto

    Have the emails with everyone’s scores go out yet??

  • http://lptele.com Joseph

    I didn’t have time, or the desire really, to enter, but I hope to use these entries as a guide for good practices in the upcoming weeks.

    It seems like a unique competition and I hope it breeds a strong web design/development culture. Keep up the good work.

    If you have the time it might be fun to open the top three entries up to comments on CSS, JS, HTML in a public/collaborative form. Something like Sidewiki mixed with Firebug Lite would be really cool, but likely too time consuming.

  • Andy

    Disappointed, but learnt a lot of things :) Yeah it would be nice if you guys would mail us the scores & feedback.

  • http://rado.bg Radoslav Sharapanov

    > “range in file size from a few kilobytes to 5-600k.”

    I find this hard to believe, unless you meant megabytes? :)

  • http://rado.bg Radoslav Sharapanov

    Pleas disregard the previous comment – poor reading skills :)

  • http://www.unmatchedstyle.com Gene Crawford

    @steven – You said it man, that’s the only reason we did this thing. So we can all learn from each other.

    @Carlos – not yet, give us a day or two, we want to be very careful and not screw it up. :)

    @Joesph – that’s a great idea man, we’ll work on that!

    @Radoslav – it’s actually both K and MB, you’d be surprised. Expect a full report on all of it soon.

  • http://developpr.com Nick Shvelidze

    Of course i lost :D :D

  • Ryan Pither

    I can’t remember what email I used to sign up for this competition, but please send Ryan Pither’s results to the email used on this comment. Thanks.

  • Ryan Pither

    Also I can’t believe that the first place entry doesn’t work properly on the iPhone. It’s got an element somewhere throwing off the 320px width, giving it and ugly strip of white down the right side.

    Is that quality? Haha.

  • Justin

    Those entries are pretty awesome!

  • Ryan Pither

    Also what’s with the Unmatchedstyle site not being fluid, but only being responsive?

    Works awesome on 320px portrait iPhone, looks dodgy on landscape.

  • aurel

    Ha! great job, I am not surprised I did not win :) . But these 25 look great – congratulations guys

  • http://www.andreaverlicchi.eu Andrea Verlicchi

    Wow! I’m 3rd! :)
    Hey guys of @unmatchedstyle, will you publish submitters’ twitter names and websites in this page?
    It’ll be just great.
    Thanks

  • Pingback: CSSOff 2012

  • http://nenvy.com Erik

    Interesting mine didn’t get top 25… Unless I broke some rules ><

    http://nenvy.com/a/cssoff

    Great job everyone!

  • http://nenvy.com Erik
  • Surendra Vikram Singh

    Congrats Danny!!…

    Now i am waiting for my points & next CSS OFF.

  • John

    I want to see the worst ones.

  • http://twitter.com/rkrupinski Rafal Krupinski

    @Erik: Cool!

  • http://www.phpalchemist.com Chris Kempen

    The amount I’ve learnt from the top 25 is actually quite insane. Well done everyone! Truly great entries! Looking forward to my feedback, and the next CSSOff!

  • http://devilskitchen.net Devil’s Kitchen

    Given that it is a legal requirement, I am pretty surprised to see that there is no score for Accessibility.

    Or is that contained within one of the other categories?

    DK

  • http://www.vivitech.uk/ Ali

    See you in the next CSSOff showdown

  • http://www.dconnell.co.uk Danny Connell

    @Ryan Pither – Tell me about it. I was gutted I didn’t have time to fix this before the deadline! It was a bug that crept in right at the end.

    I think there have been some amazing entries, and several people here worthy of winning.

    Big thanks to Unmatched Style, Paravel, sponsors, judges and all contestants!

  • Jonathan

    @Erik, try to view your submission on a mobile device. The falling animation is neat, but the page is unusable for me on a typical Android 2.3 phone. If proper responsiveness was the main differentiator, that alone might have knocked you out of the top 25.

  • http://rado.bg Radoslav Sharapanov

    #1 has resources linked from another server (a google font). Isn’t that against the rules? I thought all resources should be present in the submitted folder:

    –––

    9. All submissions must run locally. Meaning the entry must load in the judge’s browser from their desktop as if they are not connected to the internet.

    –––

    Please keep in mind that many people have worked very hard to follow the official rules and might be disappointed if high ranking entires break those rules.

  • http://www.fornacestudio.com Francesco Frapporti

    Insane quality indeed. I’ll do my best to be ready for the 2012 challenge!

  • http://www.unmatchedstyle.com Gene Crawford

    @Radoslav – There was an update to the rules that was sent out to everyone who entered regarding font usage: http://unmatchedstyle.com/newsletter/cssoff-update01.html I’ve linked it up on the rules page for future reference too.

  • MT

    Can someone explain, why there are display:none headers in winner’s code? I see no point for that, since screen readers don’t read elements with display:none rule.

  • MT (another)

    Has someone (from those who are not inside Top25) already received a mail with his score and comments from judges?

  • Aurélien

    @Gene Crawford : well I never received that email !!!!!!

  • http://nenvy.com Erik

    @Jonathan – I’d say that’s a fair assessment. I didn’t get a change to check it in android.

    I do look forward to an email with critique.

    @UnmatchedStyles – When do we get our critique? No rush at all – just curious.

  • http://remy.bach.me.uk Remy

    Any news on when we’re receiving that email?

  • http://www.unmatchedstyle.com Gene Crawford

    Hey guys, we’re still working on that email for entries outside the top 25. Thanks for being so patient, hopefully just a day or so now and we’ll send them out.

  • Andy

    Any more news on that feedback email?
    Is it one week away, or maybe one month?

  • http://www.unmatchedstyle.com Gene Crawford

    Just sent out the last batch of scoring emails. Let us know if you don’t get yours and we’ll sort it out.

  • Al McRorie

    never got the scoring email, should have an entry from me

    Al

  • http://thierrymichel.net tm

    I just received my score and I’m (pretty) happy with the result. ^_^
    But above all, the feedback is very friendly and informative, a big thank you TO ALL JUDGES for the tremendous job done!
    Roll on the next contest…

  • ejg

    Just out of curiosity, what validator did you use?

    According to validator.w3.org my entry is valid html5 but I received a 2(!) for validation and the comments said there were numerous errors.

    I need to know if I have to switch where I validate my code. :)

  • Pingback: CSSOff 2012 | KamikazeMusic

  • http://www.unmatchedstyle.com Gene Crawford

    Heyo, if you guys could, if you have specific questions email us and we’ll check into whatever you need that way. So we can track all this stuff better than here in the blog comments.

    Thanks!

  • Pingback: CSSOff 2012 – 3rd place (out of 400+) | Andrea Verlicchi