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.

One of the latest signings to Warner Bros. UK is the acoustic duo Lilygreen & Maguire.

Kate Brighouse designed a simple holding page using a photograph by taken by Sam Stubbings. I then built and set the holding page up on lilygreenandmaguire.com.

The sign-up form uses Javascript to validate and submit email subscriptions, with a standard html form as the fallback option.

Our team recently started helping out with the occasional Rhino UK project. One of the first jobs we had to work on was a free download page for the new Alvin & The Chipmunks soundtrack.

Kate Brighouse designed the page, which I sliced up and converted into a php microsite.

The sign-up form is validated and submitted via jQuery to keep the process as smooth as possible.

The free download is only available for UK visitors so I had to build in geo-targeting capabilities to ensure that the sign-up form is only displayed to visitors from the UK. I used the MaxMind database to run IP detection and determine the page contents based on the visitor’s location.

Marlon Roudette (the former Mattafix frontman) has an irregular record deal. He was recently signed to Warner Bros for the UK release and promotion of his album ‘Matter Fixed’. While we look after him in the UK, he is also signed to Universal Music Germany (and Universal for additional territories).

This proves to be a challenge for online promotion where the internet is global. Universal’s German team have been incredibly helpful in allowing us access to Marlon’s online estate. While they’re much further into the campaign than we are, it was decided that a simple splash page would be the best point of contact for UK fans.

I wrote a simple geo-location script that checks the MaxMind database of IP addresses and redirects any UK visitors to marlonroudette.co.uk. The script also drops a cookie to prevent the need to check the database every time a returning visitor loads the site.

The splash page was designed by Kate Brighouse and features a YouTube embed, link to buy the Riding Home EP, a sign-up module that validates and submits via jQuery and a tour dates listing powered by the bandsintown facebook app.

By hosting the splash page on marlonroudette.co.uk we are able to keep the site updated without needing to involve the German team. The geo targeting script works very well to ensure that visitors always land on the site most relevant to the territory they’re in.

Pete Tong signed Paper Crows to his FFRR label and I’ve been helping out with the band’s online estate.

As the band are starting out, they wanted a fairly simple website so we decided to build the site on a Tumblr blog.

I set about building a custom tumblr theme to make the site more than a basic blog feed. The navigation works in conjunction with Tumblr’s static pages feature. I added static pages for music, videos, contact details and the mailing list. The music page is a collection of Soundcloud players while the Videos page is a bunch of embedded YouTube videos.

I configured the sidebar to contain a mailinglist sign-up module. The form uses jquery and ajax to validate and submit the users details seamlessly.

The sidebar also includes a Facebook like box, with customised css to improve the styling and integration with the site.

Paper Crows use the BandsInTown app to power their tour dates on Facebook and Myspace. I included the Javascript widget to include a tour dates page and sidebar widget.

Cufon made it easier to style the headings and navigation, adding a bit more style to the page’s design.

All posts include AddThis sharing with custom buttons. I also included Omniture tagging to track website traffic.

Finally I switched the A record for papercrows.com to make the tumblr blog the band’s official website at papercrows.com.

During a brainstorming session about expanding All the Young’s fanbase we decided to create a system that would reward points for sharing content.

We decided to focus the campaign on the forthcoming release of ‘Quiet Night In’. Fans would earn points for sharing a unique link to pre-order the album. The fan with the most active link would win a gig from the band in their local pub. Runners up would receive a signed guitar and signed vinyl.

I set-up a MySQL database to hold all the user data and wrote the system using php.

Fans register their details and the database returns a unique link tied to their ID. I set-up addthis to make sharing the link really easy and set-up all the correct meta data to personalise the sharing system on social networks.

All the Young’s fans took to the competition really enthusiastically and passed their links around everywhere they could, driving loads of traffic to the iTunes pre-order page for ‘Quiet Night In’.

Later in the campaign we changed the link’s destination to a free download tab on the band’s Facebook page, by extending the competition’s reach we were able to drive a lot more new Facebook fans for All the Young.

The system worked really well and will be something we can easily repurpose for other artists.

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.

The very talented Lianne La Havas needed a fairly simple but classy web presence at this early stage in her career.

