Bang goes our 100% record


It’s with some regret that we note the end of Puffbox’s winning streak, as regards web work for political candidates.
Thus far, every client who has stood for election to a political office of some kind has been successful. But our run came to an end on Friday night, with the announcement that Mike Tuffrey had fallen just short in his bid to win the Lib Dems’ nomination for London Mayor. Brian Paddick came top on first preferences by just 57 votes; in the head-to-head second round, after transfers, Paddick took it by 91. (In case you’re wondering, Lembit Opik finished bottom of the poll, with just 8% of first preference votes.)
It’s a bit of a shame, as we had some really nice enhancements ready to go on Mike’s website tomorrow morning: think MailChimp plus Gravity Forms plus a custom post type and taxonomy, with a bit of ajax magic on top. Some nice design work from my regular collaborator, Matt Budd. (Oh, there was also talk of a weather-sensitive homepage; but we ran out of time.) But whilst they won’t ever go live as we envisaged last week, I’m sure they will appear online in some form or other, in projects to come.
Well, maybe not the weather-sensitive homepage.
It’s been a fun project to work on, and has taken me into areas I hadn’t previously explored in much depth. Many thanks to Mike for having us on board; and for giving us so much creative freedom throughout.
Now… I wonder what technology brianpaddick.com is running on? 😉

LibDems' tech policy paper backs open source, mobile-friendly websites and sarcastic tweets

One area where the LibDems were conspicuously – and perhaps surprisingly – lacking at the last election was technology policy. In fact, it hadn’t (formally) updated its thinking on the subject since 2003. But a working group was set up soon after the election, chaired by newly elected Cambridge MP Julian Huppert. A consultation paper was published a year ago; and as per the advertised schedule, a full-on policy paper (pdf) is being put to their annual conference next month. (Thanks to Richard Parsons for the tip-off.)
Under the rather curious title of ‘Preparing the Ground’, and bearing the somewhat ominous reference number 101, it sets out ideas ‘to put IT at the heart of government, to create a liberal and open environment for business, and to secure a better deal for citizens.’ And it’s well worth reading through its 20-odd pages: there’s some genuinely good stuff in there.
The first half concentrates on copyright and intellectual property issues: and as you might expect from a conference paper, there’s regular reference to the party’s liberal values. The paper restates a general preference in favour of free speech and self-policing, as well as a desire to ‘avoid well-intentioned but badly drafted rules’ around policing the internet  – quite timely, amid talk from their Coalition partners of switching off social networks for a few hours, when we all need to calm down.
There are a few specific proposals, such as the suspension of IR35, repealing large chunks of the Digital Economy Act, and an in-context defence for Twitter Joke Trial scenarios. But it’s the underlying tone of the commentary which is most encouraging. Huppert and co clearly get this stuff.
The second half is much more natural territory for this here blog: ‘filling in the gaps’, particularly as regards the public sector’s use of technology. It starts with a rather bold statement:

It is essential that decision-makers and their advisers have a deep understanding of the impact of IT across society and a vision for what it can provide.

The proposal is that ‘a specific government office be established, encompassing the work of the current UK Government Chief Information Officer and staffed with experts in the IT field. This new government office would advise all other departments of ways in which IT can improve efficiency and quality of service to the public, and engender a culture of online engagement with the public.’ Civil service and local government managers, it suggests, should ‘undergo a serious period of initial training in the impact and current implications of IT, [to] be refreshed annually.’
Noting the high levels of mobile phone ownership among the lower social classes, there’s a specific recommendation that ‘the government make all appropriate public services available online and accessible by an average retail mobile phone. This may mean, in some cases, trimmed down versions of websites with richer content.’
And there’s endorsement – as you’d expect from the LibDems – for petitioning at all levels of the political process, ‘from parish council to European Parliament’. But whilst there’s a broad welcome for the new e-petitions framework, they want to go further:

We believe that the system should also encourage the formation of communities around both supporters and opponents of the proposition. Petitioning should be more than just a signature; it has the potential to foster more genuine involvement in the political process, making it easier for people to express their views effectively.

They go on to suggest:

The government should establish an e-Democracy centre to initiate and encourage the use of tools by individuals, communities and government at all levels, funded by central government on a permanent basis.

There’s also an explicit, indeed a ringing endorsement for government use of open source… and more.

