Wednesday, December 7

What Do We Mean When We Say HTML5?

No doubt you’ve heard at least a whisper about HTML5 over the last year. It’s a Flash-killer. It’s the only way to get multimedia on mobile devices. It’s not going to be ready for use until 2022. It’s going to save the world.

There’s a lot of hype and a lot of confusion.

One thing that complicates the situation is that the spec is still technically undergoing revision, even as it’s currently being used in web development projects around the world. As of January 2011, it’s considered a “living standard,” and browsers are continuing to change as the spec is revised.

Another complication is that “HTML5” is often used to refer to a range of modern web technologies. Simply speaking, HTML is the language that the Web is written in, and HTML5 is the most recent version of it. But because there are a lot of other technologies commonly used to create rich experiences on the web these days (such as CSS3 and JavaScript), those get wrapped up into the the abbreviation “HTML5” in colloquial speech. There are those who think that’s a bad thing—one suggestion I’ve seen is replacing “HTML5” with “NEWT” when it’s being used to encompass more than the markup language—and while I like the idea (and the acronym), I don’t really consider it desirable to throw more jargon into the mix. I often use the phrase “the HTML5 stack” to communicate more clearly, but to me, the main thing is that people have good resources to keep them up to date on the capabilities of the technology, the delivery platforms, and the authoring tools.

And that brings us to one final complication: The makers of authoring tools—the people we often count on to help us deliver on our designs—aren’t always very invested in helping us cut through the hype to find what we need.

So what’s an elearning designer—or developer—to do? Sit this one out? Change jobs? Take that early retirement? I say none of the above! Here’s a quick primer on just what you need to know for e-learning (except the code).

Why is HTML5 important?
When I asked this question to a group I was speaking to about HTML5 authoring tools last month, about half of them held up their iPads. Good answer!

Apple has never allowed Flash on iOS devices (iPhones, iPod Touches, and iPads), but these devices are way too popular for us to ignore their users. And just recently, Adobe announced that it is stopping development on the version of Flash Player that is used on all other mobile devices, as well. Even on desktop and laptop browsers, the Flash plug-in can be problematic…despite its great service over the last ten years providing the ability to rich multimedia experiences over the web.

But HTML output that you can create with tools like Lectora and ToolBook is usually so…static. How are we supposed to deliver those rich learning experiences that our learners are used to if we can’t output to Flash?

Well, HTML5 has the vast majority of the capabilities that Flash has, as well as much more widespread ability to play on mobile devices.

What can you do with HTML5?
You can build rich, app-like experiences. Blah, blah, blah.

Let me try that again.

You can make pretty stuff. You can make stuff that that responds to the learner’s input and understands gestures that used to require plugins. You can make cool multimedia experiences. You can make apps for sketching, image editing, and sound editing. You can make a drum kit. You can make a musical instrument out of the NYC subway route. You can rebuild Quake (warning: violence) and Angry Birds. (Caveat: Angry Birds still has a tiny amount of Flash built-in, for sound only as I understand). You can build lots of other games, as well.

Now, can you do all of these things? Probably not. I certainly can’t. But people who are skilled with the technology can. It wasn’t too long ago that it took a lot of skill with Flash to build the things we can create easily with rapid development tools today. We are going to have some growing pains while our tools catch up.

What can’t HTML5 do?
There are limitations (and there is an ongoing discussion about this on my individual blog), but the main point we should be concerned with is whether it can support the things we want to do in developing e-learning, not how all of HTML5’s capabilities stack up to those of other technologies. From what I’ve seen—and just based on the samples I linked above—the differences are at the margins. Most elearning designs aren’t going to cause the HTML5 stack to break a sweat.

Speaking of other technologies… is it going to kill Flash?
As Justin promised, I’m not going to waste your time on this debate. The material point for us is that if we need to produce non-Flash content so that that it can play on some devices, why bother producing a separate Flash version, as well?

If I want to deliver HTML5 output, which tools should I use?
A couple of months ago, I contributed an article to T+D on some of the more capable tools available, and I hope to report on more of them in coming months. Ones to watch in particular: Adobe Captivate is testing HTML5 output, Articulate has announced that the upcoming Storyline will output to HTML5, and Allen Technologies has announced that they are working on HTML5 output for ZebraZapps, as well.
But in addition, I would encourage you to check out tools that are not specifically built for elearning, such as Adobe Dreamweaver for full-fledged authoring and Tumult Hype and Sencha Animator for animation. Not only will it broaden your development skill set, it could encourage you to start broadening your design ideas…especially if you’ve been using rapid authoring tools for a while.

Will my learners be able to see it?
It depends. One of the great things about HTML5 is the ability to gracefully degrade content, or offer different versions of content depending on which browsers (and which versions) your audience has. For a quick graphical view of which browsers support which features and how support has been added over time, see HTML5 & CSS Readiness; for more nitty-gritty and frequently-update details, see When can I use…. In general, mobile browsers present less of a concern than desktop/laptop browsers, because they’re more frequently updated and almost all of them are built upon the same HTML5-friendly technology.

