Emerging technologies in education are making e-learning 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 any time they have a few minutes to spare. This trend has a positive effect on engagement, but it also means that e-learning content has to be optimized for these users. In other words, you need to apply responsive design principles to e-learning content to deliver an optimal and seamless experience to all users, who are 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 than 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 e-learning 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 e-learning content both desktop- and mobile-friendly.
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 learners' attention from the top of the page, and make sure there is a logical progression between the elements.
Small Blocks and Components
Mobile users won't engage with e-learning 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 e-learning content might need restructuring into small components. Take advantage of your learning data to figure out the average time a mobile user spent in each session so you can determine the optimal length of each module.
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.
Prioritizing 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. Essential information should always come first.
Make sure your e-learning programs are flexible enough and that users can easily move on to the next module and review the same content later on a desktop.
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.