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.

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.

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.

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.

There was a mad rush to get the new style up on thewombats.co.uk pushing links to pre-order the album. Normally our developers at Isle Interactive will handle redesign requests but due to the miracle required to meet this deadline I had to take things into my own hands.

Firebug came to the rescue, allowing me to test all the necessary CSS changes and edit the files. Using images and hex values provided by Kate Brighouse, I was able to provide the developers with a list of files that needed to be replaced, so all they had to do was switch them on the server. Firebug has always been my favourite development tool and this project really proved how amazing it is.

I was asked to create a holding page that would introduce All The Young and showcase their new music video.

Kate Brighouse designed a header banner to float above a full screen flash player. I used jquery to make the 3 boxes slide out when the user’s mouse hovers over that section of the header. The sign-up form uses some ajax to validate and submit the form.

I stretched a Brightcove player to automatically play the video as a full screen background. The player includes some subtle controls that fade out when the mouse isn’t moving over the video.

It’s a very stylish and simple holding page that effectively showcases the band’s first single.

My sister, Laura Yates, recently opened a studio in Johannesburg. She has been a Nia instructor for a few years and was eager to set up her own teaching space. She asked me to build her a website to promote the new studio.

I got to work building a WordPress site using the Thematic Framework to streamline the process of building a custom theme.

The site’s header is an animated Flash banner. I used Illustrator to trace photos of people in various Nia positions before animating the images in Flash. I ran a simple conditional statement to ensure that the animation only runs on the home page, all other pages feature a static image of the traced movements. The same image is also set as a fallback for browsers that don’t have Flash installed.

To help Laura communicate with her Nia students and anyone with an interest in Nia, I set-up a phplist mailing list. I created a very simple html mailing template and used Jesse Heap’s PHPlist plugin to add a sign-up widget to the site.

The photo gallery is powered by the NextGen Gallery plugin, making it easy for Laura to upload and manage photos herself.

Social sharing is encouraged throughout the site with AddThis powering a Facebook like button and sharing features on every page.

I turned to Google Calendar to power the studio diary and upcoming events. I used Google Calendar Events to sync a calendar with the upcoming events module. Two calendars are combined and embedded in the class schedule and upcoming events page.

Nialonehill.co.za benefits from a number of useful WordPress plugins working behind the scenes.
All in One SEO Pack
Slimbox
Dynamic Widgets
Google XML Sitemaps
Asynchronous Google Analytics for WordPress
Redirect All Types
WP CSS

The combination of WordPress, the Thematic framework and useful plugins meant I could quickly deliver an effective website with all the tools needed for my client to maintain her website and add content without my help.

I have created a few pages for them as well as basic html mailers linking to the promo pages. As a standard each promotion includes flash players to stream songs from a secure StreamOS server or embedded videos in a Brightcove player.

The new dance label in Warner’s catalogue, OMT Records, needed an online presence to be built from scratch. I set about building a microsite for the label’s official domain based on a very slick design by Kate Brighouse.

The site uses a simple JQuery slider to display photographs in a slideshow. The slideshow is currently promoting the release of the ‘Superclub’ compilation.

The page includes a basic flash player looping a track as well as all the standard social network links, a facebook like button and a signup form for the mailing list.

James Rhodes is a great project to work on because he is so different to most of the artists on the label. He is a classical pianist with rock-star quality. He is a truly fascinating character.

The website is one of my favourites because it does something really interesting with the same tools as all our other sites. It is built on the same platform as Biffy Clyro, Fenech-Soler and Cee Lo Green yet it looks very different.

The site was designed by Dave Brown of Ape Inc. Dave is a very talented designer best known for his work on The Mighty Boosh (he also plays the part of Bollo).

The intro video was designed by Dave Brown and animated by Nigel Coen at Nipple.

The site was developed by Isle Interactive using their platform. Andy Jones at Isle put a lot of care into this project adding really nice touches and attention to detail that brings the site alive.

Jamesrhodes.tv shows what can be done with great creative design and enough time to focus on the details.

The development of full websites for Warner Music UK involves a number of people. I project manage certain aspects of a site build, liaising with designers, developers and the Warner D2C (Direct to Consumer) team.

The Fenech-Soler website was designed by Retrofuzz.
As usual the site was developed by Isle Interactive using their Platform.

Fenech-Soler has amazing artwork resulting in fenechsoler.co.uk being incredibly slick and stylish.

Fenech-Soler are one of the most exciting new acts to join the Warner stable. They’re signed to B-Unique Records but licensed to Warner Bros.

While the new website is in development we need a decent holding page to collect data, list tour dates, display the latest video and share basic information through a twitter feed.

The band has incredible style and imagery so Kate Brighouse did an amazing job designing the page. I then wrote the html, css and php needed to bring it all to life.

http://www.breakfromtheasylum.com

Disturbed’s UK Marketing Manager, Katherine Parrott, chose to do something more interesting than regular print ads to promote the band’s new album.

Through a partnership with Metal Hammer, she ran a highly engaging competition/puzzle throughout the pages of the magazine. The puzzles pointed readers to breakfromtheasylum.com where they would need to enter the answers to access a free download.

As an in-house project, Kate Brighouse designed the holding page and I built the microsite. The site’s functionality is fairly simple so I used Javascript for validation along with the jquery framework for some basic animation.

http://www.thewombats.co.uk/

The timeline for the new Wombats album is much like the band: fast, crazy and filled with surprises.

The first single was suddenly given a release date and radio play while the new website was only in very early development stages. It was important that information and branding for the new single went public instantly. I had to build a simple holding page to focus on the new single as well as encouraging pre-orders and mailing list sign-ups. This was based on the single artwork, designed by Doug Mercy. I added in a twitter feed and tour dates to complete the picture.

