To hype up the anticipation for the release of the ‘Bada Bing’ video I built a holding page counting down to the second the video would go live.

I used Keith Wood’s jQuery Countdown plugin to render a timer. The script was very easy to use and the additional settings made it easy to style and configure. The timezone setting allowed me to specify that the countdown should end at 11am UK time rather than the visitor’s timezone.

By using @font-face, I was able to render all links and even the numbers in the timer with the same fonts used on the single artwork.

The video premiered on a ‘like to view’ Facebook tab. So at 11am on Fri 13th Jan the countdown was switched with a message and link to watch the video on Benny Banks’ Facebook page. After the premier finished I embedded the video directly into the holding page.

On the 8th October All the Young played a momentous headline gig at the Kings Hall in their home town of Stoke on Trent.

Two weeks before Christmas, I was given the task of releasing a free live album of the show in an innovative and exciting way – before Christmas!

With the time limitations it was obvious that I’d have to build the project myself and needing an instant delivery mechanism led me down the path of HTML5 web apps.

This was my first attempt at proper HTML5 development and I had a lot to learn about web apps too.

I got to work using the jQuery Mobile framework which makes mobile web development a lot easier.

Knowing that a lot of people would also view this site on a desktop, I had to make a number of css rules to keep everything in check. CSS media queries made the site a responsive web design, adjusting to the screen size and adjusting all the elements for the best view on a smartphone, tablet or desktop.

To make the app operate like a native iOS app I added a fixed iPhone style navigation to the bottom of the site. This also resizes depending on the size of the visitor’s device.

The music section is powered by Soundcloud and Matas’ classic custom jquery soundcloud player. I added a loading message that waits for the player to load before displaying it and styled the player to suit the band’s style.

I found an amazing plugin to power the photo gallery. Photoswipe makes it a synch to add a full screen gallery with touch-powered sliding navigation. The default setting has 3 thumbnails across the width of the page which didn’t look great on an iPad or desktop screen. So I used css media queries to adjust the thumbnail size and order as your screen size increases. An iPhone displays 3 thumbnails wide, an iPad displays 4 in portrait mode and 5 in landscape. Desktops also adjust responsively depending on the use’s screen size.

The videos section displays YouTube videos with the iFrame embed method to allow mobile playback. I wrote a lot of custom Javascript and CSS to display this page. The size of the embedded videos adjusts according to the user’s screen size, so they always fill as much space as possible.

The app uses Font Face to render all text in the band’s font. Including the headings, buttons and the liner notes.

I included a send page that allows fans to share the app with friends via email or social networks. It also allows them to sign-up and receive a direct download link for the mp3s.

The responsive design meant that all the sections could be optimised for the best view on different sized devices. Desktops with large monitors or tablet devices display content side-by-side in columns. Smaller devices will stack the content, so that the page only scrolls up and down.

One of the big challenges I set myself for this project was offline storage. The app uses the cache manifest method to store core files offline. The audio and video need to be streamed so offline browsing presents the user with a fallback message.

If users add the app to their home screen it will run full screen like a native app. I used the ‘add to homescreen’ script to display a pop-up message the first time iPhone or iPad users visit the web app.

Finally I had to simplify the app for visitors with old browsers or incompatible devices. I created a very basic page that allows visitors to sign-up and have the download links sent to them. The site detects whether the app will display correctly and only loads it if all requirements are met.

All the Young sent the web app to core fans on Christmas day and had a brilliant response. There are now plans to use the app and content in a much more widespread rollout.

While building the app so quickly was stressful, it was a good crash course in HTML5 and web app development. I learnt a lot in a short space of time and it certainly piqued my interest in doing more advanced web apps in the future.

Tawiah released a brilliant EP as a free download over the 2011 festive season. The ‘holiday gift’ features her new song ‘Run’, along with a remix, acapella version, a song called ‘Don’t Know You Yet’ and a powerful version of ‘Little Drummer Boy’.

To give the EP widespread reach I made an email sign-up widget, optimised for sharing on social networks and easily embedable on blogs and websites.

Having built many free download widgets over the past year I’ve always wanted to streamline the process with a more templated system. I used the ‘Run EP’ widget to start working on a dynamic system that remains quite flexible.

