#cssoff

The CSSOff competion 2013 started today. And I got bitterly disappointed. And it seems I'm not the only one after I read the #cssof tweets. Some of the guys criticize mainly the design.

Me not. In my opinion it doesn't matter if we find the design beautiful and eye candy. Everyone has different preferences. The design is some kind of poster and magazine style that has been (or is) trending recently. It looks close to a print product. This isn't a problem because CSSOff is done to get challenged at a very high cutting edge level. Transferring this layout to the web keeping the document accessible and good structured, this is really a challenge and fun because we could try out all the new techstuff we usually can't use in payed client projects.

I am disappointed because the sources of the competition are closed source and not accessible to everyone. And it may imply some legal problems, too (at least in some countries). One of the CSSOff rules is to build on open and standardized technologies like HTML, CSS and Javascript. But you need closed commercial software to work with the layout source: it's a Photoshop file. Damn it! This is a problem.

PSD templates mostly suck, this too: The usage and layering in the PSD file contains all the "nice" stuff that is hated by developers, e.g. weak names for the layers (I can't see if it uses layer groups as I don't have Photoshop) and filter effects not rendered to raster graphics (at least as layer copy).

Dependence on closed commercial software: if you don't own a copy of Photoshop you can't access the PSD file format. The sources come with PNG as fallback but this is a joke. It is a flat image without any other informations. If you don't have the correct version of Photoshop you could run into problems. If your PS version don't support the right layer effects, you have a problem. If you use another software to open PSD files but that software lacks full PSD support, you simply can't work with the sources. Check the difference between the fallback PNG (right) and the PSD file opened in Gimp (left):

Other words needed what the problem is about?

The source archive don't includes layout annotations and raw data: it only contains the PSD, the PNG fallback and a very small Readme file. The only useful information is about the used Google Webfonts. No annotations about used font sizes, weights and lineheights, no info about the grid, no raw/single/retina versions of the used images, no text file with the text blocks used in the layout, no info about used angles on rotations, nothing. Only the useless __MACOS meta folder so everyone can see that someone owns an Apple machine. Probably you really need Photoshop to get your hands on all this important facts. Some attenders filled the gap and provide info on used fonts, source images and texts.

The sources are not free (as in freedom): this is really a problem because the competition terms demand that all results have to be submitted under a Creative Commons CC-BY license. We would need also sources under a free license for that. Propably all images from the layout stay under copyrights and they are not released under a free license. There is no picture old enough that it could be under public domain. I don't think that product images (barbie box, transformers bluray) are under CC-BY, same for the altered Abbey Road cover (barcode instead of cross-walk stripes) by the Beatles or the stock photographs. You only can get free usable results on free useable sources, and free as in freedom, not as in free beer. You can't use everything that you can copy for free from web, at least not in a open competiton asking the attenders to illegaly claim other copyrights.

Probably there are some more critical issues with the layout resources but my points above are enough for now.

In my career I've been pigeon-holed as a Flash guy, but I can turn PSDs into solid code with the best of them. JS/CSS/HTML5? nbd. Recently I came across the perfect way to prove to myself and to the world that I am one of the best around, and no one can keep me down! Enter: The Triple Dare! The Web's Messiest Challenge!  The deadline just hit and here's my entry... 

http://livadas.com/Challenge/

My thoughts:

There was a ton of griping going on about this on contest from quitters on Twitter. People were bitching about everything from consistency, spelling, to the overall design. I've seen a LOT worse! If you think this is a bad PSD, you must work in heaven or something.

There were so many cool subtleties in the PSD. Items slightly off-set. Containers that line up differently. Is that a white drop shadow? Nope. RGB (254,254,254);

I thought it was fun. I enjoy troubleshooting certain things up until a point. I think CSS and jQuery provide an optimal challenge for me; not too hard, not too easy. 

My least favorite part of testing is screen-grabbing from the browser and laying it on top of the PSD. That is UBER time-consuming and repetitive. I try to be pixel perfect in at least Chrome.

I hope schools and business and pros aren't doing collaborative entries. That would really put us isolated loners at a disadvantage.

The nav was almost unusable when testing on my iPad. I made CSS media exception for devices with a max-width of 1024 (iPads) so that the nav is about twice as big for fat fingas. It still kinda sucked. So is that a problem with touchscreens or my code? IDK.

My favorite part was making the timer tick down from 60 seconds. I wonder how many other people did that.

My select boxes are totally fuct on IE. I'm from the school of thought that people shouldn't over-design select boxes in CSS. I bet a jQuery select switcheroo thingy is the right way to do it, but I ran out of time.

I chose to use the H tags instead of slicing the fonts. On one hand, that makes the page more dynamic and possibly more search engine friendly. On the other hand... I had a terrible time getting the Komika @font-face to render on most browsers. >:(  It's gonna look off-brand and crappy on older browsers. I wonder what matters more to the judges. It's kinda subjective but I'm hoping semantics is favored more than style to these unmatched style css peeps.

The judges and Unmatched CSS "Who are these people!?"

There is a disproportionate amount of awesome of front-end devs in Europe and especially the UK.

My CSS doesn't validate. According to most forums, this isn't the end of the world  because the W3C validator doesn't yet support CSS3 entirely. OK but it still felt weird to submit with errors.