And the Winner is Dan Ott
Dan Ott is an independent contractor out of Cleveland, OH, who has worked for the past 5 years in the web development field. He blogs on his personal website, dtott.com. Dan chose to donate his winnings of $50 to the Alzheimer’s Association.
Dan’s EarlyBird entry had a great balance of good markup, organized CSS, and consistent browser rendering true to the original comp.
Dan says:
I have a lot of experience in back-end work like php and mysql (and front-end javascript/AJAX), but my true passion is (x)html and css. I don’t have the strongest design skills in the world, but put a psd in my hands, and I’m a very happy camper. I live for the green bar on the w3 validator.
Well said, Dan.
View All Submissions
View a listing of all 25 entries. Our notes may seem incomplete or unfair. They are just observations we used to help keep ourselves focused. For better or worse, they are there for the world to view.
About Earlybird Participants
Everyone who participated in the Earlybird CSS Off really knew what they were doing. Although a few had some room for improvement, there was no bad entry. All of the participants seem to be adept at HTML and CSS. That makes a judge’s job hard, because there are no easy ones to weed out as we seek a winner. It makes me wonder if we should instead have a contest to see who could NOT use CSS the best, but instead use tables, spacer.gif’s, and font tags. Now that would be a challenge.
About our Judging
We agree that it took too long to post these results. We had high hopes, but we also had/have demanding day jobs (and yes, an internet-free vacation). Thanks for your patience.
Tony’s Notes (Markup/CSS)
Below are some overall comments I had for everybody. I hope you find something useful.
Put the Cascading back in Cascading Style Sheets
I noticed a couple of people who could’ve been slightly more efficient with their markup by ditching unneeded class names, particularly in the bottom part of the EarlyBird page with the four columns. Instead of doing something like this:
It could be shortened to the following:
Then use CSS selectors to target all the sibling elements with the common parent, such as “#container div {column rules go here};.”
Give Meaningful class (and id) Names
When using class names, use ones with semantic meaning instead of ones with presentational connotations. Entry 3 used a <p class="indent">, but a <p class="related"> is more meaningful, and more flexible should presentational changes be introduced later.
Put Thought Into the Tags You Use (or Don’t Use)
I wasn’t surprised seeing search results marked up in different ways. Some people showed them as an unordered list (like msn.com search results), ordered list (like yahoo.com search results), definition list, or <div> tags (like google.com search results). Any tag is good, as long as thought was put into it. I’d prefer to see meaningful tags used where it’s appropriate in place of the catchall mark-up tags of “div” and “span”. Div and spans are great in that their lack of meaning makes them so flexible and they can work anywhere, but sometimes, a more meaningful tag could be used instead. For instance, a span of text that needs special emphasis <span class="title">blah</span>, could probably be <strong class="title">blah</strong>, especially if you know that, even without styles, you want the contents to be emphasized.
For forms, Mariusz (entry 21) writes:
I consciously didn’t use fieldset element within a form - I see only one controls group and I think one is not enough to go with fieldsets - I use fieldsets only when I see clear sections and this is how understand their purpose from W3C recommendation. I’m writing that because recently I’ve noticed a trend for using fieldset even within simplest form - I’m not with that trend - I think it’s overuse and it’s bad :)
I’m glad you give it consideration.
Fluid vs. Fixed Layouts
By the way, Mariusz’ slightly fluid layout is excellent. Many people went with a fixed layout, and many went with fluid. A couple of participants made a layout that was completely fluid, with the search results sticking to the left on the browser window, and the “Dig Deeper” section sticking to the right. Imagine having a really wide monitor, and seeing the search results cling to the left side while the dig deeper filters clung to the right. On a 30″ monitor, the search results could literally be feet away from the filter section. That’s not readable. It’s like how newspapers use fixed width columns instead of expanding one column the full width of the page. Readability needs to be a factor in web page design, and that means that sometimes fluid is not best. I like how Mariusz handled this with grace. The search results will expand and contract within a set of bounds - at a certain point the page content stays put and so that all parts of the page are kept together instead of stretched so thin (or smushed so tight) across the entire browser real estate.
One Entrant Used the hAtom Microformat
Tim (entry 17) used the hAtom microformat. Tim, I wish I knew enough about that to determine its appropriateness. Props for giving me some reading material.
Remember the User
Many of you kept the users’ personal preferences in mind when designing. Juan (entry 14) said, “Because the forms seems that it use some ajax, I include a .js to hide the submit buttons when javascript is on.”
Use Your Tags for All They’re Worth
I like lean markup. Many people used empty or nested divs to achieve certain presentational effects (like rounded corners). And that’s ok - that mark-up gets used in the CSS. But if you have a div, why insert another div unless you’re going to use it for something? Case in point, entry 7. Why div within the form of “wormSearchAgain” ? It seems pointless. Its not targeted in the CSS or any JavaScript file. It’s just extra markup for no reason.
Use Best Practices
Ok, Arjan (Entry 8), you’re gonna get what I know you want - special attention. You didn’t have html tags or body tags, and the code still validated. Well, that’s a new one on me. (Come to find out html tags and body tags are not needed with a certain doctype - the browser adds them automatically to the dom.) You get my attention by pointing out odd facts, but by doing so you let best practice mark-up take a lower priority, which isn’t going to win you this contest.
Unordered-List-itis
I’ve seen people use unordered lists for every possible thing they can think of, even a comma-delimited list of words that you’d see in a normal sentence. I think that’s “ul overkill.” Doug Bowman even questioned using lists on horizontal navigation. Granted, it’s a dated article (and the use of ul’s for horizontal navs is fairly typical and acceptable nowadays), but the questioning mindset should still apply. Take it to an extreme, and the point is better made: would you say that sentences are just space-delimited words, and should therefore be marked up as lists? Seems foolish to me. So does taking a sentence like
<p>Cathy ate a pear that was green, ripe, and delicious.</p>and turning it into
<p>Cathy ate a pear that was:
<ul>
<li>green,</li>
<li>ripe,</li>
<li>and delicious.</li>
</ul>
</p>Images Can Be Content, Too
I saw a few notes with people’s entries and blog posts that care was given towards images, and thought was given to what would happen if images were turned off. Things like the logo, they determined, should be an image tag in the markup, and not an h1 with a CSS background image. I’m happy to see that many people are careful not to stiff arm all images to CSS, as some images do, in fact, belong in the markup. Also, as entrant #23 pointed out with his submission, “The ‘RELATED’ mark is a background image, but there also is a structural label, so it should work out.” Sounds great. He also states, “There is always the problem with links to the homepage placed on the logo - people don’t know they exist. I added a hover effect saying that if you click here, you will get to the homepage.”
Take Initiative
We’re happy you took the freedom to add something that you thought was helpful. He capped his email with “These are the things that matter when you create a search engine page.”. That’s exactly what we’re looking for.
Oh, by the Way
Also, I enjoyed looking at how people organized their directories this time around, especially the images.
JD’s Notes (Design)
For what it’s worth, here are my thoughts on how people interpreted the design. Please keep in mind how subjective design is. That said, usability comes out of presentation and both are concrete, definable terms.
Logos As Content
When you’re using a logo as content, avoid applying site design elements to it. If we’re going to consider a logo to be content, then let’s treat it as such, and strip it of anything that doesn’t belong.
Ellipses Were Part of the Contest. Pay Close Attention!
I’d like to have seen more people use … Those ellipses were put in the design for a reason.
Rounded Corners are Not Always Necessary
I’m surprised only a couple of entrants (Entry 22 and Entry 18) thought to ignore the rounded corners of the yellow box. The truth is that they may add complexity that isn’t rewarding enough. Then again, if coding rounded corners is second-nature for you, go ahead. Expecially if you can make them expand in all directions, like Entry 16.
See How Everybody Else is Doing Things
Search results headings should be links; that’s what people are used to on search sites. It’s important in a contest where design is part of the judging process, to consider the usability of a web site, in context with standards that are out there. MSN, Yahoo and Google all use headers as links to search results. For bonus points, give the user an indication that the heading is a link.
Don’t Take Design Comps So Literally
Make the design fill the browser screen, don’t just throw up a background color and call it done. As web programmers, our job is to translate a design to the web. That means taking into account different monitor dimensions and resolutions. And then designing the site to look good in them. A site loses trust points immediately when the design doesn’t look “finished.”
Vertical Rhythm, White Space
Ensure spacing is regular and elements are aligned. See this post. Readability comes with regular spacing and good choice of line-height: balance breathing room with compactness.
Graphic Text Options
There are bajillions of options available for graphic text, most widely used are image replacement and sIFR. Keep in mind if CSS is on and images are off, text-indent:-9999px; doesn’t work. Also, sIFR adds glut to your page, so use these with caution. One user used the <img> tag, which isn’t too bad as long as an <alt> attribute is specified. If you have thoughts on this, take it to the comments.
Balancing Filesize with Presentation
One final design note for non-design programmers. If a designer chooses a highly stylized font, unless his font was just plain ugly, try and incorporate it – especially if it’s used in just a couple of places and won’t add that much fat to the page anyway.
Fast download times are a plus, of course, but the whole feel of the page changes when the image-font is swapped out for a different font in hypertext. If you’re not sure whether a designer intended for a font to be graphic or hypertext, ask him.
In the case of CSS Off, maybe you should ask a design friend.
Closing Thoughts: the Real Prize
We really are amazed at how well all of the entrants performed, and we know exactly how much effort was put into each and every one of these entries. In the end, we hope that the CSS Off is more about the learning that takes place after the contest than it is about the prize. The real value we hope everyone will get is from participating and then analyzing each other’s work. We all know $50 really is a measly prize.
Comment away, blog about it, do whatever you gotta do. Spread the CSS Off love. The real prize is right here.
[…] long last, the July winner is announced. […]
[…] it took a little time to get the results, but apparently I’ve won. I’m very excited about the results. More on the subject tomorrow(: Previous: Back In The […]
First of all: congrats to Dan. I’ve seen his blogpost when the 24 hours were over, and I was amazed about how his screenshot looked.
Wow, Tony gives me some special attention. I feel happy with using no
htmlandbodyelements if it is not necessary. Only in case if I need to develop a Dutch page (I live in the Netherlands), I need thehtmlelement for thelangattribute. Unfortunately you don’t like it, so maybe the next time I’ll put it in there…By the way, at the list of all entries, you mention this:
But there is no blue background, like the Jabroni entries…
I like all the new ideas mentioned in the list, thats where it’s all about and I would thank you all for this (both Tony and JD, but also the competitors).
Congrats Dan!
Now a question about my entry (#13).
You said the it not validate, but it is valid.
Thanks for the comments on each entry, and i looking forward the next contest!
Oops - I’ll correct the “blue” statement - cut and paste will get me into trouble.
Caio-
Sorry about the false negative for validation. I’ve corrected it in the table.
Arjan-
We should talk about the html / body tag thing. I had trouble finding information about leaving those tags out of the markup. If you have links to articles about this, please post.
[…] a few hours ago the results of the second CSS OFF competition became public. Dan Ott won this time, and as also said in the comments over there: congrats Dan! More important than winning […]
I’ve written an article about it on my web log at your kind request, here it is.
Also nice information can be found here. Indeed, there isn’t much resource on this…
Okay, so you can technically can omit the body and html, but why oh WHY would you want to? The linked article is from 2004, and a lot has changed since then.
The linked article from YOUR article at whatstyle emphasizes utilizing body and html to its fullest degree, not to omit them. I’m thoroughly confused.
The linked item is a bit on age, but isn’t outdated. Far from that, actually. The writer, Anne van Kesteren, does really good know what he is talking about.
And yes, the article I refer to “emphasizes utilizing body and html to its fully degree”, and therefor I asked what happens if you don;t use the actual elements in your markup.
And if you are confused (I can understand that), you might want to skip the information given by me. For me it’s all resource, and fun looking what the limits of the web are in this way.
I have not participated, because of lack of time, but I wonder why this contest hasn’t taken off more than it has. I’m surprised there aren’t a thousand entries! This is frikken awesome! I wish the judges would put links to every entrant’s personal site and maybe we could all get to know more people in our industry…
And to the judges: as far as all the drama around whether you’re making the right decisions, I think I speak for most of us out here that we’re not so much concerned with who you pick.
Jennifer is right that the winners’ entries aren’t perfect, but show me one that was! It’s a 24-hour contest! It seemed almost everyone had problems with Safari, so it’s likely the judges got sick of it and just stopped checking, or caring. The judges say in the About page that, “Ultimately, it’s about balance.” Dan’s entry was definitely balanced, if you ask me - not that others weren’t. Picking a winner has got to be so hard, with all the quality.
All the entries are well done, and, as the judges said, “The real prize” is the list of entries, especially the comments from different perspectives (ie: code and design). It’s like getting a free, highly qualified and personal critique. If you ask me, that is insanely generous and more folks should enter!
I write this to clear out the comment :”why div within the form of “wormSearchAgain” ? seems pointless. its not targeted in the css to offer anything. it’s just extra markup for no reason.” in the markup notes for my entry .
The reason for this div is that in the HTML 4.01 strict doctype the input element must be enclosed in a block level element. I could use other block level elements, but the semantic neutral div element seemed appropriate for this use.
Try to remove the div, and the page wont validate.
Yes, we *all* agree that the judging process took a bit too long this time :-). I checked cssoff.com 2 times a day and just couldn’t wait to see the results!
On the other hand, I LOVE how you judged the entries. You really analyzed them all! Every single one has its own notes and suggestions and was tested in several browsers… I didn’t expect THAT! It’s so cool to do your best writing good code when you know that it’s actually gonna be carefully read by someone.
I think that omitting the HTML and BODY tags is pretty much useless. But I found it very interesting that you actually can do it and have the page be valid. Overall, I think that the entry without HTML and BODY tags just couldn’t have won the comp (because it’s better to have those tags in your HTML), but it’s cool that it was submitted! It’s a perfect example of our real prize - the guy didn’t win the comp, but we all won some interesting knowledge about HTML! Even if I’ll never use it, it’s always cool to know!
You say that using an UL in a sentence was bad. Oh yes, it would be bad if all sentences on your page were unordered lists of words (hm, in that case they should be ordered anyway). But I used it for those “find by” lines. I thought that they weren’t just ordinary sentences with links - they were some sort of a secondary navigation. That was their only purpoise. They weren’t part of a bigger text. And they were repeated a few times on the page. I thought that such elements could as well be designed as tabs or other more visual things. In that case using lists would be quite obvious. Semantically, these sentences were really similar to me. They wouldn’t be if they were part of a bigger text or in other circumstances, but in this particular case I found UL to be OK. I guess I’ll have to think about it!
The winning entry. Looks VERY nice, has some cool solutions. I do find some flaws, hovewer. I, for example, would use a list instead of divs in the bottom section. Also, Dan put h1 headers there. I’m not really sure about it. I mean, no header-levels should be omited, but aren’t the h1 headers just too ‘important’ there? Wouldn’t that confuse search engines (sic!) or screen readers?
What is more major, IMO, is the lack of the main h1 tag. Is title tag enough? Shouldn’t you always use a h1 heading as the most important heading on the page, identifying the whole page? That’s another thing I’ll have to think about.
I also noticed that Dan’s entry doesn’t do too well when you increase the font size. There is some overflow even when you increase font size by one level. Dan doesn’t seem to bother much about it - the site remains readable, altough it doesn’t look well and bulletproof. I put much effort and time into ensuring that my design holds when you change the font size. I guess it isn’t that important?
Oh, one suggestion. Your jokes made me cheer, but they also led me to a confusion. At first, I thought that the links at the bottom of the page are lists of links. But the third one looks like this:
“How are they Related?
There’s No Telling…
They Probably Aren’t!”
It looked like a one, big text to me. Call me a stupid, but I thought that if one of the “lists of links” is a whole text (not three sentences which may be three different links), these can’t be lists of links… LOL!
My TODO comment (which I forgot to delete) says “maybe these are lists of links?”.
PS. “dupa” means “ass” in Polish and it’s sometimes used in a manner similar to “foo”, “foobar” etc. by some Polish coders :D. It’s not very meaningful, but you could consider it a small joke!
PS2. One more thing: THANKS FOR THE COMP! It was fun, it was a great exercise and I learned a lot. I will definately compete in css off whenever I am able to. I so much hope there will be a next one… and another next one… and another! :-)
Thanks to everyone for the positive feedback so far. We do wish we could have been able to get the results sooner, but we wanted to be able to provide this level of attention to each of the entries.
@Arjan, thanks for sharing the links. Your entry has led to an interesting conversation that I hope everyone can learn something from, and form their own opinions. I hope this type of thing continues.
@Bartek, your argument for why you used a list in your entry makes very much sense to me, thanks for sharing. I hope everyone was listening to your main point, which can be summed up in one word: “flexibility.”
Also, being able to increase font size without breaking the layout is pretty important from an accesibility point of view. However, consider how our users, birds, have very keen eyesight. Hehehe. I joke. We’re very pleased that you (and others) made sure the page scaled well. I’ve read research (I can’t get to the reference right now, but I’ll hopefully be able to quote something during the week when I’m back in the office) that says users who increase their font size are used to layouts breaking, so simply maintaining readability is acceptable to them. It’s a minimum, of course, so don’t go thinking it isn’t important. It is very important.
And thanks for sharing the “dupa” thing. Knowing these things makes us all better able to communicate.
@Jeff - *my* entry was perfect. Just kidding. (It was far from).
To be clear, I know you’re razzing me for noting the imperfections of the winners. I finally reneged on my that note and turned it around to reveal my true feelings on the matter:
Which coincides with what the judges remark on “it’s all about balance”. The average and normal entries are the winners. Maybe in the quest for total balance, certain entries with extraordinary traits are overlooked? This is why I appreciate the individualized notes on the entries, as well as the synopsis of entry hilights in the revelatory “winner” article. An extraordinary facet of an entry is highlighted in the synopsis, bringing mirth and merriment and knowledge to the rest of us peons.
I totally appreciate the contest, despite all my ranting. I agree with Jeff in that it is a fabulous free critique of my code. Those judges are rockin’ and totally giving me options to add to my portfolio. Merci!
Comment on my entry said:
Actually, in that blog post the first comment refers to a list of many image replacement techniques.
Bartek said:
So, you say you judge me on just that?
jdgraffam said:
Thanks for the kind words and I also hope this discussions will continue.
Congratulations to the Dan :)
..and now a bitter part ;-) - to be frank - this time judgment is controversial to me - while Dan’s entry markup is ok, it has big flaws: page is unreadable with images off, it expands to infinity (no max-width) and it weights 292kb (!!) - it was possible to fit it within 40kb.
I’m also not with JavaScript used there (which anyway should be placed in external file) - if client would want submit buttons you would have them on mock-up - and even if you place them there you should style them a bit better so they fit design.
There were better entries.
Thanks for good words on my entry (21) .
In your comments in listing you pointed twice that there are no form tags in my code - actually there are 2 form elements in my code and search form can work without JavaScript with all it’s settings :)
Arjan:
Well, I don’t think you should be judged just on that. But having no HTML or BODY tags is not a good solution in this comp, at least as I see it. Cssoff guys - as I understand it - say: “we give you a layout, and you use it to make a webpage as good as possible”. Do you really think that search engine pages should not have body or html tags in their markup? I really don’t think that the best way to win this comp is to have something controversial. Of course, I may be as well wrong and you’re guess is as good as mine…
You’re entry? I personally like it a lot! I like your usage of heading tags and your whole markup, but I really think it’d be better to have those body and html tags there.
It’s funny and maybe even ironic - you showed us something that we didn’t know, it’s interesting, but it’s not a good choice when you’re creating a search engine page (it’s weird and doesn’t make the markup more structural, for sure! ;-)). And that’s a reason *not* to win the competition, as I see it.
But hey! most of us will surely agree that it’s not about the (money) prize. You showed us some interesting HTML and you created a really nice entry (IMO). That’s good!
Tbh I think that your entry is one of the best here. I LOVE how it scales, it looks good. It’s surely better than mine (I didn’t do to well this time). Placing the content-type declaration even before the title tag is also a nice thing (I know something about it, I create pages mostly in Polish). Using imgs instead of FIR or other techniques is also a thing that I start to like more and more.
Your entry has some minor flaws, however. It has some problems fitting the browser window in 1024×768, at least in Firefox. You also got rid of the background graphics at the bottom-left of the page (but judges said it’s OK).
If *I* was to judge, you could be the winner if you had those ‘missing’ tags, but yeah, I probably wouldn’t give you the first place seeing that you don’t have them. Other entries were also good, and they did have them. So yeah, it could affect the judging result.
That’s of course only my opinion and in no way it’s better than any other person’s :).
Congratulations Dan!
It was interesting to see the entries. I’m looking forward to #3 and (finally remembering) to enter.
@Hrvoje:
The extra div is needed - as you stated. Thanks for pointing that out to me. I shouldn’t have used your markup as an example for a point that may not have needed to be made.
@Medyk:
All your points are noted. I felt like I got a spanking or something.
@TONYWHITE: No hard feelings. I know that this is not the only thing you do and sometimes mistakes happen :). I take part in these competitions to learn (i’ts a great way to learn) and see how the other participants solve the given problem. I’m looking forward for the next one, and I hope it will be soon :)
Thanks Bartek for the comments on my entry. Of course it isn’t about the winning, but I was a bit disappointed I couldn’t win per definition in your opinion, because I did something not disapproved by the W3C.
Your point on the problems with 1024×768 is a good one, the page is just a few pixels too wide. That’s something to keep in my mind.
[…] we didn’t like are added, with some ideas how we would do it. Have a look at the previous results to see how extensive the entries are being […]