New Zealand Police

New Zealand Police - homepage

Website: police.govt.nz (site has since been redesigned) - view screenshot

Size: re-skinning 3 template pages which would be used sitewide

Government status: Government Agency

My professional status: employee at Shift

Website client: New Zealand Police

Dates: December 2006

Categories: Website designer, Front-end developer, Govt web standards tester, CSS-based layout, e-govt/WCAG compliance, Other CMS, Government websites, Large sites

Brief: to re-skin the existing New Zealand Police website, as far as possible altering the CSS only, without making too many changes to the HTML. To build a new homepage based on the existing HTML and navigation elements in the rest of the site.

My responsibilities included:

  • Examining the existing HTML and CSS, and advising the designer which visual elements of the site could be changed by altering the CSS, and which could not
  • Liaising with the client in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
  • Re-skinning the site following the new design, by changing (as far as possible) only the existing CSS
  • Building a new homepage in HTML 4.01 and CSS, while retaining the existing page structure and navigation elements that are common to the whole site
  • Extensive testing of the site at all stages of the development process, ensuring complete consistency across the following browsers and platforms:
    • PC: Internet Explorer 5.01, IE5.5, IE6, IE7; Firefox, Mozilla, Netscape, Opera
    • Mac: Firefox, Mozilla, Netscape, Opera, Safari
  • Ensuring that my new stylesheets had been validated using the W3C Markup Validation Service and that they conformed to HTML 4.01 Transitional requirements.

This revamp of the existing New Zealand police site was interesting because of the limitations placed on my work. In order to minimise the amount of extra coding for the NZ Police web team, I was instructed to change as little as possible of the HTML, and concentrate on the CSS. I achieved this to a large extent, although I did have to redo the header in order to get various graphical elements to do what they were supposed to. I began the project by assessing the existing HTML and CSS, and advising the designer what could and couldn't be changed with CSS, so that her design would fit within the technical parameters of the site.

The site had to be consistent across a wide range of browsers and platforms and, as far as I was able without editing the HTML, had to be e-government compliant as well. The website had a liquid layout, with quite a broad range for the visual min- and max-width (640px - 1152px).