Particularly over the last 4+ years, most organizations have evaluated mobile learning solutions integrating tablets and smartphones into their learning delivery. Mobile learning solutions are based on HTML5 technology. While it is fairly straightforward to create new courses using HTML5 that are mobile ready, there are several aspects that you need to watch out for when converting Flash to HMTL5.

How To Convert Flash To HTML5

In this article I will outline the HTML5 technology advantage, its challenges, and share 8 tips that you can use when you plan the migration of your Flash to HTML5 that will help your business.

Background

The challenge
Over the years, all of us would have created courses that predominantly used Flash for development. With increase in demand to offer mobile learning, you would have realized that Flash courses do not work on most mobile devices. As a result, you need to plan to migrate the existing legacy Flash content to HTML5.

The solution
HTML5 supports all mobile devices (tablets and smartphones). Additionally, the more recent browsers support HTML5 enabling you to run the mobile-ready courses on desktops and laptops as well. This flexibility now allows a single build to work seamlessly across all devices starting from desktops/laptops to tablets and smartphones.

Sounds simple? Not quite, do watch out for the following:

Multi-device support
While mobile learning solutions are required to provide enhanced flexibility to learners to “learn on the go”, organizations do need to ensure that the same course is also available on desktops and laptops. In case they use older versions of browsers that do not support HTML5, these courses would not work on desktops and laptops. Taking a call on upgrading the browser versions (that support HTML5) across the organization needs significant budget outlay.

Learning Management System support
Your existing Learning Management System may not support mobile learning. Today, most Learning Management System providers do provide this flexibility although there may be some that do not support this right now. As a result, you have two options:

• Upgrade the Learning Management System to support mobile solutions.
• Move to another Learning Management System that supports mobile solutions.

In either situation, you need to plan for a significant budget outlay as well as a plan to transition your existing courses to the new platform.

Security concerns
Alongside the mobile learning solutions, there has also been a change in learning delivery that supports Bring Your Own Device or BYOD. This provides the flexibility to learners to use their own device (tablet/smartphone) to access the courses. This needs to be done in a secure manner and planned ahead. Organizations need to identify the required security policy ahead of implementing mobile learning solutions. This too has a lead time that you must factor for as well as the associated costs.

How To Convert Flash To HTML5 That Will Help Your business?

As you would have noted, HTML5 has great strengths (ranging from universal support to the flexibility to run the same course irrespective of the device). I have also outlined some of the associated challenges that you should watch out for. With these aspects in the background, let’s see how you can plan the migration or conversion of your Flash courses to HTML5 that will help your business.

1. List all the courses to be migrated.

Identify various courses that should be moved from Flash or legacy formats to HTML5. Additionally, identify the courses for the pilot phase.

2. Validate that all assets and pre-requisites are in place.

Validate that all courses and source files are in place. This will ensure smooth conversion from Flash to HTML5 in a timely manner.

3. Draw up the priority list of courses to be converted from Flash to HTML5.

This is very important and needs to reflect the varied approaches that you would adopt for the conversion. For instance, some courses would need only a technology uplift, some need only visual design uplift whereas some require complete re-design. Looking at the overall volume and the nature of upliftment, draw up the priority list that will enable you to do adequate sampling as well.

4. Identify the need: Technology update vs. complete redesign.

As highlighted above, the nature of value addition sought in a course or a series can vary. You must ascertain how you should plan the migration. Some of the cues could be:

• Recent courses
  These may need technology uplift only (conversion to HTML5 – no Instructional Design and Visual Design enhancements).
• Compliance courses
  The migration cycle can also factor for textual updates as well as visual upliftment.
• Legacy courses
  You can only reuse the content and then completely re-design (both from Instructional Design and Visual Design perspectives).

5. Focus on retention and performance gain.

You must evaluate moving older, longer run length courses to shorter, byte sized mobile learning solutions. You must evaluate a completely different learning design approach that can cater to multi-device support. You should also evaluate approaches to supplement or complement formal learning through innovative Performance Support Tools (PSTs). The PSTs can be delivered very effectively on tablets and smartphones.

6. Select adaptive vs. responsive designs and tools.

You have two options:

• Adaptive.
  These are multi-device custom mobile learning solutions that support PCs, laptops, and tablets.
• Responsive.
  These are multi-device custom mobile learning solutions that support PCs, laptops, tablets, and smartphones.

Authoring tool selection

Related to this is the tool selection. Besides offering adaptive or completely responsive design capability, the tools can be further classified into rapid development (Articulate Studio 13, iSpring, Adapt, and so on) or standard mobile learning authoring tools (Adobe CS6 with CreateJS, Adobe Captivate, Trivantis Lectora, Articulate Storyline, and so on).

7. Plan for sampling to test user experience.

I have noted that this is often missed out in the conversion of Flash courses to HTML5. Like all new initiatives, a checkpointing is crucial. Post the pilot phase, do this sampling to ensure your approach is valid and the required impact would indeed be created.

8. Ensure readiness of supporting aspects.

I have already touched upon these aspects that include the browser support for HTML5, Learning Management System support for mobile learning solutions, and updation to your security policy.

I hope these tips will help you craft an effective approach to convert Flash to HTML5 that will help your business. We also have several case studies and demos on successful projects where we have handled large volume migration and how this approach has brought the required value to the organization.

Over the last 4+ years, we have crafted custom mobile learning solutions of over 400 hours for both formal and informal learning (Performance Support Tools). We have crafted learning strategies that work for both individual learners as well as for collaborative (social) learning.