15 July 2011

HTML 5 for learning interfaces

The global design scene has been nutty for the promise of HTML 5 for a while now, but can we use it for building elearning activities today?  Find out in the recent trial and report published by the Australian Flexible Learning Framework...

The Interactive e-learning using HTML5 trial just released a report that shows how 5 online learning activities, originally created in flash, could be successfully duplicated with HTML5.  Browser compatibility issues and advantages for accessibility are also discussed.

The bullet gist

  • For the activities tested, HTML5 was a viable replacement for Flash. The HTML 5 and Flash versions of activities including drag and drop, audio and video, animation and interaction look and behave the same way.  
  • The above is only true on the Chrome browser.  Uneven browser support for HTML5 is still the main obstacle.  Behaviour varies on other browsers.
  • Flash worked better for animation. The developers found that "The redrawing of bitmaps to create the animation does use a significant amount of CPU capacity demonstrated when multiple instances of the animation were displayed." and that Flash was easier to use to create animations. Of course, its important to note that they were animating programmatically, and that GUI alternatives like Hype or Adobe's experimental Wallaby plug-in were not tested.


  • The first question will always be: what are your users using?  If you can ensure a certain browser set-up for your learners (Chrome with JavaScript enabled), you'll have an easier time of it.  If multiple browsers are in use, its unlikely one solution will meet everyone's needs.  
  • You can also choose to use HTML5 with "fallbacks" in place to cover for other browsers and scenarios, but this does require more resources. 
  •  You can start HTML5 sparingly.  Modern designers frequently implement HTML5 and CSS3 in small ways that are not essential for the functioning of the activity but still add to the experience.
  • You can take a combination approach.  Whether your learners are strictly on desktops, or also on ipads and mobile devices will be a major decision factor for whether you can rely solely on either HTML5 or Flash.  The report concludes that due to the different current pros and cons of both HMTL5 and Flash "there may be situations where both can coexist in e-learning."
  • Check back next year.  HTML5 is in development, browser support is updated regularly, and  Adobe's strategy for dealing with its biggest competitor is driving initiatives like Wallaby, so any claims to best approaches expire about every 6 months.  On the upside, things should get easier every time.

Brush up on HTML5

Want to learn quickly about HTML 5?  Check out the Lynda.com course for video-based upskilling, or for an ipad ready primer on HTML5 that is just the right length and very entertaining (no really), I highly recommend HTML5 for Web Designers by Jeremy Keith.