Javascript Rich Media Widgets

As part of their forward thinking web strategy, the NHS commissioned these interactive widgets to replace Flash based versions which were now starting to show their age.

In collaboration with Antbits, I produced these non-Flash versions of the widgets, using HTML, XML, CSS, Javascript and jQuery, designed to be viewable on the increasing number of devices which cannot view Flash content.

Flash widgets for the web have a natural (and well established) workflow, which enable them to be built and embedded by a designer, independent from the web page around them.

This presented a new challenge, as we had to establish a similarly natural way to embed Javascript widgets which allow them to be deployed and updated quickly (separate from the often long lead times that can be required for “everyday” web development tasks).

The widgets have now been built in such a way that they can be “embedded” anywhere on a page using just a few lines of code, similar to the way we would embed Flash content.

They can be reused and customised using parameters, all from the same codebase.
NHS were extremely pleased with their first ever rich media web content to be built with web standards, and are planning to commission several more in the future.

Little Book Of Money

Scottish Widows’ Little Book Of Money is a yearly offline publication, offering independent financial advice on personal finance matters. The client were very keen to make the book work as a digital product, in an effort to capitalise on the improved reach and measurement of success.

New footage of the famous Widow was specially shot to be used in the book, a company first for an online campaign.

My expertise was used to build the overall Flash framework of the site; to source and integrate engaging animated transitions between content; and to integrate the rich video footage at our disposal.

The site’s content was maintained with the use of an innovative XML solution, which allowed for rapid updates without having to re-publish any Flash assets.

The digital ‘Little Book…’ was produced at almost half the cost of the print version, delivered in half the time, and achieved increased audience engagement.

The site was also nominated for a DADI award (Financial Services Website or Campaign).

Panic The Cat

Who Is Panic the Cat?

Panic used to be a normal kitty – until the day his owner left him to fend for himself on a Newcastle council estate, while she ran off to London with dreams of being a popstar.

Left alone with nothing to do but read piles of fashion and gossip mags, Panic grew up to become a bitter and twisted fashion expert.

In 2011, Panic was hired by Facebook game “Beautytown”, to become their voice of fashion – dishing the dirt on the biggest names in the world of entertainment.

How did the campaign work?

Every day for a month, Panic released a new celebrity put-down video. The videos were promoted daily through Facebook, along with other blog content from the character.

Visitors to the site were shown the most recent video, and given the option to view videos for the previous days.

Users were given exclusive access to tomorrow’s video by sharing the site through Facebook and Twitter.

And what was your input?

Coming in just after filming had finished, I was tasked with editing the videos and syncing them with the separately recorded voice-overs.

I then built the website that incorporated the video, audio, images, and social media components, and made them all play nicely together.

What’s the technology behind the site?

The site was built using Flash – this decision was made because the majority of the content was video and audio, and required a degree of copy-protection. The wide ranging penetration of Flash Player was also a factor in the decision.

Javascript was used to provide the social media integration, and we used a PHP script to access the live images by proxy.