We decided to build a clean holding page for her site and use the very popular Tumblr platform to power her blog. Kate Brighouse designed the two holding page and blog which I converted into a custom Tumblr theme.

The holding page is a static html page with three embedded videos, a free download widget, a sign-up form and tour dates. The sign-up form uses jQuery to validate the email field and submit the form without leaving the page while the tour dates are pulled in from the BandsInTown Facebook app and then formatted with the custom CSS styles I set up for the page.

To get started with the Tumblr theme, I used Minimalist as a template and adjusted it. Kate’s design was wider than the Tumblr default so I had to make a number of adjustment to account for that.

To ensure that videos are displayed at full width (rather than the default 500px) I used two Javascript functions. Matthew Buchanan’s script handles YouTube while some Javascript from Alex Hallajian resizes videos embedded from Vimeo.

I configured AddThis to place customized sharing buttons for Facebook, Twitter and Tumblr on every post.

The design also required a specific font for the post titles so I configured Cufon to make sure that the headings and menu items always looks great, whilst also degrading gracefully for browsers that don’t support Javascript.

The Lianne La Havas website and blog look very basic, but have a fair bit going on to ensure that the stylish design is always maintained.

I had to build the system in-house so set about creating a PHP & MySQL powered quiz system.

I spent ages modifying ElenMan’s PHP quiz system, converting from SimpleXML to a MySQL database, adding a timer to the score, forcing the user registration and styling it to suit Katherine’s website. While the system worked well most of the time it would occasionally drop sessions and fall apart unpredictably.

On the tube ride home the night before the competition launched I decided to start from scratch and sketched out a new flow diagram on a newspaper.

I went back to basics and wrote a php system that uses classic html forms to process the data and post the scores to a MySQL database.

The competition was limited to Katherine’s Diamond Club members’ area so I had Iwan Moore at Isle Interactive build a dynamic page that registers the user’s Diamond Club membership name and sends it to the quiz. My quiz system then processes that along with the users’ results. To prevent anyone from improving their score I ensured that fans could only take each quiz once.

Each quiz is made up of six questions, with five answers each. I used some Javascript to disable the submit button until one of the multiple choice questions had been selected.

Next, I added a timer system to record how long a fan takes to complete a quiz, this would be used to even out any tie-breaker situations.

I configured the results page to show users how they scored on each question. Correct answers are highlighted in blue while incorrect answers are highlighted in red.

Finally the users are presented with a leaderboard to show them where they placed in that particular competition.

The competition ran across 15 concert dates, so I had to duplicate the quiz for each show and set-up the different questions compiled by Jonathan Pumphrey, Alex Burford & Katherine’s management.

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.

With the launch of Katherine Jenkins’ new album came the opportunity to refresh her official website.

I project managed the build with Kate Brighouse designing the site and Isle Interactive building it.

The website is clean and simple, making it easy to navigate. It includes all the standard features that go into our artist sites as well as a special Twitter integration. For some time I’ve wanted our website to seamlessly merge with our artists’ tweets. Artists like Katherine Jenkins are very active on Twitter but don’t spend much time blogging or contributing personal content to the website. To give her a voice on the site, I briefed Isle to make the twitter feed display rich-media in-line. Now when Katherine tweets a photo or video it will appear on her website like a blog post. The integration works so well that the website is a more interesting place to read Katherine’s tweets than Twitter itself.

The rest of the website looks great and the fans gave us an overwhelmingly positive response.

Warner Bros. recently signed the London girl-group StooShe so we got to work setting up their online estate.

Kate Brighouse designed a blog-style site that I briefed Isle Interactive to develop. The members of StooShe have become very active on Tumblr, so rather than introducing them to a new CMS we had Isle develop a full Tumblr integration to replicate the posts on the group’s official website.

To ensure that the girls’ online profiles are all consistently styled I replicated the website design as a Tumblr-theme and applied it to stooshe.tumblr.com.

The two sites now look exactly the same but eventually stooshe.com will grow into a more comprehensive site with a store, photo galleries, members area and official news with the girls’ personal blog being imported seamlessly from Tumblr.

To promote the new DEVolution single, ‘Good Love’, our head of digital, Sam Stubbings, came up with the idea of the ‘Bad Love’ remix competition.

