What’s possible with a mobile web app?

Over the shoulder of man using web app on smartphone

So you’ve got an idea for an app.

As it turns out, you’re not alone. We get requests from new and old clients every few weeks to quote on some sort of mobile app. Many potential app clients don’t know what their options are, and aren’t sure of the differences between a native app and a mobile web app. A native app is an app that can be downloaded and installed from the Apple, Google, Blackberry or Microsoft App Store. They can be free or there may be a cost. These apps can take full advantage of the functionality offered natively on the the mobile device. The Facebook app is an example of a native mobile application. Kula doesn’t build native apps, although we have dabbled in it–we prefer to stay focused on web technology. Whenever we meet with a client who clearly needs a full-on app for iOS, Android or another mobile operating systems, we refer them to our good friends at Mindsea, who do excellent app work.

Forecast.io, a brilliant web appWeb apps are a different beast. They essentially run in the browser, although on some platforms such as iOS, they can be launched by tapping an icon on the homescreen ‘desktop’. Web apps use HTML, CSS and Javascript to perform many of the same functions of native apps, although some functionality is limited. That’s changing all the time, and more and more things can be done with mobile web apps. Some excellent web apps are starting to come forward, like the brilliant Forecast.io, a mobile web app (and desktop site) that features a UI on par with the best native apps in the business.

One major benefit of developing a mobile web app is that they can work on every mobile platform for about the same cost as developing a native app for a single platform. That’s right, when you build a native app, what you build for an iPhone will need to be rebuilt for Android. And again for Windows Phone and Blackberry.

But is a mobile web app right for your idea? Read on to find out what is currently possible.

Homescreen Icon Launching

iOS allows an icon to be saved to the homescreen directly so that the web app can be launched with a single tap (select the bookmark icon, choose ‘Add to Homescreen’). On Android, you can save a bookmark for the web app, then exit to the homescreen. Tap and hold on an empty space and ‘fill’ it with the bookmark/shortcut you just created. On newer versions of Android holding down the bookmark icon will give you an option to add the site to your homescreen.

When designing a web app for iOS, you can also add a little hovering arrow to notify users that the app can be saved to your homescreen. It’s important to note that on iOS that a web app launched from the homescreen removes all of the browser chrome, giving you more real estate to play with.

GPS and Location Services

Atlantic Credit Unions Mobile siteAll modern mobile web browsers allow access to the GPS in your phone, assuming that you have location services turned on (if not, I’ve got a tinfoil hat here you can borrow). It should be noted that on older Blackberrys, you’ll need to enable this both at a system level and via several browser settings–that one’s stumped us a few times. Remember to use a fallback method just in case the GPS fails so that a user can search using an address. When we built the ATM finder on the Atlantic Credit Unions site, we made it so that mobile devices default to GPS search, whereas the desktop version can search by city, province or postal code.

Caching and Local Data

Developers can utilize the cache.manifest feature in most mobile browsers (except Internet Explorer) to save important and frequently downloaded assets like images to the device to speed up loading. You won’t be able to save large amounts of local data the way a native app can (since you don’t have access to the file system), but that can be supplemented with online data storage for account data.

Photo Library and Camera Access

Apple iOS 6 introduced the ability to upload photos and access the camera directly from within mobile Safari. Android phones have had this ability since early in version 2. Windows Phone 8 and the new Blackberry 10 OS also allow access to the photo library, although, anecdotally I have heard that the BB10 method for posting and un-encrypting a photo are a bit hinky. You won’t be able to easily manipulate a photo the way that you can with Instagram by applying filters, but lack of access to the camera was one of the biggest things holding web apps back, so it’s great that this is no longer a constraint.


Virtually all Android and iOS devices support the HTML5 Canvas element which can be used to create complex and simple animations. The last two Blackberry OS’ also offer support for animation. Internet Explorer on Windows Phone has decent support but not as good as other current browsers. We recently used Canvas to make interactive, animated, real-time (if you’re playing buzzword bullshit bingo, you likely just won) graphs for a client in the energy sector. Very cool stuff I wish I could share but we’re under an NDA on that one.

App Store

There are a number of reasons why you might want to skip the App Store, but some people won’t want to, depending on the context of how their app will be found. We think that for many businesses that are simply looking for a great mobile experience for their customers and not an app-as-a-business model, it makes the most sense to make your app ‘installable’ from your website. For those clients looking to be found in the App Store, there are tools such as PhoneGap that allow your mobile web app to be wrapped in a native application so that it can be submitted to the store. This has the added benefit of allowing access to content and APIs on the mobile device that are out of reach from a web app, such as contacts and the ringer and vibration mechanisms.

The best part of building a mobile web app is that it can be created as an extension of your core web presence using responsive design, or as a stand alone app that you ‘install from the web‘. The opportunities are endless and the technology keeps getting better.

Join us in conversation…