Using web fonts to nitro our online prospectus

Posted in: Archive

Following on from Kelvin's great blog post last week about our undergraduate prospectus, I want to tell you how we're already looking at improving it.

Whilst the user experience is tracked, monitored and tested, we have also looked at the behind-the-scenes maintenance overhead of the site. Although we do not have an overwhelming amount of courses, we work in a sector that is constantly updating and refining the way it communicates - as well as what is a legal requirement to disclose. Hello KIS. To that end, we started by identifying 'bottlenecks' which would unduly lock up an editor's time and cause them to run from the room screaming as if on fire.

One of the things we've quickly realised is that there is a lake of content soup to be kept up to date within our system, and things like the infographics for the 'places' and 'applicants' figures on each subject page require more effort to update than the text that makes up the main body of content.

Unless we can also make them text.

Way back in the design stage of this project, I had anticipated using @font-face as much as possible to reduce the amount of HTTP requests on the page (to help with page load speed) - the additional benefit was that it would be quicker and easier to update the content. Time constraints meant this unfortunately never happened, and we launched with graphics instead.

Example of graphical text in our infographics

However, we always kept the web font idea on the back burner, having identified Oswald (by Vernon Adams) as a possible replacement for the gorgeous Tungsten (which is not available as a web font).

At this point, if you're confused - here's a link explaining what @font-face and the whole web fonts shebang is. Go, learn!

The work to change the HTML to utilise real text instead of graphics is trivial, and we only need to make a small change to the database so that it store the value for the text, rather the the URL for the image. We are looking to roll out this improvement as part of our next scheduled update of the prospectus, and are looking at swapping out other graphical implementations of text on the site in favour of this approach. We'll do a full write up on the process and demonstrable advantages in time-saving for both the user and the maintainer once this work has happened.

We all really love clever use of available resources such as this in order to make our editors' lives easier, and look forward to doing more.

Posted in: Archive