Downing Street redesigned


Very quietly last week, Downing Street launched a new design for number10.gov.uk – but to my own great relief, and (happily!) contrary to my prediction of last December, it remains very much on WordPress.
Visually, I personally think it’s a great improvement, with bold use of the iconic 10, now complemented by the lion door-knocker. It looks a lot more head-of-statey: with the central alignment of the ‘logo’, and the capitalised primary navigation, I can’t help thinking of the White House a bit… but maybe that’s just me. It’s also nice to see a non-standard font in use – the free PT Serif.
One of the new site’s most striking aspects is the way it seeks to represent government policy across departments – see, for example, this FCO page. If we didn’t know that BIS’s Neil Williams has only just started looking at this area, you’d be left wondering if this was the next stage of the Alphagov vision, with No10 taking control of all policy presentation. These pages look like WordPress pages (or a similar custom post type), with the sidebar news stories being pulled in automatically via tags (or a similar custom taxonomy).
And it’s intriguing to see Prime Ministerial initiatives being represented up-front: ‘TAKE PART’ is one of the handful of primary nav headings, and includes some very Cameron-y elements (which one wouldn’t previously have expected to see on the No10 site):

Apart from the animating slideshow (which in my mind doesn’t count, somehow) there’s no actual ‘news‘ content on the homepage, and not that much of Cameron himself – which might be indicative of a change of target audience, away from the Westminster Village? And whilst static icon-based links point out to Twitter, Facebook and Flickr, I note the virtual disappearance of video content from the site: no Number10 TV, not even a YouTube link. (Although to be fair, it’s still there on the sitemap.)
The front end doesn’t give much away, in terms of what lies behind (boo! not fair!); but I sense there’s a fair bit of hard-coding going on in certain page templates, not least because the source code is very neat. Plus the page generation times, as reported by WP Super Cache in the source code, also look extraordinarily quick… usually measured in hundredths of seconds, which is impressive by anyone’s standards.
My only criticism – and it’s a very mild one at that – is that there seem to be a few missed opportunities to do things ‘the WordPress way’. The primary navigation, for example, looks hand-crafted, where it could surely have been done as a custom menu – meaning changes are dependent on the technical team editing the theme code, rather than the editors using the admin interface. But we’re mainly talking about the potential for things to be problematic in due course, rather than already causing problems already.
I understand it’s been done almost entirely in-house: in which case, hearty congratulations to the Cabinet Office team. I never doubted you. πŸ™‚

Puffbox develops new web platform for the Co-operative Party


It takes a special kind of political anorak to even know that the Co-operative Party exists; so you might be surprised to learn that it’s actually the fourth largest political party in Westminster.
Formed in 1917, it has been in a permanent electoral pact with Labour since 1927. In the current Parliament, 29 of Labour’s 250-odd MPs were actually elected as Labour & Co-operative candidates – including one Ed Balls. A good number of other Labour MPs are paid-up members of the Party, but aren’t actually sponsored by it. It depends on the Co-operative Group – yes, as in corner shops, banking, funerals, etc – for a large part of its funding.

And since I have a ‘loyalty card’ for my local corner shop, I suppose I should formally declare an interest: I am a part-owner of the Co-operative Group. A very, very, very small part indeed. But technically, still an owner.
For the past few months, Puffbox has been working alongside left-leaning digital specialist Jon Worth to help the Party up its game online. And in doing so, we had to up our own game too: it’s unquestionably the most intricate WordPress build I’ve ever done – with a multisite-based strategy, (double) wildcard DNS, four custom post types, two automated custom taxonomies, and a parent/child theme arrangement, both offering full visual customisation. See what I mean?
To give you some idea of how it all stitches together: each of the Party’s Parliamentarians has a ‘person page’. You can click on ‘People‘ in the navigation bar to see them all, or hover for various filtered views. Say, for example, Members of Parliament. Oh look, there’s Ed Balls.