All the free download details are stored in a MySQL Database where the widget is assigned an ID. All image assets, mailing list information, text and meta data for sharing is then loaded and displayed dynamically when the widget is viewed.

The widget is mobile-friendly, providing an iFrame embed code to easily add it to blogs and websites.

To enhance Facebook sharing I built a Flash version of the widget that accesses all the data from an xml feed. This means that users can sign-up for the free download and share it without leaving their Facebook news feed.

I have a fair bit of work to do on the CMS as well as adding more flexible options, but this widget has helped me lay a lot of the foundation for a really powerful and easy to use system. Stay tuned.

At the end of November 2011 Warner Bros released a special edition version of Hugh Laurie’s debut album, ‘Let them Talk’. In addition to the three new studio recordings, we wanted to deliver a special deluxe digital product. With this in mind we created a bespoke iTunes LP, loaded with additional content.

I sourced plenty of content including new photographs, unreleased video and additional writing by both Hugh Laurie and his acclaimed producer Joe Henry.

The iTunes LP reads like a book, with Hugh’s notes on certain songs, thoughts on recording the album and his recollection of working with legends like Dr. John, Sir Tom Jones and Irma Thomas. Joe Henry also contributed a detailed introduction to all the talented musicians that performed on the album.

The LP is packed with great video content too. The ‘Live in New Orleans’ DVD contributed two live videos featuring Sir Tom Jones and Irma Thomas. I also included a six part documentary that covers Hugh’s journey to New Orleans and his time in Ocean Way Studio.

Once the iTunes LP was ready for release I briefed the team at Electric Lighting Station to create a trailer for the product. Oggy Hawkins did a superb job and created the video YouTube video embedded on the left.

The ‘Let Them Talk’ iTunes LP went on sale worldwide in December and was incredibly well received. It is great to know that something I created has reached such a wide international audience. Especially with Kate Brighouse and my names in the credits.

In November 2011 Muse released an incredible coffee table book filled with photographs from The Resistance Tour. The book was released exclusively through muse.mu and the band needed to get the word out to fans.

I was asked to build a gallery to preview some of the photographs. I built a gallery using jQuery to elegantly fade the images in and out as a user pages through them. I put together some iFrame code so the band’s management could easily add the gallery to the product page in the online store.

To take it further I developed a slightly smaller version of the gallery to sit in a Facebook tab. The tab links back to product page to encourage purchases. The tab includes social sharing options linked to the product page. So fans who click ‘like’, ‘tweet’ or ‘share’ on the Facebook tab would share a direct link to the product page on muse.mu.

To enhance the sharability of the gallery I created a small Flash version for improved Facebook sharing. Anyone sharing the product page or hitting ‘like’ on the page or Facebook tab would post a preview directly to their wall. The small flash gallery loads in the news feed and ends by linking back to the product purchase page. Sharing the product in this way made it far more engaging and appealing, while driving traffic to the store.

Finally I made sure that the jQuery gallery degraded gracefully for users without Javascript enabled. Instead of using a smooth jQuery transition, the gallery still allows users to flick through the photos easily.

The gallery seems fairly simple at first glance, but there are a number of clever bits of code working together to provide the best product experience.

Just before Stooshe launched their lyric video for ‘Betty Woz Gone’ they put a mixtape up on Soundcloud which was covered by numerous blogs and music sites.

We also made the StooshTape available as a reward for fans joining the girls’ mailing list. To further promote the sign-up incentive, I built a widget that could be embedded on sites, blogs and social networks.

This was one of our usual sign-up widgets, built in Flash with an html5 fallback option. It is optimised for social sharing to allow in-feed embedding on Facebook, as well as Google Analytics to track it’s success.

To promote the release of Marlon Roudette’s Riding Home EP, we created a data capture widget with a free download of a song called ‘Brotherhood of The Broken’.

The widget is flash based with a mobile-friendly html & javascript fallback option. The Flash version also plays a preview of the song.

Kate Brighouse designed the widget and a mailer template that I set-up as an automated response to deliver the free download to fans that registered for the UK mailing list.

The Platinum Edition of the Overtones’ debut album went on sale with an even more deluxe version in iTunes.

The iTunes LP presents the album along with additional content within a very slick design by Kate Brighouse.

