Most smartphones can access and view content that is published to a Web-based format. These mobile devices provide a great means for delivering e-Learning, especially just-in-time training. But, to ensure the content is usable on a variety of smartphones, e-Learning authors must design and create the content with the device in mind.
The following tips will help you design and create a Lectora or Lectora Online title for use on smartphones.
Fit it to the screen
-
Size the width of your content pages to a width suitable for smartphones. Most smartphones have at least a 320-pixel-wide screen resolution, although some still use a 240-pixel-wide resolution. You can size your pages vertically as large as you want. Users will then only be required to scroll vertically to access content that is not initially visible on the screen. (See Figure 1.)
Figure 1: Size your content to fit the screen of mobile devices.
-
Screen real estate is precious and navigation components can take up a lot of real estate. Consider placing your navigation only on the first page of your title; on the other pages, only include links back to the previous page the user visited. Show these links at both the top and bottom of the pages so they’re easily accessible to users.
Tailor it for mobile devices
-
Stay away from Flash animations and video. The iPhone, for instance, does not support SWF or FLV files.
-
If you want to create a title typically accessed on a computer, but that should also be easily accessible on a mobile device, consider creating a single title that contains the content in both a format suitable for a computer and in a format suitable for a mobile device. Place your mobile-device-specific pages in a separate chapter and design them appropriately. When the course is launched, you can use a script to detect if the content is being accessed from a mobile device, and if so, redirect users to the pages designed specifically for the mobile device. You can integrate these scripts using Lectora and Lectora Online’s External HTML object. To save time, you can find scripts in a variety of languages that you can use for these purposes at http://detectmobilebrowser.com.
-
If you’re creating a title that should be viewable on an iPhone or iPod touch, add a Meta tag to the title level to ensure that the pages are sized to fit the device screen. Add an External HTML Object of type Meta tags to the title level (or the chapter level if your mobile-sized pages are contained in a separate chapter) and insert the following code: <meta name="viewport" width=device-width;"/>. You can modify this Meta tag in a variety of ways to ensure your content is displayed as you desire. Access the Safari Reference Library for more information about configuring the viewport: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Give the learner a great experience
-
Use background images to create the look and feel of your content. Because background images are tiled both horizontally and vertically, the appearance on devices of varying resolutions will seem consistent.
-
Make user input as simple as possible. If you require user feedback, consider providing radio buttons or check boxes for users to select their responses, instead of having to type them into an entry field.
-
Lastly, and perhaps most importantly, test your content on a variety of mobile devices.
Lectora and Lectora Online templates
Lectora and Lectora Online both contain a variety of templates designed for a screen resolution width of 320 pixels and categorized as iPhone templates. These already include the appropriate Meta tags and you can use them as a starting point to create and design your Smartphone-friendly title content. (See Figure 2.)
Figure 2: Lectora and Lectora Online provide templates for mobile devices.