It is our considered view that open source development is desirable and should be promoted… The government should ensure that it owns the code that it has paid for, and then share it for free within the public sector in order to avoid different parties paying external firms to develop the same software. We would like to see the public sector embrace collaborative development along the lines of websites such as Github.
One way of promoting open source would be for the government officially to support the use of those open source community websites which perform public services to a similar or better standard than official publicly-funded websites. The government could also consider providing resources to the creators responsible. Formerly it has been known for the government to attempt to replicate the work of such websites.

Nice… but I’d be against a separate ‘Github for government’, if that’s what it’s suggesting. Now that we’ve (more or less) won the argument for using open source for core government business, the next step in the evolutionary process is for government to systematically start sharing its insight, and the fruits of its labours, with everyone. (Or perhaps that’s what they meant by ‘support’ and ‘providing resources’ for third-party websites.)
There’s plenty more commentary over at Richard’s edemocracyblog. He summarises it as ‘a step forward for eDemocracy’, and I’m inclined to agree.
I’ve long been amazed that the LibDems haven’t been more vocal in this space – courting the geek vote, for want of a better description. It should be such natural territory for them. But there’s so much good sense in here, that it might be the start of something very interesting.

Our new site for London mayoral candidate Mike Tuffrey


Today saw the launch of Liberal Democrat member of the London assembly, Mike Tuffrey‘s campaign to secure the party’s nomination for 2012’s Mayoral contest. Puffbox has been working with Mike for the last couple of weeks to put together a digital package that’s fairly modest for now, but with scope for expansion depending on how the party membership votes in August.
There isn’t much to say about the technical side of the new website: it’s a fairly straightforward WordPress custom theme, with posts for timely content, pages for background, and a custom homepage template. There’s an automated photo gallery, where you can access the full-size versions of any images uploaded to the site, but that’s about as clever as it gets. But it does everything it should, and all hangs together nicely.
The design is a bit of a departure, though: bigger, bolder and more vertical than usual, influenced to a significant extent by iPad apps. I’ve been particularly keen to experiment with presenting the text in columns, using a custom plugin which reclaims the WordPress ‘more’ button (which nobody ever uses). With the initial tranche of content, there aren’t too many examples of this, but you’ll have to trust me; it’s there.
Of course there are issues with columns on the web: they only really work when there’s ‘the right amount’ of text per page, with the column height fitting the (likely) screen resolution. Of course, this is where the iPad, and indeed the Kindle, benefit: you know exactly what screen size you’ll be dealing with. On the web, there’s no such luxury, so we can only base it on assumptions. But my instinct is that the benefit to readability makes it worth the risk.
Supporting the website, we’ve sorted out Google Apps accounts for the campaign team; and there’s a Mailchimp-based mailing list, only doing RSS-powered alerts for now, but with scope for specially-written mailshots in due course. Thinking ahead, we’re asking people to indicate where they live in London, which will allow us to run geo-targeted campaigns further down the line.
Now… thus far, Puffbox has a 100% record with political candidates: everyone we’ve built a site for has been successful in the electoral campaign they were fighting. Mike faces competition for the LibDem candidacy from Lembit Opik, with rumours of one or two others throwing their hats into the ring before nominations close at the end of the week. Of course, if Mike wins this initial contest, you wouldn’t perhaps be too confident about us preserving our perfect record against both Boris and Ken. But Mike’s keen to make full use of online in his campaigning; and his position as the inevitable underdog might give us scope to have some fun with it.
The result of the candidate selection is (currently) due to be announced on 12 August. Will it be glorious?

LibDems' underwhelming web revamp

When is a fixed-width page not fixed-width?

