The Web Standards Project (WaSP) have recently released their new site, which is a push towards making the group more open to the communities. The new site designed by Andy 'Malarkey' Clarke follows the recent trend of dark websites (totally black!), but has a striking impact with the solid yellow accent. It is also built on the popular, free 'blog' content management system WordPress.
This is a great step for the web development community, as WaSP do a great job promoting standards and working with manufacturers (browser vendors) in increasing their adherence to Web Standards. Recently group leader Molly E. Holzschlag and the group have been closely working with Microsoft on their upcoming, and highly-anticipated Internet Explorer 7 browser, to bring it up to standard(s)!
All of this is great, but there is a but. I'm a web developer (the geeky guy who looks at code), so I checked under the 'hood' of the the new site, as well as just browsing around it. Now, I've found a few issues I'd like to raise here. Be aware that they might still be tweaking the site (and I hope that is true), they also may have good reasons for the issues I'll be pointing out, and, hey what do I know, I'm only an amateur, right?
The first thing that drew me to critiquing the new WaSP site, was the fact I kept finding 404s from the homepage. I emailed the administrator, and this seems to have been swiftly fixed, so kudos to them.
The fact I landed on the 404 page actually lead me to look into the website in more detail. I have spent a bit of time lately looking at best practices on 404/error pages, and noticed that the Web Standards 404 page didn't follow many/any of them.
After reading a few (by Ian Lloyd, a WaSP member!) guidelines on good error pages, it seems the WaSP site hasn't taken them in to account. The page looks like every other page on the site (albeit with less main content).
The A List Apart article about the 'Perfect 404' mentions Don't point the finger. Well, the WaSP 404 page does exactly that. Oops. The sidebar is complete with the "Recent Buzz" article, which adds far too much non relevant text to the page. And finally, the navigation is left. These last two points means the error page looks just like a normal page, and the user may not be aware an error has occured. This could confuse and frustrate the user, as they've not found the information they were looking for, but haven't been shown the error of their (or the sites) ways.
To improve their 404 page, I think they should remove the sidebar as well as the navigation. Add an obvious link back to the homepage (while keeping the convention of the header-image linking their too). And add a search box, within the main content, to help the user find the page they wanted. (again, don't look at this site for an example, because it's old and bad!)
The hover state for the navigation is way too subtle to be effective, confounded because they are not underlined either (the convention for links on the web).
It would also be nice to have a section marker on the navigation. However, this is a visual representation and shouldn't be relied upon. So I'm also asking for a section header (even if it's just in the source, and hidden on the design) and the section shown some how on the navigation itself (more obvious than the current navigation hover state please!).
There is only one skip link, 'to content' which appears after the title. I think the navigation should be placed at the bottom of the source, it improves usability on mobile phones. Because the content is the first thing shown, if the user needs the navigation they can skip TO it, instead of skipping past it everytime.
I think the skiplinks should be the first links on the page. On the WaSP website the user needs to tab passed two links before being able to get to the skiplink.
A lot of things I see on websites which are trying to use semantic markup is a list used for the navigation (good) but for some reason this methodology is lost when it comes to the footer. Anyway, the footer links may be more appropriate in a list.
On a really pedantic note, WaSP should be an acronym (which a lot of people misuse on the web, because IE does not support abbr) and not abbr, which is currently used. Although, abbreviation is not incorrect, acronym is just 'more correct' as screenreaders should actually read the acronym as a word, whereas abbreviations are spelt out.
On a good point, the use of the Microformat hcards for the members list (but, for some reason, not on their actual member page). There are loads of other good things on the site, including the striking design, great content and the actual purpose of the group - to promote web standards.
Disclaimer: If you're looking under the hood of this website to see whether I practice what I preach, you'll be sorely disappointed (or annoyed that I've written this article without backing it up with my own work). But I'll throw my two cents back in, and say this site has been in a redevelopment state for over a month so far (and not much progress has been made yet!), and a much better (hopefully semantic-usability-wise) site will appear soon (I'm actually taking part in the May CSS Reboot, so expect it then! - I doubt this is going to happen now, unfortunately).