Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Torchbox on
The previous version of the University of Oxford site, also designed by Torchbox, was the top rated University site in a Times Education Supplement survey and was much imitated, but after more than seven years of duty, it was a little dated and, critically, wasn’t responsive.
The University of Oxford and Torchbox were excited to have the opportunity to revisit the site, and to revitalise it for a more digitally advanced generation of visitors. At the same time, we took on the challenge of moving this high profile, high traffic site to the Drupal Content Management System.
Why Drupal was chosen:
The Oxford University response:
Priority 1 – Open Source:
Our previous CMS was proprietary and came to the end of its life, so Open Source looked like the smarter option. Other proprietary CMS options tended to be very expensive to set up and would then incur ongoing service charges, so Open Source made financial sense.
The worldwide developer community was also an attractive asset. The community’s work on new developments and creation of new modules is much quicker than proprietary vendors.
Using an Open Source framework means that we are not tied down to only working with one Web Development company and would make recruiting an in-house web developer easier.
Why Drupal in particular:
Other departments and units within Oxford were already using Drupal so there was an opportunity to learn from their experiences and/or collaborate in future.
After installing the Wappalyzer plugin (https://wappalyzer.com) we were impressed with the quality of websites which were using Drupal and Drupal's list of case studies had some impressive clients (for example, the White House, if it's good enough for POTUS…).
Additionally, Torchbox, who we had worked with for a number of years, had also decided on Drupal as their CMS of choice.
Describe the project (goals, requirements and outcome):
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. The project started out as a ‘refresh’, however, the project team looked to improve the site as much as possible including a completely new design, a revised IA, a completely new set of templates, and a new Drupal 7 platform.
The content stayed largely the same, so there were many thousands of content nodes to consider. Keeping the user experience at the fore, the options for automated migration were limited due to the need for refreshed content, markup and imagery.
The timelines for content creation and site launch also had to fit in with the University calendar – simultaneously updating the course content for the next round of undergraduate admissions in two content management systems just wasn’t an option.
The project was split into two major phases:
- Discovery and design
- Development and delivery
The discovery and design phase
The discovery phase encompassed interviews and workshops, scope development, IA development and testing. Two things that we did early in the project were to develop a set of design principles akin to those developed by gov.uk (these were informed by the discovery research and the design briefing sessions) and to create a set of IA principles that informed the development of the sitemap (the sitemap was subsequently user tested using Treejack).
Rather than conventional wireframes, we developed HTML prototypes that allowed us to explore mobile, tablet and desktop resolutions from the outset and to experiment with reactive menus, and start thinking about other reactive elements (what happens when you scroll for example) that are core to modern web design.
In parallel to the HTML prototyping, we developed mood boards and style tiles to start the visual thinking, and then carried that into a design in the browser process where we layered visual design on to the wireframes. This was quite an interactive process and when we got stuck on something, for example the brand representation we would reverse it into Photoshop to do more detailed visual experimentation.
The designs were user tested using online testing software on a large number of people representing different audiences. This process resulted in a number of significant changes.
The wireframe pictured is of an early prototype.
Development phase
The development phase followed a feature-driven approach where the project was broken down into small deliverables that once complete each provided the University with a tangible benefit. Examples of the features provided include courses, events and Google Search Appliance integration.
Feature development was managed using Kanban principles, namely visualising the process, limiting the work in progress, managing flow and making policies and processes explicit. Each feature and ad-hoc request has a corresponding ticket in Codebase, with the development managed using a shared Google spreadsheet as the project dashboard.
Working with an agile, feature-driven approach allowed both Oxford and Torchbox to quickly and easily amend the development schedule when necessary. Changes were needed for a variety of reasons including revised timescales, updated requirements, some features no longer being necessary and staff availability. Using a flexible approach grounded on solid principles meant any changes were handled in a calm, stable and consistent manner.
As noted above, the launch timetable had to fit with the University calendar. Due to the volume of content, the full transition to Drupal has been phased. The Drupal site went live at 10am Wednesday 25 April 2014, as planned and from this point Drupal is serving the majority of content in including undergraduate admissions, news and research.
Further content is scheduled to launch on Drupal in the coming months. The content launch phasing is handled at the server level using a reverse proxy. This simplifies the Drupal site while transparently serving certain content sections (defined by URL paths) from other content management systems.
Working with an organisation as prominent and diverse as Oxford University brings with it a range of challenges and opportunities. By pairing great teams at both the University and Torchbox we were able to successfully design, develop and launch a new Drupal site for a world famous institution.
Technical specifications
Drupal version:
Drupal 7.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Architecture notes
The University of Oxford website has several modules that are key to the site functionality.
Views is used to generate most of the site listings with a combination of fields and view modes displays. In several places we make use of hook_views_query_alter() and hook_views_query_substitutions() to provide the correct revision or get next/previous nodes based on custom fields.
From the start of the project, Features proved invaluable in speeding up development. Both with pre-packaged, commonly used features such as standard pages or section indexes, and custom content types.
With its simple drag-and-drop functionality and seamless use, Display Suite provided great flexibility in building the many various view modes required by the University website.
The Workbench module suite allowed us to create the workflow required by the University team without having to rely on custom code. Different sections of the site are managed and edited by different teams, a task accomplished using Workbench Access providing granular editing and publishing powers. Last but not least, using Workbench Moderation, we adjusted the editorial workflow quickly, and are able to make adjustments in a timely fashion.
Wysiwyg with TinyMCE is used across the site to further enhance the editorial experience.
The website section structure and the menu requirements meant Menu block is used in anger, with 8 different base blocks starting at different points in the menu hierarchy. On top of that, the need for breadcrumbs resulted in using Menu Trail by Path, enhanced by Menu position and a number of Custom breadcrumbs for menu items not following the same path structure.
While the University of Oxford team did a great job adding content, we needed to migrate over 6000 news items, blog posts and events from the old site. A task accomplished without difficulty with the wonderful Migrate module.
Other modules
Leaflet: a great, lightweight mapping solution used on event pages. Mothership: we all love cleaner, leaner markup. The site uses a child theme based on Mothership. Linkit: great for internal and external linking. Editors are pleased with it.
Custom code
We tried to steer away from custom code that cannot be abstracted to a d.o. module as much as possible. Still, there were several cases where we could not do without it. There are a number of theming fixes and tweaks that had to go in a module of their own -- from a custom feed icon, image fallbacks on news items, to additional attributes to Media rendering content tokens. The events functionality was packaged into a feature with customomisations to the node edit form to integrate with the OxPoints location database.
One interesting piece of custom code was creating a Media helper module that allows editors insert custom HTML snippets via the Media browser. This was done by providing a custom file type with a text field, adding a Media browser tab for entry and custom display modes for the inserted snippet. Before going the custom route, a number of alternatives were considered (including Media: Node), but they did not suit the University needs.
The video wall page was another piece of custom code done purely in jQuery, using the YouTube API and the Colorbox module to pull the pieces together.
Community contributions:
During the course of the build we contributed several patches, such as:
https://drupal.org/node/1831698
https://drupal.org/node/1995306
https://drupal.org/node/1612600
Organizations involved:
Project team:
Organisations involved
Torchbox team members
Edward Kay
Victoria Chan
Dan Braghis
Ben Enright
James Morris
Glenn Barr
Olly Willans
Martin Wright
Paul Gill
University of Oxford team members
Suzi Ardley
Carolyne Culver
Stephen Sangar
Christopher Eddie
Richard Watts
Sectors:
Education
Comments
wow
I was really captivated by the responsive design and the simplicity of the layout, can you say how long this project took from start to finish, and about how long did the discovery phase last? Nice job!
awesome
I am also curious about the process and time it took to complete the discovery phase.
Did the website also have a lot of different content types that had to be reduced?
Thanks
Please see the above response for timing on this project. We had worked with the University of Oxford on their previous build, so there was already some rationalisation to their content types. Using our Feature-driven development process, a lot of the work for content types was either already in place or completed during the discovery phase.
Thank you for your kind words
Thank you for your kind words. Working collaboratively with Oxford, the timescales were approximately as follows:
Discovery phase: 6 months
Design phase: 5 months
Build phase: 8 months, with design support
Congrats
This is a very good example for an excellent drupal site,
congrats on completing such a complicated project and thanks for the write up.
Thanks
Thank you for your kind words. It was a great project to work on.
Only the mobile version takes
Only the mobile version takes to load.
Code for Media helper module?
Oxford website looks amazing! Great job!
Can you please share your custom code for Media helper module that allows editors insert custom HTML snippets via the Media browser?
Thanks in advance!