Sun web app developer discusses HTML5 design for iOS

We interview the student behind an elegantly simple weather app created with some innovative coding.

A few weeks ago, a new free weather app for the iPhone and iPad broke across Twitter. Sun eschews the cartoon sheen of Apple’s built-in app or the nerdish data overload of the Met Office app, instead offering the clean simplicity of good old Swiss-style graphic design and a simple bright palette and gesture-based interface reminiscent of to-do game Clear.

Sun wasn’t the product of a hip Shoreditch digital agency, but was designed and developed by a Danish student called Jakob Henner from the University of Copenhagen. It’s not even a native app, but a web app coded in HTML5 that Jakob conceived as a way to demonstrate some of the neat UX and design elements possible with web apps for the iPad and iPhone.

“It's not that I didn't like the current crop of weather apps as much as I would like to show the HTML5 capabilities of iOS,” says Jakob, who’s spent the past few weeks finishing his exams. He wanted to create an app with a gesture-based interface featuring very little interface ‘chrome’, which he says would also prove easy to use and be beautiful to look at.  

Sun’s features and functionality are a stripped back as its look. You swipe horizontally to move from your current location to find the temperature and weather from three others – with a neat 3D effect like spinning a wooden block. A pinch reveals weather at all four locations at once. A two-fingered swipe down reveals a ten-day forecast with an elegant graph of temperatures in the days to come. And that’s it – apart from an Easter Egg that Jakob’s let us in on that involves tapping the main weather icon about 25 times (though we only recommend this if you’re a fan of a certain Dutch footballer).

Jakob says that he was inspired by “the wonderful interaction (and sounds!) of Loren Brichter's Letterpress, the Windows Phone’s Metro interface and the awful boring weather of Denmark.”

It may seem odd that an iOS app is inspired by Microsoft’s Metro interface – but the simple tile-led approach has proved popular with digital designers tired of Apple’s bevels, gradients and design skeumorphism.

One innovative function is that if you visit the Sun app site from your iPhone or iPad, you’re presented with a message to add the site to your Home Screen. It’s only when you do this, releasing the web app from the beveled control strips of Safari, that you can access the weather.

To do this, Jakob used a single line of JavaScript, which tests whether the user is accessing the site in a standalone app on iOS or in Safari – effectively blocking out everything but iPads and iPhones.

Swipe controls

Jacob says that the biggest challenge for the app was coding the gesture-based interactions.

“Initially the gestures were far more advanced,” he says, “tracking the exact movement of the fingers. [I found this] far too unreliable and hard.”

While many users have tweeted about how much they love the design of Sun, Jakob’s the first to admit it’s not perfect.

“I didn't nail it one hundred percent,” he says. “Many users don't realise you can pinch in to reveal a 10-day forecast or pinch out to get a overview of all cities. I removed the tutorial from the first version, as I it simply wasn't elegant. Adding a tutorial is easy, but lazy – so I'll have to find some natural signifiers [in a future version].”  

This isn’t likely to happen any time soon though, as Jakob has just landed a job at a studio in central Copenhagen.

“That, school and complaining about the weather is pretty time consuming,” he says, “so I don't know when I'll find the time to improve Sun.”

Elsewhere on IDG sites

Read Next...