Mick, Keef, Charlie, Ronnie – and us. Oh, and the Greatest 404 Page Of All Time.

I’m now into my 18th year earning a living building and running websites. I’ve been lucky enough to work for and with some household names. But never could I have imagined that I’d end up working for The Rolling Stones. And yet, for the past few months, that’s precisely what I’ve been doing. I’m still not sure it’s actually sunk in yet.

I’m not going to waste time explaining why it’s been an exciting project to work on. It’s The Rolling Stones, for dear’s sake. But one note I will add, for younger viewers, is that the Stones were one of the first ‘real world’ entities to have a website: here’s the Wayback Machine’s copy from 1996. A year earlier, they’d even live-streamed a concert (to an audience, one assumes, of literally dozens) – it was the very moment I decided there was probably a future in this stuff.

Simon and I were brought on board by designer James Stiff, who had worked with the Stones’ team last year, on spinoff site StonesArchive.com. Their existing site was black, and rather funereal. It read like a museum exhibit. It hadn’t kept pace with the development of social networking, or online music sales. And it was running on Drupal. They wanted a ‘total overhaul’, to coincide with the 50th anniversary of the band’s first concert (here’s the setlist), and the opening of an exhibition at Somerset House. Of course we said ‘yes’.

Behind the scenes, it’s the now customary mix of WordPress custom post types and taxonomies. We’re running separate post types for people, songs, albums (etc), videos, and photo galleries. Albums and people also exist as taxonomies, allowing us – for example – to show full credits and track listings for each album, including audio previews.

The entire site is underpinned by the iTunes API. Our starting point was a big data scrape, pulling down details of the 400-ish separate songs in the Stones back catalogue, which we then associated with the relevant albums (plural, in may cases). Of course, in doing this, we couldn’t have picked a harder back catalogue to work with: so many compilations, live albums, and so on. So we’ve also included an indication of the ‘canonical’ version: in other words, the album most normally or naturally associated with a given track. This gives us something sensible to offer in search results… and powers a feature we didn’t quite have ready for launch, but which is truly awesome.

iTunes is also the source of the 30 second audio clips, delivered in m4a format. Great in Chrome and Safari, Android and iOS, even IE: all of whom can play it natively using HTML5’s <audio>. But not Firefox or Opera. So we’re having to include a Flash-based fallback, using the jQuery-based jplayer. Hang on, wasn’t HTML5 meant to spell the end of cross-browser chaos?

There’s plenty more I could waffle on about here: the all-widget homepage, our use of WPEngine or Twitter Bootstrap (thanks to both!)… but it’s clear there’s one feature which has excited people more than most. Ladies and gentlemen, I give you the error page they’re calling ‘Probably the Greatest 404 Page Not Found Error of All Time‘. (And that’s a guy called Jesus saying that, so…)

It’s not unusual for a relaunched website to see a lot of people hitting its ‘404 not found’ page, as people click on now-invalid links or bookmarks. But we’re seeing people deliberately trying to hit it, in vast numbers. It’s getting its own articles on sites like Gizmodo and Mashable. I’m half-expecting to see it trending on Twitter by the end of the day. People are sending me vast numbers of suggestions of musical 404 pages for other Rock Legends. It’s all just a little bit nuts.

What’s more exciting for me, personally, is the way we (by which I really mean Simon W) approached the site development. The functionality, wherever possible, has been written for easy reuse. So the next time a legendary rock act with an extensive back catalogue comes calling, we’ll be able to get them to a working prototype in double-quick time.

Our thanks go to all those who made it possible: EC, the guys at WPEngine, the Twitter Bootstrap crew, the WordPress community… and Bruce Springsteen, whose website – relaunched on WordPress earlier this year – was a source of inspiration.

But in particular, thanks to James Stiff for bringing us on board in the first place, providing us with some gorgeous visuals to work with, coming up with the 404 idea, and from my own selfish perspective, supplying everything in perfectly web-ready form.

PS If anyone happens to see David Bowie, tell him I said ‘hi’. ­čśë

This has been a Code For The People production, on behalf of the Greatest Rock N Roll Band In The World.

Cutting down on cookies: practical tips

The Government Digital Service’s Implementer Guide for the new cookie rules recommended that site owners should audit their sites, and look to reduce ‘unnecessary and redundant cookies’. With or without the new rules, it’s still sound advice. So I thought I’d share a couple of things we’ve done for clients, which might be helpful to other people.