The iTunes LP includes the entire album as well as additional bonus tracks. The videos section covers all the group’s music videos, a number of behind the scenes clips, live footage and clips of the band interviewing each other. There are also two photo galleries with various press shots and behind the scenes photos.

To promote this version of the album and make sure fans understood the additional content I had Oggy Hawkins create a preview video. He did an incredible job and the video did a great job driving sales of the premium digital product.

Just before the release of Jason Derulo’s sophomore album we launched a competition for fans to show of their dance moves.

Jason’s UK marketing manager, Katherine Parrott, wanted to run a competition where fans learn the dance routine for ‘Don’t Wanna Go Home’. She arranged for Jason and his choreographer to create an instructional video.

I was tasked with creating a microsite to house the competition alongside a stream of the new album. Kate Brighouse designed a page and I got to work on the code behind it. The competition element is really simple and just includes a YouTube embed of the instructional video and a link to enter the competition with a video response. I also configured the meta data so that sharing the page on Facebook or liking it would embed the YouTube video in the post.

The challenging part of the brief was including the stream of the new album. I used Soundcloud’s html5 player to build a playlist and then got to work on heavily modifying it to suit our needs. I encased the Soundcloud players in a content slider so that only one player is displayed at a time. Hitting the navigation buttons will slide the next or previous song into place. I took it a step further and modified Soundcloud’s JavaScript to trigger the slider whenever a song ends and a new one starts playing. This means that you can hit play on track one and the slider will keep up with the playlist as you listen to the entire album.

I’ve embeddded the actual microsite on the left to demonstrate how the player functions.

Along with the launch of Lianne La Havas’ EP and a redesigned website, we had an amazing set of live songs to give away as a sign-up incentive. ‘Live in LA’ is a four track recording of a gig that Lianne La Havas recently put on in the states. The songs sound incredible and make a brilliant sign-up incentive.

Kate Brighouse designed the widget and I assembled the swf to embed on the website and spread around blogs and social networks. I created an html fallback option for mobile phones and devices that can’t use flash. This time I extended the functionality to include jQuery form validation and submission running in the background so that the user never leaves the page.

As usual the widget is configured for enhanced sharing on social networks. Sharing the widget on Facebook will embed it into the news feed, allowing people to sign-up without leaving their Facebook home page. It is also set-up for easy sharing on Twitter and the embed code is easily obtained for bloggers to embed it on their own sites.

To give the free download maximum exposure on her networks I also created a Facebook application to include the widget on a tab.

To deliver the free download we needed a new html email template, so Kate Brighouse designed a new template to match the widget. Alex Burfurd then set it up to deliver the free download once you sign up. The widget proved to be hugely popular, instantly lifting Lianne’s fanbase and quickly spreading across all the blogs that are in the know.

All the Young have two massive events coming up in the next few weeks. The band will be releasing their new single, ‘Quiet Night In’, and playing a momentous gig at the Kings Hall in their home town of Stoke.

To build anticipation for both events Sam Stubbings briefed me to create a countdown for the band’s website.

I went in search of some opensource clocks and timers and discarded numerous Flash systems until I found a very stylish jQuery project.

The library needed some modifications to suit my needs. I found a modification that allows counting down to a specific date and time but there was a glitch that kept making the seconds start counting down from 99 instead of 59. I found that appending a 0 to the front of numbers less than 10 did the trick.

There was a second bug that made the timing a bit haywire in Internet Explorer. This was resolved with a simple fix by adding an additional DIV around one of the elements.

I added the code to a Lightbox system on All the Young’s official website so that it is the first thing visitors see when they go to the site.

We also wanted to give away a free download to Facebook fans, so I built a tab to include the countdown timers as well as a download link that is only visible to Facebook fans.

Marina Diamandis has returned with an ambitious precursor to her new album. The new song, ‘Radioactive’, is a concept single that delves into new territory to make her point.

A week after launching the campaign and video for the single, we made an alternate version available as an incentive to join Marina’s mailing list.

I built a free download widget for the acoustic version of Radioactive. As usual the widget is Flash based with an html fallback option for mobile users. It includes all the best optimisation for social sharing and embedding across blogs. I also set-up a basic Facebook iFrame App to give the widget a more permanent position on Marina’s Facebook. The widget was also added as a sign-up module on her website to give it more prominence on the site.

