Hi, This is more of a improvement and suggestions question than one clear defined answer. I have been working on the website for Naked CSS Day 2011 for a bit and was wondering if anyone had any suggestions on my code quality/efficiency. In the spirit of the event I am attempting to bring everything into in the purest and cleanest form of HTML5 & CSS3 goodness. Any suggestions including important code comments that you think that should be added would be much appreciated. Thanks.
A:
I'd start by solving the invalid HTML problem:
Validation Output: 2 Errors
Line 18, Column 44: body start tag found but the body element is already open.
<h3 id="tagline">\\ Show off your <body>//</h3></header>Line 39, Column 231: body start tag found but the body element is already open.
…ol play on words. It's time to show off your <body> for what it really is.</p>
deceze
2010-10-15 03:45:51
Thanks, please ignore those. I realize they are there. My iPad editor converts the symbols into real code. Thanks for the catch though.
Taylor Satula
2010-10-15 03:48:12
@Taylor Didn't you get the memo that iPads aren't meant for *real work*? ;)
deceze
2010-10-15 03:49:32
@deceze Yes, but they are meant for sitting in a office waiting for someone. Don't worry, 99% of this was coded on a big-boy computer. :)
Taylor Satula
2010-10-15 03:54:13
+3
A:
You'd probably want the fix that pretty serious <body> tag issue which deceze has mentioned. Other than that, you'd also want to address these issues too:
Quotes
On the homepage, without the CSS, you see that the browser by default add quotes for the q tag, so you get double quotes like this:
Of course, given that you're already using the blockquote tag, there really isn't any reason why you'd need the q tag as well. The q tag is used for inline quotes, which is not appropriate here.
Signup Form
You've also got a pretty serious typo on your signup form page:
<a href"http://validator.w3.org/[etc...]">validator</a>
The signup form seems to be generated entirely through Javascript, which is odd since I can't really see why. More importantly however is that you didn't use a noscript tag to inform users without Javascript that why the form won't work for them.
Developer Page
Moving on to the Developer page, the font-stack you're using for the code blocks is truly horrendous. System, Arial, sans-serif ... really? There's a ton of better options out there.
Right aligned code looks very weird. You might want to force them into left alignment, just so that the developers visiting the site won't freak out ;).
The list of external links at the bottom is exceptionally messy and unreadable. Adding in some padding between each list item will help.
Transitions
You're using -webkit-transition throughout the site. Have you considered adding in a Javascript fallback for the rest of your users? You might also be interested in the Mozilla version of these transitions that will be included in the upcoming Firefox 4.
Yi Jiang
2010-10-15 04:55:58