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:
- It separates the behaviour of opening a new window from the markup
- It’s one less validation error to worry about (yes, I know using script
to hide validation errors is, at best, a pointless exercise)
- 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.