What is an HTML5 app?
Essentially, a HTML5 app uses all the shiny, new pieces of the HTML5 draft to create an app-like experience.
This means storing data offline, being functional, and acting like a real app instead of just being content for perusal. You probably use web apps now, like Gmail. Gmail actually has an HTML5 version; if you visit Gmail on an iPhone or iPad, you can check it out.
Why Should I Use HTML5?
While there are specific cases for not using HTML5, many apps that get produced today for iOS and Android could work just as easily in HTML5. Besides just technically being able to do it, there are other good reasons to use HTML5.
You Already Know How to Use It
Right now, if you are a web developer, you have all the tools you need to get into this. HTML5 app development is only little more then changing how you think about webpages. In some instances you can just add a few lines to your HTML, and add some stuff on your server and you will have a full, working, offline HTML5 app.
The more we work with standards, the more useful they become.
Besides, web developers already understand cross-browser problems. While there will be more cross-browser issues than ever, web developers have a distinct advantage over other kinds of developers, because they already have this in their pocket. The other part of cross-browser development is standards. The more we work with standards, the more useful they become. Web developers have led the charge in some respect, and now it’s paying off. Instead of having to learn a whole other non-standards-compliant add-on, you can simply rely on what standards bodies have been working towards.
Finally, when it comes to writing code, it can be difficult to see that you might also be doing something political.
When you look at how a handset manufacturer handles itself, and how it chooses to lock in its developers, by choosing to work outside that system you are supporting the notion of freedom.
It’s a small notion, but it matters, because in the long run we want our handset developers to be open, and let us hack on them as much as we want.
How can I use HTML5?
Actually using HTML5 isn’t that hard. It can range from a couple lines of code, to writing a whole new app. Here are a few ways to get started.
1. Create a Mobile Friendly Website
Many websites are only a few tweaks away from a friendlier mobile experience. The first thing to do is take a look at the viewport.
<meta name="viewport" content="user-scalable=no, width=device-width"/>
The viewport meta tag is not a standard yet, but it is a widely accepted convention. Many mobile browsers use this tag to setup certain aspects of web page rendering.
More info on viewport, check out the following documentation:
Besides just the viewport, make sure that your webpages are flexible; for example, use dynamic widths, instead of static widths. Mobile devices are all shapes and sizes, just like browser windows. Designing with the idea of flexibility in mind will automatically make your web pages more mobile-friendly.
A great little tidbit about the next version of HTML5 is this: the doctype went the way of the dodo. It still has to be there, because of many reasons, but it's been shriveled to mean almost nothing.
This is awesome. No longer do we have to copy and paste a long string of text, because who can remember that thing, anyway?
2. Take Your Website Offline
Some browsers now implement the application cache. The application cache allows you to tell the browser in advance what resources a web page will need offline. The browser will then download those files for offline usage. When the client goes offline the browser will refer to those cached resources.
The application cache isn’t something that you can do by just changing your markup, though. You will need the ability to change the content-type headers on the server. To do that in Apache, you can either put this in a configuration file, or in a .htaccess file.
AddType text/cache-manifest manifest
Once you do that, you can add the following markup to your
html element in your webpage. You can call your manifest anything you want, but make sure it’s at the root of your site, and it ends with a .manifest.
Then, you can create your manifest file. Simply list all the pieces you will need while you are offline. You can’t put cross-domain files here and you won’t want to list anything that changes often. Here is an example manifest file.
# Version 1
When you have this all setup, check it out in a browser that supports the application cache.
If you need to update a resource, just change the manifest file. Even adding a comment will prompt the browser to update the application cache.
The application cache is notoriously hard to debug. This book has some good methods for checking your application cache status.
3. Make Your Videos Accessible Everywhere
If you host video content on your site, and use a flash player to play it, you're missing out on an opportunity to display video to people using the iOS devices and phones that don’t support flash (which is most phones).
HTML5 has two new tags that make displaying multimedia easier:
video. Here is an example
<video src="myvideo.mp4" controls />
Now, if you want to support as many browsers as possible, you will need to encode your content in a couple different formats. Then, list them like so.
<video poster="myvideo.jpg" controls>
<source src="myvideo.m4v" type="video/mp4" />
<source src="myvideo.ogg" type="video/ogg" />
This makes sure that your content can be seen in Firefox, Safari, Chrome, and mobile phones. Finally, for browsers that don’t support the
video tag, you can still fallback to a flash player. When a browser doesn’t support a tag, it will usually just not deal with it, and continue recursing till it finds a tag it does know. In this fashion, if you put the
object inside the
video tag, a browser like IE will use the
object. However, a browser that supports the
video tag will ignore the embedded flash.
Conclusion: Start Using HTML5 Tags Today
Tags like header, footer, nav, aside, article, and section are nice because they are semantic. They inform webpage consumers a little bit about your intentions for your content. It’s nice to use them. In the future, they will be more helpful than they are now, but there is nothing to stop you from using them today.
Some browsers, like IE, will “freak out” if you use these new tags, but don't worry. IE does support adding tag types to the DOM, you just need to inform IE about them. To fix this, Remy Sharp created the HTML5 Shiv. If you include this in the head of your webpage, in an IE conditional comment, your page will render just fine.
Now you are using semantically useful HTML!
Bonus: Sell your Apps in an App Store
Alternatively, our very own CodeCanyon, within the next month, will be launching a new category for HTML5 apps. In this category, we'll be selling everything from advanced and custom video players, to libraries, to presentation apps.
To prepare for the category, we've launched a competition with $7000 worth of prizes. You have two weeks left to enter, if that interests you!
There should be nothing stopping you from exploring HTML5, and if you wanted to be ahead of the game, you should be building HTML5 apps right now. Thanks for reading!
About the Author
Alex Kessinger is a front-end web developer who currently works for Yahoo!