Environmental Protection Authority
Size: 12 Dreamweaver templates from which I built the initial 77-page website
Government status: Government Ministry
My professional status: independent web designer/developer
Website client: Ministry for the Environment
Dates: July - September 2009, with ongoing support after delivery
Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Front-end developer, Govt web standards tester, Content-loader, CSS-based layout, jQuery/JavaScript, e-govt/WCAG compliance, Dreamweaver templates, Government websites, Medium sites
Brief: following our successful redesign of the 13,000-page Ministry for the Environment website, we were asked to quote for the design and build of a website for the new Environmental Protection Authority.
The HTML would be based on the MfE Dreamweaver templates within a completely different design, and we were also asked to build and content-code the initial 77-page website. The HTML/CSS needed to be best-practice e-government compliant and the site was to be tested for accessibility once it was built.
My responsibilities included:
- Writing the proposal for the web design fixed-price contract, including our recommendations for how to go about creating a new design based on the Dreamweaver templates we had built for the new MfE website
- Development of the information architecture and site schematics, including template wireframes and sitemap
- Project management and ongoing liaison with the MfE team in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
- Project management of the WebWeaver team (myself and designer Sue Quigley) including the development of timelines within a programme of work and ensuring that we achieved all our project milestones in a timely fashion
- Development of a set of 12 Dreamweaver templates in CSS and HTML 4.01 Strict
- Hand-coding in HTML 4.01 Strict to an extremely high level of accessibility, and following NZ e-government Guidelines (WCAG 2.0)
- Incorporating a range of dynamic graphical effects including accordions hiding/revealing image description text and automatic zebra striping of tables which I wrote using the jQuery JavaScript library
- Creating styles and functionality 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:
- PC (Vista): Internet Explorer IE8, IE7; Firefox 3
- PC (WindowsXP): Internet Explorer IE8, IE7, IE6; Firefox 3, Firefox 2, Opera
- PC (Windows2000): Internet Explorer IE6
- Mac (OS X 10.5): Firefox 3, Firefox 2, Opera, Safari
- Mac (OS X 10.4): Firefox 3, Safari
- The creation of a print stylesheet, and testing this in IE6, IE7 and IE8, Firefox, Opera, and Safari
- Ensuring that every template had been validated using the W3C Markup Validation Service and that it conformed to HTML 4.01 Strict requirements
- Building and content-coding the new 77-page website using my Dreamweaver templates - which was then handed over to the MfE web team for ongoing maintenance and development
- Ongoing support for the MfE web team, to ensure that the new templates could easily be integrated onto their server, and to provide additional HTML and styles as required.
This was a two-person job - I did the initial quote, information architecture, site schematics, ongoing project management and client liaison, Sue Quigley created the awesome new design and incorporated all of the Ministry's design requirements and photographic treatments, and then I did the HTML and CSS, site build, testing, site delivery and ongoing support.
Sue and I were very pleased to win this contract. We really enjoyed working with Jennifer and Dee on the Ministry for the Environment project, and it was great to be invited to work with them again. Re-skinning websites is not generally our favourite type of work - as it usually means you have to get your head around someone else's code - but as this was a re-skin of one of our own websites, it was much more straightforward - and became an enjoyable exercise in seeing how far from the MfE design we could go, while still utilising the original MfE templates to a large extent.
I came across an interesting manifestation of the 1px rounding error bug while I was building the site, but because I initially didn't realise which bug it was (and therefore didn't conclude that it was unfixable) I played around with the CSS, trying to find a fix. As a result I figured out a partial solution which I haven't seen detailed anywhere else, and which I've since blogged about.
We initially tested the site for compliance using tools including Firebug, the Firefox Web Developer toolbar, Wave, Ask Cynthia and the Juicy Studio Luminosity Colour Contrast Ratio Analyser, and with reference to the new NZ e-govt guidelines and WCAG online documentation.
Jennifer Geard, the Ministry's webmaster, then invited Bruce Aylward of W3A Limited to test the template files for compliance with the technical requirements of the NZ Government Web Standard v2.0, including priority 1 and 2 checkpoints of WCAG. With his help, we were able to improve a number of accessibility issues, and the templates have all been passed by Bruce as being compliant.
Other websites for the Ministry for the Environment
Awards
Finalist, Best Accessibility - ONYAs web awards 2010
Environmental Protection Authority of New Zealand has very good use of accessible navigation with multiple ways to reach a page destinations - with a focus on keyboard accessibility.
The Best Accessibility category is sponsored by Microsoft.
Best Accessibility - Webweaver Productions for EPA of NZ from Webstock on Vimeo.
Finalist, Best Use of HTML and CSS - ONYAs web awards 2010
Environmental Protection Authority of New Zealand is a great example of a site that still works without images, without CSS and without JavaScript.
The Best Use of HTML and CSS category is sponsored by SilverStripe.
Best Use of HTML & CSS - Webweaver Productions for EPA of NZ from Webstock on Vimeo.
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. I was completely blown away to have this site nominated in two different categories at the ONYAs.
Webstock has announced finalists in four of the ONYAs categories, including best use of HTML/CSS, best accessibility, best mobile app and mobile site. Special mention goes to the Environmental Protection Authority of New Zealand with two nods; the site impressed the judges for ease of use without employing CSS and JavaScript.
Idealog Weekly, 4 December 2009