An Introduction to Using HTML5 for Mobile Development
I’ll just out and say it: I’m extremely lazy efficient when it comes to programming. I want to do it the quickest, easiest way and be done with it. I’ve had a few opportunities come up to work on mobile applications. I love the idea of mobile applications, but hate the idea of coding 3 or 4 instances of what is basically the same application in C, Java, C#, etc. Luckily, HTML5 makes mobile development a lot easier than juggling languages and platforms and APIs.
HTML5, in the broadest sense, was created to fill in some of the gaps the HTML standard had. For instance, HTML4 does not support video. Or audio. Or animations. Or geolocation. Or local storage beyond cookies. So you see we have a bunch of limitations that HTML5 gets us around.
To use HTML5, you don’t have to get your users to upgrade anything. Unless they are still on Internet Explorer 8 or lower, they likely are already capable of using HTML5 sites. Then it’s just a matter of adding some new tags and some new parameters and you are off and away.
For mobile development, this gets really useful because all mobile browsers for smartphones are HTML5 compatible, at least in the most common areas such as video. So if we wanted to have an application to say find us the closest pizza place, you could use the Geolocation feature in HTML5 to get the user’s location in order to find the closest pizzeria.
Of course, there are some limitations to this approach. Despite getting access to some hardware, such as the GPS, we’re still unable to use other hardware features, such as the accelerometer or the camera. That’s where something like PhoneGap comes in.
In a nutshell, PhoneGap provides a Javascript interface via a device-specific native module that runs in the background, allowing you to write an app using HTML5, CSS3, and Javascript, and access the camera and other hardware features. This further negates the need for a full mobile app.
There are some caveats to this approach though. While it will vastly speed up your development time, don’t get caught thinking you’ll be able to write once and instantly deploy to all platforms PhoneGap supports. For one, not all features are supported by all phone operating systems, either due to lack of development effort, or maybe some security system in the device’s OS. Android and iOS, being the most popular, naturally support everything, so if those are your two platforms for development, carry on. The second rub is that there are some quirks that have to be accounted for with each device, such as needing certain options set a certain way to get it to function. Luckily PhoneGap allows you to know what device you are running on and plan accordingly, so you can just put in an if statement or two to compensate.
The last issue, and if you’re just using PhoneGap and HTML5 you might have difficulty getting around, is that everyone will know you’re not making a native app, but a mobile app. This is because the way PhoneGap renders your site is to create a “Web View” (it has a different name on every platform, but a web browser window) and display your content like it’s a website. Thus any links that you have will have a lovely border placed around them when clicked. I refer you to Bank of America’s original mobile apps, which were all a web site, and all very poorly done (hence why they now have native apps). However, through the power of the mobile ninjas, you too can fool your users into thinking your app is a native(-ish) app!
The secret lies in cheating. Rather than going to all the trouble of finding out which CSS styles need to be set to what to make that go away, you can just use something like jQuery Mobile. Yes, that Javascript framework even Microsoft has to love has a mobile version. On top of the usual jQuery you’re used to you also get an UI system that is pretty rich and gives a nice look and feel to your site with absolutely no effort. I threw an example for a talk I’m giving in a few days together in about a day and a half of work, most of which was figuring out why something wasn’t working how it was supposed to (hint: I messed it up!)
Overall, if you’re knowledgeable about front-end web development and don’t need to draw fancy graphics for games or use some unsupported hardware, a HTML5 application could be a nice way to get to market quickly, getting a consistent look and feel across all platforms, and make your updates easier and faster.
If you’re interested, I gave a talk on this subject the other night, and you can watch it in IE if you so choose(it was recorded using LiveMeeting, and Microsoft wants you using IE, not me!). The slides didn’t get translated to the video, but the parts where I shared my desktop did, so you can download my slides if you want to follow along.