Mobile learning is no longer the future of eLearning; it’s hot right now. In 2015, 68 percent of American adults had a smartphone and 45 percent had a tablet; among 18- to 29-year-olds, 86 percent had smartphones, according to Pew Research Center. And those numbers are growing, as are the ways that people use their mobile devices.

Not all eLearning designers know—or can control—where learners use their content. Ensuring that all learners, wherever they are, have a positive eLearning experience has become more of a guessing game.

Responsive design to the rescue

Using responsive design provides a solution for designers and developers; content will look great on computers, tablets, and smartphones. These guidelines can help make eLearning mobile-friendly and improve the appearance and usability of responsively designed eLearning:

  1. Keep navigation simple. Sketch out the flow, and see whether it makes sense on a smaller screen; modular layouts whose elements can be stacked on a smartphone screen are less likely to lose learners due to navigation issues than multiple pop-up or drop-down menus and heavy reliance on links scattered throughout the text. Make it easy for learners to move through the content in a logical way—but also to skip sections that cover material they already know. Use simple, clear navigation elements, and put them in the same place on every screen.
  2. Narrow the focus. Keep mobile eLearning modules short and focused. Don’t look only at word count or even video length; there’s no hard-and-fast rule about length. Cover a single concept or idea per module. When “chunking” eLearning content, seek balance: Include enough information that learners will understand the idea or concept, but be mindful of learners’ attention spans. A mobile learner is unlikely to engage with a 30-minute module. Sketching can be helpful here, too—drawings of the same module for a smartphone screen and a laptop can quickly show when the module has too much text. Narrow the focus further if needed, breaking the content into smaller units.
  3. Create a template. “Templates are essential for more efficient and cost-effective projects,” said Todd Macey, president of Vital Learning. Design a template that works on any device, test it on multiple devices (including several different tablets and phones)—then add content. Knowing that the design works before creating multiple modules can avoid costly repeated errors and provides a framework to guide content length. It also helps create what Macey calls “harmony” between the content and the design.
  4. Test, and then test some more. Test with various users. Create and test multiple iterations, getting user feedback on each. Test on several types of devices. Test on different browsers. Bear in mind that all of that testing takes time, but it’s better to do the testing than to find out later that the eLearning won’t work for the intended audience. Macey advises, “Build a ‘product team’ of actual users to provide continual feedback early in the project.”
  5. Accept that not all eLearning will work everywhere. An in-depth eLearning course is unlikely to work well on a smartphone: Even with a responsive design, longer content will always be a square peg squeezing into a round hole. Some learners will try to do all their eLearning using their phones, but it’s perfectly acceptable to preface an in-depth course, a simulation, or a serious game with a note that says the content is best used on a laptop or tablet.

The need for mobile-friendly eLearning is likely to continue to increase. When done well, responsive design ensures that eLearning remains attractive and engaging to learners anywhere—everywhere—on all devices.

Learn more!

Todd Macey will present a session at DevLearn 2016, “Seven Proven Strategies for Creating Effective Responsive Online Courses,” on November 18. DevLearn is November 16 – 18 at the MGM Grand in Las Vegas, Nevada.