Designing content to work seamlessly across different devices is a basic requirement these days. Need some inspiration for how to do that? Here are six responsive elearning design examples that get it right.
Responsive design is no longer a nice-to-have. If you want to reach your learners, you need to deliver content to all the devices they might choose to use – desktops, laptops, tablets and smartphones. And you need to deliver an equally good (not necessarily exactly the same) experience across all devices.
Take a look at these examples of elearning design that hits the mark across different screen sizes.
1. Beautifully simple scrolling pages
Remember when good elearning design meant not requiring the user to scroll? These days, scrolling can actually be key to creating a brilliant mobile-friendly learning experience. This scenario is a good example of just that.
Why it works:
- It takes its cues from multi-device web pages: beautifully-designed content, cleverly laid out on scrolling pages
- The design makes good use of blocks of color, sub-headings and different fonts to break up the content and lay it out in an easy-to-read, compelling way
- Although it’s text-driven, it’s not text-heavy; even when viewed on a smartphone screen, no chunk of content is more than half a dozen lines long
- The visuals (full-width photo backgrounds and clean, sketch-style graphics) have been chosen for their impact across multiple devices
- Each scrolling page ends with a simple interaction that maintains momentum and sets up a little cliffhanger to make the learner want to continue to the next page
2. Responsive elearning using audio and video
This micro guide to using audio and video in elearning demonstrates that embracing responsive design doesn’t mean steering clear of multimedia elements.
Why it works:
- The hamburger menu is always visible, so even on a small screen the learner can quickly and easily check where they are and jump backwards or forwards
- It recognizes that people viewing on a mobile device may not be somewhere they can play audio aloud, so the elearning content isn’t dependent on audio
- Whatever size screen it’s played on, videos are embedded on the page
- The graphics are deliberately simple and easily recognizable icons, rather than detailed illustrations or photographs that can lose impact or message when shrunk down
- It makes great use of Elucidat’s interaction and Layout Designer options to keep the eye moving, add interest and make sure the content doesn’t feel too dense
3. Mobile-first design for on-the-job performance support
Mobile devices come into their own for on-the-job performance support, like this retail example. When you need to keep staff up-to-date without removing them from the workplace, mobile-first design lets you put practical performance support literally in the palms of their hands.
Why it works:
- This is really all about speed and ease of use – a learner on the shop floor with a customer in front of them can reach the content they need within a couple of taps
- A clear and simple menu, accessible at all times, makes it super easy for the user to find what they need, be that a detail about the product itself or support to make the sale
- Elucidat’s interactions are used wisely and with purpose – they break the content up into micro-chunks, each answering a very specific question
- The home page includes just enough visual detail to engage users accessing the content on a just-in-case basis without slowing down the experience for just-in-time users!
- The content is identical across all screen sizes and it works seamlessly across devices, which is a crucial factor in providing real-time performance support
4. An interactive one-page resource
If you have a collection of content that isn’t fully responsive, one solution is to create a simple one-page resource that is responsive and use it as a launch point to the other content. Take our very own pre-onboarding resource as an example. Curation, smartly done.
Why it works:
- A single page that pulls together what a new employee really wants and needs to know before starting shows that digital learning can be short and simple, but still valuable
- It grabs and keeps attention at any screen size with a bold photographic header, clearly labeled sections and interesting, relevant images throughout
- As relevant content changes, it’s really easy to just edit the links on this one page and make sure the pre-boarding experience is always up-to-date and relevant
- This is much more engaging and inspiring than delivering pre-joining content on paper (with no useful links) or via a dense and uninspiring email (often with too many links!)
- The menu and navigation adapt to the screen size – hamburger menu on small screens, but a visually helpful Page Progress Indicator approach on bigger screens
5. A complex guide make into a digestible ebook
When we wanted to increase engagement with our text-heavy analytic guide, we created a responsive ebook style design. This approach could work for you if you need to make dense or detailed information easier to digest.
Why it works:
- The content is organized into clearly labeled chapters, each of which is a single scrolling page, so the contents list is not overwhelmingly long
- Each chapter has its own internal “page contents” menu, so the user can easily see what that chapter covers and jump directly to a particular part of the chapter page if needed
- Column layouts are used to make the best use of the available real estate, whatever the screen size (notice the placement of the page contents menu on different devices)
- The user can jot down notes within the elearning itself using Elucidat Clips and view them all in one need place – perfect if they are using their phone on a busy train, unable to dig out their notebook and pen!
6. Re-designed visuals for different screen sizes
Designing a responsive elearning course is all about creating an optimal experience for each device. Sometimes that means removing or redesigning something for smaller screens, modifying the experience without losing the key content, as in this Open University example.
Why it works:
- The desktop version includes large pictures that illustrate the story being told as well as housing hotspots that deliver the learning content – engagement and content
- On a slightly smaller screen, the image is simply cut down slightly so that the hotspot text content still has room to be legible using Variations
- Viewed on a mobile, the interaction type changes because the smaller space doesn’t lend itself well to the image explorer activity
- The content and user experience is prioritized over the beautiful graphics, which would lose their impact and hinder the content if shrunk down to phone screen size anyway
These responsive elearning design examples show that delivering to multiple devices no longer means working to the lowest common denominator!
Interested in how you can improve your elearning design for tablets and smartphones? Ask us for a free trial of Elucidat and see what you can do.
Latest posts by Stephanie Dedhar (see all)
- 6 brilliant responsive elearning design examples - February 8, 2019
- 5 inspiring scenario-based elearning examples - February 1, 2019
- 5 brilliant examples of branching in elearning: branching scenario examples and more - January 23, 2019