Click on his name, and you’ll see a ‘person page’. At the top of it are links to his Twitter account, and his personal website. Then there’s a concise biography. And towards the bottom, a ‘snapshot box’ for his latest activity on Twitter, in Hansard, on Flickr, and on his personal website, plus any content on the site itself which mentions him… all populated and updated automatically.

For those interested in the technical side: ‘person’ is a custom post type, with an extra metabox for the various external content sources. There’s a custom taxonomy called ‘role’, which is how we know Ed Balls is an MP. (And of course, each person can have multiple roles: here’s an example.) We pull the tweets in via JSON, to avoid API limiting; the other external data comes via RSS feeds. And of course, there’s a custom display template to stitch it all together. Meanwhile, invisibly, there’s also a people taxonomy on posts, which syncs with any changes to the person record.
And, uh, there’s something similar for areas of policy. But you’ll just have to work that out for yourselves. πŸ™‚
The ‘main’ site will be complemented by a handful of distinct subsites, within the same WordPress multi-site install. There’s still some fleshing-out to be done, but you can see sites for the party in Scotland and Wales starting to come together. They use the same core theme, with the ability to change the background and header images; but will be managed on a day-to-day basis by the Party’s regional operations. Regular readers will recognise the influence of our work with Defra
Visually, it’s not the richest design I’ve ever done, but that’s entirely in keeping with the ethos of a party which doesn’t actually have a logo per se. We’ve kept things nice and simple, concentrating on clarity and ease of navigation. But as it’s turned out, there’s been a lot of very positive feedback about the look and feel, so we’re confident we got it ‘right’ for the client and their audience.
Thanks go to my own co-operators on this project: Simon Wheatley, for his technical assistance and inspiration. Jon Worth, for putting the project together. Martin at the Co-op Party (see his person page), who’s been an absolute star – and is already on his way to becoming a WordPress expert. And finally, to WordPress 3.x, without which none of this would have even been conceivable.

Transport website relaunched on WordPress (not by us)


There’s a new website at the Department of Transport; and it’s running on WordPress. Sadly, it’s not one we’ve been involved with; we weren’t even approached, in fact. (I wonder why.) However, there are definite similarities with the work we’ve done for Defra; so we’ll console ourselves with the knowledge that we’ve at least been influential.
Transport issued a tender document in March, with an explicit requirement for open source-based solutions, specifically either WordPress or Drupal. The target launch date was 20 June, making for an aggressive schedule; and to their great credit, and that of developers Bang Communications, they made it with more than a week to spare.
I haven’t yet seen a total cost quoted for the work; that will come in due course, of course. But I’ve been told what the budget was, as quoted in the tender document – and I have to say, it was pretty generous. I’ll be keeping a close eye out for the next departmental spending data (as it’ll be well above the threshold); or if any MPs fancy drafting a PQ, that’ll make life even easier.
The site bears all the hallmarks of a WordPress v3.x build. Multiple subsites being stitched together, as we did for Defra, with liberal use of custom post types and taxonomies. The design is fairly low-key, based on the YUI grid system, with a bit of jQuery front-end gloss, but not too much. It declares itself to be coded in HTML5, but doesn’t make much use of 5’s new features, so there are no rendering problems in older versions of IE (that I’ve spotted myself).
But there’s one major problem with the site: performance.
Each page’s source code includes, at the bottom, a statement of how many database queries were required to gather up the information, and how long it took. Naturally, for better user experience, and to keep your server from falling over, you’d be looking to minimise both of these.
If you look at the homepage, for example, you’ll see it requires over 1,000 queries, and seems to take between 3 and 5 seconds to generate. The News homepage quotes 300-odd queries, and 4-6 seconds. If you then try to filter news items by Minister or topic, you’re looking at as many as 1,800 queries; and I’ve seen times as long as 15 seconds. To put it bluntly, that’s just too much. (By way of comparison: the Defra news page also includes this data at the bottom of its source code: 87 queries, 0.6 seconds.)
It might be OK if you were then caching the pages, and delivering static copies for a defined period afterwards, hence only taking the hit once per hour (or whatever); but we can see no evidence of that. Each time you refresh a page, you’ll see a different generation time at the bottom. There may be some caching going on that we can’t see from outside; but even then, those high numbers and the often slow response times are ominous.
You’re looking at a server which is in real danger of falling over as soon as there’s a significant spike in traffic. It doesn’t have to be like that; any WordPress veteran reading this will be thinking of the same couple of plugins, which would help instantly. And you’ll find them with one Google search.
But that’s enough criticism for now. It is of course great news to see another major government department moving to WordPress. Some may question the timing, given Alphagov’s stated intent of eliminating departmental websites within a year. But if there’s a net saving to the taxpayer, that’s reason enough to go ahead… and a challenge to other departments to do likewise, too.
Welcome to the world of WordPress, guys. Just sort out the caching, please, before you live to regret it.