The world of Liberal Democrat websites is dominated, almost monopolised, by one company – Prater Raines, based in Folkestone. They offer local LibDem parties a corporate website template, plus mailing list facility, plus a shared photo library, plus hosting, plus email, plus DNS, etc etc, for a staggeringly low £250 (ish) a year. When a local party’s key concerns are typically ‘can it do what we need?’ and ‘can we afford it?’, their success is understandable: they host something like 600 sites in the extended LibDem family.
The catch is that every site on the Foci platform, as it’s known, looked more or less identical – which might be fine if that shared look-and-feel was any good. Unfortunately, to be frank, it wasn’t. Being charitable, the sites had begun to look very, very dated: tabular, text-heavy, and lacking in finesse. A clear case of technology first, design a distant second: laudable in some respects, but just not how the game works.
A revamp has been in the works for many months – since long before the general election, in fact – and finally this week, it’s been rolled out across the network: see the examples of Tim Farron, Don Foster, Sarah Teather or the specially souped-up site for Vince Cable. And in a word, it’s underwhelming.
The boxy, full-width layout is gone, replaced by a centred, 1024px-optimised format, sometimes single-column, sometimes two, sometimes three – so far, so good. There’s a hint of gloss in some of the screen furniture, some rounded cornering, even a bit of text-shadowing on the occasional headline. But there’s a definite feeling that they’ve bolted these ‘cool’ elements on top, without really buying into them.
Perhaps the best illustration of this is the aggregated list of site updates, which they’re calling homepage ‘lifestreams’. Hang on… homepage lifestream? Yes, they’ve clearly been inspired by my invention for Lynne Featherstone… except they’ve totally missed the point of it.
Left: not really a lifestream. Right: now that's what I call a lifestream.

Lynne’s lifestream pulls together her activity from multiple third-party sources: it helps readers see what she’s done lately, wherever she might have done it, and at a glance shows her to be very active across multiple social networks. But theirs seem to do no more than aggregate the different content types within the same site: and the token effort to distinguish the different content types fails, because the icons just aren’t strong enough. It’s just a list.
Ah – but then there’s the jQuery-based hover-to-slide thing. As you hover over each headline in the ‘lifestream’ (ahem), it quickly expands downwards to show the ‘excerpt’, and the previous one closes up. If you’re mousing over the list to get to a specific headline, it can be quite nauseating. But more importantly – it actually makes it harder to click on the link you’re interested in. Sometimes you’ll mouse-over your chosen link, only to find it gets moved by the animation, and you’re now clicking on something else… and the headline you wanted may well have disappeared off the bottom of the screen.
Prater Raines deserve a huge amount of respect for their success in this field. Their tremendous economies of scale have allowed them to put together an offering which is, to all intents and purposes, unbeatable. They clearly know their technology. But this was the opportunity to make up for their offering’s presentational shortcomings, at precisely the moment when LibDems, locally and nationally, need a presentational boost… and they haven’t taken it.

Puffbox site wins election award

Front left: back of my head. Front right: back of Mark Pack's head.

This morning, shortly before 11am. I’m sitting in the waiting room at the local GPs’ surgery. Nothing serious; just a routine appointment for a family member. Things are running a bit late, as usual, so I casually start looking at Twitter.
An event about the internet and the election? Ah well, another of those London events I never get to attend. A report being published? Cool, I’ll read it tonight. Some awards? Always worth a look. I wonder who’ll win. Oh look, somebody’s leaked the results. Er… it appears I’ve won. And the train I need to catch is in 15 minutes. So, dedicated family man that I am, I abandon said family member in the waiting room, and (literally) make a run for the station.
The event marked the publication of Anthony Painter‘s excellent – although perhaps too diplomatic? – analysis of the digital election, brought to you in association with Orange. Whilst much of its content will be familiar to anyone reading this, there will certainly be a few examples you won’t previously have heard of. Well worth a read.
And I’m delighted to note that Puffbox client Lynne Featherstone was the unanimous winner of the day’s big award, for Best Use of Digital Campaigning by a Candidate, ahead of Anthony Calvert’s (ultimately unsuccessful) ‘castration’ attempt, and Walthamstow’s media-savvy Labour MP, Stella Creasy.
Anthony’s report is wonderfully complimentary about our work on Lynne’s site:

On every level, Lynne Featherstone’s campaign site excelled: design, engagement, relevance, information. It featured a ‘Lifestream’, which was basically a live feed of all of Featherstone’s social media and web engagements… Her campaign secured a swing of almost 4% against Labour against a national swing of 3.5% (though in London the swing from Liberal Democrat to Labour was only 1.25% so it’s an even better performance by that measure.)

