So What Exactly is this CSS Off Thing?
First off, we don’t have everything figured out. But here’s what we’d like to do, with your help. We’re definitely open to suggestions.
Every month, we’ll design a web page in Photoshop and host a competition to see who can turn it into the best web page. The designs we release will present specific markup challenges, along with design and coding considerations for everyone from web newbies to experienced developers.
The point of CSS Off is to make you think critically about web design, and then execute it on a dime. You’ve got 24 hours to take our design and slice it up. Be thoughtful, be creative. Above all, use flexible markup, lean CSS, good design and your best judgment.
Within 24 hours, email us back a zip of your final html, css, supporting images and anything else you care to throw in the mix.
Why 24 hours?
- Because you work well under pressure
- We think time should be a factor
- It should force you make some tough decisions
- It should give you time to submit a polished web page
- We’ve got to draw the line somewhere
What are the judging criteria?
Our toughest decisions will be made based on simplicity. Simplicity in web design comes in many forms, especially these: meaningful markup, standards, accessibility, creativity, designing for the web and problem solving.
Is this supposed to be a pixel-perfect rendition of the design you gave me?
Ultimately, it’s about balance. You’ve got 24 hours to take our design and make it the best web page it can be. You could spend your time matching the comp pixel-for-pixel or turning rounded corners into square corners so you can spend time rethinking the interface. Just remember you’re limited in time, so be judicious in what you spend your time with.
Our winner will be the entry that does the most with the time allotted. We’re not saying a pixel-perfect approach isn’t going to impress us, we’re just saying that it’s up to you what to focus on. Think it through.
Can I use Javascript/Flash/AJAX?
You can use whatever you want. Even animated gifs. Remember, though — you’re being judged.
Does it need to work in all browsers?
Of course there may be differences in presentation from one browser to another, but we expect the winning entry to be usable and attractive in every one of them.
Furthermore, we would like to see web pages that are usable with CSS, Javascript and/or images turned off.
What about comments in my submission? Should I include them?
Sure, if they’re useful.
I’m not sure what the designer of the comp intended. Who should I ask?
Ask yourself. That’s part of the competition.
Excellent idea guys, but why on a friday? People need to work, you know? That would barely leave me 6 hours to work on the challenge… Would you consider doing it on a saturday next time, maybe?
I agree with Melanie on the day it will take off, because many people work or have to do other things on Friday.
Also, isn’t 24 hours better? Limited time is good, but rushing things up isn’t good anyway.
@Melanie and Arjan:
Perhaps something other than 12 hours is better. Perhaps Saturday or Sunday is better than Friday. We will look at changing it up in future contests. I’m sure you understand that it’s hard to please everyone on this, but I want to reassure that we do intend on offering variety in the future regarding day/time of contests. I would like to point out that we really don’t expect people to spend a full 12 hours on the contest - I wouldn’t be surprised if some people finish the first comp within 2 hours. (I haven’t even tried it myself yet, so I don’t know what to measure it by).
I’m with many of the other guys that Friday is pretty rough. But you did mention that the first competition may not take too much time, that is certainly relative to individuals. I would love to use this opportunity as practice for myself.
I really wanted to comment to say that the prize of $30 or a $50 donation is a very brilliant idea. I hope this works out!
12 hours isn’t good :( I live in Malaysia, and would love to participate. If the contest was released while I’m sleeping, that ain’t cool!
Will the file be posted at a specific time from which the twelve hours are counted? That does not bode well for us on the other side of the planet… :(
Otherwise, a very cool idea!
Limiting it to 12 hours is also limiting it geographically - what about those people for whom 12:00 CST is 1:00am? 24 hours would be more friendly to a WORLD wide web.
Something a bit less proprietary than a PSD file would be nice too, couldn’t you produce a PNG?
I concur with Christ Hunt.
A midday start time for the contest would be somewhere around 6-8pm for me.
And a PNG would certainly be preferable to a PSD. Odd as it may sound, but I’ve managed fine so far without Photoshop and have never used it once - not out of dislike, I just don’t need it. I also only got round to creating my first ever spreadsheet a few weeks ago, although I’m not sure what that says about me exactly ….
+1 for non-proprietary format option. I can understand the motivation to retain layers and whatnot, but not everyone has (legal) access to Photoshop.
So are you guys just getting web designers to make you stuff real fast and cheap? Cause thats a good idea, I’m gonna go start my own contest.
Shouldn’t you guys use <ins> elements for all the 24’s on the site? ;-)
@Tim
Good catch. We’re on it.
Another +1 for PNG, I don’t like the price of Photoshop, not to mention the platforms it runs on ;)
And Heywood, if you think this is cheap (I have no idea what is cheap and what isn’t), I’ll code a layout for you for this price :D
Fuck yes, I am so joining.
I’m a tad worried about browser support though;
you should publish a list of which browsers it will be tested in.
IE6, IE7, Opera, Firefox, Safari?
Sounds like fun. Let’s go.
yes, i’m interesting.
You have written that a .psd file will be available to download, is this the only supported format and what version is being used.
It wont help anyone if they dont have the version that you are using.
I personally layout in FireWorks and only use Photoshop for image editing.
I know in a perfect world all layouts should work in all browsers but sadly we dont live in a perfect world, not everyone can test in all browsers, which are being tested?
Dont mean to sound like a pessimist.
Like your idea :)
I’ll be designing the document in Photoshop CS2. I’ll be sure to include at least a flat .jpg, a text document with any necessary text, and by popular demand a .png may be available as well. We won’t let lack of Photoshop hinder anyone from competing.
As far as browsers: if there are ever any specific requirements like Blackberry or Netscape 3, those will be spelled out in that month’s announcement. In general if it works in the following browsers you’ll be fine: IE 6-7, Firefox and Safari on Windows and Mac as appropriate (Opera isn’t as important; if it works in FF it’ll most likely be close in Opera anyway). You know, typical modern browsers. Test as much as is appropriate for a 24-hour contest.
I think it should PSD (is there any open source format that can have layered images in one file?).. because we need to be able to reach each layer separately.. of course side PNG version will be great as well..
@Medyk
See this.
Yay! A mark-up contest. Now that is my sort of thing. Great idea, and if I have the time I’ll be sure to participate.
I’m in! I was in even before the extension. But thanks guys for being that flexible. As for the file formats and browsers supported, that’s pretty much standard… Just produce something as good as you would for a paying client and you should be fine, don’t you think?
Looking forward to it!
greate idea!
waiting for friday
PSD shouldn’t be an issue as long as you run a computer that has a GUI or a shell. The Gimp works in GUIs on Mac OSX, Windows, & Unix/Linux/BSD.
ImageMagick has binaries for Apple Darwin & Windows. Most Linux & BSD distros have binaries for ImageMagick. ImageMagick’s convert command can either output an image for each layer of the psd into png (or other supported) format or you can have it flatten the layers & output a single image.
I’ve not looked at the GD library, but it may have something as well… Not to mention many of the other projects.
Yay for open source.
I plan to participate as well.
Patrick Teague, you get a gold star.
The GIMP can open PSD but I don’t have that good an experience with that. .XCF can save multiple layers and is open source, but of course that’s a problem with Photoshop ;)
Just over two hours to go!! Myself and a friend are working through the night on a version each. stocked up on coffee, dvds and most important - beer! We’re in the UK so it’s acceptable to be drinking at the time the contest starts ; ) Good luck everyone! S
Thanks for helpful information you catch up us with your instructional explenation.
What people do is more important that what they say…
Best regards
I think this contest is great and I hope the contest continues regularly. I’m new to web design/development, but luckily I heard about web standards pretty early in my self studies. I may not submit anything for awhile, but it gives me a great opportunity to practice and learn. Maybe someday I’ll be confident enough to submit something.
I’m certainly not learning much about it in school. I’ve been taking classes at a community college and I’m often appalled at what they are teaching. Luckily for me, I at least recognize a lot of the stuff as being inappropriate. Unfortunately, I’m afraid I’m the only one who does and who cares.
Some of the textbooks aren’t bad and the courses are decent, but others are so bad. I’ve been trying to learn how to do things the correct way (and it’s not easy with so much being taught using table based layout and ways that only work in IE and even stuff that only works in older versions of IE!).
There is so much great information on the web about CSS & web standards. It’s really important and I for one really appreciate how much everyone is willing to share.
Nice ideea you’ve got running here.