Home > Insights > Blog > Responsive eLearning Design and Development

Responsive eLearning Design and Development

Responsive Design: How it all began

In 2012, Google released a report on the emerging use of multiple devices, which stated that 90% of our daily media interactions are screen-based, with our online time primarily spread between four devices—television, desktop PCs/laptops, tablets, and Smartphones.

Computing trends are changing at a breakneck speed. A report by mobile giants Ericsson stated that by 2015, 80% of the populace will be accessing the Internet from mobile devices.

What does this mean for those who create and deliver online courses? Simply put, the need to develop learning solutions that work uniformly well on all devices. Enter Responsive Web Design and the use of responsive design in eLearning.

Responsive Design: What it is

Responsive design does not target particular resolutions or screen sizes; rather, the aim is to design for multiple screens in such a manner that content responds to the target environment and reflows to fit into different layouts and treatments on the basis of the display size and type.

Simply put, a Smartphone screen has less space than a PC screen, so you cannot fit everything onto it—at least not in exactly the same way. Besides, people using mobile devices may be on the move and are likely to experience connectivity issues. This can lead to a lag in downloading content. A responsive design framework considers all these issues and ensures a graceful alignment of onscreen content and layout elements depending on the target device.

Responsive Design in eLearning

The factors that have driven the need for responsive design in eLearning include:

Responsive Design: How to Use it

Like most other forms of learning solutions, there are some key aspects to be considered when creating a storyboard for a mobile learning solution.

Defining the Learning

The first question that should be answered before taking a decision to design for mobile devices is to define the learning need.

If it’s a new learning requirement or need for advance learning, the design needs to encompass all the components of the learning cycle-strategies for grabbing learner attention, ensuring content relevance, and building learner confidence and satisfaction. And it will be necessary to create examples and scenarios to set the context, the context-setting examples and examples and analogies for further explanation, and knowledge checks and assessments to test learner understanding and retention.

However, if the learning intervention is for reinforcement of learned content, it is necessary to understand the purpose of that learning. Do learners require a quick refresher on the go? If yes, then the design can be rather direct-jumping into the content and presenting quick nuggets of relevant information for quick reference and recall.

Or, if the objective of the learning is to provide practice on the learned content, it would warrant a design that involves interactive practice exercises, quiz, or even games.

Studies and experts indicate that since tablets and iPads have larger resolutions, these devices are more suitable for first time learning. Mobile devices work well for providing performance support and for reinforcement of the learning.

Design Bite-Sized Learning Components

The big challenge in mobile learning in designing for point-of-use. When would the learner typically access this learning component-while travelling, during idle wait times, or when a quick refresher is needed?

In all these scenarios, one thing is common-that learners only have a small pocket of time where they will reach out to the learning component before their attention is taken up by something else.

Translating this into design means breaking down the learning into small, to-the-point, bite-sized components. The clarity and completeness in defining the Terminal and Enabling objectives goes a long way in establishing this structure.

As shown above, each terminal objective needs to be broken down into multiple enabling objectives, and each of those enabling objectives needs to map to one learning component, ideally a 2-3 minute learning nugget.

Instructionally, this requires a design approach same as used in the Learning Object model. Each component needs to be focused on one Learning Objective and created as a single information object. The object should map to one information type, and this information should be supported by crisp, instructionally sound graphics and visuals to enhance engagement and knowledge retention.

Adapt the Design for a Consistent Learning Experience across Devices

Responsive eLearning design is an approach to design that ensures a single version of an eLearning course can provide a consistent viewing experience across a variety of different devices, from desktop monitor to Smartphone.

Example:

Tablet: Landscape

Mobile: Portrait & Landscape

Therefore, after the course structure is in place, it is necessary to visualize how these lessons, topics and pages will appear to the learner on a tablet or a Smartphone. A basic understanding of the responsive design framework helps in mapping the course structure to it. It is therefore necessary to break down the content and map it to the design structure supported by the eLearning authoring tool in use.

Example:

While designing the detailed interactivities for the course, it is important to know the kind of templates supported by the chosen authoring tool. Some points to consider are:

Avoiding interactions like drag-and-drop that aren’t best suited for small screens of mobile devices
Avoid designing heavy graphics, animations, or videos that might create a problem while streaming.
Review the need for voiceover critically. Unlike a regular learning WBT, each component or page need not be supported with audio.
Balance push vs pull components to give learners more choice and control in the learning. For example, designing essential learning components that the learner must take, as part of the push strategy; while creating additional components such as videos, cheat sheets and quizzes that are accessed by learners on their discretion, as part of pull strategy.
Explore templates that work well on mobile devices.

Attention Span and Continuity

The attention span of the mobile learner is another issue that needs looking at, as are the limitations of learning ‘on the go’. Learning recall and retention can be a challenge in the case of mobile learning programs because as opposed to regular desktop learning, here the learners are looking at the modules not from the comfort of their work desks or homes, but most probably while travelling and looking at other appointments. Therefore, there are bound to be distractions, interruptions and sudden closure leading to short attention span from learners.

Additionally, there is the problem of continuity. The learner might not remember what they had read last when they return for the next session. As such, each nugget of learning needs to be short, relevant, precise and most importantly focused on one learning objective, each existing as a standalone component.

Writing Style

Last but not the least, the writing style for mobile storyboards needs to be adapted, considering the special requirements and limitations of the medium. Some simple guidelines to remember include:

It is good to use strategies that are appropriate for mobile platforms-crisp graphic, statistics, or a question-would work as an attention grabber but heavy animations with background music will not work.
Write scannable content that can easily be assimilated through speed reading, instead of focused reading.
Writing crisp, short and precise sentences instead of paragraphs of text.
Using images, animations and infographics to convey meaning instead of writing content.
Avoid cross-referencing i.e. do not use transition text typically used in WBTs that refer to previous topics or content learned, this will ensure that the component is standalone.
Provide links where more information is needed.

Benefits of Responsive eLearning Design

A responsive eLearning design offers the following benefits:

Screenshots

The screenshots below indicate how a layered interactivity (in this case an accordion menu) appears on a desktop computer, tablet, and Smartphone in both portrait and landscape modes.

Desktop: