The University of Chicago News Office is the central hub for all outward-facing press at the University—from new academic majors to presidential visits. The staff of 10-12 news officers create and publish over 1000 stories, videos, and photo galleries per year, many of which get picked up by major TV networks, newspapers, Reddit, and other outlets.
In 2011, the News Office developed a Drupal 6/Pressflow-powered site, which by mid-2014 was starting to feel the weight of the evolving web with pressures for responsive design, better speed during high-traffic events, and better content management tools. With over 20,000 content nodes, however, moving the site would be no easy task.
In July 2014, the News Office contracted with Web Services to “Upgrade news.uchicago.edu from Drupal 6 to Drupal 7, preserving existing functionality. Update the design, including making it responsive.” Two years later, the new news.uchicago.edu launched: fully mobile-friendly, running on an upgraded hosting platform, and almost completely rebuilt from the ground up.
UChicago Web Services leverages a number of web technologies to facilitate development, but for this project Drupal was able to provide the heavy lifting migration power and the front-end complexity that could achieve our clients’ goals.
While originally scoped as a direct “migration,” our discovery process eventually uncovered a large amount of custom code and unused features that would need to be stripped out. We inventoried every module, view, panel, and feature in the old site with the client’s technical team, working to determine what was a core requirement and what could be removed. Drupal core’s 6-7 upgrade path got us kickstarted in building out our content types, but then we did a full audit (with print-outs and pens!) of every field to ensure it was relevant to the new site.
With our framework in place, the next technical hurdle was moving 10,000+ taxonomy terms, 11,000+ files, and 23,000+ nodes into the new site. Using Migrate module, our intrepid programmer was able to write custom migrations for each content type, massaging the old data into new formats and unorganized files into nice neat file entities. We developed a reproducible process for migrating content, such that we were able to easily bring new content into our development environment throughout the project. When it came to launch time, Migrate helped minimize our content freeze period as much as possible, since the news never stops.
In addition to a Drupal upgrade and a migration of 8 years of content, the News Office needed to go responsive in order to accommodate an audience comprised of over 40% mobile devices. They also wanted to increase the site speed—both on the backend and front—and improve the usability of the editor interface for the site.
Design Process
Our main design goals were to give the site a sleek, responsive look that allowed the client to feature big stories in an inspiring and engaging way. We decided to use the Bootstrap theme, which allowed us to use the Bootstrap grid in Photoshop. This translated nicely into development.
The design phase spanned two months, during which our designer worked closely (usually hands-on in Photoshop) with the client over a series of eight weekly meetings. This project's design needs were complex, and we wanted to streamline our existing processes by having the designer work rapidly.
Meeting with the clients one-on-one was at times exhausting for both parties, but we made tangible progress quickly. We could answer questions and test drive ideas easily in person, avoiding email back-and-forth that might take days otherwise. In meetings, we focused on solidifying the basic layout first, and then built up the brand's look and feel. We did this by beginning with low-fi, grayscale mockups, and worked our way up to detailed, colorful comps.
The main challenge we faced was that we needed to display various permutations of node data on story pages. The layout of the page needed to remain flexible while being editor-friendly. An article could be as simple as a few paragraphs, or as complex as a main feature story with interactive embeds and a full-screen cover image. Thanks to our iterative approach to the design process, we were able to start with the simplest version first, and then expand it based on potential need. The resulting flexibility in layout gave the client a wide array of visual tactics for illustrating their stories.
Speeding it up
The legacy news site ran Drupal 6 on a custom, locally hosted LAMP stack with PHP 5.3. Varnish had been configured, but the site still strained under heavy load. Additionally, PHP 5.3 had a hard time keeping up with the complexity of node edit pages. Our first step in speeding up the site was an audit of every module used on the old site. When combined with the information gleaned from our content type audit, we were able to remove a number of modules that had slowly crept in over time but weren’t adding significant value.
In addition to reducing technical complexity, we also moved the site from our custom local stack to Acquia Cloud. The simple move from PHP 5.3 to 5.6 proved shocking, with edit pages loading in a second or two, rather than 10 or more. Varnish out of the box proved invaluable, and once we refined our cache expiration strategy (with huge help from Expire and Acquia Purge) we were able to hit the site with 1000 simultaneous anonymous users, seeing little to no effect on the underlying web servers and response times measured in milliseconds instead of seconds. Condensing our past year’s peak 24-hour traffic into a period of 10 minutes didn’t even phase the production servers.
A lot of custom code went into getting this project off the ground, but when possible we worked to contribute pieces back to the Drupal community. The Oxford Comma patch for the Text list formatter module, while still waiting to be committed, was incredibly useful due to our proximity to the Chicago Manual of Style. Despite leveraging the amazing Expire and Acquia Purge modules, we still needed some custom expiration rules to expire nodes which reference the expiring node, which is submitted as a proposed new feature. A number of discussions happened in the issue queues for Editor and Entity Embed, working on getting those D8 backports ready for prime time in D7.
Katie Kranz, Project Manager
Brenda Janish, Interaction Designer
Comments
Good job
I love this project, congrads to dev team. There is future in drupal