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

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

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

Joe Ganci,president of eLearningJoe
PaulSchneider, PhD, seniorvice president of business development at dominKnow Learning Systems
Jeff Batt,founder and trainer at Learning Dojo
MarkLassoff, president of LearnToProgram.tv

Adam Stone: Whatare the goals of responsive design for eLearning?

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

Mark Lassoff: Responsive design aims to optimize thelearning 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 designmeans that eLearning content is designed so that it will respond and adjust todiffering screen sizes, viewports, or widths. However, the details are what getyou. “True” responsive design means the learning content is developed usingfluid, proportion-based grids, flexible content (e.g., images, media, text),and adaptive rules (CSS3 that controls and adjust content based on screenwidths) to present the best possible experience for the device and screen widthlearners are using. The overall goal of responsive learning-content design isto provide a single-sourced content item that provides the best possibleexperience for learners, no matter what device they are using to consume yourlearning today or tomorrow.

Stone: How doI know whether my content is already responsive?

Joe Ganci: You can test the responsiveness of awebsite simply by opening your browser on your desktop or laptop and thenslowly 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 imagesand other elements may at first begin to shrink, but at a certain point, the imagesmay reposition themselves or disappear altogether.

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

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

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

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

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

Lassoff: Small screens and fat thumbs are a badcombination. I leave anything out that requires manual dexterity andspace. 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, itreally isn’t designed for this approach. Another is the classic “PowerPoint + audio+ quiz = eLearning.” PowerPoint itself isn’t a responsive environment, andfurther, mobile device operating systems strongly try to prevent thedevelopment of the classic passive, audio-driven PowerPoint content. They usemovies for that instead.

Stone: Arethere eLearning authoring tools that have “baked in” support for responsivedesign? Name a couple of examples.

Schneider: Toolshave continued to emerge providing these variations of responsive learning. Someshrink-to-fit are iSpring, Storyline, and dominKnow Claro. Multi-deviceauthoring design is found in Captivate and Lectora. True responsive design canbe achieved with Elucidat, dominKnow Flow, Rise, and Gomo.

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

Desktop with aviewport of 1024×627
Tablet landscape witha viewport of 896×627
Tablet portrait witha viewport of 768×627
Mobile landscape witha viewport of 667×410
Mobile portrait witha viewport of 360×460

The breakpoints represent the widths of the most commondevices, so it’s unlikely that learners will encounter badly formatted screencontents.

Another authoring tool that offers strong responsive designabilities is Trivantis Lectora. It also uses five breakpoints and has somegood features to make it easier to create responsive projects, but it lacksseveral of the features that Captivate offers. Certainly, though, I’d have noproblem using Lectora to create responsive projects.

12 Learning and Development Projects That Actually Moved the Needle

D&D for Learning: Tricks of the Trade

Death by PowerPoint? Create Podcast-Style eLearning in 4 Simple Steps

Transforming Compliance Training: From Boring to Engaging

Training Needs Analysis Template

Become a Guild Insider

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

Related presentations at Learning Solutions 2017 and FocusOnLearning 2017

Share:

Contributor

Topics:

Related