University of Oxford

I was the front end lead on the University of Oxford's new main site ox.ac.uk. The site was a new design and build in Drupal 7.

Agency: Torchbox

Client: University of Oxford (PAD)

Role: Front end lead

View site

After several years without an overhaul, the University of Oxford website needed updating to bring it in line with current design and usage trends, including increased use of mobile and tablet devices. I was lead front ender and part of site building team to work on this project, after the success of the work I was part of on the Oxford Today alumni site.

The build in general was a large one an work took around 9 months of full on development. The site needed to be responsive over 4 breakpoints and 5 screen sizes, and serves as the main port of call for Oxford’s attendees and staff.

Oxford's homepage at full width

Oxford’s homepage at full width

Features and challenges of the site

  • I used the LESS CSS for styling, with content type based LESS files as well as general stylesheets for site wide styles including variable and mixin files.
  • I opted to use harvey.js, a robust and reliable plugin for managing breakpoints and the resulting UI changes require to the interface via Javascript.
  • The styleguide I created for the project allowed the designer and I to think about how to extrapolate styles later in the project as the client requested new features to be added to the site.
  • One of the challenges of the site was the multiple menu structures. We had 3 main menu that vary around that site. Each menu need to be managed over 4 breakpoints and 5 screen sizes. Due this structure there was extensive work done using JS and harvey to deliver a well built menu system from a single set of DOM elements for each menu and lots of visual testing.
  • During the ‘video wall‘ feature I worked extensively with Youtube API to pull in public playlist videos that the admin staff at the uni added via Drupal.
  • We also used Codebase with this project as with all of our Torchbox projects. This give us direct channels of communication with the client. This aided the discussion about the UX, specifications and use of features they requested, allow us to give expert insight to their site.
  • As well as being front end lead I worked on the site building aspects of the site setting up and configuring Drupal’s content types, views and templating, via the display suite module. A particular challenge using this Drupal type architecture is picking modules that allow easy manipulation of it’s UI and responsiveness which was a challenge particularly around fluid images and carousels. In the end this is something we solved well.
  • Producing a reusable well thought out and communicated front end framework that looked to work alongside Drupal’s at times difficult frontend architecture worked out well. The client was very pleased with the quality and the project was brought in on time and budget. With the amount of hard work put in this is, it’s one of the projects I’m most proud to have worked on.

    Oxford's complex menu structure

    Second level menu at mobile width.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *