Responsive eLearning Design Considerations
According to a report from Towards Maturity back in 2013, 47% of organisations were using mobile devices in their training programmes which, according to eLearning Industry is boosting engagement and knowledge retention. 60% of people now use a Smartphone for work according to an article from Forbes and the Bring Your Own Device concept is becoming more prevalent, with Frost & Sullivan reporting that using portable devices for work tasks saves employees 58 minutes per day while increasing productivity by 34%.
If you haven’t already considered offering mobile learning, there’s a strong business case for it but it also presents new challenges, not least for instructional designers, and shouldn't be embarked upon without careful planning.
Design Once for any Device!
There is much more to consider when designing responsive eLearning to ensure that content is accessible on different devices and screen sizes. One of the key decisions is to select the right authoring tool that will make it easy for you to design responsive learning content. We use dominKnow | ONE which offers two authoring modes that support learning on multiple devices. Claro provides rapid authoring features where you can design for a fixed layout but the content will still adapt for different screen sizes. Flow offers truly responsive eLearning design and outputs to any device so that, when your eLearning course is published, it automatically responds to the screen size of the device, resizing and repositioning the content.
Responsive eLearning design is all about the width of your screen. Users are used to scrolling up and down but the width of the screen is important because reading and following content becomes more difficult when a user needs to scroll right or left. You need to ensure that whatever authoring tool you choose you can design your content to respond (changes size, position and also the content itself) depending on the screen width.
Responsive Design Considerations
There is additional planning required when designing responsive eLearning that you would not necessarily consider when creating a static course. However, the basic process of identifying the learning needs, storyboarding a course to meet the learning needs/outcomes and testing your design using a prototype still holds true.
Think Mobile First
“Mobile first” is often associated with responsive design. The theory is that you build key elements and interactivity on the smallest device size first before moving into larger screen sizes. The belief is that working this way ensures that every device will have the key content and that the smaller devices will not become poor cousins of larger screen devices.
If we think of learning outcomes/objectives in the same way, it forces us to break them down into individual “tasks” that can be tackled on a mobile device as bite-sized learning. When moving to larger screen sizes we can expand on these tasks, if required, without losing the core objective of the page. The tasks themselves, while having the same learning objective, may have a different structure or complexity due to how users interact with different device types.
Breakpoints
In addition to your learning objectives, you need to think more carefully about page design, with particular consideration of your breakpoints for each page. Breakpoints are a key concept in responsive eLearning design. These are the points within the content where you are moving from one screen size to another and you may need to change the layout of your screen. There are a number of responsive frameworks within the industry and dominKnow | ONE is aligned with Bootstrap, which has four different breakpoints: large and medium (for desktops), small (for tablets) and extra small (for mobile phones).
Storyboarding
A consistent user experience is essential when designing learning content for use across multiple devices. To ensure this, start by creating a storyboard. If you have chosen an authoring platform such as dominKnow | ONE you could use that as your initial storyboard tool. When building your storyboard, consider:
- Learning Objectives
- Course Look and Feel
- Flow and Navigation
- Learner Interactions
- Narration Script (if required)
Customised Actions
There may be instances when you want to make an element change at specific screen widths. For example, on a wide-screen learners may use button-based events to walk through a series of steps, but on a smartphone they may be presented with a video instead. Breakpoints allow you to set different variables so, for example, you can say at this screen size I want this particular image to disappear. If you choose an authoring tool such as dominKnow | ONE all of these customisations are built in the same page so you don’t have to build sub-sections or different pages for different device sizes.
Another important consideration with responsive eLearning design is that all of your content will gravitate to the left-hand side of the screen. If you add a customised action at a particular breakpoint which removes something on the left side of a page, then the content that remains will shift over to fill the space.
Prototype and Test
Once you have completed your Storyboard, the next step is to create a working prototype to test your design principles and confirm that your course will function as intended. Start with your Theme, as this will confirm your navigation options. It's important to build the prototype based on your Storyboard but it doesn't need to include all of the content; page titles will do but make sure you identify each page type and unique functionality.
Remember to look at all of your breakpoints to ensure that each page works across all devices. If you find that any functionality does not work, you need to decide whether the whole course has to be redesigned or if there is a workaround. If you find gaps in the Storyboard, pause the prototype and work the gaps into your Storyboard design before continuing. It is important to avoid ending up with a prototype that does not reflect your Storyboard.
The prototype is ready when you have a course that demonstrates the navigation, functionality and placeholders for your content. Remember to test, test, test and test again using multiple device types.
More Information
Designing eLearning for multiple devices does take more time and effort than building a traditional desktop course. Most importantly you need to plan your content and consider exactly what you want your learners to see on different devices before you start to develop your course.
If you haven't already chosen your content authoring tool, you will find more information about dominKnow | ONE on our website including features such as rapid authoring and web-based collaboration for eLearning development teams.
Jamie Blacoe
Latest posts by Jamie Blacoe (see all)
- Review of Virtual Training Delivery Tools - September 11, 2020
- Introducing dominKnow | ONE - September 6, 2019
- Deployment of Learning Content using the UPK Knowledge Center - October 18, 2018