Marina & The Diamonds fans loved the acoustic version of Radioactive and the widget quickly spread across the internet.

In the build-up to Joshua Radin’s sophomore release we were given a 6 acoustic recordings to use for data capture.

We bundled all the songs as a free EP and released them in a download widget.

Kate Brighouse designed the widget, which I then reconstructed in Flash along with all the necessary actionscript to make it run smoothly.

As usual the widget includes samples of the songs that can be played on demand, an actionscript sign-up form with validation, optimisation for social media sharing and Google Analytics to measure it’s success.

Coinciding with the launch of Tawiah’s blog, I built a free download widget for the BTraits remix of ‘Sweet Me’.

Kate Brighouse’s design for Tawiah’s online estate is deliberately bare-bones, relying on Courier New as a font base.

Kate was away when the widget needed to be built, so I took care of the very stripped back design.

The widget includes a preview of the song, an actionscript 3 sign-up form with email validation, Facebook and Twitter sharing buttons, pop-up embed code and Google Analytics.

One More Tune Records recently signed DEVolution. In the build up to the first single, ‘Good Love’, we gave away a remix by Rude Kid.

We did this in one of my popular free download widgets. Kate Brighouse designed the widget’s layout and I assembled it in Flash.

To make the download page mobile friendly I wrote a fall-back form that looks very similar to the widget. So anyone visiting the page on a device without Flash compatibility would still be able to sign up and get the free download.

All The Young are about to launch a live EP, recorded at King Tut’s Wah Wah Hut in Glasgow. To raise awareness about the band and help establish their reputation as a solid live band, we released one song from the EP as a free download.

I built a Flash sign-up widget for ‘Today’ using all my tricks that have now become standard practice. AS3 form submission with validation, mp3 preview playback, Facebook and Twitter Sharing, easily copied embed code and Google Analytics.

The widget is also optimised for Facebook sharing to enable in-feed display and sign-ups.

I created a clean html fallback option for users that don’t have Flash enabled. This allows all fans to sign-up and share the widget, even if they’re using iPads, iPhones or other mobile devices.

When the pre-order campaign for Biffy Clyro’s new live CD/DVD reached a point of maximum excitement and anticipation we hosted an innovative online screening of the show.

A 24 minute highlights package of the DVD was made available for us to broadcast once-off.

I approached Ste Thompson from Powster with the idea of driving twitter traffic around the broadcast with a specific hashtag. After bouncing ideas around, he suggested that we run an ‘online concert’, where fans can join the virtual crowd by tweeting #biffylive.

While Powster worked on the twitter crowd mechanic I set things up for the live streaming element.
I created a custom Brightcove player with a hidden playlist looping a trailer until I needed to push the live stream out.

I’d learnt a thing or two from the Hugh Laurie stream we did and decided that a count-down to the start of the show would be the best way to build anticipation and make sure all the fans knew that the show wasn’t delayed. I asked Andy Saiker and Mike Downs to create a 5 minute count-down to play before the show started. The timer really helped to get the fans excited and the tweets started flowing as soon as the count-down began.

Matt Cummins helped set the Wirecast machine up with a reliable connection and, once again, we spent the duration of the live stream in the basement surrounded by cables and servers.

The twitter integration was a huge success, the fans loved seeing each other in the crowd and got so involved that #biffylive started trending on Twitter.

Celebrating the release of ‘Revolutions // Live at Wembley’ we made two songs available to download for free.

Live versions of the massive hits ‘Mountains’ and ‘Bubbles’ are available by joining the mailing list through an embeddable and sharable widget.

Kate Brighouse designed the widget and I got to work building the Flash file with all the necessary functionality.

The widget includes playback functionality to stream previews of the two songs, a sign-up form with actionscript validation, Google Analytics tracking, facebook and twitter sharing buttons and a pop-up dialogue allowing the user to copy the embed code.

When users sign-up they’re sent an email with the download link for the two songs. They are also directed to Team Biffy where registered members can get a third free download of ‘Machines’.

The widget was one of our most successful yet, and was featured across all the major music websites as well as the blogosphere.

