Timeframes - view secreenshots

Link: timeframes.natlib.govt.nz (site has since been redeveloped) - view screenshots

Size: 36 template pages, to be built into the National Library's ENCompass database which lists thousands of images in the Alexander Turnbull collection

My professional status: contractor at Shift

Website client: National Library of New Zealand

Dates: July - August 2005

Brief: to build a pure CSS website as the front end to the National Library's huge image database within the Alexander Turnbull collection. The site allows users to search the collection of thousands of images, save their favourites and order images online.

My responsibilities included:

  • Development of the site in pure CSS and XHTML 1.0 Transitional, which would then be integrated with the ENCompass database at the National Library
  • Liaison 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
  • Hand-coding in XHTML 1.0 Transitional to a very high level of accessibility, and following NZ e-government Guidelines
  • Inclusion of all possible accessibility elements, including skip links, access keys, alt tags, titles, summaries, captions and full accessibility coding for forms, with accessibility testing all pages (level 1 mandatory, level 2 as many as possible, level 3 wherever practical)
  • 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.1, 5.5, 6,0; Firefox 1.0; Netscape 7.2; Netscape 8.0; Opera
    • Mac: Firefox 1.0; Safari 1.3; Netscape 7.2; Netscape 8.0; Opera
  • Ensuring that every page and stylesheet had been validated using the W3C Markup Validation Service and that it conformed to XHTML 1.0 Transitional requirements
  • Development of print stylesheets sitewide
  • Additional bug-fixing onsite at the National Library, once my templates had been cut up and used to skin the ENCompass database.

This site was the first commercial pure CSS site I built from scratch, and the learning curve was steep, to say the least! I'm very grateful to Shift for giving me that opportunity to show them what I could do. The site was a challenge - a pixel-perfect design which had to be replicated in pure CSS, and which had to be consistent across a wide range of browsers and platforms. The website has a liquid layout, with min-width setting. As the min-width attribute is not understood by IE, I used the new technique of the "Jello Mold" to achieve min-width in all browsers without the use of JavaScript or tables.

The feedback from the National Library's programming team was that this was the best HTML and CSS they had ever been given.