It’s easy enough to look at the cookies being dropped by your own site, but life becomes a lot more difficult when it comes to third party services. You might not realise it, but every time you embed a YouTube video on a page, you’re exposing your users to YouTube cookies. And if you’ve included Twitter’s excellent profile widget on your site, guess what? – it’s dropping cookies too.

Both services would probably argue that any user tracking is ultimately for users’ benefit: and in fact, unlike many in the web industry, I have some sympathy for that argument. But I’m not entirely comfortable with government websites acting as (unwitting?) conduits between users’ personal web histories and third-party services.

YouTube

YouTube offers a seamless solution: a parallel domain, youtube-nocookie.com which gives you the exact same YouTube playback function, but tighter controls over cookies. If you’re ever embedding a clip manually from youtube.com, you’ll see an option to ‘Enable privacy-enhanced mode’: tick this, and you’ll see the embed code’s reference to youtube.com change to youtube-nocookie.com. Easy as that.

(The name is slightly deceptive: it doesn’t completely eliminate the use of cookies. YouTube’s help pages indicate: ‘YouTube may still set cookies on the user’s computer once the visitor clicks on the YouTube video player, but YouTube will not store personally-identifiable cookie information for playbacks of embedded videos using the privacy-enhanced mode.’)

On a couple of client sites with large quantities of videos, FreeSpeechDebate and the Government Olympic Communication site, we use a WordPress custom post type to simplify the process of adding YouTube content. All they need to do is paste the URL of the clip’s page into a WP editing screen, and we extrapolate all the rest: embed code, thumbnail image, dimensions and so on. The videos are then included automatically at the top of the appropriate page.

As seen at goc2012.culture.gov.uk

We’ve now altered that functionality to serve all videos from the youtube-nocookie.com domain; and also to include the youtube-nocookie.com domain in the embed code we offer. A fairly simple case of find-and-replace, initially in the page template’s PHP, and subsequently also in javascript if users want to customise the dimensions.

Twitter

Avoiding Twitter’s cookies has been slightly trickier. Our solution has been to move clients away from the official Twitter widget, instead deploying my colleague Simon Wheatley’s well-established Twitter Tracker plugin (downloaded well over 10,000 times), which we’ve adapted to permit cookie-free usage.

Twitter Tracker adds two new WordPress widgets: one showing Twitter search results for your chosen term or hashtag, the other displaying all tweets by a given user. It includes local caching of the data, minimising traffic to Twitter and (in all likelihood) rendering the pages much faster – for the loss, admittedly, of a ‘real time’ view, which may or may not be important to you.

However, because the widgets call users’ profile images live from twitter.com, cookies were still being dropped. So there’s now a ‘partner plugin’, called Twitter Tracker Avatar Cache, which – as the name suggests – downloads any Twitter profile images and saves them locally within WordPress. No need to call them in from twitter.com, and hence no cookies. (For those who don’t want this extra functionality, the base plugin will continue to work as it always has.) It’s available now from the WordPress plugin repository: find it via the ‘Add New’ screen in your WordPress admin interface.

For most people, this will probably seem like overkill – and in fairness, it probably is. But for quite a few of our clients, it’s been a helpful way to avoid some of the more sensitive issues around cookies and usage tracking, without compromising on site functionality.

Free Speech Debate: our most ambitious project ever

Since last spring, Mr Wheatley and I have been working with Guardian columnist Timothy Garton Ash, in his role as Professor of European Studies at St Antony’s College, Oxford on a project called Free Speech Debate. It’s been the main focus of my attention for the last six months or more – which explains why the blog has been rather quiet of late.

As the name suggests, it’s a site for editorially-led discussions on issues of freedom of speech, in today’s socially-networked world. And as you might expect from someone so well-known and well-connected, the Professor has managed to secure contributions from a host of famous names in the field, from around the world – from Jimmy Wales to Max Moseley, not to mention numerous writers, and the odd Nobel Prize winner.

We’ve done similar ‘editorially-led discussion sites’ for numerous clients in the past, but never anything on this scale. You see, one of the site’s ‘ten draft principles’ includes the right to speak in your own language. So we had little choice but to publish in multiple languages. And yes, that includes the difficult ones too.

The site went live initially in English-only. But in the last week, we’ve rolled out German, Turkish, Spanish and Chinese… with Arabic, Farsi/Persian, French,┬áHindi, Japanese, Portuguese, Russian and Urdu to follow shortly.

Our original plan was to use the WPML plugin for WordPress: we knew it had weaknesses, but it was the best of a disappointing bunch. However, for reasons I won’t go into here, we subsequently decided to write our own plugin, based on modern WordPress features such as custom post types and taxonomies. It’s called Babble; and I’m delighted to say, as soon as we’ve tidied it up a bit, we’ll be open-sourcing it.

