David Emery Online

When we started working with Rough Trade their site was in a pretty sorry state; it was all frame based, with no CMS underpinning it so updates took far to much work – it was in dire need of a complete overhaul. One of the side effects of having such an old site was that their wasn’t really anything for us to work from – no coherent ‘look’ or branding short of the iconic logo, so it was clean-sheet-of-paper time.

We quickly focused in on the key things that are important about Rough Trade – records and artists. It sounds pretty obvious, but with some labels you find focus elsewhere – the label often has a brand and look of its own that transcends the individual artist or record, but this isn’t the case here. To represent the records properly, and to provide some kind of aesthetic bedrock, we decide to use the artwork as large as we could get away with – hence the jQuery based carousel at the top of the page.

To represent artists we had a go at doing something I’ve been itching to do for ages – individually art-worked pages. Each different artist has their own ‘look’ and imagery, and we felt that trying to squeeze that into a generic layout just wouldn’t work for Rough Trade. Hence, each one looks different – check out Antony’s page, Jarvis’ page or Miracle Fortress’ page for a demonstration of what I mean.

Other things I’d like to highlight include the Live dates page, which features a full page background Google Map, and the audio player which features streaming and downloadable MP3s which you can then embed on your site if you want:

Technically this is – as ever – all based on Textpattern, quite admittedly pushing it to the limit and utilising several plugins (including some hand-written ones) as well as a CakePHP-based admin system for looking after Artists (they’re just a little too custom to fit into Textpattern’s normal article-based content). Otherwise I guess it’s all fairly straight forward…

Damaged Goods Records are a proper little genuine independent record label, and have released records by people like Holly Golightly, Billy Childish, Pete Molinari and even the Manic Street Preachers (they put out their first single). Needless to say it’s been great fun working on their site, although it was a little bit of an exercise in biting off more then I can chew, and digging myself many, many holes of which I had to haul myself out of.

For a start, I decided that to properly try and achieve that ‘punk fanzine’ feel I was going for I would need to do a full page design comp, print it out, staple it together, photograph it and use that as the basis for the final design. From a ‘making it easy to edit, move things and generally make a website’ perspective this was maybe a bad idea…

To rub salt in this self-created wound I had also decided that diagonal lines would be a bit of a focus and – as is probably obvious by the amount of sites that don’t use diagonals – that made everything just that little bit harder. Oh, and did I mention that I wanted to keep everything within a pink/yellow/black colour scheme? Including images?

Yeah, that was a real smart idea.

Images – like the ones you can see on the home page – are uploaded as normal, rectangular full-color photos. I then run them through a GD images-based PHP script that first scales and crops them to the right size, then turns them pink and then finally composes them with the correct diagonal-yellow-background mask. It wasn’t actually that hard but did take a bit of fiddling about with – when I get a chance I’ll do a detailed how-to on how it actually works; I think image manipulation in PHP can really achieve some interesting results so it would be good to get it in more widespread use.

The whole site is – of course – based on Textpattern, and it really pushes it to the limit. The artist pages all rely on the category system, which means that to add a new artist to the site is as simple as adding a new category. However, I did hit up against a few hard walls which means that this site uses a few custom plugins as well (to do things like display the correct artist image on an artist page, based on category).

And yes, the site isn’t fluid width. Sometimes, it’s just not going to be possible – those times mostly being when your design is actually a photo of a website…

damagedgoods.co.uk

This is the second phase of the Adele site, which up until now consisted solely of large video. We’ve kept that, and extended it with all sorts of extra content – news, tour dates, discography info, photos, links and more. Although it looks relatively straight forward, it’s actually got all sorts of interesting bits dotted about.

For a start, it’s got microformats all over the place. The gigs use vcalendars, the main news feed is in hAtom (as is the blog) and the music page marks up the releases using hAudio (which I used here for the first time – not sure I really see the point of it as yet but it took no time to implement so why not!). In the same spirit it’s also got a .ics feed of tour dates so you can easily add them into iCal or another .ics compatible calendar app.

