And the Winner is Brad Dielman
Brad Dielman is a husband, father, network administrator, and freelance web designer living and working in Cleveland, Ohio. He is actively involved in the Cleveland Web Standards Association and helps promote best practices in web design and development in the Northeast Ohio area. Brad chose to donate his $50 winnings to the Michael J. Fox Foundation for Parkinson’s Research.
View All Submissions
View a listing of all 8 entries. Thanks to our judges for contributing such targeted and thorough comments.
About the Wikinetic Contest
JD and I really wanted to have a comp where a table made sense to have in the markup, so that we could see who deliberately tried to avoid it. Our ruse worked, as some contestants did attempt to avoid using the <table> tag. Tables aren’t bad. Tables for layout is bad. It’s true that we didn’t have anything that resembled an excel spreadsheet, but we did have something with clear columns and rows, and the best way (in my opinion) to convey that relationship among information is with a table. So if you used one, congrats! If not, just keep that information in mind. (And frankly, even among the judges, there was disagreement as to whether or not the reviews should’ve been a table).
Tony’s Notes
With every contest, I learn something new. Like last contest, our very own Arjan reveals that including <body> and <html> are optional for browsers to render the markup correctly.
But Did You Know?
This time, one entry decides to declare @charset "utf8"; in the first line of his CSS file. That’s a new one for me, prompting me to google around to see what I can learn. The answer (well, with regard to its importance): very little.
There are some rules behind it (such as it must be declared of the style sheet, and it must be found only in an external style sheet), but as for the reasoning, it’s beyond my willingness to understand.
Further reading on the matter
- @charset (eskimo.com)
- FAQ: CSS character encoding declarations (w3.org)
- HTML - charset on css (question posted to forum on Velocity Review)
JD’s notes
When I started judging this round of entries, I made up my mind to focus on design. That said, here are my comments for a contest I think calls upon front end programmers to think a little harder about design decisions.
Front-end Coders Must Understand Design
It seems that asking the contestants to create their own footer made a few of you a little irritated because you didn’t think it was your job to be designing things.
That’s may be the way things work in a traditional environment, but I think as modern front-end programmers it is our job to be responsible with design, to understand spacing, to be able to interpolate and extrapolate based on what a comp provides. We’ve got to take the visual cues our designers give us and interpret them for the web.
We also need to understand how to optimize images, including modifying graphics to be more web-appropriate when necessary; we need to understand typography so we can choose hypertext, <img> text, sIFR or whatever else is out there, based on the designer’s intentions and practicality; we need to be able to strike a balance between designer pickiness and web propriety when the designer is out sick and the deadline looms. To accomplish this, we need to understand design. And this contest is an opportunity to practice and learn just that. Take it as such.
Once You Get Design, Be Fearless With It
One of my favorite entries to judge was entry 6, not because the design decisions were the best in the bunch, but because they were fearless. Whether I agree with the design decisions or not, it is obvious this kid has got the initiative and courage to learn something new. Ultimately, his design score doesn’t put him in the winner’s circle, but he deserves credit for taking this month’s design challenge to heart.
Good design skill takes practice. No one expects a hard-core coder to turn into an artsy hippy and whip out marvelous designs. We all have our own talents and skills. I believe in the CSS Off mission to integrate good design decisions into the challenge of making good web sites, to help html/css writers work better with designers.
You will not go anywhere fantastic in life without taking risks.
Arjan’s Notes
Something I mentioned during reviewing was the diversity between the entries on how they marked-up the star rating. Some were clean and very accessible. However, some were not.
Several Ways to Mark Up the Star Rating
There were four entries that used a background-image for the rating stars. In the HTML a text like ‘rating 4’ was marked-up, then the contestants used CSSto hide the text and display a background image instead. However, when CSS is supported but the user has images turned off, all you will see is a blank space.
The other four entries used image elements for the rating. Entry 3 for example, uses four image elements with an alt-attribute with a +, a - or a +/-. The rating looks great when images are on and off, but this method is not accessible for users with a text to speech voice generator. When the rating is 3.5, the generator will say: plus, plus, plus, plus, slash, minus.
A more accessible image is used by entry 5. Since only a single image is used for the rating, with by a clear alt-attribute identifying the number of stars, the users will know what the rating is no matter what. CSS off? Just showing the picture. Images off? Just showing text with the rating.
Conclusion
Decide whether or not a graphical element is layout or real content, and use CSS for the first, and an <img> element for the last one.
James’s Notes
Image replacement, or the act of replacing semantic HTML with an image file, is all the rage in CSS-based design these days. With dozens of different implementations, most of those stemming from the original FIR method, image replacement has definitely found a spot in todays Web 2.0 world.
Image Replacement Can Be Overused
While not here to challenge the merits of this practice, I would like to call to attention it’s over-use. Many submissions used it for the logo, the navigation tabs, the Wikinopsis header, the buy this book button, and the also recommended header. Some even used it for the edit and more buttons as well as the star ratings.
Your Hands Aren’t Tied
The real benefit of image replacement, the that you can replace semantic HTML with an image, not to replace simple text that could just as easily be placed in the <alt> attribute of an <img> element. This isn’t CSS Zen Garden, you have control over the markup as well.
Remember, image replacement techniques are a hack. They are intended to function the same as the object element – who’s implementation in IE is unsavory at best. Use them only when necessary (when CSS/HTML fails you)—don’t abandon tools who’s behaviors are well know and implemented correctly, just because of past abuse/overuse.
Helpful links
- An article on appropriately marked up punctuation (via ALA)
- Appropriate use of
H1elements in page/site titles
Dan’s Notes
Think About Your Doctypes
The majority of the entries used XHTML 1.0 Transitional. This leads me to believe most of you used whatever basic template that your editor uses by default, and didn’t give it a second thought. Doctypes deserve that second thought. Make it an actual decision.
No one should be entering this competition with a transitional doctype. Transitional doctypes are there to help you transition from table-based layouts. Since this is a contest designed to showcase your talent at front-end development, I think we can all agree that we should be past the point where we need help validating our work. Think about your doctypes!
About our Judging
So it took a month to post results. That’s with five extra judges than with the previous contests, and with only 8 contestants. So it goes…we all have our own lives and pace. On the plus side, the amount of notes per each entry completely blow previous contests out of the water.
[…] to Brad Dielman for pulling in the win in this month’s CSS Off. Attention to detail, clean code, and a sly use of hReview helped […]
Thanks everyone! I had a lot of fun participating and the notes from the judges were invaluable. Some really great feedback on what I can do to improve my design and coding techniques.
As I said, I had a blast participating and look forward to being a part of future contests!
Thanks again!
[…] I was away from my computer most of the day and upon returning to my desk I found out that I won the latest round of the CSS Off! […]
Honestly, there are no place for tables in this layout.
There is list of reviews and not table of reviews. We use tables to summarize/compare data not to list things.
..also “clear” divs are bad.. I know that current support of CSS is poor but we know much better ways to “clear” content (there is no need for additional markup) when we overuse “float” property.
@ Tony’s notes
The best way to declare a character encoding, is to do it on the server-side (server settings, but also via for example .htaccess). As the entries cannot handle the server-side, they could use a way to declare them in the documents. In a live site, it is always recommended to handle the character encodings via the server. As an front-end developer, you have to work together with the people who ‘do’ the server-side.
@ Medyk
I do not agree with you on this. If you use a list, the individual ‘columns’ are not linked with their header. So nobody using a non-visual browser, will understand that the text is used together with that column-header. With a table, you easily set up that connection.
Congratulations, Brad! Your entry was definitely better than the rest, and the footer was beautiful. It just seemed a little cold and dead. I do wish that someone had come up with a solution that used a little more color while not being garish, as it seems mine was. The page needs some warmth.
Thank you for the kind words, JD. I agree that I have a lot to learn. In fact, that’s why I participate in this contest. Thank you to all the judges for your notes, even the one who said my work was “crap”. :(
You know, I -did- use …, –, and —, but I slacked on good double quotes, so I guess whoever felt like kissing (Jennifer?) can keep their kiss. :D
As to the doctype, It was my choice to use transitional, but I can’t remember why. I think I was still miffed at strict for not allowing the “target” attribute.
A few of the things I’ve learned or been reminded of:
Pay more attention to font size and spacing.
Test in all browsers early, not late.
Careful with colors.
There is no direct correlation between time to judge and number of judges.
Thanks!
@Joseph: Oh crap! I missed that!
Thanks for taking it like a champ. We try to provide constructive criticism, rather than downright negativity, but these notes are not polished by any means.
The benefit of this approach is that you get a high level of transparency to our judging process. The down-side is that a judge’s opinion may be a little harsh.
No problem! Thanks again for the contest. I’m looking forward to the next one.
Congratulations, Brad :) Good job.
But… I have questions to judges. Why in comments of my entry (03) are “IE 6 windows: Is COMPLETELY messed up here.” and “uses inline styles in several places. why?”?
I’ve tested my Wikinetic in IE6 too and not used inline styles. Humm.. maybe I don’t understand that comments? :)
Brad - Nice work!(:
@Radek -
Re the inline styles: you used “style=…” a few different places in your HTML (the
div#currentBook, and the firstth, for example). That is what we’re referring to when we say “inline styles.” There are a number of reasons why this is bad; this article quickly explains some of the big ones.@Joseph and Radek - Thanks! Like I said before, I had a blast participating and have really gained a lot from the judges’ comments and observations. I can’t wait for the next round!
@Radek -
Re the IE6 issue - I’m going to retract / edit my comment about IE6 being seriously screwed up. After some research, I’ve found that there was an issue with my installation of IE6 which caused conditional comments to work incorrectly on my machine.
On further inspection, there were still a couple small problems in IE6 (the ratings stars, for instance) but it’s definitely not “completely messed up” like I said initially.
Sorry for the screwup, and thanks for pointing it out!
@ Dan
Re IE6: No problem :) I was only suprised about this, because half of my work was with IE6 :)
Re inline styles: I understood “inline styles” as “display: inline” :) Now it’s all clear. Thanks. But I must defend inline styles in #currentBook. I purposely put it there, because of probably server-side script, which generate the HTML code. Inline styles in th tag was only against ‘classitis’ :)
Thanks for article, greetings :)
pity that cssoff.com is dead :/