Cutting down on cookies: practical tips


The Government Digital Service’s Implementer Guide for the new cookie rules recommended that site owners should audit their sites, and look to reduce ‘unnecessary and redundant cookies’. With or without the new rules, it’s still sound advice. So I thought I’d share a couple of things we’ve done for clients, which might be helpful to other people.
It’s easy enough to look at the cookies being dropped by your own site, but life becomes a lot more difficult when it comes to third party services. You might not realise it, but every time you embed a YouTube video on a page, you’re exposing your users to YouTube cookies. And if you’ve included Twitter’s excellent profile widget on your site, guess what? – it’s dropping cookies too.
Both services would probably argue that any user tracking is ultimately for users’ benefit: and in fact, unlike many in the web industry, I have some sympathy for that argument. But I’m not entirely comfortable with government websites acting as (unwitting?) conduits between users’ personal web histories and third-party services.
YouTube
YouTube offers a seamless solution: a parallel domain, youtube-nocookie.com which gives you the exact same YouTube playback function, but tighter controls over cookies. If you’re ever embedding a clip manually from youtube.com, you’ll see an option to ‘Enable privacy-enhanced mode’: tick this, and you’ll see the embed code’s reference to youtube.com change to youtube-nocookie.com. Easy as that.
(The name is slightly deceptive: it doesn’t completely eliminate the use of cookies. YouTube’s help pages indicate: ‘YouTube may still set cookies on the user’s computer once the visitor clicks on the YouTube video player, but YouTube will not store personally-identifiable cookie information for playbacks of embedded videos using the privacy-enhanced mode.’)
On a couple of client sites with large quantities of videos, FreeSpeechDebate and the Government Olympic Communication site, we use a WordPress custom post type to simplify the process of adding YouTube content. All they need to do is paste the URL of the clip’s page into a WP editing screen, and we extrapolate all the rest: embed code, thumbnail image, dimensions and so on. The videos are then included automatically at the top of the appropriate page.

As seen at goc2012.culture.gov.uk

We’ve now altered that functionality to serve all videos from the youtube-nocookie.com domain; and also to include the youtube-nocookie.com domain in the embed code we offer. A fairly simple case of find-and-replace, initially in the page template’s PHP, and subsequently also in javascript if users want to customise the dimensions.
Twitter
Avoiding Twitter’s cookies has been slightly trickier. Our solution has been to move clients away from the official Twitter widget, instead deploying my colleague Simon Wheatley’s well-established Twitter Tracker plugin (downloaded well over 10,000 times), which we’ve adapted to permit cookie-free usage.
Twitter Tracker adds two new WordPress widgets: one showing Twitter search results for your chosen term or hashtag, the other displaying all tweets by a given user. It includes local caching of the data, minimising traffic to Twitter and (in all likelihood) rendering the pages much faster – for the loss, admittedly, of a ‘real time’ view, which may or may not be important to you.
However, because the widgets call users’ profile images live from twitter.com, cookies were still being dropped. So there’s now a ‘partner plugin’, called Twitter Tracker Avatar Cache, which – as the name suggests – downloads any Twitter profile images and saves them locally within WordPress. No need to call them in from twitter.com, and hence no cookies. (For those who don’t want this extra functionality, the base plugin will continue to work as it always has.) It’s available now from the WordPress plugin repository: find it via the ‘Add New’ screen in your WordPress admin interface.
For most people, this will probably seem like overkill – and in fairness, it probably is. But for quite a few of our clients, it’s been a helpful way to avoid some of the more sensitive issues around cookies and usage tracking, without compromising on site functionality.

That's the way the cookie rules crumble