Joe had a great press picture that would be perfect to use as a header image so I extended the wall in Photoshop and developed a fairly basic layout around that.

The website integrates seamlessly with other sites in his online profile. All photographs are directly imported from Flickr thanks to FAlbum. All videos are automatically imported from a YouTube playlist, thanks to the TubePress plugin. Tour dates are added to artistdata.com which pushes them to numerous sites including the official website. The header includes the official twitter feed and the sidebar also includes a customized facebook fan bagde.

The “listen” page uses an adapted version of the Tierra Audio Playlist Manager plugin, making it easy to add songs and edit the playlist. This was customised to include album artwork and links to purchase songs.

The site also uses phplist to manage mailing list subscriptions.

Communion has roots as a London club-night founded by Ben Lovett (Mumford and Sons), Kevin Jones (Cherbourg) and producer Ian Grimble.

The website was designed by Franz Jeitz of Fudgegraphics, who has worked on the Communion brand identity for well over a year.

My task was to convert the Photoshop design into a working WordPress theme. Once the design was in place I enhanced the site with a custom plugin to display the event flyers. The live page and next shows widget are controlled by a php script that ensures the flyers are automatically displayed as upcoming or past shows.

The label’s mailing list is managed through phplist and an iframe widget to allow signups without leaving the current page.

To promote the release of “Communion”, a compilation of nu-folk talent, I integrated a streaming flash player to be placed on the artists page. The mp3 player is modelled on the album artwork rather than using a generic flash player.

John McKeown’s online presence required an overhaul to prepare for the release of his official debut album. The brief for the new website was to keep it simple, strong and bold. With the existing content in place, I developed a new custom WordPress theme based around the new press pictures.

The site uses a few custom plugins and widgets. I developed a simple facebook fan box widget that can be configured from the WordPress dashboard making it simple to change the widget size and number of fans displayed.

The “listen” page uses an adapted version of the Tierra Audio Playlist Manager plugin, making it easy to add and edit the playlist.

Adding new live shows is made easier by integrating data from artistdata.com. Artistdata submits event information to numerous sites, including the official John McKeown website.

The new site is configured to display correctly across browsers and monitor sizes. The background image even resizes dynamically to fit larger monitors (see this screenshot of the site on a 27inch iMac).

The first release from Communion Records is a compilation featuring indie-folk’s finest new talent. The initial release strategy meant that each vinyl copy of ‘Communion’ would include a unique code providing access to a free digital copy of the album. I developed a download system to check a user’s code and ensure that it expires after each song is downloaded. The urls of the files are also protected so that the songs can only be downloaded with an access code. I built the system using PHP and MySQL to function within the existing WordPress site.
The label decided on a different delivery route for the album so unfortunately this system never made it into the public domain.

In November 2009 Musketeer Records licensed the Native Noise brand for the release of ‘Native Noise Collection Vol.1 – The Seether Sessions’. The first in a series of planned releases to promote South African artists features the country’s most successful rock band. The Native Noise Collection includes acoustic versions of Seether’s biggest hits as well as interviews with the band. The album artwork features a number of my Seether photographs from various South African tours.

I launched a mini-site to promote the album and give fans access to additional content, like photographs, wallpapers and a desktop screensaver. The website is a very simple WordPress system with a custom built theme based on the album artwork.

I’m really excited that The Native Noise Collection Vol.1 – The Seether Sessions is now available from all good music stores across South Africa.

You can order the album online from the following retailers:

The album has only been released in South Africa but OneWorld.co.za and Kalahari.net usually do international deliveries.

To celebrate the release I have created a brand new website dedicated to The Native Noise Collection at http://www.nativenoisecollection.com. The website is fairly basic at the moment but keep checking back as I’ll be adding lots of cool stuff in the weeks to come.

I have also created a Native Noise Page on Facebook, become a fan and stay in the loop with all the latest news about The Seether Sessions.

The official John McKeown website is built on a WordPress back-end. I created a custom theme to represent the album artwork for ‘Things Worth Fighting For’ and have used and adapted a number of powerful plugins to enhance the website’s appearance and usability. The website is content-rich, including photo galleries, music videos, lyrics, a gig guide and an integrated streaming mp3 player. The site includes a password protected press area for high resolution images and full album streaming.

A VIP Area also exists to provide exclusive content for fans that become members of the site. The sign-up process has been customized and enhanced to automatically add members to the mailing list. This VIP area was used for an exclusive online broadcast of John McKeown’s album launch showcase.

When I started working at Beatroute Records the company had just been resurrected, so I was given a blank canvas to start with. We went with a clean white design with a sketch theme. The site is built on a WordPress back-end with a bespoke theme.

The site includes a customized online store, powered by the WP E-commerce Plugin. I enhanced the site’s functionality by editing plugins and writing custom code for widgets and sidebars. The website is optimized to streamline the process of adding or updating news, artist pages, links, digital releases etc.

I built the Musketeer Records website from scratch. The brief called for an easily updateable website to showcase numerous artists. I built a custom CMS back-end to allow the Musketeer staff to easily add and edit information including news, events, artist pages and releases.

The site combines a number of technologies built on an ASP.NET platform to store information in a SQL Server 2005 database. The website is enhanced by a dynamically updated Flash menu as well as Javascript and advanced frames to allow seamless transitions between pages.

Technologies used:
* ASP.NET
* Visual Basic
* SQL Server 2005
* Adobe Flash
* XML
* CSS
* Javascript
* Adobe Photoshop

The Maya Dance Company required an online presence to advertise their services. The website would primarily consist of static data, so a simple HTML website using CSS would be ideal. The website has a basic admin panel to allow periodic news updates to a SQL database.

Technologies used:
* ASP.NET
* Visual Basic
* SQL Server 2005
* CSS
* Adobe Photoshop