WellingtonNZ

WellingtonNZ - homepage

Website: wellingtonnz.com (site has since been redesigned) - view screenshots

Size: 62 new template pages for a very large existing website

Government status: Council-Controlled Organisation

My professional status: contractor at Chrometoaster

Website client: Positively Wellington Tourism

Dates: April - June 2010

Categories: Showcase sites, 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 has an ongoing relationship with Chrometoaster, who designed and developed the original WellingtonNZ website. A month after I created the Australia landing page I was invited to re-join the Chrometoaster team to help them with the complete re-skin/rebuild of the site.

This was a massive job, with over 60 templates having been designed, and a team of three front-end developers (me plus Alan and Dan from Chrometoaster) all working together on the new site.

Hi all! Some lovely feedback on the new WellingtonNZ.com site which I thought you might like to hear. And a big thank you from me for all the hard work you’ve all put in on this project - with unprompted comments like this coming in from a member of the public, you know you’ve hit the mark. Excellent.

"Hi there just a comment on your fabulous website….. I love it.. it looks classy, informative, easy to navigate.. just super… keep it up... Best wishes… CR."

Nina Spence, Senior Project Manager, Chrometoaster

My responsibilities included:

  • Development of the main page structure for the entire site in pure CSS and XHTML 1.0 Transitional, including all the chrome, background layers, header, footers and navigation elements
  • Development of a range of templates and various elements within different templates in CSS and XHTML 1.0 Transitional, building all-new code 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 templates were validated using the W3C Markup Validation Service and that they conformed to XHTML 1.0 Transitional requirements
  • Setting up a local version of the 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
  • Liaising closely with Dan at Chrometoaster who was organising our massive task list, to ensure that I completed all my tasks within each phase in a timely fashion, that our techniques retained a good level of consistency across the site, and that the three of us minimised the possibility of overwriting each other's code or creating time-consuming conflicts in Versions
  • 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 the new templates into the existing Drupal CMS, to ensure that all templates would work consistently within the existing site.

I guess Chrometoaster was pretty happy with my work on the Australia landing page, which is why they asked me back for the Big Project. It's always interesting coming in to work with an established team, especially if you're working from home, rather than in their office. Either the personalities, work styles, HTML/CSS techniques and levels of perfectionism gel - or they don't. I'm very pleased that ours gelled so well.

I think WellingtonNZ was quite possibly the most beautiful website I've ever worked on - it really was completely gorgeous - and it's certainly one of the most complex in terms of the sheer number of templates we had to build.

Dan broke the job down into a range of modular elements which needed to be built so that they would work perfectly in all the templates in which they appeared, and which we produced in a series of phases over the course of the project. These were delivered to HeadFirst on an ongoing basis so that they could be integrated at the same time as we were working on the front-end dev.

Feedback from HeadFirst in terms of any tweaking that needed to be done was also carried out at the same time, as the version of Drupal they were already using for the existing website was a bit clunky and temperamental. All of our tasks were listed in Fogbugz and assigned to us on a weekly basis, and we were also expected to regularly update the task list spreadsheet - both in order that Dan could see where we were all at, and also so that we could volunteer for more tasks if we completed our assigned work before the end of each week.

The Chrometoaster team are lovely people to work with and I really appreciate their very high levels of perfectionism and attention to detail. Contracting for them brings out the best in me, and I always enjoy working with them.

Awards

Finalist, Most Outstanding Website - ONYAs web awards 2011

ONYAS finalist

I really like that this feels like the content is curated - highlights are shown, not just everything. Nicely written and presented.

The Most Outstanding Website category is the supreme ONYA award and is where a website as a whole is judged. Websites are judged on a range of criteria and are expected to display excellence in all of these.

The ONYAs celebrate those who design, develop and create New Zealand's best websites and applications. They're awards by the industry, for the industry. Congratulations to Chrometoaster for their extremely well-deserved nomination!