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 Lullabot, NBCUniversal on
While the Syfy network was busy creating compelling new worlds with shows like 12 Monkeys and Helix, their website was worlds behind. It was not responsive, not beautiful, and, in the words of Matthew Chiavelli, VP of Digital Media and Strategy, "put together with duct tape and baling wire". Syfy needed a scalable, cinematic full-screen experience that would look great on any device and be commensurate to their original content.
Why Drupal was chosen:
Drupal was chosen because of how deeply integrated it was with Syfy and NBC Universal services, and for the flexibility it afforded for customization. The project took advantage of an internal Drupal distribution that was customized to include NBC related integrations for video networks, ad networks, scheduling, and other business-specific services. Drupal also allowed the Syfy team to customize editorial workflows and governance to meet the demands of their production staff.
Describe the project (goals, requirements and outcome):
The project began in summer and launched, later than anticipated, in early January 2014. On paper, we had plenty of time. We set off to do much of the templating using low fidelity wireframes while waiting for design. The beautiful designs, by Brooklyn-based Working.co, came in later than expected and involved a lot of complex scroll interactions that caused difficulty with iOS Safari. We ended up having to rewrite the home page front-end code several times to make the desired effects cross-browser compatible and performant. We also struggled more than anticipated with video. The Platform MPX, which we used for video delivery, was evolving during the project and getting it working seamlessly was a source of unexpected delays.
Lullabot was instrumental in translating a beautiful set of desktop mocks into a living, breathing, mobile-friendly website with a scalable video player that gives users a full cinematic experience on every device, but much of the work we had before final visual designs were completed had to be redone, or undone. The moral of this story: on design-driven projects it may be better to wait until final visual designs are delivered rather than to start with lo-fi wireframes subject to change.
Despite the bumps along the way, the project launched to much fanfare and produced an immediate positive jump in analytics. The editorial team also raved, "the time that it took to get something on the website is far less.", said Jesse Murray, head of Digital Content for Syfy. "The new site makes me think of things we can do for our shows in totally new ways, and now that the designs have improved exponentially the ideas that I and my colleagues come up with have also expanded."
“I think the new Syfy.com is one of the best television websites out there right now. It serves our content in a way that is unique to us. It makes it feel big and aspirational.”
-Matt Krueger, Syfy Creative Director
Technical specifications
Drupal version:
Drupal 7.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
The editorial requirements were complex. Editors needed to be able to search through a ton of images, choose an image, and then that image needed to be displayed at several different image crops on several different page templates. To make this scenario easier on editors, we used Drupal’s Core image module features along with focal point so that editors could choose a focal point for a single version of an image and let Drupal do the rest.
We also needed some complex layouts on the homepage that use promotional cards or “tiles” of various widths (⅓, ⅔, full bleed, and ½ x ⅓). Editors needed to choose a card size for their promo or tout and place them in a nodequeue. Then, the system had to take the priority established in nodequeue into consideration but order the cards so that the grid was always full. So, for instance, if an editor chose a ⅓ and a full bleed in positions 1 and 2 in the queue, the system would pull up a ⅔ or two 1/3s to flesh out the first row, and then display the full bleed in the second row. We used masonry_views and Packery.js to achieve this combination of editorial curation and smart automation. Making all of this play nicely with the scroll effects at the top of the home page while maintaining page load times involved a lot of JavaScript debugging and finesse.
Community contributions:
https://www.drupal.org/project/media_theplatform_mpx
Lullabot made significant contributions to the Platform MPX video module to make sure the designs were achievable.
Organizations involved:
Team members:
Project team:
Michael Bailey, Matt Krueger, Matthew Chiavelli
Sectors:
Entertainment
Media