Babble's create/switch menu

The way we’ve implemented Babble on FSD, you enter each post (etc) in the site’s default language first, then – using a menu added to the Admin Bar – you can ‘create’ a translation in any of the languages you’ve enabled on your site. All the metadata – taxonomies, comments on/off, and so on – are inherited from the default language; so all you need to do is translate the text, and hit Publish. You’ll even see the WordPress admin interface in the appropriate language as you’re translating.

Comments are merged across translations: which means you’ll potentially have a discussion thread made up of comments in different languages. Problem? No. We’ve implemented Google Sectional Translate, to let you translate each comment instantly into the language of the page currently being displayed (via ajax).

English comments on a German page, with "├ťbersetzen" option

The entire site, in every language, is being generated by the same WordPress theme, be it a left-to-right language like English, or a right-to-left like Arabic. Building bi-directional code has left my head spinning on numerous occasions, I can tell you – and prompted me to write, in effect, my own direction-agnostic CSS framework. If you think that sounds easy enough…. go ahead and try it. Then think about the implications of showing – in some circumstances – content in both right-to-left and left-to-right languages simultaneously on the same page.

Farsi, aka Persian, ie Iranian: note the flipped logo

So much for the translation of page content: what about the stuff that’s inevitably hard-coded into the theme? For that, we’ve used GlotPress – the translation management web app, as seen at translate.wordpress.org. To be completely honest, it doesn’t yet feel like a finished product: one bug in particular derailed us for a day or more, and I consider myself very lucky to have found a solution. But when it works, it’s excellent.

There’s a dedicated section for audio/video content, powered by a custom post type. In fact, this is probably the code which gives me the most pleasure: to post a video, all the editor needs to do is paste in the URL of its YouTube page, and we do (nearly) everything else automatically – even going as far as pulling the video’s preview image into WordPress, and attaching it as the post’s Featured Image. For audio clips, we’re doing a combination of HTML5 and Flash embedding of MP3 files, to cover as many browsers as possible.

That’s not to mention the seamless MailChimp integration on the WordPress register page. Or the voting mechanism. Or the multi-server configuration, in preparation for some anticipated traffic peaks. Or the live webcasting. Or the connections into Sina Weibo, LiveJournal and Mixi, as well as Twitter and Facebook. Or… To be honest, we’ve been working on it so long, there are probably a few custom features in there that I’ve completely forgotten.

It’s unquestionably the most ambitious project I’ve ever taken on: and seeing it launch this week has prompted feelings of pride, anxiety and relief in almost equal measure. I now know more about quotation marks, soft hyphens and non-Latin typography than I probably ever wanted to know.

Thanks go to Timothy, Maryam, Judith and the entire team at Oxford; Matt and Gemma for design assistance at various stages; Jools for his customary server wizardry; and Simon W, without whom…

Oh. Next week, we have our first scoping meeting for Phase Two. Gulp.

Taking Slugger O’Toole to the next level

If you have any interest in Northern Ireland politics, you’ll be familiar with Slugger O’Toole. It’s by far the best known blog in the province, and manages to pull off the impressive feat of appealing to both sides of the sectarian divide – even to the point of winning awards at ceremonies in both the UK and the Republic. And as an Ulster exile myself, it’s a site I’ve followed for a long, long time.

Late last year, Slugger received investment from Channel 4’s 4iP fund, to take things to the next level. In practice, that meant an update to a design that was really showing its age; and a move from Expression Engine to WordPress. But things didn’t work out with their initial Belfast-based designer; and a few weeks ago, they got in touch to see if Puffbox could help. The no1 website from my part of the planet, wanting to move to WordPress? How could I possibly refuse?

The brief was to reflect the rough and robust nature of the site’s conversations; and pretty quickly,we found a visual style which seemed to strike the right note. But when it came to wireframing, we hit an interesting question: did Slugger want to be more of a blog or a news site?

Our initial templates were definitely more bloggy in nature, but they just didn’t feel right. Like a lot of sites, Slugger’s traffic has always been driven by news events. And as I think I’d always suspected deep down, we eventually concluded it had to be more newsy – and started again.

Most of the effort went into the homepage – and specifically the opening frame (or two), which could well be from a newspaper site, if it weren’t for the ‘torn edges’ effect. And therein lies the aspect of the project I’m most proud of: the self-managing ‘front page’.

