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.
Steven Schrab – View entry1st Place –
Notes: Take it a little easier on the image compression. CSS image replacement on title looked good, but would be impractical.
Edd Sowden – View entry2nd Place –
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.
Mustafa Quilon – View entry3rd Place –
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.
Pam Griffith – View entry4th Place –
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.|
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.
Thanks for posting the results, I’m really miffed I scored so low, but I did learn some things and I hope I can do better next time.
Thanks for the contest :)
BTW: I did have some problems in converting the design because GIMP could not open the PSD correctly, so I was stuck with the JPEG.
I would appreciate it if next time you could test the PSD in GIMP too.
We’ll probably go one of two ways next time… ensure that there is a free program that opens the file with just as much success as a paid one, or, just be clear that this is a Photoshop conversion contest and that particular tool is a pre-req.
Thanks for the reply, I do intend to get Photoshop soon, I guess this is another reason to get it :)
How about Pixelmator?
Thanks for the time and effort on this Chris/Doug!
It’s good to see the results posted + markings for areas that let you down/showed strength.
Look forward to the next one!
congratulations to the winners, I didn’t do too bad (67 points)
I also used the magic line for the nav bar !
I just noticed I added a transparent PNG fix for IE6, but forgot to include the script file :)
Excellent job everyone! Some awesome pieces of work up there. And thanks to Chris & Doug for marking these with such precision!
Nice – I’ll take the honorable mention! (#103) Congrats to everybody!
I didn’t have a chance to enter this time because I was so swamped with work (I’m sure you guys can relate) but I am really excited for the next one. When do you think you’ll have another one?
66. good enough for a newbie :P
Pure curiosity: which typeface did you used on “The Great”, from the contest title ?
Can you answer me?!… :) About which is the typeface used on “The Great” from the contest header…
Thanks for so much for this! I had a blast doing it and learned a ton. You were very clever with the small detail design challenges, like the 3 lines that fade behind the main article area.
Thanks for the detailed scoring too. It gives me a lot of good feedback for the next design challenge I encounter.
Thanks for running this whole contest. I learned a lot creating this entry (especially about the finer points of positioning and z-index). It was definitely a greater challenge than I anticipated.
It’s great to know where I need to improve. My biggest downfall was not using web text throughout the article and footer.
I’m looking forward to going through what everyone else did.
Some people have requested more specific feedback, I was wondering if either Chris or Doug could offer anything else I should work on in the future?
Here’s my entry.
I know you’ve both devoted a lot of time to this already, but thought it was worth a shot. I could send an email if that would be easier.
Laura, please send me an email and I would be happy to respond. You can find my email on my website. Thanks for entering!
Yay, 60, not bad! XD
Thanks for the tips, I really did a bad choice on image replacing the article title.
Thanks for the contest and congratulations for all the winners and high-scored guys. You rock! o/
I liked Mustafa’s the best, while I agree he could of used a better font (or an @fontface with a fallback of some sorts) he seems to be the only one that took the “no font as images” approach, which I really like. I’m sad there are no dynamic width entries shown, I was working on one but didn’t finish it in time.
The reason why I did not use an image was because it is supposed to be an article and hence, using it as an image would be highly inconvenient. I thought of using @font-face, however, the font which was used, IIRC, Helvetica (condensed?) cannot be used in that manner(hint: licensing). Hence, I made the decision to use a font-stack.
Great Competition! Congrats to other winners, looking through other entries now.
Honestly, I missed that. I that it was like a tagline for the site name vs. an article head. I would have coded mine with HTML text as well instead of a graphic.
Now that I look at it, it’s so obvious.
“I *thought* it was like a tagline”
Agreed, props for font use.
I missed on a great opportunity of getting my design reviewed by a great designer.
P.S – I had my exams
Some really good entries! Shame I did not have time to enter it this time around, I will definitely keep my eye open for the next contest though.
Really interesting to look through the different designs and coding and see all the different techniques used to create the same end product. Just shows you how versatile XHML and CSS is at the moment.
Its a shame some the entries did not seem to finish or maybe they forgot to upload or add in certain coding, could have been a completely different top 10 if all had been done.
Entry number 58 was my favorite, his redesign was awesome.
Why thank you, You have just made my day :)
Can’t believe I was the only one who redesigned it. I’ve never been one for sticking to the rules. Had to rush the coding side of it though, was supposed to be working.
Super concept. I didn’t knew it, I will also participate if I get a chance !
In a perfect world, I would have used TypeKit for font replacement. I knew my fonts were a little off, but I was surprised to see such a low score for “Good choice points”.
Oh well, at least I kept my file size down.
Thanks for hosting this contest.
As much as I loved Edd Sowden’s use of webkit animation and HTML 5, the first place entry is definitely the most well-rounded, particularly when it comes to the little touches like hover glows on the image thumbnails.
Shame you weren’t giving out bonus points for those entries that gave IE6 a fallback stylesheet.
Thanks man. I love messing around with details like that. It’s my favorite part of the process!
You’re welcome. Made me really want to click around the site, which is the ultimate goal really. Obviously nothing happens on these one-page sites.
Haha, so by refusing to develop for IE6 I missed out on first place. I am more than happy with that result then. Well done to everyone else.
David: the clock wasn’t webkit only, it also works in the latest gecko browsers.
I see our entries are pretty contrasting :D Congrats & Nice work! Love the use of “CSS Transforms”. In hindsight, its like, why didn’t I use it :)
Great example of HTML5. I also wasn’t sure about how much IE6 support would weight in on the contest. I applaud your decision to leave it in the dust. :)
Edd, fantastic entry! I loved your clock, it was such a great touch. With or without IE6 you still would have won if IE8 looked like the Safari/FF versions of the site. The big problem, was you didn’t provide transparent PNG fallbacks for the RGBA transparency. It makes a nice muted red look really bright in IE8. I wanted to give those 3 points back, but I couldn’t justify why IE8 would look so different when a fix was quite simple to implement.
Anyway, awesome entry and congrats on #2!!
Even better! I’ve been living in Safari for the last couple of weeks so didn’t really bother to check in other browsers.
The only thing I really scored good on was File Size. I would have done less image replacement had I gotten my mac about a week sooner.
dang, i should have kept my file size down. i knew that would bite me in the butt. I might have been able to squeak into the top 3, but i liked my rollover and that added four huge transparent images to the whole thing.
And a big thanks to Chris & Doug for taking all the time to do this!
Not sure if you used it before, but one of the things I’ve used to reduce the size of 24-bit PNGs is PNGSquash. It lossless compression and it’s amazing how much it can save sometimes compared to just saving from Photoshop. Just drag your PNGs on to it.
Thanks for having this – it was great fun! My entry got a bit pwned in the face – but I welcome the criticism and am already anxious for the next one where I can try to redeem myself!
When is round 2!?!
PS: Anyone else do a flash clock with actual time-of-day ticking like me?! :)
Ha! Now that you mentioned it, it is really nice how the clock works! :D
Gratz on the creativity!
Love the clock. Would like to see if someone could do that without flash.
22 :D i wasn`t expecting this for sure , that`s great
i have only one question why did i get 2 for IE7 and 4 for IE6 :) ?
Hey, you did really well! Image compression was what really brought your entry down in points, but it was still a great entry.
The “Slightly older” browser support included mainly IE7, but also FF 3.0. Old, was really just IE6. Where as some visual differences are expected in IE6, IE7 is just one gen back and so the sites should look pretty much look identical. Also, there is a visual display bug in FF 3.0 for the right images.
Like I said, really top notch entry… just don’t compress your images quite as much next time. Cheers mate!
I`m really flattered , thanks Doug.
any good tips/articles about Image compression ?
Congrats to everyone. I especially like the guy who inverted the site colors and pretty much did what he wanted with the layout. I like seeing someone totally break the rules and do something different. So whoever did #58…kudos sir.
I am a little confused with the semantics and smart choices categories. What exactly are “smart elements and class/ID names” used? Am I just being dumb there? Is this talking about totally specific id/class names that describe exactly what you are using the element for?
Mine were probably a little too much on the simple side then, but I’m used to styling web apps and sites that use the Ext js library, which throws in dynamic id names like id=”ex-num-47b”. I guess I rely too much on firebug/developer tools to actually care what they are called. I just look at the code, find the element I need to style and go, because I can’t rely on names to tell me anything where I’m working.
The smart choices is odd to me, too. I used text instead of images on all my stuff EXCEPT the keep reading button. Mainly cause I was lazy and doing that part in jQuery. So besides that, what exactly were the judges looking for?
I know Chris and….Doug…had to scroll up to find his name, had a LOT on their hands doing this. And it was a lot of fun. I just wish there was a commented section for each of the entries saying where an entry fell short and what they should have done.
All-in-all though…pure awesome for you guys to do this. I can’t imagine going over all these when most look the same.
I feel the same as you about semantics and good choice, I scored low on both too
Hey Jeremy! Thanks again for participating in the contest. Your class name’s and id’s were actually fine, but there were a few things I was looking for from a semantic aspect.
Namely, when a list of items were being shown (three photos in a row, three image/text combos in the footer), I felt that was a good candidate for an OL or UL or even a DL. Semantically, lists group similar items in a nice way. The big one that got a number of people low semantic scores including yourself, was using `p` tags to group one, two, or three word combos. By any definition, a paragraph is made up of more than just three words. So splitting the bottom quotes or the meta data on the photos on the right would have been better suited for a span with display:block or something similar.
“Good Choice” points might better have been titled “Bonus Points”. It was really a way for the judges to give extra points to entries that particularly impressed us. Don’t feel bad about the low score. The other columns were more concrete in their meaning and provide the best feedback moving forward. Again, we really appreciate the opportunity to judge so many entries, and want to thank you for participating!
THANK you Doug. Makes a little more sense now. Probably should have slowed down, but limited time = lazy!
I thought that this challenge was very interesting, but I agree with everyone that using a non-standard font in the design causes issues.
Solutions like @font is a good idea, but not standard enough to be considered best practice. And using images for text is a REALLY BAD idea. Don’t know about you, but I don’t want to have to go back to a designer just for a header text change.
As responsible professional developers, we need to be friends with the designers and offer up web text solutions for text design ideas.
I won’t even go into how to manage translated sites!?
These kinds of contests are awesome and really challenge all of us to write awesome code. I didn’t have time to enter this one, but I look forward to the next challenge.
Wow. I’m blown away. There were a lot of incredible submissions, so I’m not sure how mine scraped its way to the top. Lots of very good ideas in there.
The design was deceptively complicated. If you didn’t attempt this, I’d give it a try as it was a really good exercise.
Thanks to Chris and Doug for judging this and for the notes. I always love feedback.
Congrats Steven! Top notch job!
Congratulations to the winner!!
I love the idea from winner #2 with the anmated arms of the clocks..
Pitty that i forgot to send my Files for the contest but i hope that there will be soon another contest! ;-)
Thanks again Chris and Doug for putting on this contest!
I was in the handful of people that scored perfect (10, 5, 5) on browser support, so I can be proud of that.
wow, some really nice entries! I like the ASCII picture in the source on #117…
I didn’t get a chance to actually code this up, but when I looked at it, I think the biggest thing that boggled me was the fading text in the bottom callout boxes… for some reason, using three separate colors to simulate a fade never occurred to me :(
overall, I think there were some great entries, and great judging done. Can’t wait for the second annual. CSS-Tricks CSS Off.
Thanks for this great opportunity Chris and Doug!
Some really nice submissions up here, congrats to everybody!
Well I scored well on everything except for good choice, and it wasn’t until right after I submitted that I realized what my bad choices were. I think a little bit of laziness and attention to other projects forced my hand on the bad choices. Oh well. It was interesting to see what some people did, especially with the clock animations. I didn’t even think to do something like that so congrats. Overall I’m pleased with my entry, even though I knowingly cut some corners just to get it done :(
I don’t understand why did i get that score
I scored 3 on “Matched Original Design”,but my design look almost the same as the original.
and on the browser support i scored 3-2 but my design works awsome on every browser i checked
and on “Folder Organization” i scored 1,but there is organization,so i don’t see why i scored so low.
I’m telling you this,not because i want to win,but because some of my clients may see that and i want the score to be real,and as i see,i just don’t understand my score.i almost sure you had a mistake and checked another work,not mine
I got a 5 on the folder thing, and all I did was put the css in its own folder, the scripts in its own, and the images in its own. Not sure how a 1 would come about.
As for the browser support, I got a 3-3, so it is apparent that not breaking or looking the same across all of them, wasn’t what was being judged. I think they were looking for CSS3 support on the modern browsers, and who knows what on the old. I included a conditional style sheet for about 2-3 styles, which used gifs for IE6 instead of pngs.
Erez, I would be happy to give you more detailed information about your submission. Please contact me via Skype or via Email, both methods are available on my website.
I’m curious too :)
Thanks Chris and Doug, and all the profis for entering – great stuff.
I’m not quite sure how the score was calculated for “Matched Original Design.” There seems to be quite a wide variation in that score for entries that are all very close to the original, and some high-scoring entries with distinct differences. Some specific notes would be helpful in this area and the “Good Choice points,” but I can understand how that could be an insane amount of work for so many entries.
Anyway, thanks for running the contest, and congrats to the winners! I learned a lot from the entire process.
Thanks for the feedback Dale, our comments were more written for each other and did not make sense to publish. During the next round, I agree it might have provided more insight into our decisions. You had a really great entry, so thanks for entering!
Wow i cant believe i was not one of the first ones, i really made it work with old browsers, i dont know why i got only 1 in that part, and i think my code was the cleannest possible. Well it helps me to be a better designer.
Not too bad the italian guy! ;-)
Would be great to evaluate also how many man hours each one spent to do it !
Great job guys.
I really like the hover effect on the winning page.
It makes it easy to read and you definitely know that it is a link.
Thanks Chris & Doug for the hard work throughout CSS-OFF.
It was a lot of fun, and a great opportunity to see what we’re all doing and how we might do it better!
Congratulations to all the winners! : )
Great event! Thx Chris and Doug for your work.
Very interesting to compete on an international level. After all, being on 16th place is an amazing score for me!
I spent about 4 hours to do it and next time I’ll put much more attention on the details ;-)
Wow, I feel pretty good. I am in college currently (a senior) and I work at a small-ish web development company. I still don’t think I did too badly for how many people entered. I know, didn’t get in the top four, but pretty darn close!
Also, I am very proud of my cross-browser compatibility and small folder size (though that one may have affected image quality). :)
Another thing (not to be too nit-picky), I did notice that one of the top entries looked really messed up in Firefox 3.0(.15 if you were wondering).
Thanks much for the contest! It was good practice and made me feel good too! :D Congrats to the winners!
Oh yeah, and I did mine in about 3-4 hours :D
Congratulations to all, I see that I have a lot to learn but I am satisfied with my result, because I had to complete everything in 4 hours.
i already waiting for the next CSS off!
Congratulations to the winners! And thanks Chris and Doug for the contest.
I’d love to see part 2, even with no prizes. ;) Or maybe you could find some sponsors? :)
Is the 2nd place entry working ok for you? This layout should fit 1024px screen resolution perfectly, but there’s a horizontal scrollbar and the content doesn’t look good, when the browser window is less than 1300px wide, which is unacceptable in a normal work.
Can you see it, or is it just me? (Firefox 3.6/Mac)
Wishing I hadn’t been so lazy and put in those rollovers and swapped out the article title for text hehe
haha ,the time keep is so Q~~~~
Ha I wish I knew this contest…Congratulations to all.
I’d love to hear some comments from those who scored well on the ‘good choice’ category. I think that might be the cream of the crop on the experience aspect.
For example if there are any ‘poor’ choices that were consistently made amongst those who scored poorly on that section, pointing those out as a passing-the-knowledge type thing could result in good karma….
Funny, compare the results by file size. The largest (2mb) looks the exact same as the smallest (60KB).
Pretty amazing what we can do.
Great work everyone, I’ll enter the next one :)
Steven, congratulations on taking #1, can’t wait to go over your code and see what I can learn.
Also, never heard of PNGSquash before reading these comments, thanks for sharing that!
Well done to everyone who entered, can’t wait for the next competition.. If I were you Chris I would be dreading it, looks like many more people will be entering. xD
To the winners. Congratulations on taking the first 5 spots. Well done to everyone.
Can’t wait for the next CSS OFF. I think you might need a few extra hands to help you decide next time . xD
Wish I had time to enter this.. I was swamped..
A great opportunity to get your skills reviewed by a great designer..
Definitely entering the next one!!
Well done to the winners!!
I’d like to thank everyone involved, like most I rushed mine out but was pleased with some of my scores. Really picking some good tips up from looking through the winners code, looking forward to the next one and improving my score.
6th place. Thanks so much for competition! Congrats to all!
I like xhtml/css of 1st Place – Steven Schrab
great looking at all of the results, keep me going for long time just reviewing entries
thanks everyone for entering and displaying your talents online, don’t have PS so difficult to enter, perhaps PS not a requirement for next time, who know?
Rats, I knew there was something missing: line-height.
Thanks for pointing that out!
Next time, I’ll be sure to look out for the little shadow, too!
Thanks for the great contest.
One question though: I see I have 1 and 2 respectively for IE6 and IE7… May I ask why?
Here’s my entry.
Anyone here maybe knows, which font is used for the word “The Great” in the image on the top? I really like it. Thanks for help!
I thought more people would have made the page peel/dog ear using pure CSS and not use an image. It’s not hard.
Ooooh, hadn’t thought of that. It does work pretty slick. Thanks for that.
I liked a lot of your hovers for your entry!
CSS page peel/dog ear – This I need to learn.
I thought about it, but it means you don’t get the background noise effect in the top/left corner
Great to see the results and the feedback you’ve given the winners, thanks guys.
Wish I’d had the time and knowledge to get an entry in. Still early learnings for me but I’ve saved the PSD and JPG files for a future test to see if I’ve learnt what I’ve been reading recently. Will aim to do this sooner rather than later.
This is my first post here, although i’m visiting this site almost every day. Great Site, but you all know that.
I think it would be a unique opportunity to invite the guys from PSD2HTML.com to do the job. We all could see how they compete and score. It’s not too late to give them the mockup. What do you think?
Would love to know how to resolve ‘Specific Problem Area #2 – Subtle Shadows’ please? How would that be achieved?
Chris/Doug – Are you planning on showing us how you would tackle this layout please?
Regarding Winners – Are the CSS files available to view?
You can just view source and find the URL to each entry’s stylesheet.
For example, here is one of the style sheets in the winning entry.
Thanks rmlumley – As a learner, being able to see how it’s done is a great help in understanding the way to achieve the results.
been looking at #2 and others but I will use #2 as an example.
if you look at the title bar and the nav bar in ie7 and ff3.6, I see that these bars do not extend all the way across the screen. they do before the clock is loaded in but once that is done, they no longer extend past the clock.
if you look at #2 in browsershots.org, then these bars both extend fully across the screen.
what is going on? can anyone explain? does anyone else notice this?
when is the next CSS OFF?
Congratulation to winner Steven Schrab!!! Same question, when is the next CSS OFF???