On government organograms and RDF files (includes free WordPress plugin!)


There was an initial buzz of excitement yesterday, at the launch of the new data.gov.uk interactive organograms… and then, by teatime, a bit of a backlash. I can see both sides myself. Yes, it’s a very cool rendering of potentially quite dull data, and it’s nice to see it done in javascript (jQuery) rather than Flash… but it’s actually a bit fiddly to navigate through. That isn’t to understate the significance of the achievement, though: such a coordinated leap forward, in both technical and bureaucratic terms, is no small task. And there’s so much to it, most of which is beyond me, that I can’t begin to explain it in depth. Hopefully someone else will oblige.
As part of the initiative, departments have been instructed to upload raw RDF files to their websites, from which the organograms can be generated… which caused a bit of a problem for one of our clients. But it’s a problem we’re happily able to solve.
The Wales Office was the first Ministerial department to move everything over to WordPress, back in early 2008; and they’ve been running very happily on it ever since. About a year ago, we helped them build a new Transparency section, which acts as a download area for (mostly) Word and CSV files. It’s all rendered via a custom page template, and managed via the standard WordPress ‘media library’ functionality. Unspectacular perhaps, but quick and easy for all concerned.

However – when they tried to upload an RDF file, they couldn’t. WordPress has a surprisingly long list of file types it’s prepared to let you upload (look for get_allowed_mime_types() in wp-includes/functions.php): but RDF isn’t on it. So it throws up an error message like this:

We could upload it as a zip file, which would have the added benefit of reducing the file size by 90-odd per cent… but then the orgchart generator wouldn’t be able to process it. Dilemma.
But as ever with WordPress, there’s a happy ending to the story. We – by which I specifically mean my technical partner, Mr Wheatley – were able to write a quick plugin to ‘hook’ on to approved filetype list, and stick RDF on the end. Problem solved, file uploaded, everyone happy. You can see the successfully uploaded file here.
And given that there are a good number of government departments running WordPress sites, including at least one other using WordPress specifically for its transparency information, we thought we’d do the decent thing, and offer it up for others to download. Here you go. There’s no configuration interface needed; just upload it, activate it, and start chucking up RDF files to your heart’s content.

Microsoft thanks WordPress for dropping IE6 support

As I noted here a while back, there could be bad news on the way for government people running WordPress sites: the next release of WordPress, version 3.2, will discontinue support for Internet Explorer version 6. Here’s how the new WP dashboard will look, courtesy of Automattic’s Jane Wells:

Ouch. Now, Microsoft has published its official reaction on the Exploring IE blog – and it might come as a bit of a surprise.

Last week, WordPress dropped support for IE6 and joined the hundreds of other web sites that are working to move enterprises and consumers alike to a modern browser platform. Thank you! … The additional developer work supporting IE6 and even IE7 is something we would love to see be a thing of the past. More than that, however, is the security concern.

Of course – and I say this as someone who used to work there – it wouldn’t be Microsoft if there wasn’t a sales message dropped in somewhere; and the blog post turns into a pitch to upgrade to Windows 7 on security grounds. But the point about developer effort is still entirely valid – trust me.
Out of interest: are any government readers facing a crisis next month, when the upgrade happens? Anyone running websites on WordPress, with only IE6 available to them? (Feel free to contact me directly.)

WordCamp UK tickets now on sale


