Emerging technologies in education are making eLearning content more accessible than ever before. Learners often engage with this content not only through desktop computers but also through their smartphones or tablets to consume valuable information anytime they have a few minutes to spare. This trend has a positive effect on engagement, but it means that eLearning content has to be optimized for these users. In other words, you need to apply responsive design principles to eLearning content to deliver an optimal and seamless experience to all users using multiple devices.
One of the common practices of responsive design is to allow mobile users, for example, to access content on a smaller screen from smartphones or tablets. Most websites resize when accessed on a mobile device, and some of the content might be hidden or replaced.
There are a few challenges unique to applying responsive design principles to eLearning content. Course designers often use a slide-based design to present information, and the content is often rich in images and interactive elements. In a lot of cases, the position of media and interactive elements in relation to text content can't go through drastic change. Here is how you can apply responsive design principles to make eLearning content both desktop and mobile-friendly.
Responsive eLearning Design Tip #1: Scrolling
While the desktop version can keep the slideshow format (usually the first section you see on a homepage), you can replace slide-based content with mini-webpages that users can scroll through. Assign a fixed position for media and interactive elements, so they are always displayed next to relevant paragraphs.
Stacking elements and having learners scroll through them can also become a powerful storytelling technique. Remember to choose elements that will grab learner's attention from the top of the page, and make sure there is a logical progression between the elements.
Responsive eLearning Design Tip #2: Small Blocks and Components
Mobile users won't engage with eLearning content in the same way as desktop users do. You need to organize everything in small blocks and components since mobile users' sessions will probably be much shorter.
To accommodate mobile users at the same time, you can embrace microlearning by organizing information in small blocks that go straight to the point. When combined with a design that relies on scrolling, small components will prevent users from scrolling for a long time.
Existing eLearning content might need restructuring into small components. Take advantage of your learning data to figure out the average time a mobile user's spent in each session so that you can determine the optimal length of each module.
Responsive eLearning Design Tip #3: Hide or Swap Content
You can keep all your images in your desktop version. However, you can hide from mobile users some images that are for illustration purposes without adding any value to the content. You can replace other photos with low-resolution versions to speed up the loading time.
Responsive eLearning Design Tip #4: Prioritize and Testing Content
It is possible to display several components on one screen for a desktop user. However, a mobile user will have to scroll to display these same elements. Encourage course designers to think about the order in which the page displays the blocks and components. The essential information should always come first.
Make sure that your eLearning programs are flexible enough and that users can easily move on to the next module and review the same content later on a desktop. You should also provide learners with a simple way to report any issues they encounter and have the option to submit screenshots.
Lastly, to ensure the responsive design is optimized for all devices, you can arrange testing with a small group of people with different devices and have them experience the platform and comment on any technical or UX issues.
Lambda Solutions can give you a hand on making eLearning content accessible to both desktop and mobile users. We can walk you through the implementation process for solutions such as Moodle and Totara Learn. We can also show you how to integrate our existing library of eLearning courses into your training programs!
To learn more about content in eLearning, watch our on-demand webinar on How to Easily Create Interactive Content in Your LMS:
