Making public data pretty with custom CSS
I’ve alluded a few times on this blog to the exceptional flexibility we’ve built into our shared website platform at BIS. It’s something I’m fiercely proud of and which bears repeating – and in that spirit I thought I’d share the latest example: the new BIS data store which went live on Friday alongside this release of staff data.
There are three bits of magic built into our souped-up enterprise CMS which are enough to make any grown web manager drool:
- An ‘insertable code’ widget which lets us inject 3rd party code snippets from any source into any page and prevents them from being chewed up by the underlying software. Not only does this let us bring more engaging and dynamic content into our site from YouTube and its ilk, but it also opens up a whole world of possibilities to use third party plugins, create widgets from RSS and Javascript, and generally do more with less.
- Massively flexible page templates which allow us to choose the number of columns per page and add, remove, change the order of sidebar ‘panels’ (think WordPress widgets). Not only that, but we can cascade these panels from one page to all the child pages within a section, remove them in one fell swoop or fine-tune which pages do and don’t show each panel.
- A ‘custom CSS’ attachment which means we can upload bespoke CSS to specific pages, and use this to do anything from tiny tweaks to utterly altering the look and feel of a page or whole section of pages.
It’s this third bit of magic that we’ve used to create the new BIS data section, overriding the default layout of a general page template to add an attention-grabbing banner and replace the standard left-hand navigation with a horizontal nav bar.
This is what the original template and modified layout look like side by side:
We can go much further than this too for future campaigns – to suppress the primary navigation, swap the BIS logo for something else, hide the footer, or – well, pretty much anything.
But perhaps the most impressive thing here is that it took just a few hours’ work by one of my team (the highly capable Mr. Ian Azille) to create this eye-catching landing page with a different look and feel, which essentially aims to say three things:
- This data stuff is important
- This data stuff is different from the rest of the site
- This data section forms part of the government’s data store (indicated clearly by the use of the ‘linked data nodes’ graphic and data.gov.uk promotional spot in the right hand column)
I think it ticks those boxes. It’s early days, of course – the section only went live on Friday at 4pm and admittedly there’s not much content in there yet. We plan to evolve this over time into a more substantial shop window for all the released data from BIS and its partners with subscription by RSS and email, a place to gather feedback and suggestions for new data to release, and somewhere to showcase the apps that have been created using BIS data.
And as a proof of concept for creating flexible layouts in support of new initiatives and campaigns, I couldn’t be more pleased.
Here’s to the magic of CSS, and having direct access to it and in-house people with the right skills in order to run a properly agile web operation.
Related posts (auto generated)
If you enjoyed this post, why not leave a comment or subscribe to my RSS feed to get future posts delivered to your feed reader?
Hello, I'm Neil Williams. I'm a government web geek, a dad, a husband, a grower of veg, a keeper of hens and a lapsed comedy writer, roughly in that order. 
[...] we supplement with in-house training to get website managers au fait with Sitecore and all the trimmings BIS and Eduserv have [...]