The guys at One More Tune put Amy Pearson back in the studio to record an alternate vocal track for the single.

I worked with Soundcloud to put a great remix platform together. Their team was incredibly helpful and offered to build the platform for us.

Lee Martin has the coolest title as ‘Experimental Developer’ for Soundcloud. He had some exciting new ideas he’s been working on so he configured a clean and easy to use app to power the competition.

As the project manager I had the subdomain configured and gathered all the assets for the competition.

The competition gained a lot of interest from the remix community and filthy versions of Bad Love quickly started flowing in.

The winning remix receives £500, a Soundcloud Pro account and their single will be released on OMT Records / Warner Music.

As part of a rebranding strategy, the decision was made to simplify Fenech-Soler’s website and only maintain a basic holding page.

The new brand features a triangle made up of the band’s début album cover sliced into smaller triangles.

I sliced the image into numerous pieces and then re-assembled the image in Dreamweaver.

Some of the smaller triangles act as hot spots linking to the band’s online estate.

I used JQuery to animate the triangles when the user hovers over the them. Rolling your mouse over the hot spots will make the triangle fade out to reveal the link.

To keep the site more integrated I used the Fancybox library to open all the links in a lightbox iframe. Facebook and Twitter don’t allow iFraming so I built mini versions of the band’s profiles to display in the lightbox.

I used Remy Sharp’s JQuery Twitter feed to display the band’s latest tweets and also added a Twitter Follow button so that fans can easily follow the band from within the lightbox.

To integrate Facebook I included a Like Box with a feed taken from the band’s Facebook page. Fans can easily like Fenech-Soler’s page, view the band’s latest posts and see which of their friends are already fans of the band.

The Tour Dates pop-up is powered by BandsInTown, using Javascript to sync with the dates listed on Facebook and Myspace.

While Fenech-Soler are on the road doing an extensive festival touring circuit, they’ve had a film maker following them and documenting the shows. These videos are all hosted on YouTube but I added them to the website in a slick lightbox.

The page also links to the White Versions EP Widget I built some time ago. I made the widget pop-up in a lightbox and added a fallback version for browsers without flash support.

One major issue with a roll-over based page, is that mobile users don’t have a mouse to activate the rollover. I set the page to detect iPhone, iPad, iPod Touch and Android users and apply different settings to the page. All the hot spots are partially faded to start with, so that all the links are visible. Mobile users are greeted by the White Versions widget opened in a lightbox.

At the end of 2009 Brandon Prevost offered me a big freelance job; building a new website and online estate for Plush. I have been a fan and friend of the band since the early days of Native Noise on UCT Radio in 2003.

When we first started discussions around the new website I still worked at Communion / Beatroute. It was actually thanks to Brandon that I found out about my current position at Warner Bros.

Plush.us is built on the WordPress platform along with all the latest tools to enhance usability and engagement. It has been a while since I’ve created a custom Worpdress theme from scratch and the platform has introduced a number of useful enhancements. I started with twenty ten as a base and dug deep into the code to make it produce the high-end website I had in mind.

My design for the site is very clean and simple, based on the album artwork by Pierre Coetzee. I used the colourful background image as a fixed full-screen background and styled all the content boxes to have the same black background and border as the logo on the album cover. The header includes the new logo and a photograph by Deborah Rossouw.

It took a lot of code to customise the twenty ten theme. I added an extra dynamic sidebar for widgets and resized the content area for two different page templates (one wide and one narrow). I added a new widget area to the home page that allows the band to upload a large banner. The banner zone is only visible on the home page and can easily be removed by removing any widgets from the zone.

All updates can be assigned to three categories which will determine where they appear on the site.

The home page displays a combination of official news updates and more personal blog posts written by the band, visitors can then click on a tab to isolate the content and only display one of the categories. The third category is for exclusive content in the members’ area. Any members-only posts are only visible to fans that join the US Lounge Members’ Area. The band will be able to use this area to reward their most dedicated fans with exclusive content.

I made quite a few modifications to make the US Lounge Members’ Area an easy user experience. I used a Facebook Connect plugin that allows fans to create an account with two clicks. I made extensive modifications to the plugin to ensure that any new members’ would also be added to the phplist powered mailing list. Using phpCurl and inspired by Jesse Heap‘s work on the dual registration plugin I was able to seamlessly pass the users’ details to phplist.

