No Image Available

googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1705321608055-0’); });

How To Develop A Responsive eCourse


We love our devices. Especially those that can go with us. They let us read the latest news, conduct research, make purchases, give us directions, and allow us to connect with our friends.

In fact, according to a Gartner study, by 2018, over 50% of Internet use will occur on mobile devices, rather than laptops or PC’s. Users want and demand access to everything, no matter where they may be. And if they cannot get that access, they won’t stick around.

It makes sense, then, that eLearning course developers understand the necessity of creating coursework that is fully responsive for every type of device and that allows participants to move among devices seamlessly, depending on where they may be. A module of a course may be accessed during lunchtime in a café, via a smart phone; another module may be accessed late at night, in bed with a tablet; still another module may be accessed via a laptop or PC at work or in a home office.

How do you accommodate all of this? Here are some critical considerations.

Adopt a Mobile-First Strategy

Small screens. That is the challenge. In fact, mobile device use is perhaps one of the biggest disruptions in eLearning today. You cannot fight it anymore, and the best response is to adopt a mobile-first strategy in your course design. It will mean that you have to take a long hard look at your course content and identify the most important components and concepts and rank them in order of importance. Those need to have the “screen time,” and you can always add more elements for larger screens right on those screens. For small phone screens, however, stick to the basics, with links to the other elements that will appear in full on the larger laptop and desktop screens.

Take a look at some e-commerce sites, to get a good idea of how this is done. Travel websites are great examples. If you access the same travel site from your phone and from a PC, you will see the difference right away. And yet users are able to get the same information and perform the same functions on both. It’s just that more elements are displayed in full on the larger screen. It will take some time and some work with a developer to get this accomplished, but it is no longer an option for eLearning coursework.

If you are developing your training course for a business client, then be certain that you include that client in the conversations about identifying the major concepts, so you are prioritizing correctly.

Scroll Bars – Use Them Smartly

There was once an attitude that scroll bars were a big “no-no.” That was because e-courses were developed for large screens, and they were an unnecessary inconvenience. But now that you are developing content for smaller screens, scroll bars just make sense.

But doing it smartly also makes sense. And here are some good “guidelines” for their use.

  • Have a major concept at the top. Then spread the rest of the content evenly on the ensuing pages, with white space in-between to show separation.
  • If you use a scroll bar, you don’t have to have those pesky “Next” buttons – it all flows seamlessly.
  • Keep the pages to three if at all possible. And, to prevent overload, make sure that only one sub-concept is covered on each page. Remember, they are using mobile devices, and “overload” can be an issue.

Mobile Users Often Use Landscape Orientation – Plan for That

To make reading content easier, mobile users may switch to a landscape view, rather than portrait. They can see more in a single view that way.

This is a development issue, because if it is not planned for, a landscape view can stretch out the images and text – making the display unreadable/unviewable. Once your course is developed, be sure that you test for landscape view and get any issues resolved before it is launched.

Take a look at Nurture Training College, -  a company offering childcare courses in Melbourne -  whose new website is fully responsive, and if you sign up for courses, you can access them on any device and use either portrait or landscape views without issue.

Seamless and Rapid Load of Media is Critical

The solution is, of course, compression of media files, especially videos. A lot of e-course developers avoid videos because of issues with load time on mobile devices. This is a huge mistake, given that videos can speak to concepts much more effectively than just text. And, given the technology that enables compression, this should not be an issue today.

Videos should be published in MP4 format – they are then easily and quickly accessed on any device. And using scaled vector graphics (SVG’s) ensures that they are clear on any screen size. If you yourself do not know how to achieve these things, you’re not a “dummy.” Just find a developer who can do this for you. Do not sacrifice good engagement and user experience with media just because you are unsure how to do it.

Navigation – Honor All Devices

Creating an e-course for PC’s was pretty simple. You had buttons for a mouse to click. Participants had keyboards. Now, participants will have a stylus or a finger as well. How are navigation buttons positioned for mobile devices? Consider, for example, how a participant may be holding a phone and using thumbs for navigation. Are those buttons large enough? Are they at the bottom portion of the screen so that touching is easy?

Planning and developing a responsive e-course has added a new dimension to traditional eLearning, to be sure. Design and development has become more complex, no that mobile devices have been added to the mix. But the goal supersedes any additional work this may cause for you. Participants must be able to access your course on multiple devices and have comfort in doing that.

These 5 considerations are the critical points in design and development. There are many more specific tips and strategies that should also drive your planning. Use them, and you will have learners who engage, who more easily master the content, and who appreciate that everything is easy to access.

One Response

  1. Great points. Especially
    Great points. Especially glad you pointed out advantage of SVG!
    One thing though – phones and landscape mode. Often I’ve found users use landscape only because some of the more popular tools don’t support responsive design, and thus everything is shrunk (a responsive player helps, but just shrinking the screen isn’t true responsive). If the author can use a true responsive authoring environment, such as dominKnow’s Flow, then they typically won’t even experience the landscape vs portrait problem, as the screen will adjust and change instead of just shrinking or expanding.

No Image Available

Get the latest from TrainingZone.

Elevate your L&D expertise by subscribing to TrainingZone’s newsletter! Get curated insights, premium reports, and event updates from industry leaders.


Thank you!