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.
- Feature flexibility
- Scalability
- No licensing fees
- Maintainability
- Availability of talent
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.
Technical specifications
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.
Comments
Would love to hear a more
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.
Great write up, however you
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?
Billion?
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.
Nice
Congratulations to Varnish!
A huge step forward for Drupal!
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
Device Detection working
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
Business metrics
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.
It was a matter of time
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.
The White House no longer
The White House no longer uses Drupal for their platform.
Blog posts
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...
Great work by Acquia and
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
Great work
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 ?