Congratulations to Dawid Lizak for winning the CSS Off competition of June. View his winning entry.
Gripes
Note: A lot of these gripes are directed to my own misunderstanding of the rules of this fairly new competition. If you disagree with any of my gripes, please, leave a comment.
Non-Semantic HTML
There are divs named "top", "topleft", etc. About half of the classes/ids are named semantically, and the others are describing style. The naming convention implemented is far from CSS best practices.
Copy Alterations
In the "Upcoming Events" section, Dawid has changed "August", "June", et cetera, to their three character abbreviation. The copy that we received in the Jabroni packet (included with the PSDs were text files of the copy) distinctly bore the month name fully spelled. Changing the month in the HTML is a cop-out. If the system feeds the page "August", and the design calls for "AUG", some sort of server-side or client-side processing must be taken. This ought to be clarified in future contests. If I can assume that "January" has been handled on the server-side, I would love to hard-code "JAN" into my page rather than write JavaScript to handle the text transform.
In like manner, there are various places where the HTML has uppercase lettering hard-coded rather than handled with CSS. The text document bore sentence capitalization. It's not fair to change this in the HTML unless we have specified that certain server-side text manipulation may be assumed. Conversely, it's simple to perform an uppercase text-transform with CSS, and I'm upset to see the lack of such a simple CSS implementation on the winning entry.
Missing Headings
Some of the heading tags are in improper order. An h5 tag is used underneath an h2 tag - tsk, tsk. This is a bear on the document outline and generally poor HTML practice. Some can be chalked up to semantics, but you should never jump multiple heading levels like that. You can find errors in your document outline by using the Web Developer's toolbar in Firefox: Miscellaneous > View Document Outline. If you are missing heading elements (as Lizak's entry is), this tool will reveal them to you.
Usage of b, small tags
I know they are technically valid, but really, are we ignoring best practices? And the "small" tag? Could we be any less semantic? Why don't we just write < font size="-1"> while we're at it?
Diversion from Original Design
I understand that some diversion is good if it improves upon the original design. This gripe is just a personal "Arg" because I was going to force my header to span the width of the browser window, like Dawid, but I looked again at the design and said, "No, that is not in the design," and refrained. Now I am wiser for future competitions.
Self-Critique
My entry did not validate. Why? Because I forgot to close my img tags a couple of times, and I forgot an alt attribute on one or two images. Arg! My CSS was valid, but not my HTML. I remember thinking immediately after I submitted the entry, "Doh! I forgot to validate my HTML!"; it must have been an oversight/tiredness from the short amount of time (only a few hours) that I had to build this.
I had not noticed my massive file size: 111kb. I wholly attribute this to my lack of proper image editing software.
Had my code validated, I am confident that I would have been one of the 6 semi-finalists. I should have abstracted my JavaScript. I'm relatively new to proper implementations of JavaScript and I see now the flaws in my JavaScript for cross-browser compatibility - namely, using getAttribute("class") rather than the .className property for IE compatibility. I also wonder if my lack of attention to fonts played a part in the disqualification. That's part of the frustration: when I'm coding a design in the workplace, I can ask the designer what typeface, what font size, what exact hex color.
So it goes.
Fortunately, I was one of 15 finalists (out of the 48 timely entries). View the finalists (I'm #10 in the list of chronologically ordered entries). Regardless of my place, I learned quite a few lessons in speed-coding.
Final Thoughts
I shouldn't gripe so much, as I neglected to close a few "img" tags, and had a minor cross-browser JavaScript quirk to learn about. I have also learned to spend more time in optimizing images for the web.
Sadly, I didn't really learn much from the winning entry except the interesting method of employing a two-toned header spanning the width of the browser window. It utilizes non-semantic divs, but we live in the real world, not an ideal one, which makes sparing use of non-semantic divs "acceptable".
It is a fabulous competition. With my learned lessons (from my stupid mistakes), perhaps I have a better chance of winning the next competition. Thanks to Tony and JD for their long hours judging despite loads of entrants' griping.