How To Convert Legacy Courses Into HTML5 The Right Way

Convert Legacy Courses Into HTML5 

In my earlier article 8 Tips To Convert Flash to HTML5 That Will Help Your Business, I had highlighted the challenge (associated with legacy courses) and the solution (how HTML5 addresses the challenge). Let’s begin with this recap:

• 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.

In the same article, I have outlined what you should watch out for during the migration of legacy courses to HTML5. Additionally, I have shared 8 tips that will help you create an efficient transition to HTML5.

In this article, I will share two case studies that reflect dynamics that will resonate with most organizations and will provide the pointers on what approaches will help you design an efficient and effective migration strategy and convert legacy courses into HTML5 the right way.

Convert Legacy Courses Into HTML5: Case Study 1 

• Background.
  For one of our customers, the existing Flash courses met the learning mandate (that is, no further changes to content and visual presentation were necessary). So, the look and feel of the existing courses had to be retained in the HTML5 version.
  The objective of migration was to provide extended access to learners by making these courses accessible on tablets. We had to convert 80 hours of eLearning to mLearning or mobile learning (adaptive approach that includes tablet support) in 4 months. The courses needed to be tested on varied target devices, so that the migrated courses would be compatible with Windows XP and 7, iPad (varied iOS versions), and Android 10” and 7” tablets.
• Our Approach.
  Considering the volume, timeline, and complexity of testing with varied devices, we started by firming up the process that would help us in meeting the mandate.
  • We created a team dedicated for this task. The team comprised Solution Architects, Visual Designers, Programmers, and Quality Assurance personnel.
  • The Solution Architects created the adaptive framework using Adobe CS6 with CreateJS, which could support multiple devices and create templates for easy reproduction of screens by the development team.
  • A prototype was prepared and tested across devices in the first three weeks and delivered to the client for review and sign-off. The prototype was signed off in a week’s time.
  • During the development stage, multiple, smaller teams were set up to manage 15-20 courses each.
  • We followed the factory floor approach to bring in efficiency at work. We did group activities within the team members so that the outcome from each team was ready for testing and shipment to the client. This approach helped us to move along the development cycle within the specified time and we completed the project by the scheduled date.
• The Results. 
  • We met the delivery timeline for the project. As a result, our customer could launch the courses on time.
  • Our customer was the first to release mobile courses supporting multiple devices in this domain. It helped them to further strengthen their position as market leaders.
  • Their mobile courses are taken by more professionals now. As a result, they are meeting the project goals very effectively.

Convert Legacy Courses Into HTML5: Case Study 2 

• Background.
  This customer wanted to redevelop legacy Flash compliance courses (a total of 26 hours of eLearning) to their globally spread out workforce with extended support for tablets. The existing Flash courses had been designed over several years and many of them looked dated.
  The need was to completely redesign all courses with a modern look and feel, bring in a consistent look and feel to all courses (as the legacy Flash courses had been designed over the years with varied design approaches), provide HTML5 support, and test it for tablets. The entire exercise had to be completed within 6 months.
• Our Approach. 
  • Here too a dedicated team was set up comprising Solution Architects, Instructional Designers, Visual Designers, Programmers, and Quality Assurance personnel.
  • The Instructional Design team began with the analysis of the existing legacy courses and tagged them into what level of enhancement was necessary. This mapped to complete overhaul or partial enhancements (that is, some aspects of the existing courses could be reused).
  • The Solution Architects created an adaptive framework using Lectora and the required templates library that could address both requirements identified by the Instructional Designers.
  • The Visual Design (Product Strategy) team then created multiple design packs for development that could be mapped to each course. This was then used to create key prototypes.
  • On sign off of multiple prototypes, the development process began.
  • Multiple, smaller teams were set up to handle a series of courses.
  • The testing process was less tedious on account of tool selection (Lectora).
• The Results. 
  • We managed the project effectively to create an effective suite of compliance courses with a new look and feel plus the extended access on tablets.
  • The project was completed on time and provided a significantly superior learning experience to the learners.

Summary 

Both these case studies reflect using some of the tips I had outlined in my earlier article 8 Tips To Convert Flash to HTML5 That Will Help Your Business.

Specifically, we used the following aspects that helped us convert legacy courses into HTML5 the right way:

• Identify the need: Technology update vs. complete redesign.
• Select adaptive vs. responsive designs and tools.
• Plan for sampling to test user experience.
• Ensure readiness of supporting aspects.

I hope this article provides the pointers that will help you to convert your legacy courses into HTML5 the right way. At EI Design, we have a very strong mLearning or mobile learning practice and we have migrated or developed over 400 hours of HTML5 learning. If you have any specific queries, do contact me.