Your Source for Learning
Technology, Strategy, and News
ARTICLES       RSS feed RSS feed

Share:

email print

Toolkit: Tools for Delivering eLearning with HTML5 (Part 1)

by Joe Ganci

August 27, 2013

Review

by Joe Ganci

August 27, 2013

“Some vendors claim to deliver to HTML5 when in reality they deliver to HTML4, as they have all along. While HTML4 will also work on most mobile devices, tools that publish to HTML and not to Flash do not generally allow for learning experiences as rich as those that publish to Flash. No tool at this time takes advantage of most of the features that are unique to HTML5. The following are your best bets for creating eLearning that publishes to HTML5.”

If you work in eLearning, and even if you don’t, you’ll likely have heard how everything is changing when it comes to delivering eLearning. For years, we relied on the Flash plugin to deliver our lessons online. However, since the advent of mobile devices, and most especially Apple’s iPhones, iPods, and iPads, Flash has become less acceptable, and many eLearning producers have been looking for an alternative. That alternative has presented itself in the evolution of HTML from version 4 to version 5.

HTML5 is not a total replacement for Flash nor is it without its own set of issues. Thought of primarily as a means of delivering rich media and interactive experiences to mobile devices, desktop browsers are catching up, some slowly, others more quickly, to be able to support HTML5.

This story has two parts. This month, I’ll discuss the brass tacks of HTML5 and introduce the eLearning development tools that allow for delivery to HTML5. Next month, I’ll focus more on ancillary tools and sites that we use in the business of creating HTML5-based eLearning, besides the main ones we know and love.

Delivering to the desktop

Many organizations do not update their web browsers on a speedy basis, and therein lies an issue. To see HTML5-based websites, including those in which you deliver eLearning, you will want to use recent versions of browsers. One way to tell if your browser is ready is to go to www.html5test.com.

This site will give you a score between 0 and 500, the higher, the better. No browser currently scores 500 on the site, and, in fact, even if your browser reports a score of less than 400, you may still be OK. The only way to know for sure is to test your eLearning thoroughly in your browser. However, here are some browser scores you will find interesting. If you don’t see yours listed, just go to the site above. The most problematic browsers are older versions of Microsoft Internet Explorer.

Table 1 Browser Score from HTML5test.com
Browser and OS Points
Windows, Microsoft Internet Explorer V6: 26 points
Windows, Microsoft Internet Explorer V7: 27 points
Windows, Microsoft Internet Explorer V8: 42 points
Windows, Microsoft Internet Explorer V9: 138 + 5 bonus points
Windows, Microsoft Internet Explorer V10: 320 + 6 bonus points
Windows, Google Chrome 28: 463 + 13 bonus points
Windows, Mozilla Firefox 23: 410 + 14 bonus points
Windows, Apple Safari 6: 378 + 8 bonus points
Mac OS 10.6.8, Google Chrome 27: 463 + 13 bonus points
Mac OS 10.6.8, Safari 5.1.9: 320 + 6 bonus points
Windows, Microsoft Internet Explorer V10: 319 + 9 bonus points
Mac OS 10.6.8, Mozilla Firefox 8: 337 + 9 bonus points

(Editor’s Note concerning bonus points: According to www.html5test.com, “The test also awards bonus points for supporting audio and video codecs and supporting SVG or MathML embedding in a plain HTML document. These tests do not count towards the total score because HTML5 does not specify any required audio or video codec. Also SVG and MathML are not required by HTML5; the specification only specifies rules for how such content should be embedded inside a plain HTML file.”)

Delivering to mobile devices

Delivering to mobile devices (tablets and phones) gives scores comparable to those of desktops if you stay up to date on browsers. However, mobile devices use mobile operating systems and they are unique in other ways.

Limitations

For one thing, you don’t use a mouse on a mobile device. You tend to use your finger, which is quite fat when compared to a mouse cursor, and because of that, you don’t have a hover or rollover option as you do with a mouse cursor. With a mouse, you can move the cursor to a location on the screen and hover there, allowing for rollover states or pop-ups, and then you can click to activate a different function. On mobile devices, in essence you just click; you can’t hover.

Advantages

On the other hand, mobile devices have cool ways of interacting that desktop and laptop computers do not. Most new mobile devices have an accelerometer, allowing you to control the on-screen environment by simply shifting the device in your hand. You can also use two fingers to zoom in and out. Some laptops have touch screens that allow this as well.

However, note that current eLearning development applications do not take advantage of accelerometers and pinch-and-zoom features. Instead, they attempt to give as nearly similar experiences across desktop and mobile environments as possible.

Table 1 Mobile Browser Score from HTML5test.com
Apple iPad 2, Built-in: 386 + 9 bonus points
Android Samsung Galaxy IV, Built-in: 468 + 11 bonus points
Android Samsung Galaxy IV, Chrome: 410 + 11 bonus points

Tools you can use to deliver HTML5-based eLearning