After ages wrestling with Facebook Connect and the Graph API it became clear that Facebook doesn’t share any useful information about the user’s country. As Plush have fans around the world it is important to determine where their members are based. The data made available from Facebook is very unpredictable. The current destination field could be “Cape Town, South Africa”, “Cape Town, Western Cape, South Africa” or “Cape Town, Western Cape”. This format makes it a huge challenge to determine the user’s country. The solution I came up with was quite a task to implement. I created a new database table that lists every country in the world. If the last part of the user’s location matches one of these countries then that value is passed through. I then expanded the table to include states and provinces for a lot of countries. So if a user’s location is “Los Angeles, California”, the database will determine that they are based in the USA.

Aware that not everyone is comfortable with Facebook Connect’s one click login process, I added a manual sign-up option to the registration page. I used the phplist dual registration plugin to add phplist functionality to the default wordpress registration page. I also styled the page slightly to make it clear that the user was still on Plush’s website.

A collection of useful wordpress plugins help to make content really easy to manage.

TubePress syncs with Plush’s YouTube account and automatically imports any new YouTube videos to the videos page and the latest videos sidebar widget.

Bandsintown is a Facebook application that creates a tour dates tab on an artist’s fan page. The app also includes a wordpress plugin to list those dates on your website. With some additional styling I was able to integrate the band’s tour schedule into the shows page as well as a sidebar widget. Bandsintown also includes a myspace widget so Plush only have to update their facebook page to publish tour dates on their website and myspace profile simultaneously.

Twitter Widget Pro is a very simple WordPress plugin with enough classes to make styling a breeze. It was easy to add a list of Plush’s latest tweets to the sidebar.

FAlbum
The Plush photo gallery is powered by a the FAlbum plugin which allows WordPress sites to sync with a Flickr account to dynamically create galleries in the website. I created my own template to make the site fit into the website’s style. The band only needs to update their Flickr account to keep the website current.

Custom FAlbum widget.
I wanted to display the latest photographs in a sidebar widget. I wrote my own custom plugin to work alongside FAlbum to display the latest thumbnails. The plugin is very basic but allows the user to set the number of photographs to display and includes a few classes to make styling easier.

Google Analytics for WordPress makes it really simple to add Google Analytics to a wordpress site. Having created an analytics account for Plush, I only had to add the site ID to the plugin to start recording the site’s traffic.

Admin Bar Disabler proved to be a simple but useful plugin. As the site encourages user registration, a lot of visitors would see the WordPress admin bar at the top of the page. The options for subscribers are fairly limited and I didn’t want users to find the admin bar confusing. I used the plugin to disable the admin bar for all users unless they have admin rights.

I used the standard WordPress text widget to add some html for more sidebar modules, including a Facebook like box and a store widget linking to merch and music.

The cms features built into the twenty ten theme make this project far more valuable for the band. They are able to easily customise the menu, changing the order, adding or removing page links (including external sites). The header photo and background image can also be replaced within the site’s cms, it’s really easy for an admin to upload new images for these sections.

All in all, the new Plush.us is a very powerful artist website; maximising integration with the social web, simplifying updates and driving data acquisition through fan engagement. The project took a long time, but the challenge allowed me to expand my development skills and explore the latest technology. I’m very proud of the end result.

DEVolution recently signed to One More Tune Records so I was tasked with setting up a lot of the duo’s online estate.

I built a simple holding page for wearedevolution.com using a clean design by Kate Brighouse.

The page uses some basic css styling to centre the logo and fix some footer links to the bottom of the page.

I played around with some JQuery functions to elegantly load the free download widget in a lightbox.

The widget is Flash based so I created a standard html form as a fall back option for visitors with iPhones or iPads.

The release of All The Young’s new Live EP meant that the band’s holding page needed to be updated. A full website is still in development so I needed to communicate the new release details without building an entirely new website.

I used the existing holding page layout, replacing the full screen videos with a basic flyer for the new album. The flyer links to the UKUndercurrent store where fans can purchase a limited run of 100 signed albums.

