Environment Canada Mobile

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

Envi­ron­ment Canada is my go-to fore­cast provider, but their site has been beaten with the Cana­dian government’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-switcher, 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 other 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 Canada. 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­ily opti­mized for iOS Safari.

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


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

    Awe­some! That’s how we started in the surf app. We started 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 other regional cities.

    Right on Matt!

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

    Thanks Peter! Using Geolo­ca­tion would def­i­nitely be the way to go if I expand this — hadn’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 weather apps that do use ec.gc.ca data, which I just found the other 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­vided. The rest are just images that are in the ini­tial HTML loaded via XHR but never get put on the page. Inter­est­ing that the browser tries to fetch the images before they’re inserted 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­ever, don’t expect the gov­ern­ment to pump out beau­ti­ful CSS award-worthy sites. GoC has to have acces­si­ble infra­struc­ture that works equally 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-common idea that usabil­ity = 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 crowded together, caus­ing a vari­ety of usabil­ity 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 entity 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 likely fork­ing your project for dif­fer­ent cities/to add a city switcher. 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 needed to make cross domain requests from jQuery. I fixed a few bugs and added a set­tings screen with a city switcher. Just doing some final test­ing, but hope­fully 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­ested… my fork of this project with a city selec­tor:
    Web App: http://weather.nosecreekweb.ca/
    Github: https://github.com/nosecreek/Env-Canada-Mobile