WellingtonNZ - Australia landing page

WellingtonNZ - Australia landing page

Website: wellingtonnz.com/australia (site has since been redesigned) - view screenshot

Size: 1 template page for a very large existing website

Government status: Council-Controlled Organisation

My professional status: contractor at Chrometoaster

Website client: Positively Wellington Tourism

Dates: February - March 2010

Categories: Front-end developer, Govt web standards tester, CSS-based layout, jQuery/JavaScript, e-govt/WCAG compliance, Drupal, Government websites, Large sites

Brief: Positively Wellington Tourism had an ongoing relationship with Chrometoaster, who designed and developed the WellingtonNZ website. A couple of months before undertaking a complete re-skin/rebuild of the site, Chrometoaster were asked to create a single new template for the Australia landing page (the point of arrival for Australian visitors).

The template would temporarily sit within the existing chrome of the website, but the content would follow the design that was being finalised for the new version of the site.

Thanks for all your work on the Australian homepage Ali! It's looking great, and the client is happy. Also, the big IA and Redesign job is coming up soon (I expect it to run over April and May) and I wondered what your availability is over that time...

Nina Spence, Senior Project Manager, Chrometoaster

My responsibilities included:

  • Development of the template in CSS and XHTML 1.0 Transitional, building all-new code for the content of the page while remaining within the existing chrome, and incorporating a range of elements and techniques from other new Chrometoaster-built templates in order to retain a high level of coding consistency throughout the site
  • Hand-coding to an extremely high level of accessibility, and following NZ e-government Guidelines (WCAG 2.0)
  • Incorporating existing jQuery effects into my new code - and liaising closely with Chrometoaster's jQuery guru who programmed these complex elements, to ensure that my code would work for him
  • Creating styles that would allow the jQuery to provide progressive enhancement while still allowing complete accessibility for those users with JavaScript disabled
  • Extensive testing of the site at all stages of the development process, ensuring complete consistency across the following browsers and platforms (Yahoo! A-Grade Browser list - Graded Browser Support Update for Q4 2009):
    • PC (Vista): Internet Explorer IE8, IE7; Google Chrome, Firefox 3.5
    • PC (WindowsXP): Internet Explorer IE8, IE7, IE6; Google Chrome, Firefox 3.5, Firefox 3, Opera 10
    • Mac (OS X 10.6): Firefox 3.5, Safari 4
    • Mac (OS X 10.5): Safari 4
  • The creation of a CSS print stylesheet tested across the full range of browsers and operating systems
  • Ensuring that the template was validated using the W3C Markup Validation Service and that it conformed to XHTML 1.0 Transitional requirements
  • Setting up a local version of a range of site templates on my Mac using MAMP and Versions (a Subversion client) so that I could view the pages properly using my Mac as a server, and integrate my work seamlessly into the much larger Chrometoaster version - and learning to use both new pieces of software
  • Communicating regularly and effectively with both the Chrometoaster crew (project manager, designer, front-end developer and jQuery programmer) and with the HeadFirst crew who were integrating my new template into the existing Drupal CMS, to ensure that the template build would work consistently within the existing site
  • Figuring out how to get my test PC, complete with its range of virtual PCs, to not only be able to see my Mac, but to be able to view the new template using my Mac as a server. Okay, I confess I didn't achieve this rather tricky feat all by myself. Thanks a million for helping me out, Geeks on Wheels - you rock!

I was asked by Chrometoaster to do the template build partly because their extremely talented front-end developer was busy working on other projects, and partly as a bit of a try-out to see if I'd be a useful member of the front-end dev team for the full site re-skin. They're a great team to work with, and I was delighted to be asked back to work on the full website re-skin a couple of months later.

I really enjoyed this project - it's always quite an interesting challenge to work with a new set of web creators, especially when you're integrating your work into something that already exists in a much larger form. I had to really hit the ground running on this one - a very tight timeframe and a complex design meant there wasn't much time to get my head around the task - I just had to get in there and make it happen.

One of the things that makes the Chrometoaster team stand out is their perfectionism and their attention to detail, and as these aspects of web development are also very important to me, we worked very well together. It was an absolute pleasure - and I picked up one or two new tricks along the way as an added bonus.