Environment Canada Mobile

The state of mobile weath­er apps isn’t awe­some. I find that it’s even worse in Cana­da, where weath­er data is sourced through non-Cana­di­an providers such as Yahoo (iOS’s built-in weath­er app) or AccuWeath­er, nei­ther of which I find tend to pro­vide very good Cana­di­an fore­cast data.

Envi­ron­ment Cana­da is my go-to fore­cast provider, but their site has been beat­en with the Cana­di­an gov­ern­men­t’s stan­dard web­site ugly stick. And, while a mobile site exists, it’s not much bet­ter. In fact, it’s worse in some ways.

All of this has led me to make a mobile web app ver­sion. Or, at least, a mobile web app ver­sion for Win­nipeg, where I live. I scrape the HTML via a proxy and restyle it in a iOS-esque style. (I might get around to inte­grat­ing a city-switch­er, but that’s a lot of work and I built this for me and for fun.)

I opti­mized the design for two uses: 1) what are the cur­rent con­di­tions? and 2) what’s the imme­di­ate fore­cast? Most oth­er fore­cast data is hid­den by default, but can be shown. There are a few media queries for portrait/landscape view, and I snagged icons from the open-source Oxy­gen project to replace the drab ones from Envi­ron­ment Cana­da. It also makes use of HTML5 Appli­ca­tion Cache to speed up launch time. And, although it should work any­where, it’s been heav­i­ly opti­mized for iOS Safari.

View my Win­nipeg mobile weath­er app. The source is on GitHub, of course.


  1. Posted June 13, 2011 at 10:40 am | Permalink

    Awe­some! That’s how we start­ed in the surf app. We start­ed by scrap­ing Wave­Watch data and mak­ing a mobile webapp. Now all you need is a geo loca­tion selec­tor to make your app work for oth­er region­al cities.

    Right on Matt!

  2. Matt
    Posted June 13, 2011 at 11:14 am | Permalink

    Thanks Peter! Using Geolo­ca­tion would def­i­nite­ly be the way to go if I expand this — had­n’t thought about it, but it’s so obvi­ous now that you men­tioned it.

  3. Posted June 13, 2011 at 11:47 am | Permalink

    Very nice Matt, looks great — though right now it’s full of errors for me (see screen­shot).

    I should also point you to two native iOS weath­er apps that do use ec.gc.ca data, which I just found the oth­er week: Cel­cius and Degrees.

  4. Matt
    Posted June 13, 2011 at 12:13 pm | Permalink

    Derek, thanks for the notice on the errors. One was seri­ous — it failed when there was no cur­rent con­di­tion pro­vid­ed. The rest are just images that are in the ini­tial HTML loaded via XHR but nev­er get put on the page. Inter­est­ing that the brows­er tries to fetch the images before they’re insert­ed into the DOM.

  5. Matt
    Posted June 13, 2011 at 12:13 pm | Permalink

    Oh, and thanks for the links to those apps. Last time I looked, there weren’t any, but that was a while ago I guess.

  6. MarkL
    Posted January 5, 2012 at 9:04 am | Permalink

    “Cana­dian government’s stan­dard web­site ugly stick.”

    Things will change soon. Check this: http://tbs-sct.ircan-rican.gc.ca/projects/gcwwwtemplates/news — a mas­sive and “mod­ern” framework. 

    How­ev­er, don’t expect the gov­ern­ment to pump out beau­ti­ful CSS award-wor­thy sites. GoC has to have acces­si­ble infra­struc­ture that works equal­ly well for a farmer on a dail-up con­nect­ing and IE6, as well as a tech geek with the lat­est tech.


  7. Matt
    Posted January 5, 2012 at 10:06 am | Permalink

    Hey Mark, thanks for the link. The new styles are an improve­ment, but they still suf­fer from a too-com­mon idea that usabil­i­ty = ignor­ing basic design prin­ci­ples. For instance, both new and old tem­plates suf­fer from a lack of white­space. Every­thing is too crowd­ed togeth­er, caus­ing a vari­ety of usabil­i­ty issues, as well as rein­forc­ing the com­mon per­cep­tion that the gov­ern­ment is a claus­tro­pho­bic, hec­tic enti­ty to deal with.

  8. Posted November 15, 2012 at 5:06 pm | Permalink

    Hey, I’m think­ing of either mak­ing some­thing sim­i­lar, or more like­ly fork­ing your project for dif­fer­ent cities/to add a city switch­er. Can you com­ment on the use of the proxy? What is it’s pur­pose? To pre­vent to many requests com­ing from the same server?

  9. Posted December 19, 2012 at 10:10 pm | Permalink

    Looks like the proxy is need­ed to make cross domain requests from jQuery. I fixed a few bugs and added a set­tings screen with a city switch­er. Just doing some final test­ing, but hope­ful­ly I’ll be able to post it in a few days (may not be until the new year depend­ing on how hol­i­days go).

  10. Posted December 21, 2012 at 11:25 am | Permalink

    In case any­one around here is inter­est­ed… my fork of this project with a city selector:
    Web App: http://weather.nosecreekweb.ca/
    Github: https://github.com/nosecreek/Env-Canada-Mobile