Building Mobile E-Learning

Analysts, reporters, and computing futurists believe that mobile applications are the greatest path for growth in the computing industry. Their focus and enthusiasm centers on applications that install natively on mobile devices (see the Glossary in Sidebar 1), rather than on the mobile device as a communication gateway.

For example, many articles feature software that tells you how many of your “friends and acquaintances” are currently within 500 yards of where you are sitting. However, mobile devices may have a role that is much larger than just as a platform for handy applications.  Mobile devices can provide highly portable, low-cost Internet access, thereby opening up huge new information consumer bases.

Many of the featured mobile applications are productivity tools such as scheduling or notification software, or entertainment tools such as music players and games. Users must purchase, download, and install these applications on the mobile platform. Each mobile platform and operating system requires its own natively compiled version of the application. The applications require redesign and rebuilding for each target platform (for example, Blackberry, Windows Mobile, Android, and so on). While most of the focus on mobile computing has been on specific applications, the most obvious application, and potentially the most important one, was seemingly forgotten: Web access.

Most learners are accessing the Internet to take e-Learning courses. E-Learning courses provide organizations, government, and individuals a portal for training learners. Learners access an organization’s courses through a Web browser (such as Firefox, Internet Explorer, Chrome, Opera, or Safari), regardless of the operating system (MS-Windows, Mac OS X, Linux, and so on) on the machine or device that the learner is using. This access to training is available without the learner purchasing, downloading, or installing anything, since most computers have a Web browser installed before delivery. The same is becoming true for mobile devices.

Consider the factors affecting mobile learners

The need to download or install an application before accessing a course is one of the major reasons that learners abandon a course. In fact, when learners need to install a plug-in in order to view the content, they do so only 10% of the time. This means that the hurdle of installing a plug-in or media viewer is enough to prevent most learners from taking a course. 

Most current e-Learning courses work well on a desktop computer with a moderate resolution screen, but they work poorly on a mobile device. This is primarily because of design decisions that course creators made when they built the course. Most course creators assume that learners have the same size and resolution display as what they themselves have on their computer. They only test the course with their own computer, at their preferred browser setting.

For example, most courses only work properly if the display device is at least 700 pixels wide. However, most mobile displays are less than 400 pixels wide. So, to read a line of text, the end-learner will need to scroll horizontally, something very difficult to do on mobile devices that don’t have a touch-sensitive screen.

Another big reason course designs are unfriendly to mobile learners is the rush to Rich Internet Applications. These require plug-ins (for example, Adobe Flash or Java) in order to display the content. Such applications provide pretty movies, stimulating visuals, and responsive content, but may add little learning value. Currently, most mobile devices (including the iPhone) are unable to play rich media on Web pages. This means that courses requiring plug-ins are inaccessible to many mobile consumers.

An even bigger problem exists with tests. Most testing and assessment tools output Flash, are browser specific, or use other rich-media formats that mobile devices cannot access. The result in these cases is tests in which a learner is unable to set the focus on an entry box, and typing doesn’t work. Testing designs may also use the latest instantaneous feedback mechanisms such as AJAX. Many mobile browsers do not yet support these technologies. So, when learners wish to take tests in a mobile environment, they may not be able to do so unless the designers and developers carefully considered their choice of testing and assessment tools.

Getting around the problems

If you are building courses, you need to ask two fundamental questions:

• Why are you building these courses?
• Who is your learner?

If you want learners (employees, customers, prospective clients, and/or partners) to take your courses, you will need to ensure that your courses work in their environment. With maturity in cell phone and mobile device technologies, your learners will be moving away from their desks, and will want to learn when they are mobile. This means that courses that have worked nicely until now will need to be able to run in the mobile learning environment.

Currently, about 15% of the cell phones in the U.S. have a Web browser. Most people exchange their cell phone for the latest model every two years. This is one reason why Internet-accessible mobile device adoption is growing exponentially.