In a brief chat afterwards, I couldn’t resist reminding Lynne that, at one of our first meetings, I’d promised we would deliver a website which would win awards. I’d said that because I’d meant it: an all-too-characteristic moment of wild optimism on my part. We’d actually had our eye on the then-annual BCS Awards for MPs’ websites; but they were cancelled last year… so this news comes as quite a relief, actually!
Lynne was very complimentary about me in her remarks; compliments I’m happy to return (and more). The site was designed entirely around her – her activities, her personality, her narrative, for want of a better word. I’ve since had a good number of enquiries from people asking ‘could we have a website just like Lynne’s’ – and I’ve said ‘no’ every time. (We’ve generally then gone on to design something equally attractive, but more appropriate.)
Once again, I must thank Jonathan Harris, who worked with me on the concept and design; and Mark Pack, who looked after a lot of the technical stuff at the constituency end – not to mention Helen Duffett and others on Lynne’s team. They’re a genuinely great bunch, and all deserve a slice of the recognition.
I can’t tell you how chuffed I am about this. And if I’d promised to do something for you today: sorry.

Lynne Featherstone making a splash


When we launched the new Lynne Featherstone website back in September, our plan was always to add some new functionality once the campaign finally began (properly). One such feature went live tonight: ‘splash pages’, managed purely within WordPress.
I’ve developed a new custom page template, which – as you can see – expects to be used with a (very) large uploaded image, a paragraph or two of text, and a signup form (powered by Contact Form 7). To activate it, you simply change the ‘front page’ setting on the WordPress back-end.
When you view the page, it drops a cookie to ensure you won’t see that splash page again; but the cookie is specific to the page ID number, so it won’t stop you seeing the next one we do.
The template’s first appearance is to warn potential voters of the upcoming deadline for registration; so we’ve had to go abstract with the choice of imagery. Most of the time, I’d expect it to be a photograph – not least given Lynne’s recent recognition as the country’s most fanciable MP. WordPress has allowed us to make the page creation process remarkably quick and easy; so I’m hoping the team will be able to create a couple each week of the campaign, depending on events and available imagery.
By definition, splash pages are an annoyance – an unrequested interruption to your online journey. I’m not a fan of injudicious use of them. But based on this template, Lynne’s should be more substantial and useful than most; and we’re doing our best to minimise the inconvenience with persistent cookies. We’ll be watching to see how they are received.

Our new site for LibDems' Chris Huhne


With the election now well and truly underway, it’s high time I blogged about the latest website Puffbox has built for a high-profile Liberal Democrat – this time it’s home affairs spokesman Chris Huhne, as he looks to defend a wafer-thin majority in Eastleigh.
We were approached by Huhne’s team late last year: they’d seen what we’d done for Lynne Featherstone, and wanted us to do something similar for them. We soon ruled out a ‘carbon copy’ site: Lynne’s use of social media is exceptional, and the approach we took with her wasn’t going to be appropriate for Chris. Instead, we’ve shaped the site around Chris’s rather more conventional media output, but with plenty of scope to expand later, if or when required.
We’ve gone for a high-impact homepage, with a large image carousel highlighting a number of key local issues: and as with Lynne Featherstone’s site, each issue has its own explanatory page which can act as a hub for related posts. Unlike Lynne though, a large proportion of Chris’s work is at national level – so we’ve gone for a tabbed approach, allowing you to switch between national and local issues. (And using cookies, we’ll remember your preference for your next visit.)
Since his election in 2005, Chris had been running a website based on the Prater Raines platform used by the vast majority of Liberal Democrat people and local parties. (It’s actually an excellent technical solution; but it won’t win any design awards.) We’ve managed to bring across the vast majority of the previous site’s content, close to 1,000 pages, by screen-scraping: and whilst the new page addresses aren’t exact matches, they do all work seamlessly.
The site was built on WordPress, with just a little behind-the-scenes help from Simon Wheatley; it was designed in collaboration with Matt Budd of Dunston Graphics. I think he’s done a magnificent job with the LibDems’ somewhat troublesome preference for aqua and yellow.
There are a few areas, in both technical and editorial terms, where I wish we’d had just a little more time; but the declaration of the election forced our hand somewhat. So whilst I’m more than happy with what we’ve already delivered, I think we can make it even better in the months to come. Assuming the voters of Eastleigh give us the chance…

Lib Dem leaflet is memorably Marvellous

Only my most dedicated stalkers will remember my rant a year ago, regarding a by-election in Thatcham South and Crookham, the council ward where I live. I was complaining about the lack of information on the contest, which was eventually won by a lady rejoicing in the name Marvellous Ford. I wrote at the time:

A name you won’t forget, although not ideal for search engine optimisation.

