We’re proud to unveil our latest creation: a new website/blog for Lib Dem MP Lynne Featherstone (or try this link if the DNS hasn’t rolled over for you yet). It’s taken a good few months, and has thrown up challenges on a scale I haven’t had to tackle before. But equally, it presented several opportunities for cheeky innovation, and as you’ll know by now, I can’t say ‘no’ to those.
A bit of background. Lynne started blogging in October 2003, making her one of the first MPs to do so – although she wasn’t an MP at the time. And in fact, she specifically credits her website as a factor in her winning the Hornsey and Wood Green seat in 2005 (on a 14% swing). She was also the first MP to use Twitter, more or less. And she’s in charge of the LibDems’ online campaigning strategy. No pressure then.
We had five and a half years’ worth of blog posts in Blogger, with over 2,000 user comments, to be migrated to WordPress. Oh, and 2,000 hand-coded press releases from the local party branch, to be integrated too please. Plus accounts on Twitter, Flickr and YouTube. And what about her contributions to other websites? Not to mention her activity in Parliament?
So the grand concept of the site is the use of a tabbed ‘lifestream‘ as the homepage. The initial view lists her last 10 actions, no matter where they happened – including Early Day Motion signatures, which required me to write my own scraper. Then, if you want to see her activity on one of those specific areas, you just click the appropriate tab. It’s all driven by RSS; the tabs are powered by ajax; the lists are generated by a cron for obvious reasons.
We’ve also made some first steps into Facebook integration. If you’re going to comment on the site, you can sign in with your Facebook credentials: this will pull your name and profile photo into the comment, and give you the option of adding an entry to your Facebook news-stream. I’ve used the official WordPress plugin, but it needed more tweaking than I probably expected, and didn’t always work reliably on all browsers. Let’s just say I’ll be keeping a close eye on it.
I’ve also used Ordnance Survey’s OpenSpace API to create a clickable map of the wards which make up Lynne’s constituency, with the precise boundaries marked, and map detail down to individual building outlines. I shouldn’t need to explain why this might prove to have been an – ahem – interesting move. It’s ready, but we won’t be activating it immediately.
The effort that’s gone into the issue and ward pages probably won’t be evident on the front end: you get a short summary, plus the latest posts tagged accordingly, plus any ‘blogroll’ links, plus – where relevant/available – the latest posts from other related sites or blogs, again pulled in via RSS. But crucially, all of this is done using standard WordPress functionality, in such a way that Lynne and her team can create new pages instantly. No (deep) tech knowledge required.
Naturally, it’s got all the sorts of functions you’d expect from a WordPress blog: sidebar widgets, paged comments, RSS feeds, decent SEO, etc etc. We’ve done pretty well in maintaining addresses from the old site: 50 to 60% of the URLs, at a guess, accounting for the vast majority of site traffic. And if you ignore the issues with Facebook’s custom markup language, everything (I think) passes HTML validation. Hooray!
There’s so, so many people to thank on this one. Jonathan Harris, who happens to be a constituent of Lynne’s, for the design work. Matthew Somerville for tweaking something for me within TheyWorkForYou, plus a couple of people within Parliament who tried to help me with EDM RSS through the proper channels, but ultimately couldn’t. Ex-LibDem tech supremo Mark Pack. Lynne’s staff and councillor colleagues for their early feedback. And Lynne herself for trusting me in the early stages, and encouraging me in the later stages when I didn’t necessarily trust myself.
Every site I do, I always try to do something innovative. This time, there are just so many things that I’ve never done before myself, or that I’ve never seen on a website in the same field. It’s been exhausting, occasionally terrifying, but great fun to do. And I can’t wait to see what happens next.
Tag: puffbox
A couple of Commentariat launches
A key element of the (re)statement of UK government open source policy the other week was the need to ’embed an open source culture of sharing, re–use and collaborative development’. That may have seemed like a waste of ink/bandwidth to those outside government; but I can assure you, I’ve sat in too many wheel reinvention seminars in my life already.
So Puffbox is glad to do its bit to get the wheels turning, by building and launching a couple of commentable documents using Steph Gray HM Government’s Commentariat WordPress theme, as seen on the (draft) Power Of Information Taskforce report. One is for DFID, on the elimination of world poverty; the other for Neil Williams at BERR, on the Low Carbon Economy. Wow, weighty subjects or what? – WordPress saving the world?!
Both are instantly recognisable as variations on Steph’s basic theme, give or take a bit of branding. This was a deliberate choice: I felt it was important for the sites’ origins to be immediately evident, as they needed to send a clear message about re-use, and the benefits in terms of speed and cost.
The DFID site was just another WordPress installation in an existing environment – the same one we’re using for DFID Bloggers, as it happens; the total cost to them will be one day of my time, covering WP setup and tweaks to the theme. And when you look at the functionality they’re getting for just a few hundred quid, it’s a pretty good deal.
The BERR project was slightly trickier. It was a new WPMU environment, always a little trickier to set up; and because the document wasn’t as long as other Commentariat instances have been, I had to re-engineer the theme to work off pages rather than categorised posts. I finished my bit in the final hours before dashing off on a week’s holiday; seeing the finished product on my return, I’m really impressed by how well it’s come together. Massive credit to Neil and the BERR team; the use of pictures really makes a dramatic difference.
Real Help Now: a national picture
For the last couple of weeks, I’ve been working with the Downing Street team to put together Real Help Now – a fairly modest website, for now anyway, to introduce and demonstrate the practical help available to families and businesses during the recession.
Fundamentally, in this initial build, it’s a news aggregation site – pulling together material not just from national sources, but regional and local too. The aim is to complement the citizen- and business-facing stuff, at Directgov and BusinessLink respectively, by showing what’s actually happening on the ground, well away from Whitehall and the City.
What CMS are we using? Brace yourself – for once, it’s not WordPress. Not yet.
The news content is being managed through a Delicious account. When we spot a new item of interest, we tag it with the relevant region; then, when you click a region on the map, we call the relevant RSS feed in (via Google’s excellent feed API). The feeds give us everything we need; the Delicious tagging tools are excellent; and, of course, it also means Delicious users can interact directly with the account, if they so desire. The ‘latest video’ box works off RSS feeds too: we’re aggregating YouTube feeds from several government accounts, plus relevant material from Downing Street’s Number10TV (which uses Brightcove).
I could bang on about the intricacy of the HTML layering, or the gorgeous JQuery fades on the video box; but you may as well have a look for yourselves. My only disappointment comes from the animation effects I had to ditch late on, when I couldn’t make them work satisfactorily in IE6. (The majority getting a lesser service due to the minority’s refusal to make a free upgrade? – discuss.)
We aren’t making any great claims for this site: it is what it is, a pretty front end, courtesy of regular collaborator Jonathan Harris, pointing to other people’s material, plus a (first person) message from the Prime Minister. But if it can establish itself, there’s naturally plenty of scope to extend and expand into something more communicative and interactive.
Meet the new Puffbox.com
If you’re reading this on the website rather than the RSS feed, you’ll already have noticed things look a bit different. It’s a new year, Barcamp is around the corner, and it’s high time for a design refresh of the company website. Of course, it’s still a custom WordPress theme; and everything’s more or less in the same place. And yes, it’s still green, although not quite as green.
So what has changed? Not as much as I initially intended; there were some wild ideas in the initial sketches, let me tell you! But for all sorts of reasons, many of those fell by the wayside – not least, it has to be said, because many of my government contacts are stuck using IE6. In the end, it became a reinforcement of the principles I liked best from the previous design, most notably the very vertical approach.
You’ll notice a lot more imagery on the site. I’m conducting an experiment using the new WordPress media library function, to pull out the thumbnails it generates automatically when you upload a picture. There’s amazing potential in this, and I wanted to give it a try; but there may be issues with older content, posted in previous WordPress versions. I’m also using gravatar images to personalise the comments function a bit; if you haven’t already associated a picture with your email address, hop over to Gravatar.
It’s also been a chance to update my own site with the technologies I’m regularly using on other people’s: things like JQuery, and the Yahoo! UI Library’s CSS templates. I nearly built the whole thing without HTML tables, until a last-minute crisis courtesy of (guess) IE6. And for once, it looks great – and probably, best of all – in Safari.
I’d love to know what you think.
DFID redesigned
This week saw the next phase in the incremental redesign of the Department For International Development‘s website. It’s a much airier, brighter look than before, and with a YouTube video front and centre, plus all those drop shadows, rounded corners and various JQuery effects, it feels bang up to date. There’s a new ‘top layer’ of public-friendly information, Fighting Poverty, which is very easy on the eye, without getting in the way of the more mundane operational stuff. They’ve struck an excellent balance, I think.
The changes to the parent site meant we had to revisit certain elements of the DFID Bloggers site, built and launched by Puffbox just a couple of months back; partly for visual consistency, but also because we’re feeding off the same CSS stylesheet. Everything’s more or less where it was before, but the colours have been brightened up a bit, and taking a lead from the parent site, we’re now optimised for 1024px-wide screens. We’ve also tweaked a few other things, but I doubt you’ll notice them.
(The parent site has repaid the compliment by giving front-page space to the Bloggers site – but before anyone mentions it: no, it isn’t automatically taking the latest item via RSS, they’re choosing which items they want to promote.)
On the Bloggers site at least, the switch on the night was remarkably pain-free: just a simple matter of changing from one WordPress theme to another, literally a single click and it’s done. I’ve always seen this as one of WordPress’s hidden strengths – and I’ve talked to one or two clients about making deliberate use of it. You can imagine a scenario where there are several versions of the same basic design, all stored as separate WP themes, for different situations and circumstances – as a crude example, a black-tinged ‘national mourning’ version. Deploying it would take seconds. Hey, can your big ugly CMS do that, I wonder?
The DFID team are taking an incremental approach to their web development – and good on them for it. There are further ‘structural changes and technical improvements’ planned for 2009, plus – all being well – some cool new functionality in the Bloggers site. Stay tuned.
Puffbox's Project MyTube: hooray for APIs
A few days ago, I bought an iPod Touch; and I can finally understand the fuss. I didn’t really want it; I’m not short of portable media players, and my Android phone gave me a perfectly good touchscreen to play with. But I’m very excited about mobile-optimised web interfaces at the moment, and felt I needed an iPod/iPhone to do some proper testing (as opposed to educated guesswork).
I’ve been especially blown away by the quality of videos streamed from YouTube. For example, I’m a big ice hockey fan – and the NHL (the big league in North America) is kind enough to put full highlights of every game on YouTube. But as you can probably guess, a flying puck isn’t easy to see in a heavily pixellated non-HD video stream. It’s a completely different story on the iPod Touch – crystal clear.
But – unless I’ve missed it? – there’s no easy way in the built-in YouTube applications, either on the iPod or Android, to log into your YouTube account and see your various ‘subscriptions’. On the face of it, it’s an extraordinary omission. Subscriptions are effectively your personalised EPG, allowing you to cut through the chaos, and get to the content you want. Isn’t that exactly what you want/need? So I did it myself.
If you go to mytube.puffbox.co.uk, you’ll see an intro page with a dropdown list of various YouTube channels: these are being called in dynamically via Javascript, from the puffboxtv account on YouTube, courtesy of Google’s astonishingly comprehensive API. (I got the list of HMG YouTube channels from Steph’s digitalgovuk catalogue – ding!) When you choose a channel from the dropdown, it makes a further API call, drawing a list of the last 10 videos posted to that account, with upload dates and thumbnails. Click on a title, and you’ll see the clip description, plus an embedded player. On a normal browser, the clip will play on the page; on an iPhone/iPod or Android unit, it’ll play in the native YouTube app, full-screen. The ‘back’ button in the top left corner (not the browser back button!) returns you to the list of videos.
That’s pretty cool… but here’s the really clever bit. If you have made your YouTube subscriptions publicly visible, you can call your own favourite channels into the dropdown – go to http://mytube.puffbox.co.uk/?account=yourname and you should see a familiar list. I should stress, my site never holds any personal information: it’s all coming in dynamically from YouTube.
As with most of my experimental stuff, it comes with zero guarantees. There are rough edges, and it could be a little prettier. But here’s the important point: I knocked this together in 24 hours*, thanks principally to (a) Google’s wonderful API and (b) the free JQuery javascript library to process the responses.
Coincidentally, as I was putting the finishing touches to the site, I came across Charles Arthur’s piece in today’s Guardian about the Home Office crime mapping problems – which concluded thus:
The Free Our Data campaign thinks the practices outlined in the memo do not go far enough: what external developers especially are looking for is pure data feeds of events, rather than static maps… Ironically, the police’s efforts to meet the deadlines might be better aimed at producing those data feeds with time, location and crime form data which could then be used by external developers – who would be able to produce maps more quickly than in-house efforts.
I couldn’t agree more – and I hope my efforts over the last 24 hours prove the point. I’m amazed by how easy (relatively speaking) such things are becoming. The common thread across all the really successful web 2.0 properties is the availability of an API, allowing developers to work their own unique magic. As I’ve said before… Government needs to recognise this, and get in the API game. Not just as a ‘nice to have’, but as an absolute priority.
* 24 hours? Well, put it this way. It was working perfectly in Firefox, Safari (desktop and mobile), Chrome, Android… but not IE. It’s taken me the best part of a day to make it work in IE, and I still can’t really understand what I’ve done differently to finally make it work. Opera’s acting really strangely, but I’ve spent long enough playing with it for now.
Bong! Parliament goes WordPress
The Parliament web team have launched a new News site for the new parliamentary session – and hurrah, it’s done in WordPress.
I can’t really claim any credit for actually doing any of it, despite what you may have read elsewhere. The internal development team did a considerable amount of customisation, most of which won’t be immediately visible to the reader, before I ever came along. I didn’t do a lot more than pick holes in it for a day or so.
It’s definitely a ‘news site’ rather than a blog, and the layout sits comfortably alongside the likes of the BBC. It’s a brave move to commit to putting big photos on every story, but if it’s sustainable, it’ll pay dividends. There’s a little way to go as regards the editorial; but these are early days, and the direction is unquestionably the right one.
Their plan is to make heavy use of WordPress’s fantastic RSS functionality. There’s already a very detailed subject (category) taxonomy showing on the site; and of course, once everything’s tagged, it’s relatively easy to use category-specific RSS feeds to surface the headlines on other sites. Other departments might, for example, want to integrate into their own pages a list of Parliament’s latest news on their particular topics..?
Onepolitics now Android and iPhone-optimised
I’ve just rebuilt my onepolitics website, which aims to bring together the latest from a personal selection of prominent political blogs into a single page. It’s the third incarnation of the site in less than a year: initially it was built in WordPress, then rebuilt in June as a more straightforward PHP/RSS-powered website. It’s had a steady trickle of people using it, measured in the dozens each day, but I’ve never pitched it as a public service: it’s always been for me primarily, but anyone else is welcome to drop by.
Version three recognises the primary use case of the key target audience (me): mostly on my mobile. And having just got my hands on a new T-Mobile G1 Googlephone, it seemed sensible to make the design work best in that context. So I’ve recoded the pages to give b-i-g touchscreen-friendly clickable areas, and applied some conditional code to select appropriate styling for the G1 and (as best I can) the iPhone. If you’re on something else, including a desktop browser, you’ll still get more or less the v2 design.
I’ve abandoned the filtering options, as it didn’t seem people were using them anyway. So now the site concentrates solely on its ‘homepage’ presentation of the latest 20 items from the political blogs considered by our editorial board (me again) to be the most prominent and influential. Updating is lightning fast, usually within a few minutes of an article’s publication, as it’s powered by feeds from Google Reader.
If anyone’s got an iPhone, could you try it out for me, and let me know how well it matches? I’ve tried to follow the Apple guidance, as far as I could be bothered anyway; and testiphone.com has been helpful (when used in conjunction with Firefox’s User Agent Switcher plugin).
PS: Quick Android tip. I’ve only seen it advertised on 18-month contracts, with no charge for the handset; but I got mine in a T-Mobile store on a 12-month contract for a £49.99 payment. I don’t know about you, but 18 months is a l-o-n-g time to be locked in.
Gordon Brown on your Wii
One of the more inspiring developments at the BBC recently has been the extension of iPlayer away from the desktop PC. Back in April, they launched iPlayer on the Wii – but it wasn’t the breakthrough moment it might have been. Leaving aside the fact it didn’t stream especially smoothly on my machine, the interface was optimised for a screen resolution which the Wii couldn’t deliver, making for a horrid user experience. Last week they made amends, with a Wii-optimised screen setup – and it’s truly brilliant. Try it on your desktop PC, but to appreciate its full glory, you need to be sitting on the living room sofa, in proper telly-watching mode.
I’ve been a bit surprised that people haven’t done more optimising of content for ‘games consoles’ – particularly the current generation, with their online capabilities. And with the Wii (again) selling like hot cakes (set to get even hotter too), it has tremendous potential for video-on-demand in the living room.
Inspired by the Beeb’s efforts, I wondered how much effort it would take to put a Wii-friendly front end on some YouTube content. So I took a few hours last night to build a prototype – and here it is: wii10.puffbox.co.uk
It’s basically the same concept as the BBC’s design, rebuilt from scratch using a combination of PHP, RSS and Javascript (specifically, JQuery). The code pulls in the last 10 items from Downing Street’s YouTube account, and puts them into a JQuery-driven carousel. When you click on a clip, a popup fades into view, and the embedded YouTube player autoplays. The big buttons left and right make the playlist scroll beautifully from side to side.
I want to stress: I’ve done this completely off my own bat. Although we have a continuing working relationship, I wasn’t asked to do this by Number10. It’s purely a proof-of-concept, using publicly available (publicly funded) material. It’s a bit rough round the edges: some of the link highlighting isn’t too smooth on the Wii, the word wrapping isn’t polished, and it doesn’t seem to work properly on (desktop) Firefox for some reason – although curiously, all other browsers seem OK, even IE! But having proven the concept, to be honest, I may not bother going back to fix these issues. There’s also a risk of YouTube changing their code, as has happened before: the Wii’s Flash player is a bit behind the times, and YouTube’s improvements have caused problems in the past.
But for now – it works, really quite nicely, and I’m dead pleased with it. You need never again say the words ‘there’s nothing on telly.’ 🙂 And with more and more government content going on YouTube, if anybody thinks this might be useful in a proper business context, please get in touch.
WordPress T-shirt in Downing St
I’ve been meaning to sort this out for some time… 🙂
