How to overcome the top 5 HTML5 elearning challenges

Before the emergence of HTML5 elearning authoring tools, I regularly found myself in situations where I poured my heart and soul into amazing content (if I do say so myself!) using legacy authoring tools – only to find that it didn’t work at all on the client CEO’s iPad or personal tablet. (Quick refresher – HTML5 is a programming language that allows you to author elearning that will work on web and mobile.)

Thankfully, with the latest authoring tools, this is becoming less and less an issue.

Whether it’s flexible, hassle-free user experiences, greater consistency among web browsers, or easy-access mobile resources, there are many reasons HTML5 is the future of elearning.

Nevertheless, we’ve found from experience that it does have its share of pitfalls.

To help you avoid them when you’re creating HTML5 elearning, we’re going to work through some of the most crucial considerations, potential snags, and most important, their solutions.

Challenge #1: Media format issues

Back in the days of Flash, we could get away with using only a couple of media formats.

Current tech is plug-in free, which allows greater mobile learning experiences, but can cause issues with media formats, as different browsers use different formats.

According to Adobe: “Now, since you can embed audio and video directly in the HTML5 code, you can run content on mobile devices, such as tablets and mobile phones, without relying on third-party plug-ins or applications. This is a critical hurdle cleared, since many people want to view e-learning content on a mobile device rather than on a desktop system.”

This means it is wise to use a couple of formats to accommodate different browsers and crucially different internet connections. A few extra minutes setting up formats for different browsers has paid dividends for me and prevented potential frustration from learners.

An easier way to avoid format issues when creating your elearning courses is to use a tool with a built in HTML player (such as Elucidat, which uses MediaElement.js); it works with all the main browsers (most old browsers too) and requires only a single upload.

Key takeaway: Invest in tools that take care of encoding for you and that use a video player that is compatible with multiple browsers.

Challenge #2: Browser compatibility

HTML performance depends upon your browser’s compatibility. In the old days, you’d install a clunky Flash plug-in, which would allow interactions to work in most browsers (with a little patience and persuasion).

Now all you need is an HTML5-ready browser, which is super simple – go for Chrome, IE 10-11, or Firefox. Having a great browser and using cloud-based authoring tools – such as Elucidat – will stop you from clogging up your computer with software.

Many organizations insist on older (non-HTML5) browsers for safety and compliance when creating desktop-centric courses. This makes it vital to create fallbacks that automatically convert your HTML5 work for older browsers. MediaElement.js and Modernizr enable you to move forward with confidence.

This handy/visually dazzling interactive diagram shows you how browsers have transformed during the past 6 years.

Key takeaway: Browser compatibility for new and legacy browsers has vastly improved and continues to improve – just remember to offer alternatives for older browsers.

Challenge #3: HTML5 code is viewable

With HTML5, the user’s computer renders the files. This means you can view JavaScript, CSS, and HTML. This is great if you’re learning to code and want to see how the big boys work, but not so great when it comes to protecting your intellectual property.

To combat code copying, some developers “minify” their work, which involves removing all unnecessary characters from the source code without changing its functionality, making it difficult for content to be copied easily.

This is quite time consuming and possibly a little heavy handed. I’ve found that a better practice is to use both authoring software and learning management systems, which allow you to control who can view your projects and protect your content.

Key takeaway: Take steps to protect your work and invest in tools that allow you to restrict access to materials.

Challenge #4: HTML5 standards

As an emergent technology, HTML5 standards are subject to change.

Keeping up with browser updates and specification changes is a real pain though – and keeps you away from making great content. You should leverage a tool that can update to the latest technologies automatically, as Elucidat does.

Key takeaway: HTML5 standards may continue to change – choose an authoring tool that will future-proof your work.

Challenge #5: Capability for animation

For many of us, animations are vital to creating engagement in elearning. HTML5 doesn’t use the same Flash-based technology, and this can cause some issues when viewing animations on older browsers.

In the past, there weren’t many options for creating HTML5 animations, but now there are some awesome new animation tools available and in development.

Good HTML5-based apps (such as Elucidat) have animation options built in.

Key takeaway: There are a lot of easy ways to create new content and to convert your existing content to HTML5.

Final thoughts

At Elucidat, we’re passionate about helping people create better, more future-proof HTML5 elearning. We’d love to introduce you to a world of greater elearning flexibility; contact us today.