Increasingly, organizations want to deploy courses to mobile devices, driving adoption of HTML5 as an e-learning industry standard. Flash, the traditional format for e-learning, isn't supported by many mobile devices, so it's not a viable format for mobile learning (m-learning).
When you develop courses for mobile delivery, it's important that you account for it from the start. Unfortunately, it's not as simple as just publishing your desktop course to HTML5 format.
There are many design considerations when you create e-learning for a mobile device instead of a desktop computer. For example, there’s no hover state for most mobile devices. Buttons need to be large and easy to press. The on-screen language is slightly different (think “select” instead of “click”), the screen size is smaller, and mobile devices are less powerful than computers. These are all critical constraints you need to consider before you start creating content for mobile devices.
You also need to consider how your HTML5 output will look to learners. Because each browser and device implements HTML5 slightly differently, what learners see on their devices may differ from what you see in your authoring tool. To work around this issue, you need to:
1. Consider That Different Devices Use Different Browsers
Various mobile devices (smartphones and tablets) are compatible with different mobile browsers. You need to identify which browser and device your learners will use to access your e-learning. Browsers and devices have varying capabilities when it comes to supporting HTML5 (read more about HTML5 and web browsers here: What You Need to Know About HTML5 for Web Browsers). Therefore, the browser your learners use matters, and it'll impact the look and functionality of your HTML5 content.
2. Optimize for the Device Most of Your Learners Will Use
When developing mobile learning, you’ll want to optimize content for the device most of your learners will use. It's almost impossible to make sure your e-learning content will behave consistently across all browsers and devices, so you need to optimize your e-learning for the majority of your audience. To do this, identify how well the specific device renders HTML5 content, then identify any HTML5 limitations with that device and the browsers it supports.
If you’re designing content for a variety of devices, you’ll need to do what’s called cross-device testing to make sure your e-learning looks and functions as intended across multiple devices.
3. Test on the Device in Question
One of the challenges of developing e-learning for mobile devices is that you need to have one of these devices to test your content properly. There are some emulators out there, but it’s safest to test your courses on the actual device. For example, you won’t know for sure how your HTML5 output looks on an iPad until you actually view it on an iPad. Make sure you can get your hands on the devices your learners use, then thoroughly test every aspect of your content, simulating any scenario they might encounter. We can’t overstate the importance of testing—it's absolutely critical.
The top three things you need to know about HTML5 and how it relates to the various mobile devices are: different devices use different browsers to display content, devices don’t all render HTML5 equally well, and you should always test on the devices your learners will use. With this information, you’ll be well on your way to creating HTML5 output that looks great on mobile devices.