As we’ve just launched a free download widget for the band I included this on the holding page with a bit of JQuery animation. Clicking the link will reveal the widget by elegantly sliding a lightbox out over the album packshot. The widget includes a fallback option to display a simplified html form to users that don’t have Flash. The JQuery slider also has a fallback option for users without JavaScript enabled, instead of seeing the animated unveiling of the widget, they are directed to a bare-bones page containing the widget in flash or html.

The holding page also includes links to the band’s two music videos. These play within the holding page layouts I built for the videos previously.

The tour dates are still imported from the BandsInTown app, synced with Facebook and Myspace.

Every page also includes an email sign-up form inside the drop-down menu. The form data is seamlessly submitted in the background using JQuery.

With all the modifications I’ve made over the weeks, what was intended as a very basic holding page has grown into a fairly impressive website while the full site is still in development.

In the brief period before Clement Marfo’s new website launches, I created a fairly simple holding page.

The page was designed by Kate Brighouse and I got to work making it as dynamic as possible.

The page includes a mailing list sign-up form, a soundcloud player and a styled list of tour dates powered by the BandsInTown facebook app and a twitter feed. To ensure that the twitter feed doesn’t exceed the maximum number of calls to Twitter’s API I wrote a timed fall-back script to display a cached feed and ensure that tweets are always visible.

The release of ‘Revolutions // Live at Wembley’ is a celebration of Biffy Clyro’s incredible live shows. The band is one of the hardest touring acts in the UK and we wanted a way to showcase this.

Following the success of the Awesome As Fuck Map I had built for Green Day, we decided that a similar project would be an ideal addition to biffyclyro.com.

Team Biffy, the members’ area of the website, already has a lot of amazing user generated content, thanks to the system developed by Isle Interactive. I set Richard Copping and Steven Moore the task of using that content to create an amazing visualisation of Biffy’s worldwide tour history.

Adding all the tour dates to a map raised a significant issue – every venue Biffy Clyro has ever played at would need to be marked on the map. So we faced the massive task of finding latitude and longitude coordinates for a very long list of venues. Faye Turnbull, our digital intern at the time, took on the bulk of the work, with help from Cassie Burge and Duncan Pelham. They worked through the very long list of venues and found the coordinates on itouchmap.com/latlong.html. I worked through adding a lot of older tour dates and then our new intern Jonathan Pumphery took over, adding in missing dates and making sure the site stays up to date.

Steven Moore’s work on the map was top class, delivering exactly what I had in mind.

We launched the map with a competition incentivising fans to add their content to the page. Biffy fans who upload their content can win a range of Biffy stuff, including signed boxsets, tote bags, posters and beanies. A few lucky fans can also win tickets to an exclusive screening of the live album, where Biffy will participate in a Q&A session as well as playing an acoustic set. The promotion encouraged a lot more fans to join Team Biffy, and the map was swiftly populated with awesome content, immortalising Biffy’s epic live shows and extensive tour history.

Linkin Park’s latest single, Iridescent, is the lead track on the new Transformers film: Dark of the Moon.

Shazam came on board to help us promote the single and an awesome competition we were running around it.

If fans Shazam Linkin Park’s Iridescent they will be directed to a microsite that allows them to enter the competition. The prize is a trip to Berlin for two people where the winners get to attend a special screening of Transformers 3 with the band.

I built the microsite with the sign-up form based on a design by Kate Brighouse. The page had to be optimised for mobile browsing so it automatically stretches to zoom in and fill the screen on mobile browsers. The competition rules appear in a slick JQuery overlay.

To launch the pre-order campaign for Biffy Clyro’s new live album, ‘Revolutions // Live at Wembley’ we swiftly re-branded all of the band’s online assets.

The official website was given a splash page pushing pre-orders of the limited edition deluxe boxset from the Biffy Clyro store. The page also includes links to the CD/DVD and digital versions on retailer websites.

Kate Brighouse designed the splash page and I put all the html and css together before sending it to Isle Interactive to host on the website.

To highlight the difference between the two formats of the album, I used jQuery to display a lightbox image containing the tracklisting for each format.

While I’m building the new official Plush website the band wanted an updated holding page to promote the new single ‘Dancing in a Storm’.

