The days of learning only using a wide-format desktop screen are long gone. In fact, with the proliferation of devices with multiple screen sizes, it’s hard to know exactly which screens a course designer should use. So, what should Instructional Designers do? The answer is: Use responsive design techniques for the best results!
The eLearning Challenge At Hand
Responsive design addresses a real-life challenge that eLearning course designers and developers face. With portable devices and smartphones today, online learners can start a course on their 24-inch screen desktop at home, continue it on a 12-inch screen tablet during lunch, and finish a module on a 6-inch smartphone during their evening commute.
Then, as they relax at home, they can review and revise key learning points on their 60-inch Smart TV. And if that’s not enough, they could even take a pop quiz using their 2-inch smartwatch screen! The challenge with these scenarios is that conventional course design principles just won’t allow the learner to get the most out of the course.
A traditional course, designed for widescreen without following responsive design principles, will likely obfuscate a lot of the content when viewed on smaller screens. And if you design exclusively for mobile devices, you’ll likely have to forgo large video-based content or elements that use heavy graphics. If you don’t, then learners could be waiting 10-15 minutes for a module to download! One solution could be to “hard code” the design so only specific modules are accessible via small-factor devices (like tablets and smartphones), while others may be viewed on larger-screen devices. But that would be overly restrictive for the learner.
Responsive Design Principles
The responsive design framework helps course designers address these challenges and create flexible eLearning courses that are accessible across devices and screen types and sizes. However, responsive content just doesn’t happen, you need to follow some rules to produce it. Here are 4 eLearning course responsive design rules to follow:
- Go Back To The Basics
Conventional course designers, who developed courses for desktops, had a lot more screen real-estate to play with. As a result, you could add many more bells and whistles to a course and still not compromise on delivering your learning objectives. But with responsive design, you need to rethink that strategy.
For example, it’s possible to offer access to learning content through multiple devices and screens. However, notice how the smartphone rendition (not “version”—more on this later!) of a website differs from the desktop version.
For the site to be responsive, developers have to work around (but not necessarily forgo) some of the basic features typically seen on a desktop screen. A graphics-intensive background is minimized and, in line with responsive design rules, the registration form will need to be placed elsewhere—accessible either lower down on the screen or through another link on the smartphone version.
- Vary Your Content
Sometimes, the topics covered might be such that a particular subject matter just can’t be omitted. Responsive design principles allow you to deal with that challenge too. For example, where large videos might be viable to host on a desktop version, screening excerpts of the video on small form-factor devices, like tablets or smartphones, maybe more practical.
This means that you won’t compromise too much on the quality of the overall course, while at the same time making it possible for you to deliver your overall learning objectives.
- Changing Views
With responsive design, course developers will need to get used to change the view of course content for their learners. Tablets, which are typically higher-pixel devices with lengthier screens, will need to position text-based content differently than, say, laptop screens, which are usually narrower than tablet devices.
Tech training provider Treehouse is a great example of how this works. Although learners will be exposed to the same content, as they switch devices they will experience different views of the same content, which gets smaller and narrower as you move from a desktop to a mobile device.
Responsive design doesn’t just impact static content, like text and images, but must also factor in entry forms, which may be used to capture learner feedback. For example, the desktop/laptop version is viewed as two-columnar forms, but tablet and mobile devices will capture the same feedback, but as a four-column form.
- Test Before Release
With responsive design comes one golden rule that no Instructional Designer should ignore: Test…and then test some more!
These days, there are a number of simulators that developers can use to mimic the functionality of various devices without actually having to run the course using multiple devices. However, responsible responsive design testing would likely not approve of such an approach.
To get the best results from your design efforts, make sure you:
- Use multiple physical devices: desktops, laptops, tablets, smartphones with various screen sizes, and even smartwatches (if required)
- Test your creation on multiple platforms: iOS for Apple, Windows, Android, and any other widely supported OS’s
- Don’t just test key functionality, like navigation and input, but do an end-to-end test to see how the entire course looks and feels.
Ideally, best practices for responsive design testing would have you test all of these functionalities side-by-side to evaluate what “looks good’ in one environment, and what doesn’t work too well in another. Then, armed with your test results, you should be open to revamping or tweaking functionality where required.
Common Responsive Design Misconceptions
Finally, it’s important to understand that responsive design does not mean building multiple “versions” of the course. If that were the case, then responsive course designers would spend endless hours fixing and updating multiple versions of code whenever a site upgrade is released. Responsive design does not mean “mobile-enabled design.” Instead, responsive design is all about “building it once, and using it on multiple devices.”
And what enables this single-design, multi-purpose use? It’s design characteristics, like Flexible Grids and Flexi images, that course developers can tap into to create responsiveness in their course designs.
Development tools such as HTML and CSS allow content to dynamically respond to the device on which it is being displayed.
Using developer tools that support responsive design, like Adobe Captivate (2019 release) and Fluid boxes 2.0, can also give you a powerful start to giving your current content a responsive makeover.
Following these simple rules of responsive design will not only make your courses cross-device compatible, but it’ll also make them more search engine friendly.