5 Tips for Using HTML5 Today

So, Google and Apple are pushing this HTML5 thing, and yet, as mentioned by myself and others, HTML5 is just not quite ready for wholesale use. That being said, there are some tactics, techniques, and technologies that you can use today to create a fully functional Web, Mobile, or Tablet app.  Following are five such tips.

Tip #1: Target WebKit browsers exclusively

After reading that heading, you might think that I’m on some sort of Apple juice drug for suggesting that you ignore nearly 80% of the browser maket.  But hear me out – this is not as radical as you may think, for several reasons:

  • Between Safari, Chrome, and Chrome Frame (Google’s plugin for Internet Explorer 6 and above), you’ll reach a full 50.5% of the browser world
  • You’re app is guaranteed to work on up and coming devices such as the iPad, iPhone, and Android-powered hardware
  • You don’t have to worry about building “exception code” into your app, to account for the differences between browser platforms

Now, there is also a good chance that the HTML5 code you’ll be using is also supported by the two other HTML5 capable browsers, Firefox and Opera, thereby bringing your browser coverage to nearly 100%.  Even so, I wouldn’t recommend worrying about Firefox, since, as mentioned, you don’t want browser specific code, and you don’t want to dumb-down your app with a least common denominator approach.  Plus, unless you’re using some obscure part of the HTML5 spec that only WebKit supports, you’ll have Firefox support anyway.

Tip #2: Don’t try to look like a native app

Look at gmail on the iPhone.  Sure, it doesn’t look or behave quite like a native iPhone app, but does it really matter?  It works just fine and looks great.  The only thing I would change about it might be to get rid of the lost real estate that Safari takes up (there’s an answer to that – see the next tip).

Eschewing device-specific user interfaces does not mean that your app necessarily becomes bland.  To the contrary.  Using CSS you can really make your app stand out.  In doing so, you’ll also be creating your own brand that is consistent across devices.

Tip #3: Get rid of the chrome (no, not that Chrome!)

Ok, so you’ve made a cool app and would like to take advantage of the entire screen, leaving out the browser’s chrome (you know, the toolbar, search box, status bar, etc).  So is there a solution for this?  There sure is, for the iPhone OS, there is a meta-tag you can use:

<meta name="apple-mobile-web-app-capable" content="yes"/>

For Android, you need to create your own WebView, as described in this excellent tutorial:

http://developer.android.com/guide/tutorials/views/hello-webview.html

On the iPhone OS, you can also maintain the chrome, but set the position of app so that the address bar is hidden initially.  In this scenario, when the user scrolls to the top of the app’s visible area, the address bar will then be shown.  This is similar functionality to the iPhone’s own mail program, where the search bar is initially hidden, but shown if you scroll to the top of the app.

This is accomplished via JavaScript with the following code:

window.scrollTo(0, 1);

Tip #4: Remember touch devices

If you’re going to use HTML5 (which, by the way, is a bit of a misnomer – when people refer to HTML5, it almost always includes CSS and JavaScript as well), make sure to use JavaScript’s touch and gesture events, rather than, or in addition to, mouse events.  A nice summary can be found here:

http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Tip #5: Take your app offline

This tip, of course, is optional, and depends on the requirements of the app you’ll be developing.  The point being, just as many native apps work just fine without an Internet connection, so too, can your HTML5 app work perfectly offline.

There are three types of offline techniques you can employ:

  • Using a cache manifest, you can load a complete cached copy of your pages into any compliant browser for offline viewing.
  • Using key-value pairs, you can store simple data that the app requires to run, such as user preferences and other cookie-like data.
  • Using the JavaScript database (SQLite), you can store more comprehensive and complex data needed for your app.

Summary

Using these techniques, you will be well on your way towards creating a fully functional HTML5 app that provides the end user with an experience that rivals that of a native app.  And the fact that it is not native code means that your app will work on a myriad of devices.  Try doing that with an iPhone app!

Feel free to chime in with tips of your own.

This entry was posted in Technology and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>