Author Profile Picture

Saffron Interactive

Saffron Interactive

The Team

Read more from Saffron Interactive

googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1705321608055-0’); });

Does the glove fit? How to make the most of HTML5 in e-learning


By Vishwa Mathapati

The HTML5 mark-up language has now been around for about three years. It’s not yet fully recommended by the World Wide Web Consortium (W3C) but, as of last December, it’s well on the way. Some of us have already embraced the change, thrown out Flash and welcomed HTML5 into our e-learning content. But what does HTML5 actually deliver above and beyond Flash? Is it right for you?

This post takes a look at some examples from a recent Saffron course to offer some guidance.

Firstly, a warning: HTML5 may not be right for you. In plenty of corporate contexts the standard browser is still Internet Explorer 8 or lower, and HTML5 in these environments can either be more trouble than it’s worth - often requiring a Flash back-up for video content, for example - or simply impossible. And whilst we know that Flash won’t be supported forever, the rumours of its demise are very much exaggerated. Consumer tech is usually several steps ahead of corporate and public sector infrastructure. Look at how long the dreaded Internet Explorer 6 has stuck around!

It’s also worth questioning the reasoning behind any potentially disruptive change before diving in. For example, whilst HTML5 is a must-have for smartphones and tablet compatibility, an informal survey on Training Zone recently found that 80% of corporates still aren’t using mobile learning. 

So what should drive adoption (aside from wanting to sit with the cool kids)? Chris Milk is a filmmaker and storyteller, using HTML not just for its technological functions but as a creative and collaborative tool. In a recent interview, Milk spoke about the possibilities of using HTML5 to make films, but cautioned that the creative heart of a project should be established first. 

“……the project had to tell a story or have an emotional core. It has to start with the human, emotional place, because if you start with the tech, you're basically building a tech demo.” 

A new course produced by Saffron for Amnesty International - Human Rights for Mental Health Professionals - is a great example of how we use the improvements created by HTML5 to better establish this ‘emotional core’ in e-learning. The development of the Amnesty course, which aimed to challenge deeply held practices, was led not by the technical build, but by the creative solution used to explore the issue. Really, it’s about using new technology to win emotional engagement with difficult content.  And, in this case, HTML5 had benefits at all stages.

HTML5 helps to get learning moving

Throughout the course we use video and animation as a storytelling device. We chose to merge line-drawing animation with real video case studies to create a compelling and relevant content experience. HTML5 supports embedded multimedia without using a proprietary external plug in like Flash. It also supports scalable vector graphics, which means that all the content on the screen can scroll, adapt and respond to the learner. Using these properties brings out the human face of HTML5.

HTML5 is (usually) better at getting learning out there

The course is going out to an extremely wide population of mental health practitioners, all over the Republic of Ireland. That means they’ll be tapping into it from a variety of consumer tablets and desktops. Whilst it’s true that HTML5 is not supported by some browsers still in organisational use, browsers that officially support full HTML5 features now include, IE9+, Firefox 3.5+, Safari 4+, Silk 4+, Opera 10.50 and Chrome 4+.  If that profile fits, then HTML5 removes the necessity to produce a different version, or an expensive set of apps, for different browsers or devices. That made it ideal for winning over this audience.

There’s other cool features too: unlike Flash, HTML translates easily into readable text-based output, so screen-readers are better supported. That also means with a little tweaking, learners can simply hit print to save course screens as a PDF. Which leads on to our next point…

HTML5 can store far more than before 

A vital part of the Amnesty International course is a ‘take-away’: a personalised action plan that is created as learners move through, the content is saved and edited within the course, and then printed. Allowing learners to take ownership of action plans in this way is a key emotional motivator.

HTML5 makes this possible with an enhancement of web storage that surpasses anything made possible by cookies. Whereas cookies store just 4KB of data, HTML5 web storage captures at least 5MB per URL, and more for other browsers. All this data can be stored without affecting the website’s server performance. It gives us far more scope to start transforming e-learning courses into editable toolkits, unique to the learner and available both offline and online. And that’s the music of the future.

If you want to see the full capabilities of this HTML5 course in action, why not register for our webinar with the Learning and Performance Institute on 23 October?  

Author Profile Picture
Saffron Interactive

The Team

Read more from Saffron Interactive

Get the latest from TrainingZone.

Elevate your L&D expertise by subscribing to TrainingZone’s newsletter! Get curated insights, premium reports, and event updates from industry leaders.


Thank you!