CSS Off

The Contest

  • Convert a .psd into HTML making use of web standards, in 24 hours or less. Think SimpleQuiz, except it's the final exam.

The Mission

  • To actively engage the web community in web standards with an emphasis on valid, semantic markup
  • To emphasize good web design as an integral part of the development process
  • To use the contest as an opportunity to teach

Other Stuff

EarlyBird Judging is Underway

We’ve got a total of 24 entries for the second CSS Off contest. That’s less than half of the participants than the first time around, but that’s ok – that allows us to spend a little more time for each entry.

We thought that doing a page that has repeated markup as its main content (like a search results page) would be easier for you (and us!) than the previous competition. We were surprised to see comments and emails that indicated otherwise. We can’t wait to compare all of your submissions!

Please allow us the same patience you did last time for the results. We want to make sure we grade these effectively.

Commentary

  1. One day isn’t enough time for me. I had other things i had to do and only got about 60% of the way complete. I think if you gave people the entire weekend you would have more submissions.

  2. It’s summer time.. :)

  3. I disagree with you Galen, I like the pressure of having only 24 hours to complete it!

  4. Have you tried getting this site dugg? If this got on the home page of Digg.com I think you would see more then 25 entry’s, but maybe that is more then you could handle judging.

  5. This contest was definitely more complex than the last one for me, mostly because I took to heart some of the reviews and examples from last time and made a liquid layout. I spent 12 hours on the contest, including staying up all night. But hey, speaking for myself as an amateur it’s a great chance to gain some experience in developing with a deadline, and it may very well come in handy later. I hope you keep this contest going for some time. It really is a learning experience.

    Thank you!

  6. I don’t think a liquid layout is a good idea unless you offer a fixed width layout version as well via a stylesheet switcher or whatever. The sizes of monitors these days can ruin liquid layouts.

  7. @Galen - See here for an interesting discussion on that topic by Roger Johansson

  8. Galen.. in which way sizes of monitors can ruin liquid layouts? What do you mean exactly?

  9. I think he means if the monitor is to wide the text inside of say a paragraph can become unconformable long to read.

  10. @Jared
    I don’t see any problem there - we have max-width property to avoid that.

  11. I’m going by the submitted entry links. my monitor isnt even big and the fluid layouts stretched to the point where they are annoying to read.

    I’m just saying if you use liquid layouts, i think you should offer a fixed width version or use max-width / some ie equivalent hack to help readability.

  12. […] Judging is underway for the latest CSSOFF contest, so, as promised, here’s my entry, and here’s the jpeg of the initial file we got. As I said before, I’m pretty happy with the results. Here are my thoughts on this entry. […]

  13. I planned on taking part this month. I was there with the downloaded files dissecting how best to mark it up when I was contacted by a friend was in much need so I had to alter my priorities, sorry guys! I’ll be having another go next month! S

  14. Thanks for the second comp!

    I didn’t submit my entry for the first one, because I got to know about it the day it started and I wasn’t able to fit it into my schedule. But I coded my Jabroni entry the day after, just for fun - and fun it was indeed!

    This time, quite similarly, it was great fun too. And - in my opinion - a somewhat bigger challenge. The rounded boxes are always pain in the @$$ if you want to allow them to resize in X- and Y-axis AND to mark them up properly, avoiding presentational (=extra) elements. Maybe it wasn’t THAT hard, but - at least in my case - it caused some severe Internet Explorer problems. I’ve had a few years of webdesign experience, but making the boxes look and work as I wanted in all browsers took me quite a while.

    Same for the search boxes.

    I think having the comp last 24 hours is a must, of course. But, on the other hand, you should know that probably very few people actually spent all the 24-hours creating their entry! There can be many reasons. Even I, being a total geek, started about 6 hours too late and had some other things to do. I really wanted to finish it and submit this time, so I spent the entire night in front of my PC (I’m a geek, remember?), but still I would be more than glad to have a few hours to finish it, tweak it, optimize it, check it across the browsers etc.

    I think there was more job to do than the previous time (I don’t know if other people have the same feelings). In Jabroni, there was one thing that could be quite complicated - the navigation bar. Here, we had the rounded sort box and glowing search box. Also, the logo and the top bar wasn’t that easy to do. I wanted it to scale properly when you increase the font size, and didn’t whant to use a gif image for the logo because it could look bad (not smooth enough). Had to think for a while and make some calculations.

    There were MANY floats floating around ;-D, which is fine, but it can always cause problems in IE. Same goes for the negative margins. You besically finish your design, and then you have to spent the second _half_ (ok, I’m exaggerating, fortunately) of the time compensating for IE… For me, it’s definately the worst part of the job, maybe because I know that I shouldn’t be forced to do it at all, not on this scale, if guys from Microsoft woke up earlier and started to worry about the Standards…

    Anyway, I think that Jabroni navbar wasn’t that hard. Maybe it was as much complicated as Earlybird’s forms or rounded boxes, but what I want to say is that everyone is used to creating a fancy navbar. We do it all the time. On the other hand, we don’t usually make glowing forms :-). If we have to, we can use an extra container element, or a clearing element and nobody will say anything. This time we knew that we most probably shouldn’t do it - we are to be jugded!

    And I think it’s… it’s GREAT. Because you can always learn how to do something better. This time I knew that I should avoid extra markup and keep it flexible, and possible to increase the font size. We design forms and rounded elements (etc.) every day, but this time we had a great chance of trying to make it work no matter what and with no presentational elements. Normally you sometimes just say “ah, screw it, nobody will increase the font size 3 times anyway!” or “only nerds will view the source and notice my extra div!”. This time, at least some of us (me including) did the exact same thing they did before, but without any compromise! And we can use our knew experiences the next time we create a webpage!

    So thanks a lot! You shouldn’t forget, though, that there are only 24 hours and if you want to have a really clean CSS (with all the mentioned assumptions to the HTML and the design being elastic), you shouldn’t put too may challenges in one comp. It’d certainly be great fun finding sollutions to all of them, but we simply don’t have the time…

    I think that’s a really big, great and maybe even unprecedented thing, the cssoff comp. We should have something like this a lot earlier. Your designs are very cool and you really feel that you’re coding something that could be a real webpage, in terms of design difficulties.

    I also get the strange feeling that you provide every layout with some hard-to-do-things on purpoise. I’m probably not right, but when I see some elements, I can’t stop thinking “hey, they know that it isn’t easy to code, and want to check how I handle it!”. Which is also great.

    Because, IMO, all standardistas LOVE to know that somebody will actually check their code. That the extra hour spent on eliminating a container element will give effects that won’t be unnoticed.

    Keep it up, guys :-)

  15. @Galen: You’re right, if we gave more time we’d probably get more entries, but we chose 24 hours (well, we originally chose 12 hours, but went with 24 hours when international interest piqued and logistics for a 12-hour contest became a problem for our friends overseas) because, 1) part of the contest is forcing entrants to make time-sensitive decisions with their markup/CSS and 2) we don’t expect everyone to be able to participate every time, and we’re fine with that. If you’ve only gotten 60% finished in the time allotted, you won’t win, but submitting your entry anyway wouldn’t hurt … someone may learn something from your entry in the end, especially if your 60% is really awesome!

    @Jared: Digg is an awesome platform for getting your site promoted. If we were to get dugg, I think I speak for both of us that we’d prefer the results of the contest get dugg, not the contest itself! I don’t think we could handle all the entries, and we’d have to rethink how the judging is currently structured…plus, the purpose of CSS Off, after all, is to use the contest as a learning opportunity.

    @Joseph: Glad to hear you gained something from marking up the comp! Originally, we wanted to develop a comp that was easier to judge than the last one, so we decided on search results because of the repetition. As the comp came together, I kept finding myself throwing in curve balls, because I wanted to see how our excellent entrants would approach these problems we face every day. And so far, the approaches have been very enlightening to us as the judges! There is so much talent out there, and so much we can learn from one another!

    @Everyone Referring to the Liquid vs Fixed vs Elastic: this is an age-old argument spanning back to the days of tables. We’ll never come to a consensus I’m afraid, but there are tons of good resources out there for forming your opinions. Dan’s link is a good place to start, and if you follow all of the links in those blogs, you’ll find yourself in good company.

    @Sam: Good luck next time! CSS Off is not the most important thing in our lives either!

    @Bartek: You about covered it. Thanks for the kind words!

  16. @jdgraffam: I wanted badly to enter (as I didn’t have enough time for the Jabroni entry, but I did get it 80% complete) and this time, I completely spaced on what day it was and only had about 1.5 hours to work on it. After setup, I ended up only getting the basics organized, but I think I probably hit 50% on it.

    I’m definitely marking my calendar next time. I’ll even submit my entries if incomplete, I didn’t think you where interested in such entries as well.

    Also, while working on this last contest as well as starting in on a book about Web Project Management, realized that some places actually distinguish between HTML experts and CSS experts and that some people might not have control over how the HTML turns out (if they’re no programmer and are trying to style a 3rd party open-source or proprietary CMS tool).

    So, I was going to setup my HTML for this contest and fire it off to my friend to see if he can CSS it and what he would do differently than me, given the same HTML.

    Anyway, keep it up. I’m crossing my fingers that I’ll get a chance to have a good 3 hours to work on the next one (Estimated how long it’ll take me, including setup times). 4 Hours if I want to add ‘Web 2.0 stuff’.

    Cheers,
    John

  17. I hope you guys keep this competition going for a while. In my day job I’m a sales and project manager for a big event company, so summer time is crazy-time for us. If you’re still here in october I’ll definiately participate! At this point I’m working 20 hours a day, so even if my one day off a week would happen to fall on a competition day, I’m won’t be too keen to enter. See you guys in october! Good luck to everyone!

  18. This contest did not take me as long to complete as Jabroni, although it was more challenging. I would be interested to note the entry quality of various repeat entrants over the course of this competition: time to completion, quality of syntax, intuition of design implementation.

Leave a Reply