Mobile course design Best Practices

When designing for mobile devices you’ll generally want to plan specifically for mobile delivery rather than re-purpose an entire online course.

This is partly due to the size limitation of the mobile viewing area but also due to the nature of a mobile device. People typically use these devices on-the-go, grabbing a moment or two to check information or viewing mobile content while doing something else.

Consider what learning content is best for mLearning. Mobile devices are ideal for just-in-time, just-in-place learning. Supplemental material, field guides, how-to references, key learning points, and on-the-spot reminders are all great uses for mLearning.

Here are a few more best practices to keep in mind when designing a mobile course:

Instructional Design tips for mLearning

For optimal viewing, try to keep important content within the screen viewing area. Users of mobile devices are more used to scrolling in order to see all of the content on their mobile. Claro doesn’t restrict the bottom of the mobile stage area, so you can create content that scrolls. You may want to add a visual marker such as a line or logo to denote the bottom of the page.

Ensure each topic (Learning Object) can be taken in a very short time. Consider the fact that Claro’s mobile player gives the learner easy access to jump directly to each topic, so breaking subjects into small topics makes sense.

Keep related information (e.g., items to compare or contrast) on one page but otherwise, as much as possible, break up information across pages to reduce scrolling.

Font considerations

Steer clear of non-standard fonts or you may run into odd spacing and line wrapping problems.Keep your font sizes legible as well; not too small but not too large either.

Testing and tracking

Course completion and test results are stored for future tracking. Claro’s mobile courses can be published as SCORM to an LMS or delivered and tracked directly from Claro.


Avoid adding Flash (.swf) files as these will not play on all mobile devices (e.g., on the iPhone and iPad).

Add interactivity to your courses using the tools in Claro, such as Actions, the Image Map, and Hotspots.

Any buttons or other interactive objects or links you make should be large enough to select by tapping with a finger (Apple suggests a minimum of 44x30 pixels for iOS devices).

Don't use "onMouseOver" events since these are not supported by mobile devices.

Don't use "onDblClick" events since these are used by mobile devices for zooming.

Use "onClick" events for mobile interactions. The click is a tap on a mobile. Make sure you refer to "tap" in your user directions. If your course is intended for mobile OR standard delivery, enter "Click or tap..." in your user directions.

Optimal media types and considerations for mobile

Audio files:

Save your audio files as .mp3.

AutoPlay is prohibited on many mobile devices and is generally not a great practice for online courses anyway (In some cases, you may want page narration audio to autoplay. With Claro, we have been able to work around mobile device restriction to some extent. Audio set to narration will autoplay, except on the first page or any jump page (page jumped to using Page Link or the Menu). See our article Designing mobile courses with audio narration for more information,

Video files:

Save your video files as .mp4 h264. H.264 is an MPEG-4 compression standard for video. It delivers top video quality at about half the file size of MPEG-2.

Preview and verify during development

Check your progress early and often by previewing your course in Claro using the simulator and also by checking it on the target mobile devices.

See Previewing a mobile course for more information.

Navigation using Player Controls

Consider where you might add interactive Player Controls that prompt the learner to tap to answer or identify something. A correct tap moves the learner ahead without needing to tap the next button as well.

Considerations for different common devices:

See Which mobile operating systems can Claro courses display on? for more information.

When designing specifically for the Apple iPad and iPhone in mind, consider Apple’s device considerations. In addition to avoiding adding Flash (swf or flv files), see our articles Audio cannot AutoPlay, Designing mobile courses with audio narration, and Do not embed From URL web objects.

Claro’s content doesn’t rely on Flash so it can be viewed on any mobile device. Claro output is HTML5. For more information, see Leveraging HTML5 to take your e-learning (and m-learning) into the future.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request