We took a decision early on in the project that GOV.UK should be forward-looking and exploit modern browsers. Browser technology evolves rapidly, so constant iteration will allow GOV.UK to exploit new technologies as they reach maturity.
Our aim is to make GOV.UK accessible to the widest possible audience but this does not mean working to the lowest common denominator. If a new feature, for example auto-location, helps meet user needs, we will consider it but always make sure that the key content of the application is still available to browsers that don’t support it. Over time, as our browser support statistics indicate, we’ll be introducing new features and relying less on fall-back solutions.
We made a decision early in the project to use HTML5 because the new features it offered were reaching an appropriate level of maturity. A quick “view-source” will reveal that we're already using the HTML5 doctype, as well as a host of the new elements available in the new version of the HTML5 specification.
Because GOV.UK is all about clarity and information, having the best semantic mark-up is a priority. More explicit mark-up options, e.g. being able to explicitly tell a screen reader that our navigational links are there using the <nav> element, have massive potential accessibility benefits.
Internet Explorer is unable to recognise many of the new elements so, where we’ve targeted these for styling, we’ve used Remy Sharp’s HTML5 shiv as a patching tool. To address some CSS3 attributes and psuedo-classes that IE can’t deal with, we’ve used selectivizr as a polyfill (patch).
In both cases, these JavaScript patches make styling consistent on GOV.UK for the user without expending too much time and energy re-styling for older browsers. We only serve these extra helpers to IE6 and IE7, so other browsers don’t have to download unnecessary files.
We've also used the GeoLocation API, the part of the HTML5 spec that allows your browser to auto-detect your location, so that we can tailor information and results to specific councils or boroughs. We'll be making more use of this in the future, perhaps to help users through transactions. We don't want to be creepy, however, so we've only enabled the location look-up when a user has explicitly asked us to find their location automatically.
Looking forward, we're considering the LocalStorage and ApplicationCache APIs. LocalStorage will allow us to offer low-level customisation on our site, without the need to use any extra cookies or store any data on our servers.
ApplicationCache would allow users to work offline. For example, if they were filling in a form and they lost connection, as can happen on a 3G mobile, their browser would store the information until a connection becomes available again.
The most important thing about using these new features is that in most cases it’s actually your browser providing you with extra functionality, we just tap into it. You should find over time that you get a better, more robust experience as your browser vendor of choice starts to integrate HTML5’s toolbox. And it also means we don’t have to send as much “over the wire” in terms of JavaScript, to enable those experiences. This, along with security, is another reason why it’s vital that users keep their browsers as up to date as they can.
We are, of course, all too aware that much of the specification for HTML5 is in flux. We're prepared to keep on top of additional, redefined or removed features. Fortunately, the way we've designed the front-end of GOV.UK makes it quite simple for us to make changes across the site. The majority of GOV.UK is templated from one central location, with each of the individual apps beneath the hood referencing these layouts via a layout packager we've called "Slimmer".
We’ll be covering a bit more about design patterns; how we deal with legacy browsers and small-screen devices; and some foibles and advice on using HTML5 over the coming weeks.
Frances Berriman (@phae) is a front-end developer at GDS.
2 comments
Comment by Ian Leggett posted on
I work as a UI Developer for a company and we are using many of HTML 5's benefits. No more video codecs such as Flash and really useful API's like Geo Location. Its good to hear your onboard of the HTML 5 band waggon. Great News.
Comment by Simon Gordon posted on
Hi Frances, We are really interested in your approach and very keen to meet up with whoever is in charge in your area. Our company, Facewatch, is an online crime reporting system written in Ruby on Rails and we are now moving towards creating all new functions as API's/widgets. During 2012 we will become the norm for reporting low level crime across the UK with tens of thousands of users and there may well be some synergy to working together. We are free for the Police and Businesses, funded by sponsors through a not for profit company.
Could we meet up sometime? Perhaps come down to my bar, Gordon's wine bar, in Villiers Street for a bite to eat and a chat.
Best regards
Simon Gordon