{"id":84,"date":"2005-09-19T15:25:18","date_gmt":"2005-09-19T15:25:18","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/09\/crowne-plaza-web-site"},"modified":"2006-04-30T23:34:02","modified_gmt":"2006-04-30T23:34:02","slug":"crowne-plaza","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/09\/crowne-plaza","title":{"rendered":"Crowne Plaza – Web Site"},"content":{"rendered":"

Around 3 months ago, I started working for HotHouse<\/a> \u2013\r\n\ta web development company with a relatively strong focus on standards and\r\n\taccessibility. Well, I\u2019m pleased to announce that the first project I was\r\n\tinvolved with, for which I primarily wrote the HTML, CSS and some (but not\r\n\tall) JavaScript, launched a few weeks ago: Crowne\r\n\tPlaza – Hunter Valley<\/a>. (Note: the visual design was done by others at HotHouse,\r\n\tI only converted the design into HTML and CSS) <\/p>\r\n

Overall, I have to say, that I\u2019m quite proud of the site and very pleased\r\n\twith the results, though there are issues I would like to see addressed with\r\n\tfuture projects. It uses mostly standards compliant HTML 4.01 Strict. Unfortunately,\r\n\tit doesn\u2019t completely validate but it does use fairly well structured, semantic\r\n\tmarkup and (almost) completely separates the content from the presentation.<\/p>\r\n

The reason is doesn\u2019t validate is due to some custom attributes that are,\r\n\tapparently, required by the form validation script provided by another company,\r\n\tthat was outsourced to handle the form processing for the contact forms. In\r\n\tmy opinion, they should have used the class attribute instead, but they didn\u2019t\r\n\tand we just had to accept it.<\/p>\r\n

If you look closely at the markup on some pages, you\u2019ll also notice some small\r\n\tlayout tables used. I know I\u2019m a hypocrite, but when the client demands pixel\r\n\tperfection from obsolete browsers (read: IE6), you really are left with little\r\n\tchoice but to make some sacrifices. I tried absolutely every other method\r\n\tI could think of to have an image on one side and a column of text on the\r\n\tother, that did not flow around like it would if the image were floated and\r\n\tthat worked in well in at least IE, Firefox and Opera. In the end, with time\r\n\trunning out, I made the small sacrifice to include a relatively harmless\r\n\ttable for the purpose.<\/p>\r\n

For the stylesheet, I decided to make use of Tantek\u2019s\r\n\t\thigh-pass filter<\/a> to\r\n\tensure that IE5 users were given the Netscape 4 treatment: no style whatsoever.\r\n\tThis is actually a way to be nice to such users, as the result with the stylesheet\r\napplied was disastrous. At least, this way, the content of the site remains accessible\r\n\tfully accessible, even if doesn’t look as great.<\/p>\r\n

As I mentioned above, I also wrote some JavaScript for this page. The purpose\r\n\tof the script, despite my objections, was to provide popup windows for some\r\n\tlinks (For anyone that doesn\u2019t know: I\r\n\tdespise<\/em> popup windows!<\/a>). This included\r\n\tthe Hotel Gallery, with links to a few photos of the hotel, the map and the\r\n\tweather. So, I did it in the most accessible way I could, which wouldn\u2019t affect\r\n\tusers with JS disabled\/unsupported and still allow them to access the images,\r\n\tnor interfere with users that indiscriminately prevent popup windows of all\r\n\tkinds, like me. For such users, the link simply points to the image itself.\r\n\tFor users with JS enabled (and popups not blocked completely), the image is\r\n\tloaded into a popup window.<\/p>\r\n

The weather link is a little different. The reason is apparently because it\u2019s\r\n\ta link to an external site \u2013 a very common misconception about usability, looked\r\n\tat from a marketing perspective. Jakob\r\n\tNielson has a good rant about this<\/a>. Remarkably,\r\n\tthe script for the weather link is similar to that recently\r\n\tpublished by Bruce Lawson<\/a>, in that it applies a target attribute dynamically to the link. I chose\r\n\tthis approach for several reasons:<\/p>\r\n

    \r\n\t
  1. It separates the behaviour of opening a new window from the markup<\/li>\r\n\t
  2. It\u2019s one less validation error to worry about (yes, I know using script\r\n\t\tto hide validation errors is, at best, a pointless exercise)<\/li>\r\n\t
  3. It behaves nicely for users with JS disabled (i.e. no popup window).<\/li>\r\n<\/ol>\r\n

    Naturally, this method is also considered harmful for the same reasons as\r\n\tBruce\u2019s script and I really would like to see the use of popup windows abolished\r\n\tin sites developed by HotHouse (and, in fact, all web development companies),\r\n\tI just need to become more involved in the earlier phases of development and\r\n\tbe able to present better alternatives.<\/p>\r\n

    Lastly, one more thing I was able to achieve correctly, was to set the correct\r\n\tHTTP Content-Type<\/code> header and include the charset<\/code> parameter, since I was given\r\n\taccess to the PHP prior to launch. The headers now correctly include: Content-Type:\r\n\ttext\/html; charset=UTF-8<\/code>, and avoids using the superfluous meta element.<\/p>\r\n","protected":false},"excerpt":{"rendered":"The first project I was involved with at HotHouse, for which I primarily wrote the HTML, CSS and JavaScript, launched a few weeks ago.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,16,7],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/84"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}