I assembled a fairly basic page to include the new logo (designed by Pierre Coetzee) and a photograph by Deborah Rossouw.

The page includes a sign-up form linked to phplist as well as social network links and a Facebook like button. I embedded the new single ‘Dancing in a Storm’ using a soundcloud player and customised the meta data to optimize Facebook sharing. Pressing the like button will share the page on your wall along with the embedded soundcloud player, so the song will reach the maximum number of people possible.

I was also asked to include the upcoming tour dates, but I didn’t want to be stuck with the job of constantly updating a static list of dates. I added the bands in town Facebook application and used their simple javascript package to make sure the latest tour dates stay synced between the holding page, Facebook and Myspace pages.

The holding page effectively showcases the new Plush single and tour dates, while encouraging sign-ups and social sharing.

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.

After the initial launch of The Wombatizer it was clear that fans were struggling to think of good sites to wombatize. The Twitter and Facebook home pages can be wombatized, but those pages don’t have a lot of images on them so they won’t reveal all the exciting content and prizes that The Wombatizer has to offer.

I created a Facebook app to sit as a tab on The Wombats’ fan page. The tab features a long list of thumbnails linking to the wombatized version of that site. It also includes sharing buttons to post the glitched website on Facebook and Twitter.

You can also use the Wombatizer directly from the Wombats facebook page. The tab includes an url input box that will launch The Wombatizer.

I took the thumbnail gallery further by updating the landing page of wombatizer.com to use the same design and structure as the Facebook tab. I also added the thumbnails as a news item to the members’ area of thewombats.co.uk.

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

One of our top priority releases this year is ‘Let Them Talk’ – Hugh Laurie’s recording debut. The strategy for this album is very different to any debut release as well as most established musicians. Hugh Laurie is one of the most famous faces on the planet, so his profile is already present. The decision was made to have a high impact launch to introduce Hugh’s musical talent to the world. So on one day we would launch various online assets and promo. The brand new official website was the first part of this launch, so I managed the project with a very quick turn-around.

Kate Brighouse got to work on an impressive design that captures the album’s New Orleans Blues essence.

After adding my feedback to meet functionality and usability challenges I passed the job over to Isle Interactive for the development. Steven Moore and Richard Copping at Isle did an impressive job bringing the design to life and integrating the store.

Carl Screwvala and I always do QA on our sites, so we applied tweaks where necessary. Alex Burford got to work filling the site with content like news, photographs and videos.

The site launched with an impressive amount of traffic and rapidly soared following tweets from Stephen Fry, a YouTube introductory video, a free download widget and the Guardian live stream.

While the official Hugh Laurie website was in production, being prepared for the official launch date, I put a simple holding page up for any passing traffic.

The page was designed by Kate Brighouse. I put all the html and css together to ensure that the page works as expected. The functionality is fairly basic, with a sign-up form, facebook like button, social network links and a link to pre-order the album.

The page will only be live for a few days before the official site launches on the 23rd March.

The Warner Bros digital team recently took over the online presence of The Overtones. As part of a bigger re-branding exercise we replaced the group’s website with a stylish holding page.

Kate Brighouse designed the page and I put all the HTML and CSS together to make it functional.

The website allows fans to add themselves to a world map by uploading photos, videos and stories from the gigs they’ve attended. To launch the site we are running a competition where one Green Day fan will win a trip to New York and tickets to see American Idiot on Broadway.

Our search for amazing Green Day concert stories also focuses on the fans who are lucky enough to be invited on stage. These fans are highlighted in a special Fans On Stage section of the site.

One of the bigger challenges of the project was the internationalisation required for such a global band. The site detects where a user is and provides them with location-specific links to purchase the album as well as translated pages for German and Japanese visitors.

I commissioned Creative Corporation to build the site for us and spent a lot of time testing and tweaking the site. It was great to have the opportunity to manage this project. Most US rock projects are lead by the team in America or the International department. It was quite a mammoth task to run a project with so many people across different time zones involved.

It was amazing to see the positive reaction from Green Day fans when the site launched. The site was populated with stories, photos and video clips so rapidly that it was hard to keep up. The fans on stage section of the site worked out really well, fans have amazing stories from these shows and you can really tell what a highlight it was to join the band on stage.