Around 3 months ago, I started working for HotHouse – a web development company with a relatively strong focus on standards and accessibility. Well, I’m pleased to announce that the first project I was involved with, for which I primarily wrote the HTML, CSS and some (but not all) JavaScript, launched a few weeks ago: Crowne Plaza – Hunter Valley. (Note: the visual design was done by others at HotHouse, I only converted the design into HTML and CSS)

Overall, I have to say, that I’m quite proud of the site and very pleased with the results, though there are issues I would like to see addressed with future projects. It uses mostly standards compliant HTML 4.01 Strict. Unfortunately, it doesn’t completely validate but it does use fairly well structured, semantic markup and (almost) completely separates the content from the presentation.

The reason is doesn’t validate is due to some custom attributes that are, apparently, required by the form validation script provided by another company, that was outsourced to handle the form processing for the contact forms. In my opinion, they should have used the class attribute instead, but they didn’t and we just had to accept it.

If you look closely at the markup on some pages, you’ll also notice some small layout tables used. I know I’m a hypocrite, but when the client demands pixel perfection from obsolete browsers (read: IE6), you really are left with little choice but to make some sacrifices. I tried absolutely every other method I could think of to have an image on one side and a column of text on the other, that did not flow around like it would if the image were floated and that worked in well in at least IE, Firefox and Opera. In the end, with time running out, I made the small sacrifice to include a relatively harmless table for the purpose.

For the stylesheet, I decided to make use of Tantek’s high-pass filter to ensure that IE5 users were given the Netscape 4 treatment: no style whatsoever. This is actually a way to be nice to such users, as the result with the stylesheet applied was disastrous. At least, this way, the content of the site remains accessible fully accessible, even if doesn’t look as great.

As I mentioned above, I also wrote some JavaScript for this page. The purpose of the script, despite my objections, was to provide popup windows for some links (For anyone that doesn’t know: I despise popup windows!). This included the Hotel Gallery, with links to a few photos of the hotel, the map and the weather. So, I did it in the most accessible way I could, which wouldn’t affect users with JS disabled/unsupported and still allow them to access the images, nor interfere with users that indiscriminately prevent popup windows of all kinds, like me. For such users, the link simply points to the image itself. For users with JS enabled (and popups not blocked completely), the image is loaded into a popup window.

The weather link is a little different. The reason is apparently because it’s a link to an external site – a very common misconception about usability, looked at from a marketing perspective. Jakob Nielson has a good rant about this. Remarkably, the script for the weather link is similar to that recently published by Bruce Lawson, in that it applies a target attribute dynamically to the link. I chose this approach for several reasons:

1. It separates the behaviour of opening a new window from the markup
2. It’s one less validation error to worry about (yes, I know using script to hide validation errors is, at best, a pointless exercise)
3. It behaves nicely for users with JS disabled (i.e. no popup window).

Naturally, this method is also considered harmful for the same reasons as Bruce’s script and I really would like to see the use of popup windows abolished in sites developed by HotHouse (and, in fact, all web development companies), I just need to become more involved in the earlier phases of development and be able to present better alternatives.

Lastly, one more thing I was able to achieve correctly, was to set the correct HTTP Content-Type header and include the charset parameter, since I was given access to the PHP prior to launch. The headers now correctly include: Content-Type: text/html; charset=UTF-8, and avoids using the superfluous meta element.