It’s also got all sorts of vaguely ‘social’ aspects – for want of a better term. Comments are enabled all over the place, the photos section pulls in photos from a Flickr group and in place of a traditional forum we’ve set up a Ning page instead. I’m interested to see how this does as we’ve had mixed success with mini-social networks – they seem to be a bit superfluous as they’re never going to replace Facebook et al, but do seem to contain more potential value then a normal bulletin board.

It is – of course! – all based on Textpattern, with a modification of the code we use on the XL site pulling in the blog from the MySpace site. It’s also all nicely fluid width as well, and there’s a nice surprise if you’re running Safari 3.1 and you select a different video on any page other then the home page…

http://adele.tv

It has obviously been a huge privilege to get to work on something for Radiohead, and I’m really happy with the way the site has turned out. From a technical perspective there isn’t really anything too clever going on; it uses sIFR all over the place for text, which wasn’t quite as hard as it normally is to get running.

The code to power the remixes is all custom PHP (luckily not written by me, but adapted from another project) so there isn’t anything I can point you towards on that front – hopefully it will hold up ok with the battering it will probably get today! I couldn’t see many opportunities for Microformats – I guess it could have used some hCards for remix authors and maybe hAtom for the remixes but they seemed slightly superfluous considering we only publish peoples names and no other contact details. It does, however, have an RSS feed so you can keep track of new mixes as they get uploaded.

Obviously you should all go out and have a go at making a mix yourself, but if you can’t be bothered it’s well worth checking out the Holy Fuck mix, embedded here using the natty widget we got made for the site (for that authentic viral feel):

radioheadremix.com

XL is possibly the most important independent record label today, and has an awesome roster including such acts as Radiohead, The White Stripes, Adele, The Raconteurs, M.I.A., Dizzee Rascal, Vampire Weekend and many more. When we sat down and tried to figure out what to do with their website we had a long hard think about what a label with such an extensive and diverse set of artists really needs with a website, and why someone would go there versus visiting an artist website or myspace.

It quickly became apparent that there was almost no way we could keep up with the amount of news and information that sprung up on a daily basis for all these artists without employing people whose sole responsibility it was to keep the site up-to-date, and that didn’t seem like it really made sense. After all, all this info was going onto the internet somewhere, so why do we need to duplicate it?

Hence the concept of a ‘tumblestream’ – halfway between a tumblelog and a lifestream; an aggregator for news from artist sites, myspaces and news sites, photos from Flickr groups and users and videos from YouTube.

Gone are the always out of date news sections you always see on label sites. Gone are things like tour dates, which you can always find somewhere else (more accurately). Gone are artist biographies that are cribbed from press releases that don’t really ‘mean’ anything.

In their place is a single stream of information, updated once every 10 minutes. If you don’t care about all of the artists, you can filter it to only show one (complete with an RSS feed).

I hope you like it – I’m very pleased with the way we’ve been able to go from high concept to reality without loosing anything in the transition.

From a technical perspective, the site is split into two chunks. The front-end is – surprise, surprise! – powered by Textpattern. It’s very good at managing content and pages, so is perfectly suited to a very content heavy site (it’s been running hidden for about 3 months and already has amassed over 2500 posts). However, obviously it doesn’t have any built in way of aggregating content from outside sources so we built a custom back-end for the site in CakePHP.

The CakePHP back-end is basically a RSS reader – based on SimplePie – that keeps track of a list of feeds for each artist; one from their website, one from their myspace, one from their Flickr account or a Flickr group and one from their YouTube account. It also keeps track of a couple of artist specific things – like their website address, and their colour on the site (I’m totally into colour coding at the moment…) – that we couldn’t really hack into Textpattern.

This back-end then checks its feeds every 10 minutes, and if it finds items that haven’t been saved already it injects them into the Textpattern database. We also made a couple of Textpattern plugins to make the artist list at the top of the page (which shows the 15 artist that have the most recent content) and to show the correct artist website link on the right pages. All in all, it was pretty easy to use Textpattern as the front-end page server which was powered by a more complicated content server.

xlrecordings.com