Your training strategy needs to ensure that you are not repelling learners. If your courses do not work with mobile devices, how many learners will you not be accessing in the future? If you require that learners download and install an application or plug-in in order to take a course, how many learners have you lost? Here are some more questions you need to ask, to see if you should be looking at a mobile training strategy:

• Are your learners sitting at a desk, or are they out and about?
• Do your learners use cell phones or other mobile devices?
• What do they currently read on their mobile devices (nothing, short e-mails, or long messages) ?
• Do they currently use mobile devices to send e-mail?
• Do their mobile devices have a browser (are they using smart phones)?
• Do they have, or are they looking at purchasing, a mobile device with a browser?
• Would they want to access training when they are away from their desktop computers?
• Are your courses useful to a mobile audience? 

If the answer to any of these questions is “yes,” you should consider expanding your course options to support mobile devices.

It is acceptable to design some of your courses primarily for desktop learners. However, you should critically review your courses and decide which ones a mobile learner would be interested in accessing.

Courses that make heavy use of graphics, test questions that require a lot of typing, and exercises and simulations that use multimedia generally do not work well on mobile devices because of small display sizes, small keyboards, and lack of processing power. The good news is that with some minor modification to the content, you can make the critical material accessible on mobile platforms. You can deliver typical information in courses using HTML/XML (Web page) format, without the need for multimedia. With a graphic design that allows the content to resize itself for the mobile device, the content becomes mobile-accessible.

Designing mobile e-Learning courses

Before embarking on creation of a mobile-accessible course you will want to understand how the learners’ experience changes when they view your course on a mobile device. Learners typically use mobile devices in very distraction-filled environments. 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 e-Learning courses so that all aspects of the visual layout are tightly controlled. They like to precisely specify the position of each character, which we call absolute positioning. Absolute-positioned pages work well for printed brochures, but don't work well for environments in which the learners have varying screen or 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. Absolute-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 tools for building test questions only work on specific browsers. For example, some tools assume that the learner uses only Internet Explorer 7 or later, or that the learner has installed Flash. Mobile devices (even those that use Microsoft Windows Mobile) may use older, simpler browsers, so that many Web pages and Web forms may be 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 the user can view 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 only, and so on. Avoid multiple columns, since they will require horizontal scrolling.

Keeping it simple

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 shrink, potentially to a size that is illegible. On other devices, if the graphic is too large, the visitor will need to scroll both horizontally and vertically to see it. This can become frustrating for your learner since horizontal scrolling is annoying, and not all mobile devices support it. Design your graphics with low-resolution screens in mind.

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 platforms. The movies that are becoming popular on iPod require a proprietary movie application, separate from the browser. This means avoiding rich media or multimedia.

The overall layout and 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 e-Learning courses: one for PC access and one for mobile access. Here are 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.
  • The end learners’ ambient light will vary depending on whether they are indoors or outdoors. 
  • 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 downloaded of your content is quick.

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

Understanding the differences between mobile platforms

A 2007 study on mobile platform usage found that Symbian (used in Nokia phones) had 70% of the mobile OS market. Linux (used by multiple vendors such as Sharp and Samsung) had 15% of the mobile OS market. Research In Motion's Blackberry had 5% of the mobile OS market, while Microsoft Windows Mobile and CE (used by Palm, Compaq, Samsung) had 5%. Since this study came out, new players including Apple (iPhone) and Android (Google's operating system) have appeared. In many countries outside of the U.S., people use cell phones 100 times as often as desktop computers.

Figure 1 The same course in five different mobile browsers

Figure 1 shows the same course as it appears in five different mobile browsers. The window size can vary from 320x160 to 600x480, or even a landscape mode of 480x600. Beyond the screen size, there are different levels of support for visual elements such as styles, dynamic content (JavaScript), and images. I predict that over the next few years more mobile devices will support multimedia. The question is whether they will support the same multimedia formats you currently have on your desktop computer, or if they will develop their own plug-ins.

Features (and limitations) of current mobile systems

