Sector(s)

Team Members

danlinn, jojonaloha, robbieferrero, atedgerton, raspberryman

Project Team

Sisu
Guild Copeland
Coleen McKenna
Mark Sloan

Visit the site

Visit the site

Organizations Involved

Community contributions

Patches to Brightcove Integration module

There were a number of bug fixes and improvements that Metal Toad Media made to the Brightcove module. We added the ability to load the smart player using Brightcove's smart player API, which allows you to add smart player API events so that you can attach events. For example, when a video in the marquee ends, then you can trigger events to restart the Marquee. And when it enters the slide, then it'll play the automatically play a video, and then it’ll keep scroll through the marquee once the video has completed.

Boilerplate Theme

The Boilerplate theme is the base theme that Metal Toad Media maintains and uses on our responsive themes. It’s goal is to provide HTML5 support based on the excellent Boilerplate HMTL5 template, a base fixed/flexible responsive layout similar to Zen, and SASS support, all while keeping the code base small.

FEARnet.com is a joint venture between the top two movie studios producing and distributing horror genre movies, Lions Gate Entertainment and Sony Pictures Entertainment, as well as with Comcast. It's a website where horror movie fans connect, discuss the genre, and discover the latest in horror, thriller and suspense through streaming video offerings and editorial commentary.

FEARnet.com started as a web-only property, and then later created a cable channel which offers original television series shows and movies. Primary goals of the Drupal rebuild were to more prominently feature their TV schedule across their website and integrate their community throughout the site by adding social features and allowing comments on most content types. They also wanted to ensure that the site had a mobile-responsive theme that could be viewed on the majority of iOS and Android devices.

About the project

Goals

The primary goal of this project was to migrate from a legacy CMS to Drupal in order to have a better administrative experience, but also to have a more stable platform that could grow over time with new features. A secondary goal was to more easily change the look and feel of the site, and to have a mobile responsive theme. FEARnet also needed to improve the user navigation of the site with large amounts of content. Finally, they needed a video player solution that could integrate advertising with DART for Publishers and mobile video renditions for their video content type.

Requirements

The primary requirements of the site were as follows:

  • Responsive Theme:
    Two responsive layouts in addition to the desktop layout. Based upon device-width resolutions, the two mobile layouts ended up being Portrait Phone (0px - 520px) & Landscape Phone/Portrait Tablet (520px to 960px) with the Desktop resolution being equivalent to the Landscape Tablet (960px).
  • On-Demand Schedule & Content Population:
    Imported XML data to populate the Schedule Listing, Movie, and Show Episode content types for both linear channel and on-demand schedules, including specific information about the show or movie.
  • User Points Logic:
    Customized User points logic to accumulate points for specific actions on the site, which count towards levels that a user is assigned when they reach certain point milestones.
  • Brightcove Player Integration:
    Brightcove was used for Video Playback on the FEARnet website. The Drupal admin interface was configured to be able to upload the highest quality version to Brightcove where it was transcoded and then automatically sent to the Level3 CDN. An e-mail notification is sent upon completion, which indicates that the video node is ready to be published by the admin.
  • 3rd Party News/Reviews Aggregation:
    RSS feed scraping for third-party horror news sites were integrated with the FEARnet news section
  • Message Boards:
    Admins could create message boards where users could create discussion threads and posts within those threads. Admins can create sticky discussions, and discussions and posts display related content if there is an associated TitleCode.
  • DART Advertising Integration:
    DART advertising banners were placed throughout the site. An admin control page was created with fields to input the ad code for each ad spot so that the codes could be updated on an ongoing basis. The full-width expanding pencil ad and 160X600 ad content are controlled on the DART side similar to other banners, but the ability to toggle the whether the ads display on the website is controlled in Drupal settings via show/hide toggles.
  • Background Skinning with Text Color Picker Control:
    A basic custom settings module was added under appearance settings in the admin to control the skinned background via image upload. Two background versions are uploaded to account for the full-width view as well as the portrait tablet view. A color picker is able to independently control the color of specific text and icons.
  • Thumbs Up/Down Voting:
    Users have the ability to click on a button to mark the content or forum post up or down, which was accomplished through the Voting API.
  • Share This Integration:
    The ShareThis Module will be used across the site to share content. On the home page and landing pages, only the Share This icon will display. On individual content type views, the full social sharing toolbar will display including counts.
  • Drag & Drop Content Type Sorting:
    Drag-and-drop sorting was implemented with draggable views to be able to control the order of content on all marquee sliders and selected photo galleries.
  • Nodequeue Promoted Content:
    There is promoted content within certain blocks and panel panes that is controlled via the nodequeue module. This allows admin/editor users to control what content displays for each promoted block without overriding date-based sorting for editorial content.
  • Fivestar Ratings:
    Movie content can be rated on different scales of scary, gory or funny, and these user ratings were powered by the fivestar module.

Outcome

The project had a 6-month timeline that included 3 months for designs for both the desktop and responsive versions, and 3 months of accelerated development with 3-4 full-time developers. Metal Toad Media worked with Sisu, a Los Angeles area creative agency, to make sure that the wireframes and the desktop and mobile comps met project requirements and were within the scope of the budget.

The desktop designs were completed first, so development on the site began while the responsive designs were still being finished. The design partner needed some direction for how to lay out things in the right order without having to do a custom JavaScript implementation, and to keep the content order consistent regardless of the layout.

One full-time developer was dedicated to implementing the responsive design. On this project, we found it was much easier to remove elements from the page from the desktop layout in order to create the mobile versions rather than try to do a mobile-first design and then add additional elements for the desktop version. The mobile styles were implemented on a page-by-page and view-by-view basis. Browser resizing and device-testing on iOS iPhone/iPad and Android phone/tablets was used to complete the quality assurance testing for responsive.

There were numerous new internal processes that came out of a project of this scale. For example, the CSS preprocessor of SASS and Compass was used across this site and there was definitely a learning curve with using it between 3-4 different developers. An internal document of CSS and SASS best practices was developed, and a decent amount of refactoring was required in order to clean up the CSS.

There was a dedicated project manager who interfaced with the design firm and client as well as managed the resourcing, timeline and fixed-bid budget. There were daily scrum meetings to coordinate work between the 3-4 developers each day. Tasks were broken into tickets, and over 200 tickets were completed by site launch.

Why Drupal was chosen

FEARnet.com is the web's #1 site for horror, thriller and suspense movies that provides both editorial content and streaming videos. The site previously used a proprietary CMS where new features required significant admin time or in some cases custom development, so managing the site and adding new functionality was taking much longer than it should have. Metal Toad Media built their Drupal site and migrated their data onto a much more stable platform that would allow the site to grow in the future.

Some of the primary features of the new Drupal site are:

  • A fully responsive design
  • Flexibility to swap out theme skins
  • A Greatly improved administrative experience to manage content
  • Improved ability to navigate the site and a greater focus on the TV schedule
  • Integration of the community across the site to allow users to interact with content rather than a siloed community section on the site
  • Tracking of community participation through user points

Technical Specifications

Why these modules/theme/distribution were chosen

Boilerplate

The Boilerplate base theme written by Metal Toad's Dan Linn was used as the starting point for creating the mobile/responsive theme. It is based upon the Boilerplate HTML5 3.0, and provides some out-of-the box, mobile support with three responsive layouts. There's also built-in support for SASS, Compass, and HTML5.

Panels

Panels was used pretty extensively when there wasn't a clear sidebar, because it allows you to override the full sidebar and get ad and menu content to show up on the full-width of the page. Panels was also used in order to control what sidebars appeared depending on the content area.

Draggable Views & Nodequeue

Draggable views was used a lot for ordering featured content in marquees, and nodequeue was used for creating lists of featured content that would appear in blocks.

Brightcove Integration

The Brightcove Integration module was used for video support, which allows you to configure a different video player for each node. Full-length movies have their own special player, marquee videos used a chromeless player without a play button, and short clips and show videos and had different sizes with different styling. They also wanted to serve different ads between the different movie content types. A custom formatter was to specify which the video player to use, and set the video player style on the node edit form.

DART

All of the advertising is controlled by using the DART module, which is Google’s Doubleclick service where you can manage ad tags. There are different sections on the site such as the homepage, news and watch sections that have different ad calls served. The context module is used to add title and contextual controls so that the DART module can serve these different ads.

Userpoints

The userpoints module was used to create a number of different levels for users based upon their participation on the site. There are different titles that are controlled by taxonomy terms, which have minimum point levels that need to be accumulated before they’re assigned to users.