Tickets have just gone on sale for this summer’s UK WordCamp, to be hosted by the University of Portsmouth in mid-July. If you fancy coming along for two jam-packed days of chat, code and creativity, and you fancy saving yourself a few quid, head over to the site and buy your tickets before 3 June – the price goes up by a tenner after that.
We’re delighted to confirm that Puffbox is continuing its sponsorship of the event; we’re the only sponsor to have been there since the very beginning.

BIS gets a blog


A fairly soft launch today for the Department for Business, Innovation and Skills’s new corporate blog: built by Steph Gray (obviously), using WordPress (naturally).
Taking a quick whizz round the Cabinet table, the departments now running formal, properly-designated corporate ‘blogs’ are:

Additionally, of course, there are a few corporate sites which are actually running on blog technology, but choose not to present themselves as blogs – notably Number10, Defra, and the Wales Office; plus various blogs for teams and projects, too many to list here, and occasional Ministerial contributions to the Tories’ Blue Blog.

New look for WordPress admin side: bad news for IE6 users


WordPress takes the ‘open’ in ‘open source’ very seriously: discussion of functionality and design changes happens in public, and it’s always possible to download and play around with the next version in its current form.
Development work on version 3.2 (set for release at the end of June) is approaching completion, with a couple of significant additions in the last day or so: namely, a bit of a design refresh on the admin side, and a new default theme – named Twenty Eleven, but actually it’s the Duster theme which was added to wordpress.com in February.
I’ve played around with the new admin design for a bit this morning, and there’s really not much to report. It’s instantly familiar, and everything’s in exactly the same place (more or less) – but it does feel just a little bit more modern, and I suppose it’s good to keep driving forwards.
But there’s an issue which government folks may need to note: this release marks a conscious step away from IE6 (on the back end).

We probably can’t drop much CSS, as IE7 shares a lot of the issues. This is mostly symbolic, and reduces the platform combos we need to test. This also means any security issues that are shown to only affect IE6 only can be lowered in priority.
– Mark Jaquith, March 2011

This won’t affect what IE6 users see on the front end, as that’s dictated by the theme rather than WordPress itself. And it doesn’t mean the admin side will instantly become unusable in IE6. But the security warning alone should be enough to force remaining stragglers to upgrade.

Oh – and one more thing. There’s a really beautiful new ‘distraction free’ authoring view in 3.2. In WordPress currently, there’s an icon on the toolbar which looks like a blue monitor screen. When you press it, the text-editing box goes ‘full screen’, with a row of buttons along the top… just like Word. Well, 3.2 takes that a few steps further, and it’s gorgeous.

Alphagov blog open for business

If you've visited Alphagov HQ, you'll appreciate the image crop... πŸ˜‰

The countdown to next week’s public unveiling of Alphagov has begun in earnest, with the team’s blog now open for business. And at Puffbox, we’ve been happy to help them on their way with it: a few weeks back, we were sent an early cut of some page code, and asked to turn it into a WordPress theme. How could we refuse?
Rapid development was the top priority – so it’s a fairly straightforward two-column theme, with a widgetised sidebar, and a custom menu along the top. In fact, it’s the first ‘blog’ I’ve built in what feels like a-g-e-s. But there are a couple of (potentially) interesting extras to note:

  • Normally, I’d have done the ‘Media Coverage’ links as an RSS feed from a Delicious account. But with the uncertainty over Delicious’s future, and to test out an idea, we’re powering this via WordPress’s own built-in links (or historically, ‘blogroll’) manager. The links themselves are being pulled out by a custom ‘Recent Links’ widget, with a filter allowing you to select only a particular category of links.
  • The list of @alphagov tweets is, in fact, the standard Twitter profile widget… with liberal use of CSS !important declarations, and a few other tricks, to override the out-of-the-box presentation.
  • Each blog post has an author’s biography at the bottom, showing the contents of their profile’s ‘Biographical Info’ box. But we’ve also added a pseudo-plugin within the theme’s functions, to ask each registered user for his/her Twitter ID. If available, this is used to display their picture, plus a link to their Twitter profile – as this post by Tom Loosemore demonstrates. Just a nice little humanising touch, with an added dash of interactivity and transparency.

