Converting Flash to HTML5 for Tablets and Smartphones? 7 Design Considerations

Bearing in mind that Flash will cease to exist by the end of 2020, organizations are in a hurry to convert their Flash-based courses to an HTML5 output. HTML5 eLearning courses can be accessed not just on desktops, but also devices such as smartphones and tablets. But developing courses for mobile devices is not the same as developing for desktops mainly due to the screen size, memory size, and higher power consumption. Hence there are certain design considerations you need to keep in mind while developing courses for these devices to deliver effective training. Here are a few of them.

7 Design Considerations for Smartphones and Tablets while Converting Flash to HTML5

1. Ensure images are screen-compatible

When converting your Flash-based courses to HTML5 for a tablet or a smartphone, you need to take the extra care of ensuring the images used in the course do not negatively impact the text layout as the screen size changes.

If you convert your Flash-based courses to HTML5 using Articulate Storyline, you no more have to worry about this. This tool consists of millions of templates in which all you will have to do is replace the image within the template with the image of your choice. Once this is done, all you have to do is publish it for tablets or smartphones. Thus, the text layout of the screen does not get disturbed in any way.

2. Ensure navigation buttons are large in size

The main way people navigate in tablets and smartphones is with their fingers. Keeping this in mind, it is highly essential to design the navigation buttons as large as possible within an eLearning course designed for these devices. The learner should not find it difficult to navigate through the course as this will diminish the overall learning experience.

With Articulate Storyline, one can customize every aspect of how the navigation bar will look within a course. Other than the default navigation, this tool allows to customize navigation as per your requirements. All you need to do is increase the size of the navigation buttons and make these buttons active by adding the necessary triggers.

3. Ensure navigation is simple

Use simple and clear navigations. Ensure you do not put your learners in a situation where they find it difficult and confusing to navigate through the course. Also ensure you keep the navigation bar in the same position across all screens, thus making it easy for them to discover.

As mentioned earlier, since Storyline provides the option to customize your navigation buttons; you can also easily choose the color, size, and the icons. This will make it easier for you to make sure the navigation is easy to discover and simple too in courses converted from Flash to HTML5.

4. Limit to a 600 character per screen limit

One of the things that will disengage learners is having to scroll down the screen way too much. Hence when you convert your Flash-based courses to HTML5, it is significantly essential to limit the scroll to just one screen down, which will amount to nearly 600 characters per screen.

Articulate Storyline has many features within it which will help convert text-heavy content, still retaining information. The Blocks feature of Articulate Rise allows uploading multimedia files very easily. For example, if you have a huge chunk of text explaining a particular procedure, you can easily upload a video explaining the same. This way, the amount of characters in the screen would be limited yet all the information required will be disseminated to your learners.

 5. Make it available offline

The whole point of converting Flash-based courses to HTML5 facilitating the delivery of courses on tablets and smartphones is to provide access to these courses as and when learners need it, unlike Flash-based courses that can be accessed only on desktops. Since most eLearning courses are to be accessed online, the absence of network connectivity in certain areas may hinder the learning process. Hence always make sure to make the courses offline, providing learners the opportunity to download the courses and access them offline too.

The ‘offline viewing feature’ in Articulate Storyline provides learners with an option to download the courses and view them even without Internet connectivity. All one has to do is select the “Allow downloading for offline viewing” option in the publishing options and you are done.

6. Avoid complex animations

Animations are indeed a great strategy to engage learners but it is always better to avoid complex animations as they might not run on all devices. Make sure animations are simple. Also make sure animations are short and each animation just focus on one single message.

7. Ensure course duration is just 5-10 minutes

The last thing your employees want is the courses that will provide performance support being 30-40 minutes long. Courses deployed in tablets and smartphones should be short and crisp so as to facilitate on-the-go learning. The entire course should be divided into multiple microlearning modules, with each module focusing on one single learning objective.

Now that you know the design considerations you have to keep in mind while converting Flash-based courses to HTML5 for smartphones and tablets, you also need to know about the various situations you have to deliver training specifically in tablets and sometimes specifically in smartphones.

You Can Deliver Trainings in TABLETS When

1. Flash courses are text-heavy

While converting Flash to HTML5, if you notice that Flash courses are text-heavy, you should opt to redesign the course for a tablet, instead of a smartphone. Since the screen size of a tablet is bigger than that of a smartphone, it will be easier for learners to access text-heavy courses in the former than the latter. 

2. You want to retain most of the interactivities from the Flash course

Most Flash courses have a lot of interactivities within them. If you would want to retain these interactivities while converting Flash to HTML5, you should choose a tablet as your mode of delivery as it would be easier for learners to access courses with interactivities on a tablet than a smartphone. For example, imagine accessing interactivities such as drag and drop in a smartphone. It would definitely be extremely inconvenient for your learners to do that, considering the size being smaller than a tablet or a desktop.

3. When the learning content is serious in nature

There are a few topics/subjects that cannot be delivered in small nuggets but need longer and better explanation. For example, you cannot train your employees on vital laws and regulations by providing brief explanation. Such content, usually serious in nature, should be delivered in tablets.

You Can Deliver Trainings in SMARTPHONES When

1. You want to provide performance support

Imagine you recently trained your employees on a newly installed software in your organization. But as they started working on the software, they were unable to remember half of what they have been trained on. This is where the role of performance support comes in! It is highly essential you provide training materials to your employees in such a way that they can access it when they are stuck with something. This is when delivering training in smartphones is necessary.

2. You want to deliver a course with less interactivities

Even though your Flash course is highly interactive, you might want to convert it into a course with less interactivities. If this is the case, a smartphone is the right device to train your employees on.

3. When it is difficult to assimilate information

We all come across content that is extremely hard to understand. Most of us immediately go on to the Internet and maybe watch a video on the same subject to understand better. Similarly, you can convert your content into explainer videos (or any other multimedia format) and deliver this content in your employees’ smartphones, helping them assimilate information better.

Alright, so now you have a clear idea on the considerations to keep in mind when converting Flash-based courses to HTML5, for tablets and smartphones. You have also got an understanding of when exactly to deliver training in smartphones and when in tablets. But are you aware of the fact that there are four different Flash to HTML5 conversion options for you to convert your Flash courses? Check this free eBook to get a detailed insight on the four conversion strategies and also a lot more information that would make your conversion process easier.

flash-to-html5-elearning-conversion-strategies-cta