… and right enough, I didn’t forget the name. Which is why it came as quite a surprise to see this in the first Lib Dem leaflet of the Campaign Proper:

A selection of typical local people voicing their support for former MP David Rendel, standing in – gulp! – his sixth successive general election (plus the legendary 1993 by-election). But just a minute, who’s that typical local person second from the left? Marvellous from Thatcham? Really?
Now it’s not as if there are many people called Marvellous in the country, never mind in a small – and for the record, not very ethnically diverse – town like Thatcham. But if you felt the need for total confirmation, a quick check on the local council’s website will instantly confirm that our ‘typical local person’ is indeed the Liberal Democrat councillor for Thatcham South and Crookham.
Every election brings its own fair share of crimes against design. But seriously, if you’re going to pad out your leaflet with senior members of the local party pretending to be The Average Voter In The Street – I’d probably suggest you choose people who are a bit less Google-able.

SEO as a political campaigning tool

I’ve mentioned this before, but it still brings a smile to my face.
One consequence of the rebuild of Lynne Featherstone MP’s website, which we launched last September, has been a marked improvement in Google performance. And it’s arguably my greatest personal triumph that if you search Google for ‘haringey council’ – the top suggested search query if you just type in ‘hari’ – here‘s what you (currently) get:

So the first five results on a standard Google results page are: two pages from the council itself – the council’s own homepage and one of its most popular individual pages (as you’d normally expect for such a targeted query); a page from Wikipedia; a page from Directgov; and at slot number 5, LibDem MP Lynne’s automated page detailing everything that’s wrong with the Labour-run council… with a particularly arresting excerpt.
SEO, or Search Engine Optimisation, isn’t something I typically find myself paying much (conscious) attention to. In my experience, it’s usually enough to have followed the basics of web page construction: and I’ve been coding HTML for 15 years now, so it’s all fairly instinctive. WordPress helps by encouraging you to use significant elements such as the page title – presumably including significant keywords – in both the HTML <title> and the page URL; plus there are a couple of plugins I tend to activate for all clients which help Google ranking, install instantly, and never trouble you again.
But because it’s baked into the process, albeit subconsciously, the results are there to be seen: and will come to the fore over the next few weeks.
Naturally, with an election imminent, MPs and candidates are looking for every possible opportunity to get their messages in front of voters and journalists. For zero extra effort, and at zero cost, we’re getting one of Lynne’s core messages in front of the tens of thousands of people searching for ‘haringey council’ each month. (According to Google’s Adwords keyword tool, 22,200 people searched for ‘haringey council’ in February 2010… far more than the 1,300 who searched for ‘lynne featherstone’ specifically.)
Lynne is defending a relatively modest majority of 2,395 – notionally putting her in Labour’s no39 target seat. We’ve had plenty of favourable feedback regarding her website already: Iain Dale, I’m reliably informed, called it one of the best political websites he’d ever seen. But it won’t surprise you to learn that we’re looking at a couple of possible enhancements for the election campaign period. Stay tuned.

LibDems' Ning-based social network

When the new LibDems website was launched a week or so ago, there was also mention of ‘a new social action network site called ACT’, which promised the ability to ‘join groups, organise events, watch videos, talk politics and join in campaigns… to mobilize an online community that reaches beyond the boundaries of formal party membership’.
It didn’t take a lot of guesswork to find the site, at act.libdems.org.uk: and it turns out, it’s just a Ning site with paid-for options to use your own domain name, remove any mention of Ning, and hide third-party adverts.
Here’s the video intro to what it can do:
It’s certainly a cost-effective solution: those ‘pro’ options are costing them £33/month at a guess, and make for a pretty rich social network. Ning also implements the OpenSocial protocols, so in theory there are ways to access and play with the underlying data – although they don’t make it easy, at first glance. So although it’s the cheap option, that doesn’t necessarily make it a bad one.
But they may hit problems due to the inability to really customise the platform. Where you’d love to offer dropdown lists, for example a list of Westminster constituencies for event locations, all you get is a free text field for location: and searching isn’t all that clever, so you’ll need a lot of discipline to ensure consistent tagging.
Of course, it looks like what it is: a generic Ning site with a few LibDem logos stuck on it. So in that sense, it doesn’t measure up to the Tories’ custom-built MyConservatives.com. But if the site connects people, and those people go out and do things, it will have served its purpose, for a tiny amount of money.