By Asha Pandey
Mobile Learning

Migrate To HTML5 - Responsive Or Mobile-Friendly eLearning To Create High Impact Learning Experiences

Migrate To HTML5 - Responsive Or Mobile-Friendly eLearning To Create High Impact Learning Experiences

Migrate To HTML5 - Responsive Or Mobile-Friendly eLearning To Create High Impact Learning Experiences

Migrate To HTML5: How To Create High Impact Learning Experiences

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

Today,

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

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

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

How Can You Optimally Design For Mobile Devices?

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

Approach 1: Mobile-Friendly Designs

These reflect the more commonly available design approach (Adaptive learning) adopted to design mLearning courses. The designs feature multi-device support. However, they still map to the way learners use the laptops/desktops. This approach does extend seamlessly to tablets. However, 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 with the way we use our mobile devices.

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

Approach 2: Responsive Or Mobile-First Designs

In contrast, the responsive or mobile-first designs are optimized to run on the smartphones. This 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 2 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 multi-device layout—based 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, 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 2 approaches.

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

However, as you will notice, the design shrinks in the portrait 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 2: In 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 devices. This 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 3 ways:

Approach 1: Use Techniques That Engage And Motivate Learners Better

  1. Gamification
  2. Microlearning: For both formal and informal learning

Approach 2: Use 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 3: Go 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)

Summary

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 apandey@eidesign.net.

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.

Read More:

Read Also

Exit mobile version