New HTML 5 Theme

Things have been far too quiet here on the Web Team Blog of late so here’s the first of what I hope is a more regular series of posts highlighting some of things we have been hard at work on here in the Web Team.

Today’s post is about our recently launched HTML5 WordPress theme which we are trialling here on the Web Team Blog. The theme represents City’s first foray into HTML 5 and responsive design and incorporates our new digital visual language developed as part of the NextWeb project.

The theme has been developed as a child of the HTML 5 Boilerplate theme by aarontgrofg which makes use of many of HTML 5′s new semantic classes, for instance: navigation menus use <nav>, blog posts are marked up as <article> and the footer is now, well <footer>.

HTML 5′s new tags bring with them significant accessibility improvements. If, for example, a screen reader or other user agent wants to offer the opportunity to skip over navigation elements and take the user straight to the content, the page now contains the semantics to do just that. The screen reader only has to look for <nav> elements rather than a whole host of other mark-up, class names and ids arbitrarily decided on by the developer : <ul id="nav">, <div id="navigation">, <p class="menu"> etc.

The markup is based on Bruce Lawson’s HTML 5 for blogs – if you are geekily, technically inclined take a look under the hood and let us know in the comments what you think – have we used the right tags? Could we be using more?

The theme also works as a testing ground for incorporating responsive design into City’s web presence. Fire up this blog on your smartphone and you’ll get a much more mobile friendly layout.

This is our first crack at using media queries to target different screen sizes and whilst it’s a somewhat basic implementation at the moment, the ease of adapting our current design for mobile bodes well for rolling out responsive design across more of City’s digital landscape.

The new theme also makes more use of CSS 3 for design elements than before. Whilst it looks and works fine in older browsers, some of the visual flourishes – gradients, box shadows etc. – will only be shown to users viewing the site in a modern browser. Does a website need to look exactly the same in every browser?

You also may have noticed that the theme has a new header. This new unifying global header is something we have been working on as a response to some extensive usability testing that we have been carrying out for the main website.  It is experimental and subject to change as we continue an iterative development process, but we believe it will be a great improvement in helping users navigate our complex digital landscape. We will blog about the development process and our plans for the header in much more detail soon.

After the theme has been out in the wild for a while and we iron out some remaining kinks (dynamically resizing images would be one area for improvement) we will be offering it to our blog editors to upgrade their old WordPress themes and we hope to incorporate some of the enhancements into the main University website in the near future.