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

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.

(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.

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!)

August 27, 2013

Join or login to save this to your library

Contributor

Joe Ganci

President, eLearning Joe

Share

Category

Learning Solutions

Topics

Design & Development Tools, Elearning Development Strategies, Emerging Technologies