New EU rules relating to the use of cookies on websites came into effect in May 2011, but the UK Information Commissioner gave everyone a year to work towards compliance. In practice, of course, that meant everyone ignored it for 51 weeks, then panicked.
Along with much of the European web industry, I spent last week fielding calls from clients, asking whether their site was compliant with the rules – or perhaps more accurately, whether they were facing a £500,000 fine, like they’d heard on the news.
As ever with these things, it boiled down to choosing a role model, and copying what they were doing. The Government Digital Service and DCMS (as lead department) were both taking an ‘implied consent’ approach, with pages listing and justifying the use of each individual cookie; and the BBC, initially, were doing likewise. That was good enough for most people.
(Late in the week, the BBC actually changed tack, and introduced a new ‘explicit consent’ approach. Thankfully, most of my contacts had bought into ‘implicit consent’ by then.)
And then, outrageously late in the day – a scorching hot leave-work-early Friday at that, the ICO cracked.
Posting on their corporate blog, Dave Evans announced that their guidance had been updated to ‘clarify’ that implicit consent was a valid form of consent, as long as you were ‘satisfied that users understand that their actions will result in cookies being set.’ In other words, implicit consent with appropriate information was absolutely fine.
It was the only sensible outcome. Constant popups or warning banners would have killed the concept of cookies, which are used – in the vast majority of cases – to make things easier for users. It would have undermined most websites’ traffic analysis. And besides, with third-party services from sharing to embedding now common on every web page, I’m not convinced any technology could have successfully blocked every attempt to drop cookies anyway.
It hasn’t been an unhelpful exercise. I broadly agree with the principle of cutting down on ‘unnecessary’ cookies, and in this past week, as a result of the fuss, we’ve made changes in how we do certain things. (Blog post to follow.) If it has made online giants like Google, Twitter and Facebook think again, and be more transparent about their use of cookies (and other tracking technologies), then that too is a good thing.
Common sense would seem to have prevailed. Hurrah. But I’m sure a lot of people are less than happy at the ICO’s handling of this.

Code For The People presents: HMG's Olympic & Paralympic media centre


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.

BuddyPress powers new Civil Service community site


There’s a new website in the civilservice.gov.uk domain – but because it’s at a subdomain, of course, it doesn’t count as a ‘new’ site. (That’s an observation, not a criticism; I’m as guilty of doing this as anyone.)
Created by DWP ‘in their role as leaders of Govt agile adoption on the ICT Strategy CIO Delivery Board’, it’s a community site which sets out to provide a space for ‘people in the public and private sectors to discuss, share and get advice and answers on adopting agile in UK Government projects’. As such, it ticks a box from the ICT Strategy Implementation Plan.
Naturally I’m delighted to see they’ve built it using BuddyPress. It looks like a fairly ‘vanilla’ installation for the moment, running using the free BuddyPress Corporate theme, with minimal customisation. I’ve also spotted the Q&A premium plugin in there too. The IP address reveals it’s the handiwork of Harry Metcalfe’s DXW crew.
They’re doing the right thing by just charging headlong into it; it seems like all the Facebook-esque functionality – personal profiles, groups, forums (?), friending, etc – has been enabled. Some of it will work, some won’t. But since it’s all in there already, you may as well give it a try.
I’d also endorse the decision to work with a ready-made theme: I recently looked into developing a BuddyPress theme from scratch, and soon gave up on the idea. It’s terrifying. If you really want to customise the look & feel, do it as a Child Theme.
The fate of any BuddyPress is dictated by the momentum it builds (or fails to build). The site, or more accurately its membership, needs to provide good enough reason for people to come back regularly, and contribute while they’re there. I wish them well.
We’ve got a BuddyPress-based government project of our own in the works; the development work is close to completion, but we’re facing a few bureaucratic hurdles. I’m hoping for progress in the next couple of weeks; naturally, I’ll blog about it in due course.

WordCamp 2012: sleeper service to Scotland, anyone?

Picture courtesy of Wikipedia

This year’s big UK WordCamp will be in Edinburgh; tickets are due to go on sale in the next few days. It’s a beautiful city, and the venue looks magnificent. But obviously, it poses a few logistical problems for those of us based in south-east England.
So I was thinking… does anyone fancy taking the Caledonian Sleeper service overnight from London Euston? Tickets for that weekend are now on sale; at the time of writing, it’ll come to £100 return. However, if we can get a group of 10 together, we can probably get a decent discount… not to mention the benefit of each other’s fine company. (And the prospect of being the world’s first Mobile WordCamp!)
If you’re interested, add a comment to this blog post (or send me an email via the contact form). Obviously, we can’t do anything about it until tickets actually go on sale, but it would be a good idea to get a feel for possible numbers.

