A ‘responsive’ Review

One of the things that has changed in the public sector in the recent past is the pressure not to spend money on glossy, printed publications and then distribute them to stakeholders far and wide.

The requirement or desire to pubish this information doesn’t go away though and so the pressure shifts to finding the best way of delivering via the web. In many ways this is the core of a ‘digital by default’ strategy – the first battle is convincing people that just dumping a PDF online isn’t an adequete solution – once you have succeeded there then you can start to do something a little more interesting.

Our ‘Annual Review‘ is the more public facing retrospective of what we have achieved as an organisation over the last year. The ‘Annual Report’ is its big brother, filled with numbers, charts and alot of copy that meets our legal requirements. The ‘Review’ moved to a ‘web native’ publication last year so there was no convincing needed this year.

There was a desire to try and do something a little more flexible and design led then we have been able to do in the past as well as to produce something that was available on multiple devices and made use of video as well.

The content is clearly the focus of something like this – we had some great copy, commissioned photography and some ‘talking heads’ video for the first time as well so the plan was to create a site that best featured the content but did so in a way that used our brand guide in an interesting way and also demonstrated what could be achieved technically.

I sketched up some wireframes in Balsamiq and was keen to keep the site as lean as possible and to take advantage of the web rather than just throw up a HTML brochure.

The site is hosted on Heroku, the content is served using the lightweight Ruby CMS Nesta, deployed using Git, the video is hosted on Vimeo and the whole thing was stitched together by my regular partner-in-crime Stefan Goodchild.

Stef went with a very ‘responsive‘ design that allowed me to demo the site internally on a couple of mobile devices as well as different size monitors and across browsers. The site even works in IE7 (with alot of fiddling from Stef!). We have also used our corporate ‘print’ font (FS Ingrid) throughout the site as headers thanks to the power of Fontdeck 🙂

I am pretty proud of what we produced and would like to thank Stef and the in-house team who produced the content. I believe it is a technically great site with some lovely design touches and some very high quality content. When I mentioned hanging onto the ‘little wins’ recently – this is a fine example of that!


  1. Wow that is a really well designed document. This year at work we published our annual report and quality account online in microsite form instead of a hard copy (if requested though we print off the PDF on the microsite). This saved around £5,000 in printing costs for each document and allowed us to illustrate the data within by using interactive graphs. You can view the annual report at http://www.stgeorges.nhs.uk/annual/ and quality account at http://www.stgeorges.nhs.uk/quality/

    One thing of interest with responsive design is that IE6 (which still has a major share in our browser market) doesn’t support media queries. There are frameworks (like less which I’m now using) that patch up this issue though.

    Really impressed by this and it’s given me a lot to think about when the reports season rolls around next year and I can see this document being the flagship as more health organisations move from expensive print mediums to online information (backed up with on-demand physical printing).

Comments are closed.

%d bloggers like this: