Responsive eLearning Design: What Is It, and How Does It Work?

Written By

Adam Stone

March 16, 2017

Your eLearners are mobile, and your content needs to follow them wherever they go. The generic solution for this is “responsive web design,” a development paradigm that adjusts content to fit different display sizes, to be usable, and to support the designer’s goals across desktop, tablet, and mobile platforms.

The retail and advertising worlds already understand the value of responsive design, where designer goals center on gaining higher mobile click rates, as much as 55 percent higher. But in eLearning, the designers have different goals, relating to increased learning and on-the-job performance. As a result, responsive eLearning design has nuances all its own. To clarify just how responsive design works in an eLearning environment, we checked in with a round-up of leading experts:

Adam Stone: What are the goals of responsive design for eLearning?

Jeff Batt: Responsive design means your content responds and changes to fit the size of your phone. If it stays the same dimensions, then it is not responsive—it is just scaling. Responsive is changing width, height, and position of your content to be the best layout for your phone. It ensures the content fits the size and dimensions of the phone, therefore giving the user the best possible layout experience with the content presented.

Mark Lassoff: Responsive design aims to optimize the learning experience based on the device being used to access learning content. For example, on a mobile device with very limited screen real estate, superfluous items may be hidden initially and revealed only when relevant.

Paul Schneider: At its base level, responsive design means that eLearning content is designed so that it will respond and adjust to differing screen sizes, viewports, or widths. However, the details are what get you. “True” responsive design means the learning content is developed using fluid, proportion-based grids, flexible content (e.g., images, media, text), and adaptive rules (CSS3 that controls and adjust content based on screen widths) to present the best possible experience for the device and screen width learners are using. The overall goal of responsive learning-content design is to provide a single-sourced content item that provides the best possible experience for learners, no matter what device they are using to consume your learning today or tomorrow.

Stone: How do I know whether my content is already responsive?

Joe Ganci: You can test the responsiveness of a website simply by opening your browser on your desktop or laptop and then slowly pulling in the right or left side of the browser to make the window narrower. The contents of the website should change constantly as you do so. The images and other elements may at first begin to shrink, but at a certain point, the images may reposition themselves or disappear altogether. 

Stone: When would you need to use scripting or markup language (for example, HTML5, JavaScript, and CSS) in addition to an eLearning authoring tool to support responsive design?

Batt: Some eLearning tools support responsiveness to a point, but there is a lot that they don’t do. Every standard eLearning tool produces HTML, CSS, and JavaScript. I think we always need to be aware of it as content creators. The more we know about how the content is produced, the more flexible it becomes to us.

Lassoff: Most contemporary eLearning authoring software supports responsive design, but the implementation and degree of control an author might have varies from tool to tool. As with anything else, knowing HTML5, JavaScript, and CSS will give producers ultimate control over their eLearning content. With this knowledge one can go in, edit the code produced by the eLearning tool, and have more precise control over the experience on mobile and larger devices like tablets or laptops. This approach, of course, gives eLearning producers the highest degree of control over their work.

Stone: Some things just won’t work on a small screen. What to leave out? How do you evaluate your content when planning for mobility?

Batt: Sometimes people get upset when things are missing on the phone that are visible on the desktop. So I don’t think it’s a matter of showing less on the phone, but showing it in a way that is better suited for a phone display. Sometimes that does mean hiding an image that looks better on a desktop device and showing an alternate image that looks better on a phone.

Lassoff: Small screens and fat thumbs are a bad combination. I leave anything out that requires manual dexterity and space. Drag-and-drop interactions, for example, don’t work well in mobile.

Schneider: Software simulations don’t work as well. The software people use often isn’t responsive, so other than shrinking, it really isn’t designed for this approach. Another is the classic “PowerPoint + audio + quiz = eLearning.” PowerPoint itself isn’t a responsive environment, and further, mobile device operating systems strongly try to prevent the development of the classic passive, audio-driven PowerPoint content. They use movies for that instead.

Stone: Are there eLearning authoring tools that have “baked in” support for responsive design? Name a couple of examples.

Schneider: Tools have continued to emerge providing these variations of responsive learning. Some shrink-to-fit are iSpring, Storyline, and dominKnow Claro. Multi-device authoring design is found in Captivate and Lectora. True responsive design can be achieved with Elucidat, dominKnow Flow, Rise, and Gomo.

Ganci: The most robust at offering responsive design today is Adobe Captivate. It allows for up to five breakpoints, or resolutions, and you can switch between them at any time. You also have some leeway in changing the resolutions seen below for each breakpoint. The five breakpoints are as follows:

  • Desktop with a viewport of 1024x627
  • Tablet landscape with a viewport of 896x627
  • Tablet portrait with a viewport of 768x627
  • Mobile landscape with a viewport of 667x410 
  • Mobile portrait with a viewport of 360x460

The breakpoints represent the widths of the most common devices, so it’s unlikely that learners will encounter badly formatted screen contents.

Another authoring tool that offers strong responsive design abilities is Trivantis Lectora. It also uses five breakpoints and has some good features to make it easier to create responsive projects, but it lacks several of the features that Captivate offers. Certainly, though, I’d have no problem using Lectora to create responsive projects.

Related presentations at Learning Solutions 2017 and FocusOn Learning 2017

Three of the four experts who contributed to this article are scheduled to present sessions at upcoming conferences produced by The eLearning Guild.

At Learning Solutions 2017 Conference & Expo, March 22 – 24 in Orlando, Florida:

Ahead of FocusOn Learning 2017 Conference & Expo, June 20 – 22 in San Diego, California:

More Design

You May Also Like