Fenech-Soler are making a triumphant return to playing live.

To promote the band’s forthcoming show at Ibiza Rocks Festival, we launched a great twitter-powered campaign. One lucky fan would win flights, accommodation and tickets to see the band perform at the Ibiza Rocks Festival in July.

Alex Burford wanted to offer a reward for Twitter activity and we wanted something more interesting and viral than just tweeting a hashtag. After bouncing ideas around for a long time I suggested that we should run a retweet competition, where fans are rewarded for the number of times their tweet is passed on by their followers.

I contacted Laurien Gloeg at Metropolis and she put her talented team to work building the app. Phil Allen and Jason Fidler developed an outstanding twitter visualization to display the number of times a post featuring the #fenechibiza hashtag has been retweeted.

After launching, the campaign quickly ignited enthusiastic tweets and retweets; making it clear that Fenech-Soler are back and better than ever.

The Overtones are playing at this year’s Windsor Races. One lucky fan has the opportunity to attend the races and see the boys perform.

To maximise the number of entries to this competition I built a new flash widget. The sign-up form feeds into the band’s silverpop mailing list while sharing buttons allow the widget to be posted on facebook or twitter as well as providing standard embed code for blogs and websites.

To help promote Biffy Clyro’s headline set at Sonisphere this year, we provided a sharable competition widget.

Kate Brighouse designed the layout and I got to work with my usual set of tools. The widget adds entries to a silverpop mailing list while sharing buttons make it easy to embed and share the competition on social networks.

Before his first public concert at the Union Chapel, Hugh Laurie signed an acoustic guitar as a prize for one lucky fan on his mailing list.

To ensure that the prize would be available to as many fans as possible I created a sharable sign-up widget similar to the Paris competition and free download widget.

I took a photo of the signed guitar and Kate Brighouse did a great job of integrating it into the design. It’s a fairly basic widget with an AS3 form (including validation), Facebook, Twitter and embed code sharing options and Google Analytics tracking.

I added all the necessary meta data to a news piece to ensure that the widget plays within a Facebook news feed.

Moving on from the Paris competition widget, the signed guitar widget further kept Hugh Laurie’s mailing list growing significantly.

Caroline Beashel sat the band down to record a podcast about the new album. This would then be accessible through a pop-up lightbox within Spotify.

Kate Brighouse designed the page and I wrote the necessary code to make the lightbox function. I created a custom skin for an mp3 player to load the track from an Akamai StreamOS server.

The lightbox then includes basic buy and listen links to further promote the new album.

The diagnosis did mean that the band had to postpone their UK Tour until Ben is fit to perform again. The postponed tour included a sold out show at Koko in London.

To make up for the delay, we decided to broadcast 6 songs from the bands’ show at Heaven last year. Spotify came on board as a partner and ran an extensive campaign allowing Spotify users to watch the songs in a pop-up lightbox.

Kate Brighouse designed the page and I put the code together to embed a brightcove player with the live videos.

With Hugh Laurie’s forthcoming European tour we were given a great prize to encourage mailing list sign-ups. One lucky fan would have the opportunity to see Hugh performing live in Paris.

We wanted the competition to spread far and wide so I built a flash widget for the sign-up form. Kate Brighouse came up with a great design for the widget and I quickly converted a previous free download widget into a new sign-up form for this competition.

Due to the easy sharing and embed options Caroline Beashel was able to get the competition placed on a number of blogs and websites. It drove a huge number of sign-ups in a very short space of time.

Wombats fans were given an early introduction to the new album, This Modern Glitch, but they had to do a bit of work to find it.

90 second samples of all 10 songs on the album were set to cool motion graphic videos created by Jess Gorick. These preview videos were then hidden inside The Wombatizer for fans to find.

To display the videos I created a custom Brightcove player, writing the necessary BEML to use a chromeless player with 10 thumbnails underneath it. I styled the player to match the album artwork and ensure that it was the correct size to display in The Wombatizer.

I had to re-write the code in The Wombatizer to include the new player. Fortunately Jason Fidler had done all the hard work so I could edit the functions to launch a new pop-up video player. I replaced the three YouTube Videos in The Wombatizer with three instances of my custom Brightcove player. I also added in buttons linking to different the different retailers, encouraging fans to pre-order the album.

