“Responsive design” has been all the buzz in the last several years in the e-learning industry. E-Learning toolmakers have retrofitted their rapid authoring tools to be able to better cater to mobile devices while browsers are ditching their support of Flash in favor of HTML5 that can be rendered on any device. But when it comes to e-learning, the question still remains – is responsive design really necessary?

Many of our clients request responsive design out of the gate, and in an ideal world, ALL of our e-learning courses would be built to be responsive. But the reality is, using today’s e-learning rapid authoring tools, responsive design can take over 50% more development effort than the equivalent non-responsive course. When time equals money, that 50% adds up fast! So, when do we really need responsive design and when is it appropriate to just have a “scalable” solution? And is there something in between being fully responsive and not responsive at all? The answers come down to the devices and audience you’re targeting, but I’ll start by defining each.

Responsive Design Courses

An e-learning course that exhibits responsive design will adapt the page or slide contents to the screen size and orientation of the device being used to view it. The result is that what you see on a traditional desktop or laptop computer will be different from what you see on a smartphone. Further, what you see on a smartphone when you’re holding it in portrait orientation will likely also be different from what you see when you’re holding the phone in landscape orientation. Objects may be rearranged on screen or omitted entirely to fit smaller display sizes.

Scalable Courses

Courses that do not exhibit responsive design are instead, scalable. That is, the course will simply scale down (shrink) or scale up (grow) to fit the screen size on which it’s being displayed. All objects on screen remain in their same positions and nothing is omitted or rearranged. As a result, when you view the course on multiple devices, you’re simply viewing a scaled version of your course.

The following image shows a comparison of responsive design vs. scaling on mobile devices, in both landscape and portrait orientations. Mobile versions are derived from the same course you’d see on a traditional computer or laptop.

When should you or should you not use responsive design in e-learning?

Responsive design is all about usability. If you want your audience to be able to have a delightful experience engaging with your e-learning course on ANY device, in ANY orientation, responsive design is a must. Knowing your audience and what devices they use will only help with the decision. We recently created a course where the target audience was low-income, high-rise residents in New York City. We were told that the audience likely didn’t even have access to traditional computers. In this case, responsive design was extremely important and catering to smartphones was our primary objective.

Just as there are plenty of good reasons to include responsive design, there are also plenty of reasons not to. While cost and time are the most obvious considerations, also think about the nature of your e-learning, and think specifically about your learners’ engagement with smartphones. Tablets these days have similar display sizes and resolutions to traditional computers. Catering to tablets is relatively easy – it’s smartphones that throw the wrench into the equation. Notice in the image above, that the course on tablets, when in landscape orientation, is virtually the same whether responsive or scalable. This means that responsive design would not be necessary if you were only concerned with delivering to tablets. You can always steer the learner into using the tablet in landscape orientation while taking the course.

The In Between

It’s not necessarily an all-or-nothing decision. For example, you may decide that you do need responsive design, but you can simplify your efforts by only designing for landscape orientation only on smartphones and tablets. In addition, solutions such as the new responsive player introduced by Articulate with Storyline 360, provides users a more smartphone- and tablet-friendly player and controls (the wrapper containing the course content), while the course content itself scales to fit the device. These options provide a responsive experience for likely the vast majority of your audience without having to spend the extra effort and costs for full responsive design.

Determining What Level of Responsive Design You Need

So, what level of responsive design do you need for your course? There are several questions you can ask yourself to get closer to this answer. Take the short evaluation below to see what kind of decisions impact your answer and what solutions can likely work best.

What do the various authoring tools offer?

Now that you have a better idea of why you might need responsive design, you might be wondering what the major e-learning authoring tools offer. And which authoring tools are best? Be sure to read @DianeElkins blog Four Ways E-Learning Authoring Tools Handle Responsive Design and watch the corresponding video demo to learn a little about what each authoring tool offers with respect to responsive design features. If you happen to be at Learning Solutions at the end of March and are interested in a deep dive on the tools and what they can do, be sure to catch Diane’s session Friday, March 24, 2017 at 10:00am – Responsive Design: A Comparison of Popular Authoring Tools.

Which e-learning authoring tools do you like best for responsive design and why? Would love to hear your thoughts!

Leave a Comment

You must be logged in to post a comment.