About the client
We’ve just completed our second site for The Radio Bureau in association with Assignment Group. The Orcas is a monthly competition run by TRB that acknowledges and rewards ad industry creative teams for outstanding radio commercials. Every year The Grande Orca and the People’s Choice awards are presented to the teams behind the best of the best radio ads from the previous 12 months. In 2011, TRB are awarding the first ever Grandest Orca to “the best of the best of the last decade of the best radio of this country”. And the carrot? Entrants go in the draw to win one of 10 Tivoli radios (one of the sweetest and smallest pieces of audio kit on the planet) with one lucky entrant winning a round-the-world trip for two.
The challenges
Mogul was tasked with creating a site to showcase sound clips of previous Orca winners and to facilitate public voting for the competition. Immediately this raises a number of issues
- How should we deliver the sound files to the user?
- What format should they be in?
- How should they be hosted?
- How do we collect the data from the entrants in the competition?
- How do we make a form that is both visually appealing and entirely functional?
The solutions
HTML5 Audio
Normally we’d use a Flash sound player for audio files – like we’ve done previously for Need a Nerd and Cloud Accountants. This causes issues however with Apple’s well documented lack of Flash support in iOS – which in the age of mobile web is a serious problem. Seeing as we’re now seeing widespread browser compatibility with HTML5, it seemed the obvious choice to implement an HTML5 audio solution. This turned out to be a whole lot more technical than first imagined. But of course, we do so love a challenge.
Typically (as per HTML5 video) there is no “one-standard-format” for audio with browser support being fairly evenly split between MP3 and Ogg Vorbis. IE (<IE9) caused it’s own separate issue with no support for HTML5 audio at all. For this we had to implement a fallback to a Flash player.
The MP3 solution was easy enough as we could link to the existing sound files as hosted by TRB. Converting these to Ogg was fairly straight forward too using the Online OGG Convertor, but hosting them caused a serious bottleneck – particularly with Firefox. For some odd reason, one of our favourite browsers seemed to want to load all 31 Ogg sound files (somewhere between 300KB and 2MB each) in one hit. We tried hosting them on our Amazon Web Services CDN, but even that seemed very slow when loading that much data. We finished up using code which determined the browser type so that Webkit based browsers (Safari and Chrome) use the native HTML5 audio and every other browser uses the Flash fall back. This solves most if not all of the mobile browser Flash support issues.
The only other real issue that cropped up is the different ways that browsers display HTML5 audio players. Chrome and Firefox have quite tidy audio players and (dare I say it) IE9’s player is dead sexy. Safari’s by comparison is quite small, dull and grey – a bit of a surprise coming from Apple who are known for their sleek, eye-catching user interfaces.
Capturing the Data
In previous competition sites, we’ve built custom data handling interfaces. But why waste time building custom databases and writing database submission scripts? Why not just use those provided by our email newsletter system? After creating a custom field for each of the voting categories (and a couple for other custom data) in the subscription list inside the Mogul newsletter system, all that needed to be done was to set the action of the form to point at the subscription list handler. Even if the client never uses the data in the newsletter system to actually contact their “subscribers”, it’s a cinch to export it to a CSV for later use. No database insert queries, no complex export scripts, no dramas!
Voting Interface
In the Grandest Orca site, visitors get to vote for one advert from each of four categories, so the obvious solution here is ugly radio buttons. But we don’t like ugly radio buttons, so how do we make more eye-pleasing ones? Using a fantastic piece of Javascript magic known as “Custom Form Elements” which is available from ryanfait.com. It allowed us to provide an image (in this case a vivid star) to replace our radio buttons (and one checkbox) with. Combine that with some custom jQuery animation to display only one advert at a time and suddenly we’ve gone from dull HTML form to eye catching yet user-friendly UI.
Content Management
In spite of essentially being a one-pager, the content is hosted on the WordPress platform which enables speedy addition, deletion and sorting of sound elements on the page. I’d hate to think what Firefox would do with one page showing 200 sound files in 23 categories using HTML5 audio, but it’s entirely possible to expand this site into just such a monster. This project is certainly outside of “the norm” for us, but completely reinforces my theory that there’s no project we can’t complete with WordPress!
Result
We’ve presented the client with a site that more than meets the initial requirements. It provides a method for users across multiple browsers (including mobile) to listen to the sound clips and to submit their vote in the competition. We’ve also had a lot of fun (and frustration!) coding around the new HTML5 audio element and expanding our working knowledge of Javascript and the jQuery library. As always, working alongside Assignment Group has been a dream and a seriously rewarding creative experience.