Boris is back

Just to close off the story from a couple of weeks ago… as you’ll almost certainly know already, Boris Johnson won the London mayoral election. And as pledged, he has now returned to tweeting as @MayorOfLondon – an account which, we have now confirmed, belongs to the Office of Mayor, and not Boris personally.

New logos for all government departments


Consistency of government departments’ visual identity has been on the cards for quite some time. In such austere times it’s increasingly indefensible not to; it’s how the citizen sees it anyway; and there’s evidence, from home and abroad, that it can be beneficial. I blogged back in 2010 that, with a new government taking power, it was an idea whose time had come; and the Single Government Domain project was always likely to be the trigger.
A couple of months back, I received a tipoff that the new logo style had been agreed; and that departments were starting to factor it into future comms plans – but I didn’t want to blog about it until the details were made public. Looking through the GDS Github account this morning, I came across a publicly accessible PDF file entitled ‘HMG Identity System’, carrying Cabinet Office branding, dated January 2012, and uploaded in the last fortnight. It confirms the tipoffs I had received.
If you’ve been following the evolution of the gov.uk project, it won’t come as much surprise to learn that each department gets a single identifying colour. (Health get two – one of which is NHS Blue.)  For the most part, the colours will be broadly familiar from existing departmental palettes: Education’s orange is the most striking exception. Departments’ sub-agencies will also fall into the same system, and will inherit the colour of their parent department.

All logos are to be dropped in favour of a digital-friendly Royal Coat of Arms, except for those departments whose current identities use a particular ‘heraldic badge or crest’ – the Home Office and MoD are noted specifically, but I assume the Wales and Scotland Offices would be covered by this too. (NIO’s use of a crest seems somewhat half-hearted, so I guess they’ll use the common one.)
There will also be ‘auxiliary icons’ for use in certain circumstances: the crown as seen already atop gov.uk, and a somewhat unpleasantly squared-off Union Jack.
The document says it can be used in either portrait or landscape orientation, but there’s no indication of how it will handle extra-long names such as Defra’s.
It’s very simple, surprisingly so in fact. The choice of typeface – Helvetica Neue, I assume? – doesn’t immediately say British, in the way that Gill Sans might have done. It’ll be very easy to forge; and, I fear, very easy for arms-length bodies to get wrong. But purely subjectively, I do quite like it.
Update, 11 May:
The ‘new look’ is in fact already ‘out there’, if you know where to look. I’ve had it confirmed by the Dept for Education that they’ve been using it on their website since ‘the start of April’, making them the first dept to do so. However, implementation is patchy: the ‘old’ DfE identity is still in evidence: I’m seeing an old logo as their website’s favicon; on their Facebook page; and despite their claims to have changed it, as their Twitter icon and profile background.

There’s also photographic evidence of the new style in use by the Teaching Agency, a DfE executive agency.
I haven’t yet found evidence of any other departments using it yet. If you have, do please leave a comment.
A bit of extra background for anyone who’s interested:

  • The Dutch government rebranded all ministries with a consistent (royal crest) logo and typeface in late 2007. The work was led by design agency Studio Dumbar. (Warning: Flash heavy.)
  • Canada and Germany have had consistent departmental identities for ages. France adopted a common logo (Marianne) in 1999, but its application is somewhat variable.
  • The introduction of a consistent NHS identity was exemplary: 95% of people now recognise it spontaneously. This website explains what they did, and why.
  • The departments of the Northern Ireland Executive share a common visual identity (hexagon-based logo and typeface): but the website about it seems to have been rationalised. The Scottish government doesn’t appear to have any kind of identity for its Directorates… which I guess is consistency of another kind.