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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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?
Yes, we’ll be emailing each entrant with their scores and feedback if they have it over the next couple of days.
It’s Krupi?ski, not Krupi?sk đŸ˜€
Awesome! Look forward to seeing that.
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
Will every entry be published along with the scores like last CSS Off or just the top 25?
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!
im 1/1/1 đŸ™‚
thats so cool!!1
@Arvid: Just the top 25.
@Luke: Great to hear from you, enjoyed your entry too man!
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.
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.
Congratulations Danny!!..
Disappointed with my performance not even comes in top 25…
Have the emails with everyone’s scores go out yet??
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.
Disappointed, but learnt a lot of things đŸ™‚ Yeah it would be nice if you guys would mail us the scores & feedback.
> “range in file size from a few kilobytes to 5-600k.”
I find this hard to believe, unless you meant megabytes? đŸ™‚
Pleas disregard the previous comment – poor reading skills đŸ™‚
@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.
Of course i lost đŸ˜€ đŸ˜€
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.
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.
Those entries are pretty awesome!
Also what’s with the Unmatchedstyle site not being fluid, but only being responsive?
Works awesome on 320px portrait iPhone, looks dodgy on landscape.
Ha! great job, I am not surprised I did not win :). But these 25 look great – congratulations guys
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
Interesting mine didn’t get top 25… Unless I broke some rules ><
http://nenvy.com/a/cssoff
Great job everyone!
^^ http://nenvy.com/a/css_off/ rather
Congrats Danny!!…
Now i am waiting for my points & next CSS OFF.
I want to see the worst ones.
@Erik: Cool!
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!
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
See you in the next CSSOff showdown
@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!
@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.
#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.
Insane quality indeed. I’ll do my best to be ready for the 2012 challenge!
@Radoslav – There was an update to the rules that was sent out to everyone who entered regarding font usage: https://unmatchedstyle.com/newsletter/cssoff-update01.html I’ve linked it up on the rules page for future reference too.
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.
Has someone (from those who are not inside Top25) already received a mail with his score and comments from judges?
@Gene Crawford : well I never received that email !!!!!!
@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.
Any news on when we’re receiving that email?
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.
Any more news on that feedback email?
Is it one week away, or maybe one month?
Just sent out the last batch of scoring emails. Let us know if you don’t get yours and we’ll sort it out.
never got the scoring email, should have an entry from me
Al
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…
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. đŸ™‚
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!