If it was a newspaper, it would have an editor (or probably several) tasked with choosing the right order for the stories, tweaking the headlines, crafting snappy summaries, selecting suitable imagery, and so on. But Slugger is run by a loose bunch of volunteer contributors, and couldn’t commit to that kind of management overhead. So instead, we’ve programmed WordPress to select the stories, and sort them, based on a number of predefined rules.

It selects stories based on their date of posting, the editor’s manual identification of ‘important’ stories, whether or not it’s got pictures, and most interestingly, the volume of comments. So a story will almost always get some top-of-page exposure when it’s first published, but will soon drop ‘below the fold’. However, if it generates a good number of comments, it will jump back up to the top – and in all likelihood, even higher than before.

Sure, it’s not quite Digg or Google; but I think it’s interesting that the site’s readership can influence the homepage almost as much as the editor. And it seems entirely in keeping with the ethos of a site whose true strength is in its sense of community.

On the technical side, it’s been really pretty tricky. Thousands of already-registered users, tens of thousands of posts, hundreds of thousands of comments – and the server procured by our predecessors on the project just wasn’t up to the task. Things were agonisingly slow on launch day, no matter how many magic tricks Simon Wheatley performed: so we had to make hasty plans to move it somewhere beefier (and as it turned out, cheaper). Thankfully though, we seem to be in calmer waters now.

Knowing the Slugger readership as I did, I feared the worst when it came to reader feedback. In fact, it’s been overwhelmingly positive. People seem to like the visual approach, and appreciate what we’re trying to achieve with it. We’re fixing the (relatively few) bugs which have arisen, and the contributors are getting used to the new interface and the new functions at their disposal. And of course, this is really only the start: having moved everything over into WordPress, all sorts of possibilities now open up.

Several gold stars go to Simon Wheatley, for going far beyond the call of duty on this one; and thanks to Matt at Dunston Graphics, for getting the design just right, and coping admirably with my outrageously late change of strategic direction.

Live text commentary in WordPress

I don’t usually blog about projects until after they’ve happened; but I’m going to make an exception for something that’s going to happen later today.

For just about a year, we’ve been looking after the website for The Big Care Debate, the government’s large-scale consultation on the funding of long-term social care. We’ve had a great relationship with the team at the Department of Health, and we’ve done some fun, innovative and highly effective things: commentable documents, Facebook activity, online questionnaires, even user-submitted photo galleries.

The consultation process is reaching its conclusion, with the publication of the government White Paper on the subject. (For those who don’t know the jargon: a ‘green paper’ presents options or starts a debate, often leading to a ‘white paper’, which is a declaration of government policy.) Oh, and as you might have noticed, there’s an election on the cards, and we’ve already had a few skirmishes on this very subject.

When we first met to discuss plans for the White Paper publication, one idea was to ‘live tweet’ the launch event on Twitter; but I’ve never been a fan of sudden, frantic bursts of tweeting by one of the hundred-odd accounts I follow. (And indeed, I’ve ‘unfollowed’ certain people for doing precisely that.) So we reworked the plan, taking as our inspiration the undoubted success of the BBC’s ‘live text commentaries’ – seen at its best on the sports site on a Saturday afternoon, but used with increasing frequency on the news site, for set-piece events like PMQs.

So over lunchtime, we’ll be supplementing our live video stream with a live text commentary – using ajax and some custom WordPress wizardry. It’s a very simple concept at heart. A live commentary is just a chronologically-presented series of short text chunks… just like a list of comments on a post. So that’s what we’re going to use.

The site editor will be entering his comments via a hidden, ajax-powered comment form: and, as with any WordPress comment, he’ll benefit from features like automatic text formatting, including conversion of URLs into clickable links. Meanwhile, users will see each new comment appended to the bottom of the list, with a cute colour highlight, but without the need for a full page refresh.

Naturally, this means a much increased workload for the web server, particularly if – as we expect – we attract a sizable audience for what looks like being front-page news. WordPress and its plugin collection can do a lot to help; but we’ve taken a few additional server-level steps to ensure all runs smoothly. All the credit for this goes to my regular collaborator Simon Wheatley, who knows a thing or two about these things, thanks in part to his work for Stephen Fry.

There are plenty of options for running live text commentaries like this, such as the excellent CoverItLive. But there are a number of benefits to running it within WordPress: not least the fact that afterwards, you’ll instantly have a bullet-point summary of the key points at your disposal. And as we’ve been building the functionality, we’ve been getting quite excited at other ways we could use it.

If you’re at a keyboard at lunchtime, please drop by, and let me know how you find it.

DFID’s new group blog function

dfidgroups

