Radio New Zealand

RadioNZ - original homepage

Website: radionz.co.nz (site has since been redesigned) - view screenshots

Size: 25 new templates and template variations in five different colourways

Government status: Crown Entity

My professional status: contractor at Radio New Zealand

Website client: Radio New Zealand

Dates: October 2012 and February/May 2013

Categories: Showcase sites, Client liaison, Website designer, Front-end developer, Govt web standards tester, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, e-govt/WCAG compliance, Other CMS, Government websites, Large sites

Brief: Radio New Zealand is a Crown Entity established under the Radio New Zealand Act 1995. It provides listeners with independent radio programmes in accordance with the Radio New Zealand Charter.

Radio New Zealand broadcasts over three nationwide networks; Radio New Zealand National, Radio New Zealand Concert and the AM network which relays Parliamentary proceedings. Radio New Zealand International is their overseas shortwave service, broadcasting to the South Pacific and beyond, while Radio New Zealand News provides comprehensive, up-to-the-minute news and current affairs information.

The Radio New Zealand website was in need of an update, and I was asked to do the HTML, CSS and jQuery for the new design, incorporating a very high level of accessibility compliance into the build.

The website is updated multiple times a day by members of the web team and also by individual programme producers, who are required to keep their programme pages up-to-date at all times.

It includes an enormous and ever-growing archive of programme information, and delivers streaming audio (National, International, and Concert) and downloadable audio files and/or podcasts of many of its programmes, all of which are also archived for future reference. The CMS has been custom-built by the web team's director, Richard Hulse.

Achievements:

  • Selected as the front-end developer for this project by the person whose website had beaten mine in two ONYAs categories a couple of years earlier
  • Improved on the original design by tweaking the colour palette to make it fully accessible and adding missing colours where required
  • Incorporated an extremely high level of accessibility into my HTML/CSS build, ensuring that the website is usable by everyone
  • Successfully built and delivered a full set of templates based on the 960 grid - to a standard that allowed the web team at a later date to add responsivity to the website without having to rebuild it - saving them considerable time and money.

My responsibilities included:

  • Building 25 page template/template variations in HTML5 and CSS3 using LESS (a dynamic stylesheet language that extends CSS with dynamic behavior such as variables, mixins, operations and functions), including sample content and unique layouts for each template - as well as the chrome, background layers, headers, footers and navigation elements for the entire website
  • Putting together a complete colour palette for all sections of the website (including International, which wasn't included in the designs but which was to be added to the website at a later date), as the one provided by the designers was out of date and incomplete in some areas
  • Styling the various templates with five different colourways (different sections of the site such as National, Concert and News are identified through colour as well as text) so that templates could be used in different parts of the site and would pick up their correct colourways automatically
  • Using LESS to define global colour variables which were then referenced in the main stylesheet
  • Using @font-face to download and render the non-websafe fonts chosen for the overall site design (GestaCondensed-Regular and GestaCondensed-Medium) as well as styling the fallback web-safe alternatives
  • Using the 960 Grid System (12-col version) for template layout, as this was requested by Richard Hulse and works well for newspaper-style page layouts containing a range of different column variations
  • Using the normalize.css stylesheet instead of a reset stylesheet to provide better cross-browser consistency in the default styling of HTML elements
  • Hand-coding (using Sublime Text and Dreamweaver) to an extremely high level of accessibility, and following NZ e-government Guidelines (WCAG 2.0) wherever possible
  • Ensuring that all styles were logically grouped within the main stylesheet, and labelling each with a description, summary of use and template reference, to make ongoing use as easy as possible for the RadioNZ web team
  • Utilising and re-styling the jQuery-driven accessible tabs HTML/CSS provided by Richard for pages where tabbed sections were included, using Modernizr, a JavaScript library that detects HTML5 and CSS3 features in the user’s browser - and styling the no-js version of this element to match the rest of the page
  • Coding the jQuery for a number of other dynamic graphical effects including popup containers and accordions
  • Creating styles that would allow the jQuery to provide progressive enhancement while still allowing complete accessibility for those users with JavaScript disabled
  • Incorporating various CSS3 effects within my stylesheets including linear-gradient and box-shadow, and ensuring that old browsers such as IE7-8 (which do not support these CSS3 effects) still looked nice and worked without them
  • Developing and tweaking the design of various templates and extending this design across a number of new page types (based on existing content) once Richard had begun to integrate my new templates into his test version of the existing website
  • Providing the team with a broad range of standard formatting styles that could be used throughout the website (in all colourways, designing these where necessary), including:
    • Headers h1-h6 (linked and unlinked) plus te reo Māori subheader styling
    • Ordered and unordered lists down to 3 levels, in any combination, plus unordered lists with no bullet decoration
    • Paragraphs within lists
    • "Download and "play" lists with specific icons for each, which varied in size depending on the template type
    • Tables with horizontal, vertical and both horizontal and vertical headers
    • Lists inside tables
    • Blockquotes (with and without graphics, with and without citation line)
    • Definition lists
    • Superscript and subscript
    • Image treatments (floated left or right or not floated, with and without borders and captions) and image collection styling
  • Extensive testing of the site at all stages of the development process, and ensuring consistency across the following browsers and platforms; using VirtualBox to host the range of test PC operating systems and browsers required:
    • PC (WindowsXP): Internet Explorer IE7, IE8; Firefox 4
    • PC (Windows7): Internet Explorer IE9, Chrome (latest)
    • Mac (OS X 10.6): Chrome (latest), Firefox 13, Safari (latest)
  • Doing colour-contrast testing on all templates and colourways once I'd built them, and tweaking those colour combinations that failed initially
  • Ensuring that all my templates were validated using the W3C Markup Validation Service and that they conformed to HTML5 requirements
  • Setting up a local version of the site templates on my Mac using MAMP and SourceTree (a Mac client for Git and Mercurial version control systems) so that I could view the pages properly using my Mac as a server, and so that Richard could access my work and integrate it into the test version of the CMS
  • Taking part in progress meetings with Richard and the rest of the RadioNZ web team, and adding/changing design/HTML elements identified in these meetings
  • In February 2013 I was asked back for a few days to work on various elements that had surfaced since the web team had begun to integrate their existing content into the new templates. These included:
    • Episode selector styling
    • Re-designed homepage Listen Live links
    • Civil Defence emergency announcement banner
    • Online forms
    • Full-page image galleries (with recommendations on best practice for these)
  • In May 2013, just before launch, I was asked back again to continue work on episode selector styling and extend this into programmes that happen monthly or yearly.

It was such a thrill to be invited by Richard to build the templates for the new Radio New Zealand site. In 2010's inaugural ONYA awards I was a finalist in two categories - Best use of HTML and CSS (for the Environmental Protection Authority (EPA) and Optimation websites) and Best accessibility (for the EPA website) in which Richard (for the Radio New Zealand website) was also a finalist. The Radio New Zealand website won both awards.

To be asked by the winner of those awards to do the HTML/CSS and accessibility for the new version of his website was a real honour - and I absolutely LOVED working on the new designs with Richard and his team. As is often the case in Wellington, I was also working alongside an old colleague of mine - Frances Hopkins - with whom I last worked at CWA New Media in 2005, and who is now a very valued member of Richard's crew.

It's so lovely to be able to work on a website that makes such a difference to so many people, and to do it with a team of professionals who are so good at what they do and who clearly care so much about what they're doing. A brilliant project.

The website has since been updated to incorporate responsivity, with my HTML/CSS also remaining in place throughout.