Let’s face it; we live in a world that technology drives in some shape or form. With that as a given, learners today use multiple devices in the course of a day—whether for work, for learning, for entertainment, or for quick reference in support of decision making. We are so frequently on the go that it has become important to leverage our downtime in order to create efficiencies.
To meet this multi-device usage and the expectations of learners, we now have to design and deliver our materials across different devices, operating systems, browsers, screen sizes, and resolutions. And not only do the materials need to work, they need to display correctly to ensure an optimal user experience. This is complex, challenging, and critically requires time and effort!
So how do you meet this expectation? The answer is, quite simply, responsive development.
A framework that just works, everywhere
By its very definition, responsive framework development is a single design that is compatible across the multitude of available user devices, enabling learners to access content from the device of their choice in a convenient and reliable manner. Having worked with several clients and organizations for their responsive eLearning needs, we at Upside Learning now have good know-how on the various problems developers and designers face today in creating responsive eLearning courseware. We thought we'd share a few of these challenges and considerations and how you can resolve them.
Browser-OS-device combinations
The first challenge developers face is the sheer number of operating systems and browsers in the marketplace. Hence it is important to narrow the range and specifically target primary devices and configurations.
Multiple devices mean browser variability. Each browser sends information called a “user-agent string” about itself and the device it is running on. We therefore need to provide for every individual user-agent string to ensure it displays content accordingly. Browsers also interpret and render content in a slightly different manner from each other, meaning we need to code differently for every browser to ensure their behavior is correct and accurate.
Another thing to keep in mind is that testing responsive learning is a far more complex and intricate activity. This is because you need to test all the targeted combinations of devices, which makes the whole process highly time consuming and on the higher end of the cost spectrum.
Usability
The two key dynamics here are touch friendliness and navigation. Tablets and smart phones are touch devices, so interactive elements have to be large enough and far enough apart so users can comfortably select them. So in addition to integrating buttons, we also need to code in support for a swipe gesture on tablets and smartphones.
Further, you need to decide on how to handle global navigation as device size reduces. Since not all navigation controls are required on smaller devices, you could consider inserting a responsive menu that groups and positions controls based on device size. Therefore controls are hidden or displayed based on device or OS.
Another consideration is text usability and readability. Text size varies based on device resolution—the higher the resolution, the smaller the text. We found that a font size of 16 pixels seemed to give good readability on all devices—we laid out the devices one next to the other and checked. You should as well!
Content display
In responsive eLearning, the treatment of content changes based on the device size and browser. So an instructional designer needs to think how to best alter treatments while ensuring that meaning and relationships between content elements don't change across layouts so you retain a consistent look and feel. A user-friendly experience is the ultimate goal. In other words, you need to structure and visualize content accordingly.
While transforming content treatment for smaller devices, another aspect to keep in mind is the layering of interactivities for smaller devices. It is a good idea to limit the layers of interactivity to one or two on the larger devices to ensure that navigation does not get too complex on the smaller displays.
Another issue to be wary of is that not everything is suited to a small device—application simulations, large complex technical diagrams, animated stories, or scenarios don’t work well. It is important to identify such content and come up with alternative approaches or to even question whether to include the content in the mobile version.
Go out and engage your learners!
These were just some of the common challenges and considerations we thought would be worthwhile sharing. Responsive design can be complex and somewhat daunting, and we hope that we have made it easier for you to know where and when to use responsive development to make the user and device experience a more engaging one for your learners.