The date for transition from Directgov to GovUK is fast approaching, and we now have a sight of the homepage which will greet visitors on opening day. And as GDS head of design Ben Terrett acknowledges, 'it’s significantly different from any of the other homepages we’ve released so far'.
Back in April last year, when a small group of people were starting to think about an alpha for GOV.UK, the expression “Google is the homepage” was coined... People often misunderstood this to mean we thought the homepage should look like Google. We compounded this problem by making the homepage look like Google.
A brief review of previous iterations shows just how deeply that thinking went. Note in particular the one with a Google Maps aerial photo being used as a zero-effort equivalent of Google's 'doodles'.
This isn't the only instance of 'inspiration → implementation' in the GovUK design, by the way. When Ben was appointed, he wrote on the GDS blog:
In many ways the problem is similar to problem [Jock] Kinnear [sic] and [Margaret] Calvert faced when designing the road signs in the 60′s. Kinnear and Calvert proposed one consistent system. One designed with the clarity of information as it’s [sic] goal. From then on Britain had a solution that became the definitive standard and was copied around the world... Sound familiar? Swap signage systems for websites. Swap vehicle traffic for online traffic. That’s a challenge no designer could resist.
Six months later, which typeface did they choose as the new design's base? (New) Transport, Margaret Calvert's digital-friendly update of said 1960s road sign work. Well, I suppose that's one way to meet said challenge. But I digress.
Instead of trying to emulate Google, they've switched to more of a signposting strategy - which looks more like (very) old-school Yahoo. (Or indeed, Directgov.) A bold decision, which almost feels like a backward step... but a decision based on evidence. It all leads to a fascinating conclusion, which Ben describes as follows.
The people who visit the homepage do so because they are lost. They’re not on the right page, and they’re not comfortable using search, so they go to the homepage to try and help them find what they’re looking for.
Or, if I might dare to paraphrase, your own on-site search isn't worth worrying too much about. If they're going to be comfortable doing with the concept of searching, they'll almost certainly have come to you from Google (65% of traffic) anyway. (All the more reason, I'd say, for using Google Custom Search or the paid-for Site Search.)
The move also coincides with the removal of one of my favourite features of previous iterations: search suggestions as you type. When done well, it's an invaluable navigation tool in itself: and in fact, I'm now finding myself expecting to be offered search suggestions, when I start typing into the Search box of any large-scale site.
But it may not be gone for good:
I look forward to reading that forthcoming blog post. (Update: now published.)
Rumours of the demise of RSS seem to come in waves. We're in the midst of another one just now, with moves by Twitter and Google (in the form of Feedburner) seemingly calling its future into question.
Before I began to bore everyone with the wonders of WordPress, I used to bore people with the wonders of RSS. In fact, it was WordPress's handling of RSS feeds which initially won my heart. Feeds are now so ingrained in my daily life, I don't even think about it any more. But the reality is, RSS reading (per se) didn't catch on.
That isn't so say that it's a dead technology though, far from it. Five years ago, I suggested Facebook 'might actually be the app which brings RSS to the masses'. Not too far off, as it turned out. I wonder how many people receive Facebook updates, or automated tweets, or email newsletters, which are really just renderings of an RSS feed?
And so to a little project I've been working on, in conjunction with leading Lib Dem blogger Mark Pack.
Its successor is the new Lib Dem Widget, a curated collection of current political content and links, which - like its predecessor - can be added to any website with a single line of code.
We pull in details of the latest party news item, the latest YouTube video, plus a collection of other interesting bits from around the web, and render it in a nicely style-guide-compliant 'skyscraper', which should drop seamlessly into any website sidebar. And yes, of course, it's (mostly) driven by RSS feeds.
You won't be surprised to learn we built it with WordPress: but it's a rather unusual use case. The widget runs as a theme, giving us easy access to:
- WP's built-in feed-fetching;
- its various caching options - including, but not limited to WP Super Cache; and
- its oEmbed calls, for easy inclusion of the YouTube clip.
In effect, it's the 'homepage' of a one-page site... but a site with no actual content of its own.
To give things a visual lift, we also 'code scrape' the various linked pages, looking for details of thumbnail images. Facebook's OpenGraph meta tags are now in fairly widespread use, so there's a healthy chance that we'll see an
og:image in the HTML header - and if so, we'll use that.
Writing code which will work on any website - regardless of sidebar width, existing CSS styles etc - has been quite a challenge. The markup ends up pretty ugly, with everything included 'inline', just to be sure. And even then, I'm not sure we've sorted out every possible use case... but that's what beta testing is there for.
Over the last couple of months, numerous people have got in touch to ask if there's going to be another WordUp Whitehall this year. And although I didn't initially think it was a good idea, I think I've been persuaded.
For the past two years, I've organised WordUp Whitehall as a kind of 'WordCamp' for civil servants who are already using WordPress (or are seriously considering it), and the developers/agencies they're working with. It's mostly a series of 'show and tell' sessions, aimed at sharing experiences, stimulating ideas and spreading good practice. I also try to persuade a special guest or two to come along.
Recognising that it's a workday event, and that departments have been generous enough to offer conference facilities at no charge, we've enforced fairly strict rules of engagement. UK central government only, with limited numbers from each department. Outsiders by invitation only. Guaranteed confidentiality where requested. And no sales pitches. They've been beautifully observed, for which I've been most grateful.
Both previous years, we've had about 50 places... and both times, we've 'sold out' within 24 hours. Various senior and influential people have gone on to explicitly credit the events with helping them rethink or rewrite their digital strategies, leading in many cases to major new projects being done on WordPress. (It's also been, ahem, flattering to see other countries and CMS communities subsequently starting to run very similar events.)
But I wasn't sure about doing it again this year. Previously, we've had a handful of obvious flagship projects for people to come along and present: Health, Transport, No10, GCN, etc. But the past year or more has been dominated by the development of GOVUK, and its imminent consumption of all departmental sites. We simply haven't had any 'big bang' WordPress launches post-GDS. And that made me wonder if we had enough to talk about.
I've subsequently been persuaded that there's definitely an appetite for another event... but perhaps a slightly different one.
We've already been offered a much larger venue than in previous years: so it's probably the perfect time to extend the event beyond Whitehall - local government, arms-length bodies, perhaps friends overseas.
And if we're short of 'flagship' projects to present, maybe it's time for a slightly different agenda. Perhaps a greater number of shorter presentations, focusing on specific (little) things we've all done. I'm not sure the beautiful chaos of a multi-track, self-organising BarCamp / GovCamp style event is quite right, but perhaps it does.
Some things won't change, though. It'll still be free to attend. It'll still take place in mid to late Autumn. Most of the 'rules of engagement' will still apply. And yes, there will be donuts.
So... it's over to you lot.
I'd love to hear what you, the potential attendees, think.
- What level of interest is there beyond Whitehall?
- Are there any 'flagship' projects I've missed somehow? Perhaps beyond Whitehall?
- Does everyone have a 'little thing' they could present?
- Do we prefer structured or chaotic?
Please leave a comment below, and let's see where the consensus lies.
Saturday saw the annual State Of The Word address by WordPress co-founder Matt Mullenweg, as part of WordCamp San Francisco. Worth taking an hour out to watch it, if you've got any interest in the WordPress project.
And I'm delighted to note that not one, but two Code For The People projects got a mention during the talk: our work for the Rolling Stones, and Oxford University's Free Speech Debate (although the latter was a bit blink-and-you'll-miss-it). We'd have been delighted to see one project among Matt's hand-picked highlights of the year; having two is a bit of a shock.
The other important point to note is that WordPress 3.5 will be released on 5 December ('I 100% believe it's gonna happen'), even if it means dropping certain features. We're already starting to see signs of what's in store, including the Twenty Twelve theme, and changes to Media uploading.
Big news today, if you're into this sort of thing: Automattic have just announced an extension of their WordPress.com VIP Featured Partner program(me). It used to be only for other technology platforms; but they've now opened it to interactive agencies.
There are only nine in the initial group of agencies vetted 'to ensure the agency's capabilities fit the needs and scale of VIP customers'. And we're among them.
It's an elite bunch we find ourselves in: exclusively English-speaking, majority US-based, with a smattering of famous names (well, in certain circles). To be quite honest, we've no idea where it might lead. But with a client list like ours, we feel we're already playing in that VIP league already, and we're excited at the possibilities coming from wider exposure.
To mark the occasion, we've (finally!) got a Code For The People website up - and we're really quite proud of it. It's in the 'one page' style - partly because we didn't have time to write loads of editorial, but also because you don't have time to read it either.
Although the content is hardcoded, it's been built as a barebones WordPress theme, giving us easy access to extra functionality - there's an embedded contact form, for example, and an embedded version of Simon's Twitter Tracker widget. I'm sure we'll migrate more stuff into it over time. But then again, I bet we've all said that, and then... well, you know.
It's been a(nother) fantastic piece of work by Laura Kalbag, who led on the visuals, and took charge of the coding duties in the latter stages. Thanks, Laura.
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.
The run-up to the Olympic Games starts in earnest today, with the arrival of the flame on British shores - and Whitehall is opening up its dedicated Government Olympic Communication operation, providing 'a single point of contact for London 2012-related media enquiries ... until the end of the Paralympic Games on 9 September.' There's a dedicated press team, drawn from across Government - and a dedicated website, which I'm genuinely proud to say we built.
DCMS asked us for a site which could draw together the many streams of information - text, photo and audio - already being produced in government, and make them easy for journalists to explore. Many departments were issuing press briefings, or posting fantastic material on Flickr or YouTube, but there was no easy way to browse through it, or conduct targeted searches.
Cue some WordPress-powered magic.
A trained eye will spot our heavy use of custom post types. Some, like 'backgrounder' were fairly straightforward, identical to posts or pages, but separated out for convenience. Others, like 'theme' and 'region' were more complex - and were also sync'ed up to custom taxonomies, allowing us to 'tag' other post types as being relevant to a given theme/region. We then interfere with WordPress's default selection of display templates, to show collated results pages: editorial on one side, search results on the other.
Here's an example: a 'theme' page, showing relevant results from the other post types.
There are specific custom post types for photos - specifically Flickr; and videos - specifically YouTube. (Why these two? Because pretty much every department is already using them.) And in both cases, we've written custom code to interface directly with the host sites' APIs, making the process of adding new material a breeze.
Let's take YouTube, for example. Editors simply click 'Add New', then paste the URL of a YouTube clip's page into a clearly labelled box. We extract the clip's unique ID, then query the YouTube API to get its thumbnail, which we save as the WP post's featured image; and the YouTube-recommended embed code. Couldn't be easier.
Then, when you view the clip's page on the site, the video gets embedded automatically - and we display the YouTube embed code, for journalists or bloggers to take away to their own sites.
We let the journalists and bloggers customise the embed's dimensions via an ajax call back to YouTube; so if you need a clip to be a certain size, we'll recalculate the width and height accordingly. We store your preference using a cookie - meaning that now, every time you look at a video page, the embed code is pre-customised for you.
Then there's the multi-dimensional search function. Each post type has a number of taxonomies associated with it: theme, region, originating department, and so on. So when you're browsing, say, the photo archives, you can specify that you want photos on a given theme... or from a given region... or by a given department... or in a given month. Individually, or in combination.
It's the first time we've tackled this kind of 'advanced searching' functionality, and it probably doesn't sound all that complicated: but I can assure you, it is.
It's also the first time we've delivered a responsive design on a client site. We originally planned three versions: phone, tablet and desktop. But a late change of code base, and (to be honest) questions over its real value, led us to drop the tablet view. For the most part, it's just been a case of un-floating the various blocks in the layout grid - but a few elements, like the primary navigation and homepage carousel, needed a bit more work. Give it a try if you've got a smartphone handy; or resize your (non-IE) browser to a really narrow size. It should kick in at 480px width.
Behind the scenes, working with our very good friends at CatN Hosting, we've added a Varnish cache - just in case there's a sudden huge leap in traffic. Hopefully it won't ever be required. But for the same reason they're putting missiles on top of east London tower blocks, we're planning for a worst-case scenario.
My thanks to Nick at DCMS/GOC for commissioning us, and protecting us from the internal wrangling. To Joe at CatN, for leaping into action when called upon, and for very kindly volunteering to help with Varnish. And to the G-Cloud process, directly and indirectly, for its help in buying Joe's services. To the other clients who, knowingly or not, contributed ideas and code to the site's development. But most of all, to designer Laura Kalbag, who developed the visuals and did the bulk of the front-end functionality. You're all wonderful.
Let the Games begin.
This has been a Code For The People production.