Designing mobile eLearning courses

Before embarking on creation of a mobile accessible course you will want to understand how the learner’s experience changes when they view your course through a mobile device. Mobile devices are typically used in a very distraction-filled environment. Learners may be on a bus, on a train, at the store, eating lunch, or at work. The mobile device screen is very small. This limits what the learner can see and can make it difficult to read a large amount of content, view graphics, or see moving graphics.

Course content behaves differently when the display window shrinks. Graphic artists and many course creators like to design eLearning courses so that all aspects of the visual layout are tightly controlled. They like to precisely specify the position of each character. This is called absolute positioning. Absolutely positioned pages work well for printed brochures, but don't work well for environments where the learners have different screen/display sizes. Because the designer has specified positioning for a specific screen size ahead of time, the browser cannot rearrange the content optimally for the end-learner's current screen size. Absolutely positioned content may require horizontal scrolling to read, or may simply be illegible because the font size is too large or too small. Along the same line of thought, many test questions are built with tools that only work on specific browsers. For example, tools assume that the learner uses only Internet Explorer 7 or later or has flash installed. Mobile devices (event those that use Microsoft Windows Mobile) use older, simpler browsers making many web pages and web forms unusable.

Additionally, in a mobile environment your content will be most effective if you only provide a small amount on each page. While learners can scroll horizontally on a mobile device, it may be difficult to follow the content if they have to scroll too much. The rule of thumb, is to provide about twice the amount of content that can be viewed on the screen: If an average mobile screen supports 300 characters, limit your pages to 600 characters. This leads to content that is short, quick, and fast. Mobile devices have different size and capability limitations. Some browsers will resize the fonts, some support zooming, some don’t respect style sheets, some have a portrait layout, etc. Avoid multiple columns, since they will require horizontal scrolling.

There are a few simple rules to follow when creating graphics for mobile devices. Avoid placing important text inside graphics. That is, it is possible to put text inside a graphic to serve as a label. The mobile browser may shrink graphics so that they fit on the small display size. Any text that is in the graphic will also be shrunk, potentially to a size that is illegible. On other devices, if the graphic is too large, the visitor will need to scroll horizontally and vertically to see it. This can become frustrating for your learner since horizontal scrolling is annoying and is not supported on all mobile devices. So, graphics should be designed for low resolution screens.

None of the currently available mobile devices support multimedia that is part of web pages. This means that content requiring plug-ins such as Flash, PDF, Java, and most movie formats do not work across the platforms. The movies that are becoming popular on iPod require a proprietary movie application, separate from the browser. This means that rich/multimedia should be avoided.

The overall layout/look-and-feel of your site can also be a challenge. If you plan to use the same content for the desktop and the mobile learners, one option is to have two different style sheets, with the appropriate one loading at run time. In a properly designed site, the style sheet specifies layout, positioning, font sizes/colors, backgrounds, borders, and many other display attributes. It is important to understand that style sheet support is not uniform across mobile devices. Because of the non-uniform support, you might consider creating two separate eLearning courses: one for PC access and one for mobile access. Some basic considerations when creating a template for mobile devices:
• Most branding can be done through font and background colors
• Use small or unobtrusive graphics and logos
• Avoid navigation bars that may take up a large percentage of the screen. If you want to include complex navigation, place these at the end of the page content so that learners have access first to the primary content.
• Avoid background graphics.
o The end learners ambient light will vary depending on whether they are indoors or outdoors.
o A background that causes low contrast difference between text and decoration may make content impossible to read.
• Pull-down menus don’t necessarily work on mobile devices (because of uneven JavaScript support), so consider using arrows to take learners through a tour of your course.
• Graphic navigation icons should be simple arrows or a descriptive word such as “next” or “back”.
• Navigation frames work well on some devices, but not others. It’s best to place them below or after the main content.

When you build your content using recommended web practices it will work effectively on all platforms. Content that follows W3C recommendations including HTML implementation, style sheets, and relative positioning is the most accessible from the largest number of platforms. If you are already using a tool, confirm that it works on all mobile devices. You may need to do your own testing since most vendors have focused on the desktop market.

Also consider the connection speed for your visitor’s device. Many mobile devices only have access to low bandwidth services. Your visitor might only have access to download speeds comparable to what most people had in the mid 1990's. Since access speeds vary tremendously, make sure your content can be downloaded quickly.

Tests can work over mobile devices, but they need to be implemented using standard HTML. A big caveat is your LMS. Most LMS’s do not work in a mobile environment since they created their environment in tools (AJEX and Rich Media) that do not work on mobile devices