Using HTML5 for GOV.UK
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).
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.
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.