Is Your Design Really “Responsive?”

 

One of the biggest points of confusion I’ve seen evolve in recent years is how people use the word “responsive” when speaking about device-independent eLearning. How can it be that people can interpret one word so differently?

Over time, “responsive” has become the preferred word used when talking about device-independent development. Developing for multiple devices impacts both the developer—in the design and development process—and the learner—through the user experience and how content displays—and by using such a broad term, the lack of specificity leads to confusion and often frustration and disappointment.

There are actually three primary methods leveraged when creating content for multiple devices:

• [Fluid] Responsive (RWD)
• Adaptive
• Scaled

Each of these has their own specific nuances which impact both how we design and develop our content and how our work looks to the user on different viewports (devices and orientations).

To ensure a team is on the same page, it’s important that early in the process, they are specific about their strategy for learner experience on multiple devices. From there, they can select the correct development tool, and methods for how they will craft their content.

First, a little history…

In May 2010, Ethan Marcotte coined the term “Responsive Web Design” (RWD) in an article he wrote for A List Apart where he suggested using a fluid grid system to enable webpages to “respond” to the device viewport. The goal was to improve the user experience and to maximize efficiency for the developer, who only had to create one set of code.

Since then, product marketing teams have keyed into the term “responsive” to convey that their products can enable developers to create content which can display on multiple devices. While this is technically true, they employ different approaches which may not be true to the fluid nature of Marcotte’s “Responsive Web Design.”

To help clarify Marcotte’s type of responsive development from the general term “responsive,” we will refer to it as Fluid Responsive.

What This Means to Us

As eLearning professionals, not being specific about which method fits best with our goals makes it difficult for us to understand which method(s) different tools support, which in turn impacts not only how we develop the pages for our learners, but how we design the content for optimal learning and user experience.

Development Methods

For now, we’re going to set aside the nuances and explain the differences between Fluid Responsive, Adaptive, and Scaled Web Design and show you some examples so you can compare the differences.

Fluid Responsive

Serves the same HTML page (codebase) to multiple devices which will respond to the device size and orientation. On the level supported most widely by eLearning tools, the content is the same, but the page’s layout changes based on the viewport (think of this as the device, size, resolution, orientation).

• Pros: Developer creates one version of each page which supports multiple viewports, streamlined maintenance and flexibility for future viewport sizes
• Cons: Can be difficult and time-consuming to control how pages “flow” and how content displays, development environment not as “visual” as we’ve become accustomed to, learning curve, “newer” option in eLearning tools—more prone to bugs and growing pains

Popular authoring tools: Captivate (2017), Rise, Adapt

Adaptive

Serves different versions of the HTML page to different viewports. While adaptive web design (AWD) can be a subset of responsive web design (RWD), in terms of eLearning authoring tools, this currently means serving different HTML pages (codebases) to different viewports.

• Pros: Pages and content can be adapted (customized) for each viewport, developers can control where each object displays for each viewport.
• Cons: Developer must create a “version” of each page for each viewport supported, which can be time-consuming. Different pages are served for each viewport (i.e. portrait vs. landscape) which can cause some latency for the users or eat into data plans.

Popular authoring tools: Captivate, Lectora

Scaled

The content “page” resizes to fit the device, as if you were to take an image in PowerPoint or a graphic design tool and resize it to be smaller or larger.

• Pros: Developer creates one version of each page
• Cons: Some interactions can be difficult for the user to interact with, some content or images may be difficult for the user to view.

Popular authoring tools: Storyline (Note: while the player is responsive, the content is scaled)

At eLearning Brothers, we understand these differences, their pros and cons, and which tools and methods will best support your learning objectives and are happy to consult and review the different options with you as part of our service. Contact our custom team for more information.

 

Source link