March 19, 2018
Migrate To HTML5 – Responsive Or Mobile-Friendly eLearning To Create High Impact Learning Experiences
March 19, 2018
Migrate To HTML5 – Responsive Or Mobile-Friendly eLearning To Create High Impact Learning Experiences
EI is an emotionally intelligent learning experience design company that partners with customers in their Digital Transformation journey.
Legend 317 posts
Followers: 181 people

Organizations worldwide are looking at migrating their legacy Flash course to HTML5 to support mobile learning. In this article, I outline what are your options and how you can maximize the impact of your migration budget.

Till a few years ago, Flash was pretty much the default authoring tool to offer online coursesAs a result, organizations across the world have a significant investment in legacy courses based on Flash.


  • Most browsers do not support Flash.
  • Also, modern learners prefer the delivery of online training to support their mobile devices.

Since Flash does not support mobile devices, there is a need for you to plan the migration of your select legacy courses to HTML5.

Why An Investment On Migration Of Legacy Courses To HTML5 Is An Absolute Necessity?

This investment on migration of legacy courses to HTML5 is necessary to unlock your existing investment. Further gains associated with this exercise are:

  • Online courses designed in HTML5 provide a multidevice experience wherein the learners can take the same course on the device of their choice ranging from smartphones to tablets as well as laptops or desktops.
  • These online courses can be taken on the go, at the pace the learners wish to consume.
  • The studies clearly show adoption of mobile learning or mLearning will be the new standard in online training.
  • Furthermore, the learners are leaning away from adaptive design to fullyresponsive design (that fits dynamically to a viewable area).

How Can You Optimally Design For Mobile Devices?

As you plan for the migration of legacy courses to mobile learning or you embark on creation of Responsive or Mobile-friendly eLearning, you can choose from two approaches:

Approach 1Mobilefriendly designs

These reflect the more commonly available design approach (Adaptive learning) adopted to design mLearning coursesThe designs feature multidevice supportHowever, they still map to the way learners use the laptops/desktopsThis approach does extend seamlessly to tabletsHowever, in smartphones, this approach works only in the landscape mode. When viewed in the portrait mode, you will see a blank space as the design shrinks to a viewable area.

Although, the online courses work across all devices, it is important to note that the learner interactions in this approach are not necessarily aligned to the way we use our mobile devices.

Tip: One of the most popular authoring tool Articulate Storyline 3/360 creates an output in this categoryOther two popular authoring tools are dominKnow Claro and iSpring.

Approach 2Responsive or Mobilefirst designs

In contrast, the Responsive or Mobilefirst designs are optimized to run on the smartphonesThis is then extended to tablets and laptops or desktops.

This approach not only features a completely responsive design approach (wherein the content adapts dynamically to a viewable area); its significant difference lies in the interactions that mimic the way we use our mobile devices.

Tip: There are two streams of authoring tools that you can use to create a Responsive or Mobile-friendly eLearning output in this category.

  1. Tier 1 (They use multidevice layoutbased approach to design): Adobe Captivate 2017, Trivantis Lectora Inspire 17
  2. Tier 2 (They use rapid development approach based on the usage of their standard templates):Adapt Learning, Articulate Rise, CrossKnowledge Mohive, dominKnow Flow, Elucidat and Gomo and so on.

NOTE: You can also opt for Custom HTML5 frameworks that too offer true Responsive or Mobile-friendly eLearning designs.

Let me share a couple of examples to highlight the differences between the two approaches.

Example 1Features a mobile-friendly design that would runseamlessly across smartphones, tablets, laptops and desktops.

However, as you will notice, the design shrinks in the portait mode of the smartphone.

Furthermore, the learning interactions are not necessarily optimized for mobile devices. Instead, they are designed to provide a multi-device support.

Example 2In contrast, this example showcases optimization for the smartphones while retaining the support for other devices (including tablets, laptops and desktops).

Additionally, the interactions map closely to the way we use smartphones.

How Can You Leverage On The Migration Opportunity To Create Better And Higher Impact Learning Experiences?

The exercise of migration from Flash to HTML5 must not be about technology uplift alone (that is, converting Flash courses to merely open as HTML5 courses).

Instead, you can use this opportunity to redesign your courses that leverage the ways learners use their mobile devicesThis approach will create a more engaging learning experience and create the desired impact (sticky learning) that you seek.

What Are The Techniques That You Can Use To Multiply The Impact?

You can use this opportunity in the following three ways:

Approach 1Use techniques that engage and motivate learners better

  1. Gamification
  2. MicrolearningFor both formal and informal learning

Approach 2Use formats that are different from the more traditional ones

  1. Interactive videos (instead of videos)
  2. Animated videos (instead of long reams of text)
  3. Interactive infographics (instead of text or predictable interactions)

Approach 3Go beyond formal training and engage the learner in a learning journey

  1. Learning Paths (featuring Personalization)
  2. Performance Support Tools
  3. Learning Portals that feature Social Learning and Participative learning (Curation)


The need to migrate your legacy Flash courses to HTML5 provides a great opportunity window to create Responsive or Mobile-friendly eLearning designs that will resonate better with your learners.

I hope this article provides the required cues on the techniques you can use during migration to HTML5 to create higher engagement, better completion rates and a more sticky learning experience. If you need any specific support or have any queries, do contact me at

Need More?

Want more insights on how you can use to enhance the impact of your mobile learning for your corporate training?

Schedule a call with our Solutions Architecting Team.


1 Comment
2018-03-20 09:00:03
2018-03-20 09:00:03

Please, do not confuse Flash (the tool which is still used worldwide to create games, although not it has been renamed Animate CC) with the Flash PLAYER. EOL and loss of support in browsers for the Flash player is a trutt. Too many people do confuse both. THe big majority of all games we are playing is still developed with the ‘old’ Flash developer tool. A change in name for the app, and the extension of the features which also allows now publishing to HTML (canvas) doesn’t change that.

Add Comment