We rolled out a fairly modest enhancement to the DFID Bloggers website this week: probably unnoticed by most users, but one I’m quite proud of. At its heart, the DFID site is a group blog; but we do a few things to present it as a network of individual blogs by individual bloggers. Then the question came – ‘could we do a group blog?’

What we’ve done is effectively hijack WordPress’s category functionality, turning it into a grouping function. We’ve created categories corresponding to the various ‘group blogs’ we want to run; and with the help of another custom plugin, we’ve added the ability to give each category its own ‘user image’, same as we’ve done with individuals. The WordPress category archive template then becomes, effectively, a ‘group homepage’ template.

Then, with another plugin, we’ve added a function to give each individual user a ‘default category’. So when they go to write a post, the appropriate category is already ticked – or to put it another way, it’s already identified as being for the appropriate ‘group’. But as with any WordPress categorisation, you have the option to tick other categories, adding the post to multiple group blogs; or you can untick your default category, if you want to blog in an individual capacity for a change.

Finally, we’ve changed the homepage code to handle both individual and group blogs. It took a while to get the logic right – but now, you should only ever see one entry per group blog, same as you only see one entry per individual blogger; and it all gets sorted together into reverse chronological order.

The result is a remarkably flexible blogging platform, with the ability to do solo blogs, group blogs, or any combination thereof. And as with the previous DFID work, we’re releasing the plugins to the world: the Default Categories plugin should prove particularly useful for people running group blogs.

Once again, it’s been a pleasure to work with Simon Wheatley: the man who makes my WordPress dreams come true. And the DFID guys have been great again too, giving us a general steer and letting us work out the best way to do it. I love this project.

DFID Bloggers: tales from the front line

The latest Puffbox project gets a soft launch today, ahead of a formal (and hopefully high-profile) announcement next week. DFID Bloggers is a satellite site off the main Department for International Development website, and follows in the FCO’s footsteps of giving front-line staff a blog on which to talk about their work and experiences.

In some respects, it was an obvious thing for DFID to do. Their work isn’t generally seen by the UK taxpayers who fund it. By definition, they operate in exotic and/or difficult locations, and have powerful stories to tell. They saw the value in putting some human faces on it all; and in opening lines of communication with anyone worldwide with something to contribute. The Foreign Office had already set a helpful precedent: my brief was effectively ‘can we have what they’ve got, please?’

Using WordPress was, of course, a given; but perhaps surprisingly, I took the decision early on to use the standard version, rather than MU (Multi User). Everyone is effectively writing to the same ‘group blog’, allowing us to aggregate and consolidate the presentation (eg on the homepage, and in the main RSS feed). But the WordPress approach to output templates allows us to give each blogger a personal homepage, with a fuller biography, a filtered RSS feed and an archive of posts. The best of both worlds, if you like – with fewer concerns about the speed of updates and the compatibility of plugins.

All the standard blog functionality is in there, plus a few things you won’t have seen. The homepage shows the latest post for each ‘active’ blogger; when they haven’t written something for a fixed number of days, they’ll automatically drop down into an ‘archive’ list. There’s some customisation of the standard WordPress user profile, adding a new ‘job title’ (ie short biography) field, and incorporating Google Map functionality, for the bloggers to pinpoint their location. This geo-data gets aggregated into a Bloggers Map page, with the popup ‘speech bubbles’ showing a summary user profile, including a link to their latest blog entry.

I can’t say how pleased I am with the results. I’ve been collaborating with a couple of new contacts – my near-neighbour Tony Parsons on the design side, and Simon Wheatley (who I met at WordCamp) on the technical stuff that was beyond me. Both have been truly brilliant. And I have to say, the DFID guys have been fabulous too – giving me all the freedom I could ask for. It’s been a perfect combination, and I think it shows in the site.

In the spirit of open source, Simon W has released the custom WordPress plugins to the world via wordpress.org. In reality, you’ll only be interested in them if you’re wanting to build a carbon-copy site; but they are now ‘out there’, and you’re welcome to them.

I’ve also been working with Shane McCracken and his Gallomanor team (including Dave Briggs and Griff Wigley), who have been tasked with training the DFID volunteers in the art of blogging. Judging by the initial posts I’ve been reading, they’ve done a great job. I’m sure they will tell their own stories in due course.

Quite honestly, I think it’s the best thing Puffbox has yet produced. Great design, great functionality on front and back end, and a client committed to doing it right. With so many great stories and pictures out there, I hope it can have a big impact.

And by the way… it’s no coincidence that the site is launching just ahead of Blog Action Day next Wednesday (15 October), when bloggers have been asked to write something about poverty and development issues.