Sector(s)
Team Members
Weather.com is the highest trafficked Drupal site in existence, serving more than 100 million people per month. The Weather Channel teamed up with Mediacurrent to migrate from their previous content management system to Drupal. Not only were we able to help the Weather Channel adopt an open-source solution, but the new website has drastically improved page load times and reduced infrastructure requirements.
About the project
Project Goals
- Full migration of Weather.com 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 had to take into consideration the unique scalability and performance requirements we needed. On the technical side, our approach was to increase cache efficiency by utilizing Javascript and Edge Side Includes (ESI) for client side rendering, and optimizing calls made to the content delivery network (CDN), Akamai.
Content Creation Workflow: The previous editorial workflow forced The Weather Channel content editors 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, the development team had to not only utilize Drupal’s content creation strategies, but also create a number of novel editorial enhancements, such as:
- 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 team 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: Knowing that new requirements would emerge throughout the development process, Mediacurrent and The Weather Channel chose to manage the project in an agile way. We committed to delivering functional elements of the website in each 2 week sprint. We kept both teams in synch every morning in our daily scrum: reporting on the prior day's work, clearing roadblocks, and setting expectations for what would be completed that day. Keeping in close communication and using short feedback cycles allowed us to easily reprioritize our work as requirements evolved.
Final Thoughts
Moving Weather.com to Drupal was a very complex process, which is why The Weather Channel turned to Mediacurrent. Our team was able to predict and provide solutions for numerous 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 each decision, Mediacurrent has planned a resilient architecture, allowing both The Weather Channel and Mediacurrent to quickly respond to the changing business needs without major disruptions.
Weather.com serves millions of pages to more than 100 million people each month. The Weather Channel’s move to Drupal shows how complex, content-rich sites benefit from an open, agile platform to deliver an amazing experience for every site visitor.
Dries Buytaert, Acquia CTO and Drupal project creator
Additional Resources
Watch Mediacurrent's Video Interview with Chris Hill, VP Web Development at The Weather Channel.
Watch the Q&A about the Weather.com project at the 2014 Atlanta Drupal Business Summit.
Why Drupal was chosen
- Feature flexibility
- Scalability
- No licensing fees
- Maintainability
- Availability of talent
Technical Specifications
Drupal version:
Theming
We created a base theme and two subthemes- one for mobile and the other for desktop. Both use a 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.
Back to top
