eLearning

Adaptive and Responsive Design for eLearning: Part 2

Following the first instalment of the Adaptive and Responsive Design for eLearning series, we will now focus on how the technological changes we’re undergoing can influence the eLearning designers.
A few years ago, when rapid eLearning development tools were in their infancy, the job of eLearning designers was fairly straightforward, and had very little to do with web standards. Courses were prepared using software products that were almost all based, to a greater or lesser degree on the Microsoft PowerPoint model of slides, templates and bullet points.

All that designers had to do was to provide a nice looking screen layout and graphics, add a few animations and activities and publish the course, which really meant exporting the lot to Flash. This would then be uploaded to and delivered by an LMS and it was out of their hands.

Not any more. Driven in part by Apple’s decision in 2010 not to allow SWF files to run on the iPad, there has been an accelerating move away from Flash and towards the new emerging HTML 5 standards which allow most (but not all) of the same effects to be delivered without the downsides of dubious security, buggy code and outdated plugins.

The main advantage of HTML5 is that it is built around WebApps, or small pieces of code that run within a browser, rather like little pieces of software, or mobile phone apps. Unlike Flash, HTML5 does not need any kind of separate plug-in for recent browsers to be able to interpret the code – and it runs seamlessly on most recent smartphones and tablets.

So what do eLearning designers need to be aware of? The first and most important thing of course is to publish courses to HTML5 rather than Flash wherever possible. Not on every occasion – there are still some areas where Flash has the advantage, and provided that few students will be trying to access your courses on iOS (Apple) devices, it may still be appropriate where complex animations or special audio and video effects are involved.

Some custom built assessment types may not run on HTML5 and if they’re vital, it may be necessary to stick with Flash there too. But for most other courses, and particularly when planning new content, it’s probably important to think exclusively in terms of HTML5 content, and give some consideration to what your course will look like on mobile devices.

There’s a good summary of a range of eLearning authoring tools and the extent to which they support HTML5 on the eLearning Industry website. Recent versions of most popular desktop tools such as Adobe Captivate, Articulate Storyline, Lectora and Camtasia offer the choice of publishing content to Flash or HTML5, or in some cases are able to detect automatically which option to use.

There is also a new generation of online cloud based authoring tools such as Gomo or Dictera which not only publish automatically to HTML5, but are also beginning to break out of the straitjacket of the PowerPoint slide-based model and move towards flexible usage of screen space, more akin to an interactive web page.

Tools like Gomo also have the advantage of offering a more responsive rather than merely an adaptive approach – but at the expense of some cosmetic elements. Unlike web designers, eLearning designers don’t have complete control over the screen appearance of their products, as they’re usually mediated through SCORM or xAPI and an LMS.

Responsiveness, as we learned in the first part of this article is largely controlled by the use of percentage variables in CSS, and eLearning designers don’t get access to this in most off the shelf products. Instead, tools like Storyline and Captivate allow the user to set up screen layouts for a variety of different device types, and maybe some flexibility in specifying the breakpoints between different screen sizes, but essentially this is an adaptive approach.

The simple reason is that it’s more important for eLearning authoring tools to offer solid and consistent functionality with as much control as is practical over screen appearance rather than an infinite range of cosmetic effects at the expense of basic functionality. There’s a whole variety of things like buttons, sliders, carousels and other layout devices that simply can’t all be infinitely resized on the hoof. It’s sometimes possible to incorporate more complex workarounds using Javascript, but that may run the risk of breaking something else further down the line.

How are things likely to change in the near future? It’s fairly clear that mobile devices – smartphones and tablets – are becoming increasingly important for the consumption of learning content, although some evidence suggests that users are becoming more selective in how they use different devices.

A recent study by Google, The New Multi-Screen World concludes that we choose the device to use by context – for example, when we need something quickly, which might include a nugget of just in time training, we’ll probably turn to our smartphone. However, many people seemed to think their tablet was mainly for entertainment at home, was not be their first port of call for eLearning.

Similarly, there’s a lot of evidence to suggest that in large companies, a desktop computer is still the only device on which people can undertake mandatory eLearning. While Bring Your Own Device (BYOD) policies are becoming increasingly popular in tech-savvy companies and educational institutions, there’s probably a while to go before they will be accepted in more risk-averse institutions like banks and large multinationals.

The bottom line is that while eLearning designers need to be aware of the possibilities of responsive and adaptive design, many of us are likely to be producing content exclusively for desktops for a few years yet.


Improve your employee, partner and customer training with our enterprise-ready learning management system. Book a demo now and see why our diverse portfolio of customers consistently give us 5 stars (out of 5!)

Book a demo