Learner Engagement: Tips for Responsive Design

Let’s face it; we live in a world that technologydrives in some shape or form. With that as a given, learners today use multipledevices 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 onthe go that it has become important to leverage our downtime in order to createefficiencies.

To meet this multi-device usage and the expectationsof learners, we now have to design and deliver our materials across differentdevices, operating systems, browsers, screen sizes, and resolutions. And notonly do the materials need to work, they need to display correctly to ensure anoptimal user experience. This is complex, challenging, and critically requirestime and effort!

So how do you meet this expectation? Theanswer is, quite simply, responsive development.

A framework that just works, everywhere

By its very definition, responsiveframework development is a single design that is compatible across themultitude of available user devices, enabling learners to access content fromthe device of their choice in a convenient and reliable manner. Having workedwith several clients and organizations for their responsive eLearning needs, weat Upside Learning now have good know-how on the various problems developersand designers face today in creating responsive eLearning courseware. Wethought we’d share a few of these challenges and considerations and how you canresolve them.

Browser-OS-device combinations

The first challenge developers face is the sheer number ofoperating systems and browsers in the marketplace. Hence it is important tonarrow the range and specifically target primary devices and configurations.

Multiple devices mean browser variability. Each browser sendsinformation called a “user-agent string”about itself and the device it is running on. We therefore need toprovide for every individual user-agent string to ensure it displays content accordingly.Browsers also interpret and render content in a slightly different manner fromeach other, meaning we need to code differently for every browser to ensuretheir behavior is correct and accurate.

Another thing to keep in mind is that testing responsivelearning is a far more complex and intricate activity. This is because you needto test all the targeted combinations of devices, which makes the whole processhighly time consuming and on the higher end of the cost spectrum.

Usability

The two key dynamics here are touchfriendliness and navigation. Tablets and smart phones are touch devices, sointeractive elements have to be large enough and far enough apart so users can comfortablyselect them. So in addition to integrating buttons, we also need to code insupport for a swipe gesture on tablets and smartphones.

Further, you need to decide on how tohandle global navigation as device size reduces. Since not all navigationcontrols are required on smaller devices, you could consider inserting aresponsive 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 andreadability. Text size varies based on device resolution—the higher theresolution, the smaller the text. We found that a font size of 16 pixels seemedto give good readability on all devices—we laid out the devices one next to theother and checked. You should as well!

Content display

In responsive eLearning, the treatment ofcontent changes based on the device size and browser. So an instructional designerneeds to think how to best alter treatments while ensuring that meaning andrelationships between content elements don’t change across layouts so youretain a consistent look and feel. A user-friendly experience is the ultimategoal. In other words, you need to structure and visualize content accordingly.

While transforming content treatment forsmaller devices, another aspect to keep in mind is the layering ofinteractivities for smaller devices. It is a good idea to limit the layers ofinteractivity to one or two on the larger devices to ensure that navigationdoes not get too complex on the smaller displays.

Another issue to be wary of is that noteverything is suited to a small device—application simulations, large complextechnical diagrams, animated stories, or scenarios don’t work well. It isimportant to identify such content and come up with alternative approaches orto even question whether to include the content in the mobile version.

Go out and engage your learners!

These were just some of the common challengesand considerations we thought would be worthwhile sharing. Responsive designcan be complex and somewhat daunting, and we hope that we have made it easier foryou to know where and when to use responsive development to make the user and deviceexperience a more engaging one for your learners.