silicon halton meetup #44 - special presentation by the weather network
DESCRIPTION
The Weather Network | Pelmorex Media Inc. provides weather information to millions of Canadians each day across it’s media properties - television (15 million monthly viewers), online (8 million monthly unique users), mobile and tablet apps (8 million monthly users). They are also one of the largest information technology companies in Halton region – employing over 450 people. Their goal is to be the best weather and weather-related content and information provider in Canada. They are committed to delivering weather information to consumers 24 hours a day, 365 days a year, across all platforms Carrie Lysenko, Director Web Services, Moe Abeidat, Director Software Development, and Matt Mejaski, Software Development Manager, shared their story about the evolution of their strategy from television to interactive websites and apps. They discussed the website’s history, it’s challenges, why and how they recently re-launched their website, and what they see for the Weather Network’s future. It’s a great made in Canada technology story.TRANSCRIPT
![Page 1: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/1.jpg)
theweathernetwork.com&
Meteomedia.com
A NEW DAY – A NEW SITE
![Page 2: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/2.jpg)
Brief History
> The Weather Network and MeteoMedia began broadcasting in 1988> In 1991, Pelmorex Media Inc. purchased The Weather Network and
MeteoMedia> In 1996, we launched theweathernetwork.com and meteomedia.com> 2002 we launched a mobile website> In 2008 we launched our first mobile app and an app on Facebook> In 2009 we launched our last major upgrade to the websites prior to April 2013
> Our sites serve both English and French Canadian markets and are enjoyed by close to 40% of all of the online users in Canada
![Page 3: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/3.jpg)
What did we do?
> Brand new infrastructure
> Introduced an extendable and flexible Content Management System to publish the sites
> Put on brand new design and usability to the sites
> Launched new product for the sites
> ALL AT ONCE!! (We may be a little crazy!)
![Page 4: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/4.jpg)
Why?
> Meet Needs of our Customers
> Showcase all of our rich content
> Legacy systems were limiting us
> Grow our business
![Page 5: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/5.jpg)
Key Lessons Learned
1. Clear Objectives - What are the problems that you are trying to solve?
![Page 6: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/6.jpg)
Key Lessons Learned
2. What Does the Research Say?- What are your competitors doing?- Consumer Feedback- Social Media- Are your problems, really problems?
![Page 7: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/7.jpg)
Key Lessons Learned
3. User Journey- Why are users coming to your site or app?- What are the questions they are trying to answer?- What are they doing now while they are there and what do you want them
to do?
![Page 8: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/8.jpg)
Key Lessons Learned
4. Get the Right Partners- You have a plan for a house but who is going to build it?- How are you going to support it after it gets launched?- Do your partners get your vision?- Have you future proofed it?
![Page 9: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/9.jpg)
Key Lessons Learned
5. User Feedback is Key to Success- Your users know what they want, let them tell you- Surprise them too – in a good way!- Surveys, Beta Tests, Advertiser Feedback
![Page 10: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/10.jpg)
Key Lessons Learned
6. Take a Deep Breath and Dive In!- Prepare for the aftermath- How are you going to solve issues?- How are you going to communicate improvements?
![Page 12: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/12.jpg)
The Weather Network
A Brief Technical Overview of our Site Redesign
Moe Abeidat – Director, Software DevelopmentMatt Mejaski – Manager, Software Development – Web Development
![Page 14: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/14.jpg)
Late 90’s – HTML Frames
![Page 15: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/15.jpg)
Late 90’s – HTML Frames – City Page
![Page 16: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/16.jpg)
Official New “Old Site” – “php” version
![Page 17: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/17.jpg)
Old Site – Architecture – continued
> Large number of web servers spread across multiple server farms
> File-based caching on each web server, which led to highly inefficient disk I/O – difficult to use industry standard caching tools
![Page 18: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/18.jpg)
Old Site – Architecture – continued
CSS
PHPHTML
JS
> No modularity - a monolithic application that mixed every different coding practice you can think of
> Include statements after include statements after include statements
> Made a mess for anyone to debug, troubleshoot, and enhance
Perl
![Page 19: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/19.jpg)
Old Site – Architecture – continued
> Almost 100% of changes had to go through developers
HR/Web Producers/Sales/Marketing
![Page 20: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/20.jpg)
New Site – Technical Solution
> Solution needed to address:
1. More levers (control) to business users –
less dependency on development
2. Clean supportable – human readable code
3. Scale – effectively (cost) and efficiently
![Page 21: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/21.jpg)
New Site – Technical Solution
> 1 - More control to business users – less dependency on development – quicker time to market/production:
> CMS:> Build in-house – again?> Buy
> Initial understanding of technology choices for selected CMS:
> vs.
- Skill Migration!- PHP vs. Anything else.
![Page 22: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/22.jpg)
New Site – Technical Solution
> 2 - Clean supportable – human readable code> Frameworks – why?
3 - Scale – effectively (cost) and efficiently> How?> Options
![Page 23: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/23.jpg)
New Site – Built in 6 months!
> Project Execution Options:- 1) Outsource completely to 1+ vendor:
- Pros: - Lower risk of technology/experience related issues- Higher confidence in on-time delivery
- Cons:- Lack of in-house experience- Higher cost long term with vendor lock in.- control of your own destiney?
![Page 24: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/24.jpg)
New Site – Built in 6 months!
> Project Execution Options:
- 2) Take the lead, flanked by the right vendors- Pros:
- Guaranteed experience and expertise builder- Lower long term cost- Control your own destiny
- Cons:- High risk of missing timelines- High risk of “Frankenstein” Implementation
![Page 25: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/25.jpg)
Lessons Learned
> Control your own destiney – technically speaking> Never be afraid to ask questions> Trust in your people> Put the right skillset to the right task
> How does a project become a year late?
![Page 26: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/26.jpg)
New Site – Built in 6 months!
> The real how?
![Page 27: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/27.jpg)
CMS
> We added an enterprise level CMS to the mix:- It allows our content to be:
- Translated- Re-used, and- Templated
across numerous platforms and sites.
> We define content and modules that can be rendered differently on- Websites- Mobile Websites- Mobile Applications
> A clear separation of content and design helps to re-use the content in many areas, and alter their design as necessary
![Page 28: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/28.jpg)
Flexibility for the Business> With the introduction of the CMS, we have enabled our business
users to switch and pull many levers, allowing for:
- Greater page metadata control for SEO
- The ability to quickly and easily add new components to pages, and to reorder components on the page
- The flexibility for scheduled publishing/unpublishing of content
- To reuse modules on different pages, creating unique offerings
> Translations
- We also have the ability to control all languages in one place
- It also allows for translation of URLs for different domains. This allows us to share content between TheWeatherNetwork.com and MeteoMedia.com, but have different page URL's that are relevant for their language.
- e.g. The 7 Day Weather Forecast page is http://www.theweathernetwork.com/weather/canada/ontario/oakville, and http://www.meteomedia.com/meteo/canada/ontario/oakville
![Page 29: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/29.jpg)
PHP Web Servers
> We added a reverse proxy cache that:- Eliminates file based caching on each server- Protects our PHP servers from overload with high traffic- Allows modular based caching where different pieces of the page can have
their own time to live
> Decreased the number of web servers by 60%
![Page 30: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/30.jpg)
The PHP Code
> Totally rewritten from the ground up> Stayed with a LAMP stack> Used the CodeIgniter framework as a base to help standardize and speed up
development> Integrated an HMVC (Hierarchical MVC) framework to make each module on
the page it's own MVC component.> This allows each module on a page to be developed independently, which:
- Reduces development complexity- Makes testing and automation easier- Allows for easy module re-use on different areas of the site
![Page 31: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/31.jpg)
Implementation of the Design
We use Mustache templates (http://mustache.github.io/)>These are logic-less templates, which provide:
- A clear separation between business logic and template design- Simple markup to maintain clean HTML- Templates that can be compiled and rendered in both PHP and JavaScript
(depending on the need that arises)
We also use LESS CSS (http://lesscss.org/)>This allows us to create dynamic stylesheets, with variabilized parameters>It also allows for nesting and mixing styles within other styles, creating a clean CSS code-base that is then compiled into browser-ready CSS.
![Page 32: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/32.jpg)
![Page 33: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/33.jpg)
![Page 34: Silicon Halton Meetup #44 - Special Presentation By The Weather Network](https://reader035.vdocument.in/reader035/viewer/2022062405/555a4781d8b42ae1398b5252/html5/thumbnails/34.jpg)