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.

Download the Case Study

Screenshot of the Weather.com homepage
Why Drupal was chosen: 
  • Feature flexibility
  • Scalability
  • No licensing fees
  • Maintainability
  • Availability of talent
Describe the project (goals, requirements and outcome): 

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.

Weather.com

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.

Technical specifications

Drupal version: 
Drupal 7.x
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

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.

Organizations involved: 
Sectors: 
Media

Comments

Media Crumb’s picture

Would love to hear a more detailed description about how you guys used Angular in your project. It seems like you didn't use it as the SPA that it is set up to be, but instead used it as some sort of hybrid. Does that mean you're loading different ng-app on each page that all boot their own app depending on context? Also, how do you handle routing in this case then?

Chicago Dev and Designer. Owner of 2old2play.com and GameStooge video game communities.

crashtest_’s picture

Great write up, however you didn't touch on what solution you used with regards to media management. Could you elaborate on how you worked through that?

scottatdrake’s picture

over 1 billion unique visitors per month

Not to nitpick, but i think this is a typo. Other sources are quoting 100 million uniques per month. Maybe a billion page views? Either way, it is big.

benbradley’s picture

Congratulations to Varnish!

TravisJohnston’s picture

Great work on this! The only issue I want to point out, that happens every time I visit the site on my phone, is that if you visit weather.com in mobile Safari, it doesn't redirect you to the proper m.weather.com. Instead you are present with a zoomed out full website that is broken.

Thank you kindly,

Travis Johnston

Creo Coding - Let's Start Our Journey!
Owner and Web Developer
http://www.creocoding.com

Facebook - Facebook.com/CreoCoding
LinkedIn - http://lnkd.in/rQrdS7

TravisJohnston’s picture

Checked out the site today and device detection worked perfectly, not sure if that was a recent update or if it was always there but my device was cached wrong.

Thank you kindly,

Travis Johnston

Creo Coding - Let's Start Our Journey!
Owner and Web Developer
http://www.creocoding.com

Facebook - Facebook.com/CreoCoding
LinkedIn - http://lnkd.in/rQrdS7

leighcan’s picture

Now that the site has been running for several months through several weather crises, I would be really interested to hear what business improvements came about because of TWC switching to Drupal. Are conversions up? Is the bounce rate down? Is more content getting read and socially shared? Just curious -- think it would be a great bit to add.

Lazakis’s picture

Drupal is considered the most "Enterprise" open source solution for managing online content right now. Website such as MTV, the White House , the Economist, the City of Athens , the Ubuntu and thousands of others with low or high traffic trust drupal.
Excellent work keep it up.

rintoug’s picture

The White House no longer uses Drupal for their platform.

Mike Vranckx’s picture

Some blog posts about technical implementation within Drupal for this great project.

Improving load times by implementing ESI : https://www.acquia.com/blog/migrating-weather.com-to-drupal/how-weather....

Using a presentation framework : http://www.mediacurrent.com/blog/migrating-weathercom-drupal-presentatio...

Increasing content portability on different devices : http://www.mediacurrent.com/blog/migrating-weathercom-drupal-increased-c...

rintoug’s picture

Great work by Acquia and Mediacurrent. The site looks great with new drupal integration. But only one problem I've faced, I am browsing the website from United Arab Emirates(where Arabic is the first language), so it automatically selects Arabic version of the website even I don't read Arabic. Most annoying thing, there is no way to go English version or a button is not clearly visible.

Regards,
Rinto George
https://tutsplanet.com

saleempbt5’s picture

Can anyone tell, how they managed to configure the admin side of this website?
Most of the newsportals that i did in drupal, after running for an year very smoothly, when it has loads of content, i can say 50k nodes, it starts to take more than 2 mins to load the admin side,
whether i am missing something in configuration or drupal as it is like that only ?