Indifferent government is so last decade

Public Strategist is on a nostalgia trip this afternoon:

[blackbirdpie url=”http://twitter.com/pubstrat/status/38656439329374209″]

He’s dug out a nice chart from a decade ago, outlining four potential future scenarios for digitally-enabled government (though in those days, we used to call it things like E-commerce@its.best.uk [PDF]). Bless, simpler times.

Anyway, back to that chart:

Quadrant chart of e-government

It’s pretty clear we’re in the Indifferent quadrant as of Spring 2011. Indifferent government online, as one person who’s seen a few things put it to me on Twitter, is the ‘create it, then leave it’ philosophy. The site is the deliverable, the launch is the project.

That’s not how it’s meant to be. Let’s take the homepages of two large organisations with big announcements this week:

DWP

Welfare Reform Bill

Nokia

Nokia & Microsoft form mobile alliance

One of those sites is clear what the important news is, and takes you there. And when you get there, it doesn’t just give you the news, it explains what’s going on, why it matters to you, and invites you to talk about it. It’s trying to persuade you, involve you, and convince you.

Indifferent sites don’t much care what you do. They’ve put the information (or consultation, or campaign message) out there. The rest is up to you. Some people take it, most people leave it. It’s not the website’s fault if you don’t like the message.

But it’s an outdated approach, that wastes money and potential support. We’re surrounded by organisations who are using the web to persuade and mobilise: literally, engaging digitally.

This man’s not backward about telling you he wants you to buy fish caught in sustainable ways:

Hugh's Fish Fight

These people think we should change the voting system and want you to help them:

Yes to AV

And these people would really rather we didn’t:

No2Av

The web is a communication medium, to persuade and influence, or even just to help people scan, prioritise and complete their tasks quickly. Indifferent design, as a symptom of indifferent public services online, is so last decade.

24tips: build a mobile version of your site

24 Dec: in the rush to build apps for everything, it’s easy to lose sight of the easier, simpler and cheaper approach to making your content accessible to mobile users: a mobile version of your site. Huh – isn’t that an app? Not necessarily: with a bit of inspiration and tweaking of your templates, you can serve a different HTML page to visitors on phones (smart or otherwise) including some pretty fancy visual tricks.

guardian mobile app

  • CSSiphone is a nice gallery of inspiration for how mobile sites can appear on the iPhone, and there’s another gallery from Smashing Magazine
  • WPTouch is a free WordPress plugin, which switches your site to an iOS-style layout for visiting iPhone and iPod Touch users, for virtually zero effort
  • Mobify offers visual tools to help you identify which parts of your site you want to reformat into a mobile version, and counts some pretty serious web designers and CSS purists among its users

In 2011, I’m hoping to have a bit more to say about this space, and share a little something I’ve been working on to make it really super-easy to build a mobile site. Stay tuned!

24 helpful tools and techniques for doing web stuff cheaply

24tips: filler text for realistic layouts

23 Dec: if you’re in the business of mocking up sites or designs for other people to comment on, you’ll have encountered the challenge of making a layout look realistic without having much content to play with.

Fillerati

The conventional approach is to use ‘Lorem Ipsum’ or a special chunk of faux-Latin text designed to show how text flows around your layout using realistic words and sentence lengths, but without distracting your (internal) client with the content itself (doesn’t always work in my experience). If you’re looking for a chunk of Lorem Ipsum text, try the Lorem Ipsum Generator, which can produce paragraphs or lists to your specification.

But faux-Latin isn’t the only option: for something more readable (but beware: potentially more distracting for your audience), try Fillerama, which takes the same approach but using quotes from Star Wars, The Simpsons or Futurama. Even better, the lovely Fillerati gives you passages from great works of literature by HG Wells, Jules Verne and others, and lets you choose exactly how many words or list items to copy.

Educate and delight your clients, in one easy step.

24 helpful tools and techniques for doing web stuff cheaply

24tips: lo-fidelity wireframing

20 Dec: the biggest challenge in a web project is getting everyone’s expectations in roughly the same place. The big boss thinks it will engage thousands (but is actually happy with it looking shiny), the (internal) client says it needs to have functions X, Y and Z (but actually doesn’t mind, as long as it is simple to manage). And you? Well, you’ve got your own ideas, which evolve as you spend time thinking about it and learning exactly what the goals really are.

wireframeLow-fidelity prototyping is a big part of the solution. For years now, I’ve carried around a plain paper notebook full of rough sketches of projects and sites I’m planning or working on – the one on the right is from an early iteration of this site.

These kinds of sketches are good to help with your own thinking, but when you’re trying to get other people onto the same page, low-fidelity wireframes are even more important. They take away the concerns about colours, fonts and imagery, and help to focus attention on what’s really important on a given page, and the flow between different pages on the site.

And while sketching on paper is good, there are some great apps to help you come up with tidy, low-fidelity prototypes of common web interfaces:

Balsamiq wireframe

Balsamiq is a downloadable Air app ($79 one-off) with a whole library of interface elements and icons, to get you started building a wireframe quickly (see example above)

Mockingbird (from $9/month) works in the browser, and has a similar template library, with a bit less of the Comic Sans about it and a slightly cleaner interface, including some neat features like being able to create links between pages and export the linked wireframes as a PDF

Of course, low fidelity wireframes are design discussion documents, and need to be presented carefully. Some (internal) clients don’t really engage until they see a design concept with a bit more polish, especially at senior levels. For those guys, showing them comparative examples of live sites with the kind of style or functionality you think they have in mind, and gauging their reaction, can be a more effective place to start the discussion.

24 helpful tools and techniques for doing web stuff cheaply

24tips: annotating a web site

4 Dec: Need to discuss website layout tweaks or pet hates with someone you don’t sit next to? Here’s a nice, no-nonsense little app: MarkUp

MarkUp.io annotation

MarkUp gives you a little bookmarklet to drag your browser bar which, when clicked, opens up a little toolbar on whatever site you happen to be on. You can draw on the page using circles, squares, arrows or freeform tools, and leave text comments. When you’ve explained your feedback, you click ‘Publish’ and your annotations are saved to a short URL you can share with anyone – a designer, a client, your mum – up to you. Even better, they can add to your annotations – see the Helpful Technology homepage annotated here.

24 helpful tools and techniques for doing web stuff cheaply

Stimulating informed debate around AV

Six weeks ago, Dave Briggs kicked off a little project which he described as follows:

I’m rather interested in the referendum that we are going get get next May in the UK about changing our voting system.

It occurs to me that it isn’t an issue I have a particularly strong understanding of, and I’m sure that’s the case for a few other people as well.

So, with the help of friends like Anthony and Catherine, I’ve kicked off AVdebate – which will be an online space for constructive, deliberative debate and learning about voting reform, which will hopefully help folk make up their minds.

For now, AVdebate is a Google Group with a dozen or so people on it, but there’s already been some interesting activity:

My small recent contribution was to start thinking about how the site might be organised, and how you might start to visualise a debate of this kind online. A timeline? A mind map? The pros and cons? Or something else?

There’s great potential in this kind of site, that takes the work of pioneers like Debategraph and uses a combination of curated and original content, social media aggregation, and a really good interface to help host and stimulate an intelligent discussion about a tricky question. The AV referendum feels like a great testing ground, but I see potentially much wider application to help explore the big policy questions of our time. What’s the economic case for cuts vs stimulus? Why is tackling climate change difficult? How can we improve the lot of people in the developing world? What would it take to make our society more socially mobile?

It would be great to have some more minds and ideas on the job. If you’re interested in this stuff – whether it’s the content, the aggregation, the user interface or the sociology of it all – then it would be great to have you on board the Google Group. It feels like we could build something really quite clever if we put our collective minds to it.

Newsroom: the backstory

Cast your mind back if you will to chilly February, amid the growing crescendo/death spiral of pre-election communications. Neil and his team were finishing off the new corporate website, having shunned friends and family for weekends on end. A member of the senior management team came bounding back from a cross government meeting where they had been shown this, and, in a nutshell, they wanted one too.

The brief was helpfully loose: make it easier for the media to access the information they needed via simple link in the bottom of a press notice, without generating a load of extra work for Press Officers. From the Digital team’s perspective, we wanted to increase visibility of our YouTube and Flickr content for media, ensuring that these channels get promoted in every news release. Oh, and the kicker: make something technology independent, that could survive the imminent move from WordPress to SiteCore, without incurring external costs. So we set out to develop something based largely in client-side technologies (i.e. Javascript and CSS) which usefully aggregated corporate announcements, multimedia output and press office contacts for mainstream media and bloggers in a single place – frankly, more of a technical and design challenge than a strategic one, but a fun one nonetheless.

There were half a dozen or so information sources to play with*:

  • Press Releases, ministerial speeches (RSS feed)
  • Tweets from corporate accounts (RSS feeds)
  • Videos on YouTube (RSS feed with multimedia enclosures)
  • Flickr photos (API)
  • Podcasts on SoundCloud (added by the team later, again, RSS feed)
  • Contact details for Press Officers & key facts on policies (static text)
  • Email alerts for media to sign up to via GovDelivery

*We also had a plan to add a couple of extras which were built but not yet used. Case studies published elsewhere online were to be tagged using a corporate Delicious account and imported into the newsroom using the RSS feed for the tag. Urgent statements or rebuttals put out by a Press Officer out of hours sometimes aren’t issued as Press Notices in the normal way, so we set up a private Tumblr site to which these could be emailed, which could be embedded or imported into the Newsroom, again via RSS.

The primary tool in our arsenal was the wonderous Feed2JS, which takes an RSS feed and gives you a snippet of Javascript to embed which will render it for you in HTML. It’s free and awesome (and you can even self-host it if you want). This little tool helps single-handedly render the majority of the Newsroom content, the code snippet tweaked slightly to ensure the <noscript> alternative ensures the site degrades fairly gracefully for non-Javascript enabled browsers.

I also developed a couple of code snippets to render the content of a Flickr account or set as an RSS, HTML or Javascript snippet, and likewise with YouTube – feel free to grab the code from those links if that kind of thing is of use to you.

  • Version 0.1 (click the image to enlarge) was a good proof of concept, built in an empty page template on our old WordPress site. But there was too much to take in for a notoriously lazy audience.
  • Version 0.2 was an improvement, splitting the content into more manageable chunks with a natty Apple-style navigation bar and some concertina sections done in Javascript – but it still felt hard to differentiate the content types on the page
  • Version 0.3 was almost there, introducing some nice little icons for the different content types, using CSS to help visually distinguish the lists, and losing the unnecessary mission statement with some DOM-rewriting to save valuable pixels for this audience. And then we moved to SiteCore and purdah struck, so…
  • …Version 1.0, which you can now see in all its glory transferred the code into a new CMS and migrated across a stylesheet. The team added SoundCloud podcasts using its RSS feed, in the same way as the other media types.

Early feedback on the prototype from journalists was positive, the Press Office got a nice-looking tool which required literally zero additional work beyond emailing over their contact list, and Neil got one of his much-loved quick wins – and within SiteCore too. Props for this one to Rhys and Ian in the BIS Digital Communications team.

Photo credit: Victoria Peckham

A Load of Cobblers: my tumblog on the favourite tools I use

toolbox

Just a quick one to flag for readers who get my stuff by RSS that I’ve got a parallel tumblog alongside this main blog, which I use to post up quick reviews of tools that I like for web work. I’ve called it A Load Of Cobblers, to celebrate the spirit and practice of cobbled-together webbery, made from many individual pieces.

I’ve just posted a few new bits and pieces on there:

  • Feed2JS: a simple Javascript-based way to show an RSS feed on a site
  • Page Saver: a Firefox plugin to take a screenshot of the whole page, not just the visible portion
  • 7 favourite digital engagement tools: from my presentation at ConnectedGeneration back in September

There’s also stuff about the email newsletter software Campaign Monitor, Flash video players and how to get a feed of comments on your Flickr photos.

Coming up in the near future are likely to be snippets on Google Analytics’ API and the GAPI PHP library, the uptime service Pingdom, and Flickr open-source-licensed search tool, Compfight.

Corporate homepage design: who’s doing it right?

goodcorpweb screenshot

Recently, I’ve been grappling with the issue of what a corporate homepage should do. Obviously, a lot of what I do is central government-oriented but in this case I’ve been casting the net quite wide, as the interface design problems of corporate organisations in whatever sector are actually pretty similar.

A corporate homepage generally isn’t trying to sell, but it might be trying to signpost customers quickly to an e-commerce microsite or customer portal. It’s not aimed at a nice, neat target audience, because it’s got to work for journalists, students, staff, investors and a whole bunch of other people. It’s promoting a wide portfolio of products or services, trying to illustrate it with imagery which is engaging but also generic. And corporate homepages by definition have a large number of people within the organisation clamouring for space and priority.

Some focus on identifying and signposting different audiences, some try and help people accomplish their goal and some just aim to tell compelling human-scale stories about megalithic organisations.

So I’m starting a collection of good corporate homepages, using the Bookmarklist open source tool that powers Digitalgovuk. In a nutshell:

  1. Find an intelligent, elegant homepage of a corporate organisation (i.e. not a startup or personal site, and not primarily a sales or campaign site)
  2. Bookmark it in Delicious using the magic tag ‘goodcorpweb’ along with other descriptive tags e.g. the sector, the style and anything else that’s relevant
  3. It will magically appear at: http://www.helpfultechnology.com/goodcorpweb for anyone to browse and discover

Between us, we can give corporate web teams the world over a useful collection of great inspirations for a tricky interface design challenge. Thanks!