4 Secrets of Successful Responsive E-learning Courses

The desktop computer no longer monopolizes the online world. Today, users of the Internet access web-based content using various mobile devices such as tablets and smartphones, along with PCs. The growing use of a multitude of connected devices is compelling companies to make their online content responsive, so that it can be accessed on any device, irrespective of the platform it runs on and the size of its screen, and e-learning resources are no exception.

Are you planning to make your online courses responsive? How can you build a good device-agnostic online course? What does it take to deliver good technology-enabled learning experiences on all devices? You need to focus on 4 vital aspects.

1. Make sure that responsive online learning materials are bite-sized 

It is often said Small is beautiful, and it cannot be more true than in the case of responsive e-learning. You cannot create a 30-minute online learning module for the small screen of a mobile device and expect the learner to access it seamlessly, without loading issues or getting distracted, can you? 

Responsive web-based learning design deals with how you adapt your user interface and content based on the device being used. We need to enhance the learning experience on mobile devices, not replace the learning experience delivered on PCs or laptops.

The best way to make this happen is to chunk the huge online learning content into bite-sized chunks, each covering a specific learning objective. For instance, a half-hour e-learning course on Personal Protective Equipment (PPE) may contain content that addresses the following learning objectives.

• Explaining the importance of using PPE
• Describing various types of PPE and their purpose
• Demonstrating the steps involved in wearing the PPE

When you adapt this content for devices with small screens, divide it into learning nuggets, each addressing a specific learning objective. The content pertaining to the importance of using PPE can be accommodated in one bite-sized module. The information regarding various types of PPE and their purpose can go into the second microlearning module and the steps involved in wearing the PPE can be taught in the third.

2. Begin with the small screen in mind

In most cases, e-learning course developers come up with a plan for the biggest screen and then try to scale it down until they reach the smallest. This approach may not yield the best results because developers often tend to include elements such as non-vector images, which cannot be rendered well on most mobile devices. To overcome this problem, it is advisable to adopt the opposite approach – creating the responsive online course first for smartphones and tablets.

When you develop web-based courses for devices with different screen sizes, it is necessary to focus on “breakpoints” i.e., major screen sizes which need your attention more than others.

• < 480px (ideal for most older smartphones with small screens)
• < 768px (applicable to most smartphones with large screens and small tablets PCs)
• >768px (suitable for large tablet and desktop screens)

You can also focus on the following two sizes if you have time and money:

• <320px (a good idea for older, small, low resolution phones)
• >1024px (well-suited for desktops with wide screens)

3. See that the online course can be navigated easily on all devices seamlessly

It is no exaggeration to say that navigation is the hardest part of developing a device-agnostic course. This is one area of the online course, where convenience of access takes precedence over consistency. You need to make sure that the course is easily navigable on any device. Menus created for courses in the desktop view simply don’t work on smartphones and tablets. This calls for designing different navigation for different devices. Many designers of responsive websites use “hidden” navigation, and there is no reason why you shouldn’t do the same. For example, one of our clients in the healthcare space uses the icon of a milk carton to indicate a list of dairy products, in its responsive online course on nutrition.

4. Test, test, and test the responsive course

Proper testing is a very important, and unfortunately one of the least focused aspect of good responsive e-learning development. Before you release a course, it is necessary to test the course for compatibility on all devices, operating systems, and browsers. It is important to be in “close touch” with your front end developers to avoid accessibility issues. It is advisable to release a beta version of the course, before launching the “actual” course. This will enable you to get feedback from learners and make required changes to the course, so that it provides hassle-free learning experiences across multiple devices.

A good responsive e-learning course goes a long way in meeting the learning needs of your learners, who use multiple devices. Follow the tips listed above to develop a highly effective device-agnostic online course.