Tourism New Zealand intranet

TNZ intranet - homepage green

Website: intranet - view screenshots

Size: approx 10 template pages

Government status: part of the Ministry of Tourism

My professional status: employee at Shift

Website client: Tourism New Zealand

Dates: February - June 2007

Categories: Website designer, Front-end developer, Govt web standards tester, Writing for the web, CSS-based layout, e-govt/WCAG compliance, Shado, Medium sites

Brief: Shift had an ongoing relationship with Tourism New Zealand, which resulted in four Webby nominations and two Webby awards over a period of four years. In addition to the TNZ website, Shift also provided the TNZ team with an intranet, run on the Shado CMS.

TNZ wanted a new look and feel for their intranet, but wished to retain the existing HTML and CMS as far as possible. My job was to re-skin a number of the master templates, by changing the CSS, rebuilding the header and footer HTML, and building an entirely new homepage. The new intranet was designed in four different colourways and the contents were fully editable by the TNZ staff intranet team.

My responsibilities included:

  • Assessment of the existing TNZ intranet templates from a design/CSS point of view, to give the designer a clear indication of what could be changed using CSS only
  • Re-skinning the TNZ intranet templates to match the new design by changing the CSS
  • Rebuilding the header and footer sitewide in CSS and HTML 4.01 Transitional
  • Creation of a new homepage in pure CSS and HTML 4.01 Transitional
  • As far as possible with the re-skinned templates, and fully with the new ones, coding to a reasonable level of accessibility, following NZ e-government Guidelines - achieving all level 1, most level 2, and some level 3 criteria
  • Although the TNZ team used Internet Explorer exclusively, I felt it was important to bring the existing HTML/CSS into line with more compliant browsers such as Firefox. The client also wanted to ensure that when they changed over to IE7, the site would look as good as it did in IE6. For this reason I carried out extensive testing of the templates at all stages of the development process, ensuring consistency between Firefox, IE6 and IE7
  • Ensuring that the new HTML and stylesheets had been validated using the W3C Markup Validation Service and that it conformed to HTML 4.01 Transitional requirements
  • Close liaison with Tom St George, Shift's Shado programmer, to ensure that the transition from static HTML templates and new CSS to implementation within Shado was a smooth as possible
  • Reiteration of some aspects of the CSS once the templates had been re-integrated into Shado, in order to achieve a consistent look and feel on pages where the existing HTML was being affected by the new CSS, but which could not be changed
  • Running a 2-day staff HTML/CSS training session, using my HTML with Dreamweaver course notes as a starting-point - the staff were interested in learning some HTML so that they could use the CMS to its fullest capability.

This is a gorgeous design - richly coloured and fairly complex in its structure. It was a very interesting challenge to be able to achieve it by only changing the CSS, when many pages on the site contain areas which are affected by the CSS, but where the HTML cannot be altered. Shado is not the easiest CMS to work with, but the transition from static pages to integration within the CMS went pretty smoothly.

The most interesting aspect of the CSS from my point of view was the designer's request for a complex header with JavaScript-controlled dropdown areas and tabs which overlapped other parts of the page. Because of the need to absolutely position some elements, and relatively position others (combined with a number of floats and negative margins), the header HTML triggered a series of IE z-index bugs which I hadn't come across before, and which were quite a mission to fix. I had a great deal of fun thinking outside the box in order to achieve the design while solving the bugs.

The four colourways were achieved using a separate set of colour stylesheets, and we learned that creating such a complex set of designs in four separate colours takes a lot longer than you think it will!