It’s being hosted at Amazon, and we’re managing the code via Subversion, for simplicity and security. I’m really falling in love with Subversion as a deployment method, particularly the way it’s handled within Coda (my code editor of choice these days). It does mean we effectively disable things like one-click updating and plugin installation; but the pros definitely outweigh the cons on a corporate project like this.
My thanks – as ever – to Mr Wheatley for the setup; and to James, Jamie and Paul over at Alphagov for their assistance.

Multisite mania: the next phase of our WordPress work for Defra


Late last year, Puffbox helped Defra move its main corporate website over to WordPress. One of the grand concepts underpinning the project was the use of WordPress’s multisite (formerly MU) functionality, allowing us to run multiple websites using the same installation. We launched with only one child site, for News – probably the easiest one, at that. But straight away, we began making much more ambitious plans.
Like everywhere around Whitehall, the start of a new tax year was to bring various contractual and organisational changes at Defra: and it was set as our deadline for the next phase of work, spinning off many more child sites. The good news is, all went well, and they’re now managing 20 distinct sites through the same WordPress installation – some carrying their own identities, some nested deep (and hopefully seamlessly) within the Defra design.
The first task was to rebuild the output themes from scratch – yes, already. For the initial launch, we had simply dropped WordPress code into Defra’s existing Dreamweaver-based output templates, and grafted some additional CSS on to their existing stylesheets, which were already in need of a good clear-out. They were never going to be able to support a platform consisting of literally dozens of child sites.
We now render the pages using something akin to a multi-level theme framework:

  • Every site is built on the ‘base’ theme, which defines the layout, and the bulk of the functionality, but has no imagery or colours attached to it. This theme is effectively hidden on the platform, and will never be used directly.
  • There’s then a corporate (‘root’) theme, a child theme of ‘base’ in WP terms, which adds the departmental colour scheme and logo. This theme is used by the top-level site, which contains most of the corporate information. It adds a custom template for the top-level homepage, but that’s about it.
  • We then have a number of further Defra-branded child themes, defined as children of the ‘base’ theme, but also referencing the ‘root’ stylesheet for colour and branding. Depending on functionality, there may be additional templates or functions: so for example, the News theme/site has its own homepage, and the theme used by the Publications and Statistics sites has its own approach to presenting attached files.
  • Finally, there’s a ‘custom’ theme for use by sites within the extended Defra family. This uses the same ‘base’ theme for layout; but includes additional WordPress functionality – mostly built-in, if you know where to look – to customise the branding and colour palette via the admin interface. Upload a logo, choose two colours, and bingo – a unique child site, which still retains the basic house style, maintains its connections to the wider Defra network, but whose management can be devolved to an arms-length business unit. Everyone’s a winner.

Needless to say, there are countless custom functions behind the scenes to stitch it all together – simple things like forcing a particular sitewide tab to be highlighted, to make a child site seem like it’s within a particular branch of the corporate site. (Although actually, that one wasn’t simple at all.)
And there are one or two new custom plugins which add pretty significant functionality, including one to implement a site-wide shared taxonomy. This has the potential to automatically surface related items across the network, and is pretty exciting – although we won’t see its benefits for some time.
As you can imagine, moving such a large quantity of material into such a radically different publishing model has frequently been challenging. We’re still finding our feet in certain areas, and it goes without saying, we’re pushing WordPress harder than ever. A few glitches here and there are inevitable; but we’ve had nothing too catastrophic. With a proper staging environment now in place, all our code being managed through Subversion, and a WordPress-based bug tracker to log any issues, it’s all gone relatively smoothly.
I can’t say enough about the contributions from Simon Wheatley and Team Defra; my front-end work was completed pretty early on, and I’ve really just been a spectator whilst the serious lifting and shifting has been happening. But once again, the Defra guys have been an absolute pleasure to work with, giving us more room to experiment and innovate than we’d ever dare ask for. Thanks guys.