Responsive Design for E-learning – Your Approach

Responsive Design for E-learning - Your Approach

Currently there is a great change in the way employees are learning. They use their own devices such as smartphones to gain knowledge or obtain information. As a result, organizations are also permitting employees to access organizational training through their personal devices. This phenomenon is being called BYOD (Bring Your Own Device), which means learners bring their own devices to take eLearning courses online.

However, this has its own set of challenges for the developer. Smartphones, tablets or notebooks have different screen sizes and resolutions. Many of the mobile devices don’t have similar orientation. Mobile learners expect their eLearning courses to resize with their devices either in Landscape or Portrait. It is very challenging for developers to design a course for each and every type of device and this is where Responsive Design becomes relevant. Using this design method we can develop or design a single course that simultaneously caters to every screen size and orientation.

Responsive eLearning Design:

Responsive eLearning design refers to a design with an approach to provide an optimal viewing experience across a wide range of devices. (ASTD-publications, Author: Mayra Aixa Villar). It is inspired from responsive web design, where a website can be easily navigated with minimum panning, resizing and scrolling with respect to computer and mobile devices or smartphones and covers a variety of devices.

In most of the multinational organizations, employees use a wide variety of devices and take the eLearning trainings at a suitable time, where they can focus on learning. This brings us to the question of how to design an eLearning course to be responsive to all mobile devices.

How does it look like: An example of responsive design is CommLab India’s Website where the size of the browser fits in to the device being used – be it smartphone/tablets notebook, etc.

One of our stakeholders recently had a requirement to create an eLearning course with responsive design. The course should run on any devices with both landscape/portrait orientations. Let me elaborate on this case study.

Case Study:

The requirement of our stakeholder was to develop an online assessment on communication styles that uses the Myers Briggs type communication style assessment.

The requirement included displaying the results in a graphical format and allowing learners to send the report in PDF. This eLearning course had to run on all mobile devices, smartphones, tablets to cater to their workforce working in different departments like Retail outlets, Warehouses and Logistics.

Our approach was to create different layouts with text and images as per the inputs. We took sign-off from stakeholders for the layouts that were similar to the ones below:

Responsive course

Scroll to view full image

Once we received sign off on layout designs from stakeholders, our team developed an eLearning course with a technology using HTML 5, CSS 3 Jquery, and Java script and to generate a PDF from external server used PHP scripting. The job does not end with the development of Responsive eLearning; we need to test the functionalities in various devices like smartphones, tablets, iPads and notebooks, to check how the eLearning course appears in multiple devices.

We got a feedback that the eLearning course was deployed by our stakeholders across their organization and that it was running successful. Our stakeholder is happy about our approach and the learners are having the liberty to take the eLearning course on their own devices at a time that is most convenient to them.

If you wish to initiate any kind of responsive design of eLearning in your organization and have questions about the process, please do share your thoughts. We will be happy to help you out.

View eBook on E-learning 101 – A Comprehensive Guide on How to Design an E-learning Course