The Weather Channel

The Weather Channel

Since launched, it has become the highest trafficked Drupal site in existence with over 1 billion page views per month. The Weather Channel (TWC) teamed up with Mediacurrent to fully migrate from their previous content management system to Drupal. Not only were we able to help TWC adopt an open-source solution, the new website will have drastically improved page load times and reduced infrastructure requirements. This case study is a behind the scenes look at what is being developed.

Video Interview

Chris Hill, VP, Web Development at The Weather Company and Jason Smith, Lead Architect describe's decision to move to Drupal and the complexity of the project. 

Project Goals
  • Full migration of onto Drupal. 
  • Integrate (and in certain cases transition from) legacy platforms.
  • Significantly reduce hurdles to content generation.
  • More efficiently leverage caching to improve load times.
  • Decrease time to market for new products and site features.
  • Develop in an agile method to meet flexible requirements.
Challenges & Solutions
Scalability and performance: The Weather Channel’s website serves up content that is unique to each user and their region. This, coupled with the high volume of traffic, meant that the website naturally required a lot of resources to be able to be able to function. When it came to architecting the website, every decision we made had to take into consideration the unique scalability and performance requirements. On the technical side, our approach was to increase cache efficiency by utilizing Javascript and Edge Side Includes (ESI) for client side rendering as well as optimizing calls made to their content delivery network (CDN), Akamai. 
Content Creation Workflow: The previous editorial workflow forced The Weather Channel to go through a 20+ click process to be able to publish content. To increase the editorial velocity and simplify the user experience for editors we had to not only leverage Drupal’s content creation strategies, but also create a number of novel editorial enhancements:
  • Truly Responsive Content: Once editors enter the content for a page on the website, the Drupal system automatically displays the appropriate layout based on the user’s device (desktop, mobile, etc)
  • Flexible Page Layouts: We integrated the configuration and layout of Angular widgets into Panels, giving The Weather Channel complete control over their placement on the page. 
  • Improved Layout Previews: Editors can make quick, low fidelity previews early in the content creation process allowing them to review the work without having to publish the content publicly or work with a content server.
Flexible Requirements: To be able to meet each requirement as it surfaced, Mediacurrent and The Weather Channel practiced agile development methodologies. Our goal was to deliver functional pieces of the website at the end of multiple 2 week sprints. To keep both teams in synch with each other, we met every morning for our daily scrum, a meeting that reported the previous day’s work, cleared roadblocks for the current day, and set expectations on what will be completed by the end of the day. By shortening the review and feedback cycles, we were able to quickly adapt to challenges and empowered The Weather Channel to prioritize features fluidly. 

We created a base theme and two subthemes- one subtheme was created for mobile and the other for desktop. Both leveraged a novel grid layout system that works within panels to provide superb previewing and simple administration. We also harnessed the power of Sass, Compass, Toolkit, and Breakpoint.

Many of the widgets on the site were created by The Weather Channel’s internal team- independent of the theming environment. Once developed, we made the widgets responsive and reusable across both desktop and mobile platforms by harnessing the power of media queries and element queries. Along those lines, AngularJS modules outside the theme directory are able to reach across and use variables and SASS mixins inside all three themes if needed.

Finally a dynamic, living style guide was created from the markdown within the Sass files themselves through the power of Sassdown. Front-end developers can add inline comments and HTML examples inside the Sass which are then harvested and used to generate a style guide based on the real Sass styles being written. This ensures a consistent look and feel will be created throughout the website regardless of which team is working on the theme.

Featured Modules
Panels: The use of the Panels/ctools suite allowed a great deal of flexibility in the user interface for editors, allowing them create highly customized pages for their audience. The depth of the API and structure allowed the project to pivot as requirements evolved without big rewrites of the code.
Services: The Services API allowed us to quickly and easily wrap external services, making the transition from legacy products simpler. By abstracting to a common interface, we gained a great deal of flexibility for the architecture as a whole- something that will continue to be used as we transition from their other legacy products in the future.
WYSIWYG: WYSIWYG, coupled with our custom code, provided the flexibility and API needed to deliver the editorial functionality The Weather Channel needed.
Final Thoughts

Moving to Drupal is a very complex process which is why The Weather Channel turned to Mediacurrent. Our team has been able to predict and provide solutions for all potential implementation traps that a generalist digital agency might not have been able to recognize.

By taking the time to understand the requirements and the impact of literally every decision, Mediacurrent has planned a resilient architecture, allowing both TWC and Mediacurrent to quickly respond to the changing business needs without major disruptions.

Stay tuned for further developments and a launch schedule for The Weather Channel's new Drupal website.