Designing Professional Learning Across Devices

The world was already becoming more mobile by the minute, yet COVID-19 has accelerated our need for the flexibility and convenience gained from using multiple devices. Consumers are used to toggling across smartphones, tablets and PCs, and our collective technological fluency and reliance is only expected to grow. According to a recent report, the number of mobile networked devices and connections globally is estimated to be 1.6 per person by 2023 and the total networked devices and connections per person will be 3.6. For North America, the numbers are even more staggering with 3.3 mobile networked devices and connections per person and 13.4 for the total number of networked devices and connections per person. 

This convergence of consumer behavior and the pandemic offers an opportunity for professional learning to become more accessible and engaging, often at a lower price point. Delivering corporate learning through multiple devices must be part of any effective learning solution to address employees’ constantly shifting needs. We need to design learning that is intelligent, flexible, digestible and fluid.

There are many benefits to including mobile devices in your learning and development plan, such as:

• Employees can access information whenever they want, wherever they are, on any device. (Users can start a lesson on a PC and finish it on their smartphones.)
• Mobile devices can create new, exciting interactive experiences.
• Devices are personalized and provide a more customized experience, such as including accessibility features or unique reading fonts for learners with dyslexia.
• Mobile devices extend the reach of face-to-face events by providing the next best thing: a digital companion or community.
• Devices offer more affordable delivery of eLearning materials compared to a desktop.

Traditionally, delivering mobile learning content meant designing a specific interface for each device. Now, devices are more compatible and easier to integrate into the educational ecosystem. Using HTML, CSS and JavaScript, content is accessible via a single URL without requiring a specific application so learning can be accessed through web-based courses or native applications across all platforms.  

Responsive Web Design or Adaptive Web Design or Both?

There are two options for web design to ensure cross-platform compatibility: responsive web design (RWD) and adaptive web design (AWD).

RWD uses a flexible page structure, the so-called "fluid grid," where element sizes (images and text blocks) are set in percentages. As the width of a page decreases, all content smoothly shrinks and the components decrease relative to each other. RWD is the right approach for learning delivery when there is no need to view or use the content differently on mobile versus desktop devices, and when budget and development time are limited. Since eLearning courses use graphics and interactive elements for engagement, RWD is the more popular choice. Without the need to maintain different versions of the same learning content for different devices, platform maintenance is easier. RWD can also be used to build native apps for smartphone platforms, web apps or even traditional eLearning modules.

By contrast, AWD provides a set of template options for various screen sizes. This approach allows you to tailor the interaction between the user and the learning content based on the device, and results in a higher load speed. After determining the device, the server sends optimized content specifically for that smartphone or tablet. Although AWD usually provides a better user experience, it is more expensive and makes more sense for content without complex graphic elements and interactivity.

When deciding how to move forward with designing your learning content for multiple devices, there is no one-size-fits-all solution. The choice between RWD and AWD or a combination of both ultimately comes down to project requirements.

Regardless of which approach you use, here are some tips to consider when designing content for multiple streams:

• Elements should make the most of the space, and the design should include dynamic layouts.
• The design should automatically detect the features of the device being used and apply an appropriate style to all on-screen elements.
• All images should be scaled to complement the device being used at the time.
• Links, buttons and characters should be large enough to touch with a finger.
• All the elements should be responsive to device-friendly motions. (For example, drag and drop works well for an iPad.)
• Content should be thoughtfully distributed across the usable spaces on the screen. For instance, place dialogue choices at the bottom so that learners have easy access, regardless of whether they are left- or right-handed.

We can expect to see continued adoption of more smartphones, tablets, touch-enabled computers, wearables and whatever comes next. Smart, accessible content shouldn’t depend on the device or the size of the screen. As the number of different screen sizes increases and learning becomes more important than ever before, the only way to future-proof your learning design is by creating content that can scale and adapt intelligently across all kinds of screens.