Find out the solutions to two major problems in developing responsive e-learning courses.
We live in a multi-device world. A study by Google revealed 98% of Internet users switch between devices with varying screen sizes in a single day. The phenomenal growth in the use of multiple devices to access the Internet is compelling organizations to make their online content responsive i.e., adapt to screens of various sizes, and e-learning courses are no exception.
What does it take to develop a device-agnostic online course? How can you create responsive technology-enabled learning content that provides good experiences to your staff members, irrespective of the device on which it is accessed? Well, you need to overcome two major challenges.
Challenge #1: Determining the right development approach
How do you go about developing a responsive e-learning product? What does it take to adapt your learning content to a wide range of devices, deal with multiple code frameworks, and develop several scripts, in an effective manner?
Solution: Many e-learning developers follow the “big-to-small” approach. This approach calls for the desktop version of the online course to be created first.Once this version is ready, it is tweaked to make it responsive to the screens of different mobile devices. A major problem with this approach is that, developers often tend to include elements such as non-vector images and lengthy paragraphs of text in the desktop version, which cannot be rendered well on most smartphones and tablet PCs. To avoid this problem, it is better to adopt the opposite approach – create the course first for mobiles.
Jeremy Girard, in his insightful article 10 rules of best practice for responsive design, advises developers to list all e-learning content elements, rank them in terms of priority, and incorporate them in the smallest screen. Then, as you move to bigger view ports, such as an iPad or a desktop, you can include additional elements.
Challenge #2: Ensuring images are rendered well across all devices
What can you do to ensure the images in your online course are seen clearly on all devices? How can you come up with a device-agnostic visual design strategy for your technology-enabled learning material?
Solution: You need to make the best use of Cascading Style Sheets (CSS) to ensure your images fit seamlessly on screens of all devices. One of the most effective and widely used solutions is to set the max-width property of the image to 100%. This image will scale down if needed, but never scale up more than its original size. This prevents the image from becoming blurred when it is delivered on a PC or any device with a large screen. Another good idea is to use the media queries feature of CSS to display different images on different devices. Here is an example.
The above image is large and can be displayed effectively on desktop computers. However, it may not be rendered well on mobile devices. So, this image can be replaced with the following, when the content is accessed on tablet PCs.
Thus, we see overcoming these two major challenges goes a long way in creating good responsive e-learning courses that cater to the needs of learners who use multiple devices. Hope you found this post useful. Do share your views.
