The state of mobile weather apps isn’t awesome. 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, neither of which I find tend to provide very good Canadian forecast data.
Environment Canada is my go-to forecast provider, but their site has been beaten with the Canadian government’s standard website ugly stick. And, while a mobile site exists, it’s not much better. In fact, it’s worse in some ways.
All of this has led me to make a mobile web app version. Or, at least, a mobile web app version for Winnipeg, where I live. I scrape the HTML via a proxy and restyle it in a iOS-esque style. (I might get around to integrating a city-switcher, but that’s a lot of work and I built this for me and for fun.)
I optimized the design for two uses: 1) what are the current conditions? and 2) what’s the immediate forecast? Most other forecast data is hidden by default, but can be shown. There are a few media queries for portrait/landscape view, and I snagged icons from the open-source Oxygen project to replace the drab ones from Environment Canada. It also makes use of HTML5 Application Cache to speed up launch time. And, although it should work anywhere, it’s been heavily optimized for iOS Safari.
View my Winnipeg mobile weather app. The source is on GitHub, of course.
10 Comments
Awesome! That’s how we started in the surf app. We started by scraping WaveWatch data and making a mobile webapp. Now all you need is a geo location selector to make your app work for other regional cities.
Right on Matt!
Thanks Peter! Using Geolocation would definitely be the way to go if I expand this — hadn’t thought about it, but it’s so obvious now that you mentioned it.
Very nice Matt, looks great — though right now it’s full of errors for me (see screenshot).
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: Celcius and Degrees.
Derek, thanks for the notice on the errors. One was serious — it failed when there was no current condition provided. The rest are just images that are in the initial HTML loaded via XHR but never get put on the page. Interesting that the browser tries to fetch the images before they’re inserted into the DOM.
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.
“Canadian government’s standard website ugly stick.”
Things will change soon. Check this: http://tbs-sct.ircan-rican.gc.ca/projects/gcwwwtemplates/news — a massive and “modern” framework.
However, don’t expect the government to pump out beautiful CSS award-worthy sites. GoC has to have accessible infrastructure that works equally well for a farmer on a dail-up connecting and IE6, as well as a tech geek with the latest tech.
Cheers.
Hey Mark, thanks for the link. The new styles are an improvement, but they still suffer from a too-common idea that usability = ignoring basic design principles. For instance, both new and old templates suffer from a lack of whitespace. Everything is too crowded together, causing a variety of usability issues, as well as reinforcing the common perception that the government is a claustrophobic, hectic entity to deal with.
Hey, I’m thinking of either making something similar, or more likely forking your project for different cities/to add a city switcher. Can you comment on the use of the proxy? What is it’s purpose? To prevent to many requests coming from the same server?
Looks like the proxy is needed to make cross domain requests from jQuery. I fixed a few bugs and added a settings screen with a city switcher. Just doing some final testing, but hopefully I’ll be able to post it in a few days (may not be until the new year depending on how holidays go).
In case anyone around here is interested… my fork of this project with a city selector:
Web App: http://weather.nosecreekweb.ca/
Github: https://github.com/nosecreek/Env-Canada-Mobile