Tool vendors have been busy updating eLearning development tools to allow you to publish to HTML5. Some vendors claim to deliver to HTML5 when in reality they deliver to HTML4, as they have all along. While HTML4 will also work on most mobile devices, tools that publish to HTML and not to Flash generally do not allow for learning experiences as rich as those that publish to Flash. No tool at this time takes advantage of most of the features that are unique to HTML5, as noted.

The following are your best bets for creating eLearning that publishes to HTML5.

  1. Adobe Captivate 7

    Gives you a choice to publish to Flash or to HTML5 or to both. If you choose to publish to both, Captivate also includes another file, called multiscreen.html, which will check the learner’s device. If the device supports Flash, it will deliver the Flash version. If not, it will deliver the HTML5 version. Captivate also includes a feature called HTML5 Tracker so that you can see if any elements in your eLearning are incompatible with HTML5.

  2. Articulate Storyline 1, Update 3

    It will always publish to Flash, but also lets you publish to HTML5. In addition, Articulate provides a mobile player for iPad that learners can download for free and that will allow the published Flash file to run on the iPad. On the iPad, learners can also choose to download the entire lesson for offline viewing.

  3. iSpring Suite

    A PowerPoint add-in tool, iSpring Suite delivers to both HTML5 and to Flash.

  4. SmartBuilder

    Always publishes to Flash, but provides an application to convert to HTML5. See http://help.smartbuilder.com/node/589 for those features that are supported and those that are not.

  5. dominKnow Claro

    A cloud-based tool released about a year ago, Claro supports HTML5 publishing.

  6. Composica Enterprise 6

    The newest version of Composica takes advantage of HTML5 standards where possible.

  7. Lectora Inspire 11.1

    Lectora Inspire has always produced HTML output, and was the first authoring tool that allowed media to run via HTML5 on mobile devices. It does not differentiate between “HTML5 publishing” and “HTML publishing,” because the published code automatically detects if Flash or HTML5 media support is present and dynamically chooses the appropriate method at run time. There is no need to publish twice as it adjusts itself automatically.

  8. ReadyGo

    Has always published to HTML4 and so can run on most mobile device and desktop browsers.

In my research, I’ve discovered a new tool that I have not yet had a chance to test. If you know about this tool, feel free to share in the Comments section below.

Landmark Liquid authoring. Browser-based, purports to output to HTML5. http://landmarkelearning.com/liquid-authoring/

Next month I’ll look at eLearning development templates and other useful applications that assist in delivering to HTML5. I'll also attempt to give you my thoughts on Liquid Authoring.

Do you know of a development tool that does a great job of delivering to HMTL5 that I didn’t include? Please use the comments section below to tell us all about it.

(Editor’s Note: Joe has written a new eLearning Guild Research Report, Authoring Tools 2013: What We’re Using, What We Want, which will be released in early October. He is also preparing an article for publication in Learning Solutions Magazine later in October that will compare the top tools from this report. Watch for all this great and extremely useful information coming your way!)


Topics Covered

(84)
Appreciate this!
Comments

Login or subscribe to comment

Another great tool is EADBuilder (http://www.eadbuilder.com/). It make very easy to create HTML5 eLearning content.

Although the site is still in portuguese, the app is translated to english (http://app.eadbuilder.com/)
Hi Joe: Great article, as always. One tool that doesn't seem to be on anyone's radar screen is Brainshark. Probably because their primary audience is the Sales Department - but they have some eLearning functionality and they definitely do mLearning:

http://bit.ly/ZFVaLs
Thanks to you both!
Thanks for this joe.

Surprised to not see Zenler on the list. It is widely used in my organisation and works beautifully on mobiles - iPads and iPhones
Ah, my favorite topic!

In www.sweetrush.com we spend a lot of time researching new tools and advancing our own technology, and I would be more than happy to contribute to the discussions on the long run.

Thank you author for the list of tools, some of the tools I know well and others are new to me, which is great - excuse to try new toys.

In addition I would love to see a comprehensive comparison of the tool s capabilities, specifically pertaining to html5 distribution - that would certainly be an interesting and educational read.

Thank you again!
Another content/course creation tool to consider is DE-Scribe, which can be found here: http://goo.gl/IDqZv

DE-Scribe is a tool for creating simple courses (with quiz capabilities), digital books, and simple presentations - all with a mobile-first approach. Content is deployed using the jQuery Mobile framework and can work online or offline, even with audio and video content embedded into the courses.
My apologies for the incorrect link to DE-Scribe (my previous comment). Here is the correct link: http://maflt.org/describe
We've been using VCASMO which produces HTML5 output. It's web-based and you need a Flash enabled computer to do the development. The cloud is priced by the month and amount of storage that you're using but when you upload, they compress about 10:1. Very easy to use.
Zenler! I wasn't aware that it was now HTML5-ready. Thank you.

Thank you also for letting me know about DE-Scribe and VCASMO. I love the feedback!
I'm from Landmark eLearning, the developers of Liquid Authoring. I would LOVE to give you a demo of Liquid Authoring sometime. dgarber@landmarkelearning.com
Related Articles