Blackberry has a custom mobile browser. This browser has poor JavaScript support, and does not support Flash. It supports zooming, but provides no special handling of frames, and it ignores style sheets (CSS). This means that content cannot be "hidden" through style sheet control. This is a problem if you wish to provide both textual and graphic links.

Microsoft has a number of different mobile operating systems. You will finde Windows CE on devices built prior to 2005. Microsoft released Windows Mobile 6 in 2007, and Windows Mobile (Next) is under development. All of these platforms contain browsers that are versions of IE4/IE5/IE6, resulting in many limitations. On Windows Mobile 6, the browser is better, but it is a limited version of IE6. The Microsoft browsers have poor JavaScript support, do not support Flash, do not support zooming, and ignore style sheets (CSS). Although Windows Mobile 6 supports CSS, it does not provide any special handling for frames. Minimo is an alternative you might want to consider.

Minimo is a port of the Firefox (Mozilla) browser for Windows Mobile devices. The Minimo browser is available for Windows Mobile 5 and later. It is easy to install, and fully JavaScript enabled, which means that dynamic content works well. The Minimo browser is capable of performing decent zooming, and has good style sheet (CSS) support. Minimo is one of the best browsers available. The only downside is that you need to download and install it on the Windows Mobile platform – but it is free.

Symbian is the name of Nokia's operating system that includes a browser. The browser is good, with reasonable JavaScript support, and provides excellent zooming.

Apple's iPhone uses a proprietary operating system and the Safari browser. iPhone supports multimedia separately from the browser. Overall, this is an excellent platform since it has good screen size, good style sheet (CSS) and JavaScript support, and the touch screen makes it easy to use.

Palm's operating system, called Garnet, includes a browser. The Garnet browser has poor style sheet (CSS) support, but it does a nice job with frames by putting them at the bottom of the page. It has weak support for dynamic HTML. Like Apple, Palm’s devices have touch screens to make navigation easier.

Summary

With the continuing economic downturn, many companies are cutting back on expenditures for software, infrastructure, and other IT-related expenses. However, one area they are not spending less on is mobile devices, especially for their sales teams and other employees “in the field.” This presents an excellent opportunity for e-Learning, user assistance, and performance support initiatives.

Mobile learning, properly done, is a natural fit to the challenges that enterprises and their employees are facing. Mobile learning and information applications are small, and you should tightly target them to solve particular performance problems. This means that these applications are relatively fast and cheap to create, while paying off in almost immediate results. In addition, mobile applications are available to the learner whether in the office or not.

If you are not currently producing mobile learning and performance applications, remember that you can develop courses that learners can access simultaneously from desktop computers and mobile devices. Look for authoring tools that handle the differences in delivery platforms, including a wide variety of mobile platforms such as those I’ve listed in this article. Structure the courses so that learners can quickly get to the content they want – this is essential to successful mobile learning.

With thoughtful planning and execution, I believe you can put the tips I’ve given you to work in ways that will provide real value to your organization. By starting now, you will have no difficulty in expanding and maintaining your mobile offerings as business conditions improve over the next 18 to 24 months.

Comments

Login or subscribe to comment

Related Articles

Marc My Words: iPad Envy

5/11/10

The iPad has done an admirable job of capturing the imaginations of many of us (not to mention the cash of a million buyers – so far). But is it a game changer for learning?

Your mLearning Pilot: Blueprint for Success

5/5/10

Many organizations are considering mobile learning, and most are being cautious in their implementation. A wise approach is to conduct a pilot program to test the waters and to identify issues that may affect success in the particular organization or market. Here are five points to consider that will help you better plan, deploy, and evaluate the results of your first mobile pilot.

Mobile Learning on the iPhone - Getting Started

4/19/10

“How to make e-Learning that plays on tiny screens?” and, “How to work without Flash?” are key questions in designing mLearning content for smart phones in general, and for the iPhone in particular. Would you be surprised to learn that you may already have the tools that you need to solve these problems? Many other tools are cheap or free. This article explains the workarounds.