What else?
I hope this post answered some of your existing questions and I look forward to hearing any others you have!

Update: ZebraZapps added to the "tools to watch for" list.

Judy Unrein designs learning solutions at Artisan E-Learning, blogs at E-Learning Uncovered and onehundredfortywords, and tweets at @jkunrein.


jeux de fille said...
This comment has been removed by a blog administrator.
Joseph Suarez said...
This comment has been removed by the author.
Joseph Suarez said...


You did a great job cutting through the HTML5 hype without getting overly technical. We need more of this kind of rational discussion, and less misleading marketing from tool vendors and “Flash vs. HTML5” hype from news analysts.

Anonymous said...

Thank you for this. You did a great job of breaking down the common questions that myself and other instructional designers have about the implications of HTML5 on our content development.

Tracy Parish said...

Thanks for this article. I love all the links/examples you included through out. Fantastic.

Unknown said...

Joseph, karlametz, and Tracy,

Thank you so much for your kind words!

jeux de fille said...
This comment has been removed by a blog administrator.
kcwood said...

To the unenlightened on HTML5 and one who keeps asking "what's it all about", your article is a welcomed bit of information. Kudos for a great article!

Steve said...

Great article, Judy. The lack of tools is a big one and you've addressed that point well. One of the things you've left out in drawbacks is huge for most organizations. Many folks may not realize that all of this new HTML5 stack technology simply won't work well on older browsers. For the many folks out there still bogged in IE6 and IE7, HTML5 is a non-starter. HTML4 and JS is actually very capable for most of the things you'd need to do for eLearning (save very complex elements) will work more consistently on more platforms.

Are you aware of any studies of how many folks actually use their iPads for formal learning activities at their organizations. I'd love to see a study on how many folks ACTUALLY use their iDevice, not how many say they would like to. It seems like the tail is wagging the dog a bit. "...hold up their iPads...Good answer" I haven't seen evidence that makes me believe it's the best reason to tailor around a platform (less than 5% of measured browser agents) when other platforms (IE6/7/8 exceed a MUCH higher number of user agents) can't play this content. In my experience, the hype of the portable device for learning far exceeds the actual use. Anyway, would love to see a study prove me wrong:)

Unknown said...

Thanks, Kay and Steve!

Steve, I just saw your comment and laughed... because I used the exact phrase "tail wagging the dog" in the post I just put up today, in which I try to answer more questions on side of how this affects strategy. That was the context of the "audience holding up their iPads" scenario at DevLearn... me asking the question of how in the world we got to the point where delivery plays such a major role in what we do. I think this situation is temporary, though; we're only focusing on it so much right now because it's a pain point.

As far as how many companies are delivering content on tablets, I only have my own experience with clients to draw from, and I do see a good number of companies that have that on their radar right now. One factor that may be influencing that is a growing trend among companies to support their employees' choices in technology. Another factor that comes into play for some companies is that their courses are sold via retail channels and their target audience has tablets. But does everyone need to make a crazy push toward HTML5 delivery right no? No. More on that in today's post here.

You make some great points about browser technology and they're ones that I've discussed in more depth elsewhere. One of the reasons that I don't find browser compatibility a huge issue among my clients is just what you've stated -- that a lot of the capabilities of HTML5 that we use for elearning are in fact JavaScript, which has been working great on most browsers for a long time. That's why tools like Lectora get mentioned when I review HTML5 authoring tools; they don't output to HTML5 proper, but they do HTML + JavaScript. The issue most people need to be concerned about is not HTML5 vs HTML 4, but the HTML5 stack vs. content that resides in plug-ins.

Thank you so much for continuing the conversation! Great points.

mailorder brides said...
This comment has been removed by a blog administrator.
HTML5 Apps said...

I really agree with your blog.We need more of this kind of rational discussion, and less misleading marketing from tool vendors and “Flash vs. HTML5” hype from news analysts.Thanks!!

JB said...

I really agree with your blog.We need more of this kind of rational discussion, and less misleading marketing from tool vendors and “Flash vs. HTML5” hype from news analysts.Thanks!!

Unknown said...

I don't really comment on these sort of blogs.

I usually read them, take what I think is useful, what tool may suit me, and try to be creative about it in order to fit my needs.

Many times things are oriented towards others things that I'm interested in.

But may I say, I found the approach of this article uniquely outstanding. Speaks to me plain, simple, expressing ideas without the need of "marketing induced words" which do not mean nothing unless you unwrap them.

So, for that: Congratulations.

Unknown said...

HTML5 design provides such growth that allows better development of film and songs. It is also going to allow better system among the websites