Once upon a time, training new employees, or simply keeping employees up-to-date on current practices, compliance policies, and the newest methodologies required seminars or classes. These were logistically complicated and incredibly expensive. Finding venues large enough to house all of your employees is costly enough, but then you have to consider the cost of lost productivity.
When E-Learning came about, it seemed to solve these problems. Now, employees could simply log on from their computers and participate in interactive lessons. While this was – and still is – a great solution, time has proven that it is a limited one.
Employees are spending less and less time at their desks in front of their computers. According to Global Workplace Analytics, employees at many of the top Fortune 1000 companies are away from their computers between 50% and 60% of the time. Asking these employees to set aside time to sit at their desks for E-Learning coursework is not only impractical but could also adversely affect their productivity.
Mobile E-Learning Saves the Day
The solution, however, is already at hand. Or, rather, in your employees’ hands. Modern smartphones have more than enough processing power to handle most E-Learning applications. Simply put, people are also more acclimated to using their phones at this point. In 2008, the average adult spent less than 30 minutes per day on his or her phone. In 2016, daily phone usage jumped up to more than 3 hours, more than all other connected devices combined.
Would mobile E-Learning require companies to maintain two separate platforms, one for desktop learning and one for mobile? Not necessarily. Responsive web design has been around for a long time. This is the practice of having one codebase that is self-adjusting, depending on the device used for viewing material. One website will feature optimized user interfaces (UI) on a variety of devices.
Let’s Get Technical
How does this work, though? As much as it may seem like black magic or sorcery it’s not. Self-adjusting E-Learning modules are made possible by the specified use of the cascading style sheets (CSS) that we already use to style our web pages.
When CSS3 and HTML5 were introduced, they came with a feature called media queries. These media queries give the designers the ability to adjust the rules in the style sheets, based on certain factors. One of those factors is the size of the display, or “glass”. Glass size breaks down as follows:
- Small glass – Phones and PDAs, where the width of the screen is often less than 600 pixels.
- Medium glass – Tablets and netbooks, where screen resolutions are often between 600 and 900 pixels.
- Large glass – Anything from a desktop monitor to a large screen display in a conference room. These are generally anything more than 900 pixels
Using media queries in the CSS, designers are able to take a single code base and manipulate the elements in the interface, to support any device the user loads it on.
Things to Keep in Mind
While media queries make it possible to support a single code base on multiple devices, the actual lesson structure and other aspects of the user experience need to be considered as well:
- Keep the Lessons Short and Sweet. While it’s possible to simply adjust a traditional lesson plan to fit on a smaller screen, you need to keep in mind the amount of time someone will access this information on a small screen. Typically, a user will not decide to load a 30-45 minute lesson on his or her phone. Keep lessons less than 10 minutes, and aim for somewhere between 5-7 minutes.
- Fingers are Bigger than Cursors. While mobile technology has gotten more responsive, we’re still interacting with it using our fingers. Make sure buttons are large enough to be pressed easily, using our fingers.
- Keep Pages Minimal. While our phones are amazing feats of technology, they are still smaller than desktop monitors. It is easy to put too much content on a mobile page and clutter the UI. Instead, break up the content as much as possible. A single screen can feature only headers and actual content accessed by clicking the headers.
- Make it Fun. There’s a reason people today spend more time on their phones than ever before. Simply put, it’s fun. Phones enable people to socialize and to play games. Consider this, when designing your E-Learning solution. Incorporate gaming elements into the lesson plans, and let people share their progress with other learners.
Where to Start
The concept of responsive design has been around for a while when it comes to web development. There are many existing frameworks that can be utilized if you’re creating your own, web-based solutions, including:
- Twitter Bootstrap – Bootstrap is a scalable HTML, CSS3, and JavaScript framework. Its display features a 12-column system. Designers and developers can work together to dictate which columns are visible and how they’re displayed, depending on device size. Bootstrap also comes with many UI elements built in, like tooltips, drop downs, and carousels.
- Foundation – Foundation, like Bootstrap, features a 12-column grid system. Foundation also comes with several pre-built layouts, so you can get started quickly.
- Semantic UI – While being responsive, Semantic also offers the developer and the designer the ability to work together, creating a more dynamic experience. Semantic also offers support for scaling or disabling images, as well as 3-D animations.
If you need a solution geared specifically toward E-Learning, here are some frameworks designed with that in mind:
- Adapt – Adapt is a free HTML5-based E-Learning framework. Because it’s based on HTML5, it is responsive and will work across multiple device types. (And did I mention it’s free?)
- Elucidat – A cloud-based E-Learning solution, Elucidat offers a “what you see is what you get” (WYSIWYG) interface to use for designing your lessons, as well as an analytics dashboard and a support team.
Ensuring your employees can access and, more importantly, learn from your E-Learning offerings may seem daunting, but it doesn’t have to be overwhelming. Making sure that you consider all interfaces, as you design the lessons and overall experience, is key to maximizing the return on your investment.
Whether you decide to design and develop your own web-based solution, go with an E-Learning framework, or contract through a third-party content developer, ensuring that your E-Learning solution is mobile will ensure that your employees are able to stay up-to-date, without affecting their productivity.