The preview clips were very well received and fans loved the songs. Turning the preview into a treasure hunt got a lot more people talking about it, liking, tweeting and sharing links to The Wombatizer.

They put together an awesome trailer with Techno Fan as the apt soundtrack. The video went out on the band’s YouTube channel, website, Facebook and Twitter driving a lot more traffic to the Wombatizer, sparking new interest in it.

At the time I was fascinated by sites like the geocitiesizer and Kanyelicious. I thought it would be amazing if you could hijack a website and Wombatize it. So the plan to build a much more advanced tool was set in motion.

With a few weeks to go before the release of This Modern Glitch, I’m proud to launch The Wombatizer. Entering any url into The Wombatizer will give you a uniquely glitched version of that website. A lot of the images, banners and flash content on the page will be replaced by Wombats photos and an images of people holding a piece of paper that says ‘click here’ – this launches a pop-up window that plays a video, shows some photos or allows you to enter exclusive competitions. Closer to the album release date the Wombatizer will be the first place to hear samples of the album.

I needed a very talented team to build The Wombatizer, so I enlisted Laurien Gloeg at Metropolis to bring it to life. Phil Allen and Jason Fidler worked tirelessly on the project to get it ready for launch. The most challenging task was the extensive testing and debugging necessary to make The Wombatizer do a good job on as many sites as possible.

I wanted to make sure the Wombatizer was of an award-winning standard so to save time I got involved in generating some assets myself. I designed and developed a number of the competition entry forms as well as generating unique looking ‘click here’ images from the album artwork.

I edited the landing page to include addthis sharing buttons, pre-order links to buy the album, optimised meta tags for social sharing and a translated page for german fans.

The Wombatizer launched with a massive competition in partnership with Shazam. By wombatizing a site you can find a form that includes an mp3 player. If you Shazam the song you’ll get a promo code that can be used to enter the competition. One lucky winner will win two tickets to see The Wombats live in Barcelona. Other competitions prizes include tickets to the London album launch party and Wombats T-Shirts. You can also find exclusive videos, all the recent music videos and a free download.

The following links demonstrate the Wombatizer at it’s best:
nativenoise.co.za
nativenoise.co.za/all-posts
myspace.com
nme.com
YouTube.com
guardian.co.uk

Click here to Wombatize this page

Try Wombatizing any other urls at: wombatizer.com

It was my job to get the stream set-up so I worked with Matt Cummins in our IT department to make sure that the stream could be delivered without any hitches.

The 3 song performance was delivered to Guardian visitors through a Brightcove player. I configured the player and live asset to provide an embed code for the site, making sure the video would be streamed smoothly and in high quality. The broadcast was powered by Wirecast software and set-up on a dedicated machine with a high speed connection. It was a pretty high risk learning cuve but I learnt the ins and outs of using Wirecast very quickly. After rigorous testing everything was in place and ready for me to push the button and start the broadcast. Those were easily the four most stressful mouse-clicks I’ve ever made.

While Matt and I sat broadcasting the video from a cold and dull data centre, the show attracted a huge audience from around the world, announcing Hugh Laurie’s debut album in style.

Another point in our huge online launch day for Hugh Laurie is a free download widget. These always work very well to increase mailing list sign-ups and the social sharing functionality makes them great viral marketing tools.

‘Guess I’m a Fool’ – bonus track from “Let Them Talk” – was made available as a sign-up incentive. After briefing Kate Brighouse on the design requirements and Alex Burford on the mailing list integration I got to work building a widget for Hugh Laurie.

It includes all the features that come standard in the widgets I build these days:
* Seemless integration to submit data to our Silverpop database.
* Social sharing through Twitter, Facebook and html embed code.
* In-stream functionality to display the widget without leaving your facebook wall.
* Audio playback to hear a sample of the song.
* Actionscript 3 form validation
* Google Analytics to track the success of the widget.

The Widget was embedded on hughlaurieblues.com and his myspace profile. I also created a custom facebook app to display the widget as a default tab on the Hugh Laurie Blues Facebook Page.

The widget was one of the first announcements on our March 23rd impact date and it rapidly spread around the web being embedded on blogs, news sites and facebook news feeds.