SHIFT's eLearning Blog

Our blog provides the best practices, tips, and inspiration for corporate training, instructional design, eLearning and mLearning.

To visit the Spanish blog, click here
All Posts

What is Responsive eLearning Design: MythBusters 

“Responsive” is IN. It is the buzzword amongst web designers, website developers, and content creators. And it is time eLearning professionals learned it as well. Your learners have access to a host of devices with different display capabilities. After working hard to design and develop a course, you will want it to show up in all its glory and fidelity whatever the device it runs on. 

But wait… What is Responsive Design?

In Responsive Web Design (RWD), the on-screen content realigns itself automatically depending on the size and resolution of the screen it is being displayed on. This ensures optimal viewing performance irrespective of the nature of the device. 

For instance, if you are viewing a course that features a Responsive Design, be assured that you won’t be made to pan endlessly or squint to read the text even if you choose to access it on your hand-held mobile device whose screen is smaller than that of your PC. The various graphical and textual elements will size and orient themselves automatically to match the dimensions of the screen. Similarly, you won’t have to resize the various on-screen elements if you choose to view the course on your laptop.

See: 50 Examples of Responsive Web Design

Busting the Myths Surrounding Responsive Design

The unique features and the novelty of the concept of Responsive Design have propounded several myths. You now know what is Responsive Design. Now learn what it is NOT. Here are the myth-busters:

Myth #1: Responsive = Mobile

This is the biggest myth that surrounds Responsive Design, partly because the concept came into being as more and more people started using smartphones and other hand-held mobile devices to access digital content.

A mobile-optimized eLearning design is one that is exclusively developed to be viewed on smartphones and tablets. 

Responsive Design actually means that there is only one version of your course that can be viewed optimally on all types of devices, including mobile devices. So a course that incorporates a Responsive Design shows up as intended not only on smartphones and tablets (both with standard and retina displays) but also on desktop PCs with many different resolutions like the usual 1024x768 and 800x600 pixels, 1366x768 pixels, and 1920x1080 pixels.

Responsive eLearning courses "respond" to  ALL devices, not just mobile. 

(VIDEO) Mobile Websites vs. Responsive Designed Websites

Myth #2: Responsive means HTML5

This is also one of the most common myths surrounding Responsive Design.

Responsive Design refers to a particular approach that lays down how a course should look and behave like so that it can be accessed optimally across many different platforms. HTML5 is a technology that lets you execute your designs whatever they may be. To be more specific, HTML5 is the latest version of HTML, which is the standard markup language used to create websites.

Responsive Design and HTML5 are NOT mutually exclusive. But they do share a powerful feature: cross-device compatibility. It is this feature that lets them pack in a punch when they are thrown in together! 

HTML5 lets you create device-independent eLearning courses that can be accessed anywhere and even without an Internet connection because it lets you save and store content offline. This makes responsive eLearning courses built with HTML5 convenient for learners.

Read: The Relationship Between HTML5 and Responsive Web Design

Myth #3: Content display is the same

It is a common misconception that content that incorporates Responsive Design looks exactly the same across devices, only larger or smaller depending on the size of the screen. That's wrong.

Responsive Design does not mean that you just resize your page as you take your course across devices. In fact, if you do only this, you are not even creating Responsive Design!

The appeal of Responsive Design is that it takes into account the unique technical specifications and performance standards of every device. It finds its way around the limitations of a device to deliver an optimal viewing and/or browsing experience. This means that your page will NOT look the same across devices, but it will look familiar because it will adhere to the same overarching style guidelines. The content will be more or less (note the phrase “more or less”) similar across devices, but there will be differences in how the various elements are arranged on a screen, how they are spaced across screens, and what kind of viewing experience the course delivers.

Below is a representation of how the content from a responsive site looks on a smartphone, on a tablet and on a desktop.

Now consider content block 3B.

On the desktop, this content block is on a highly visible part of the screen. You would want to place a critical piece of content in this block. But on a smartphone, this content block has got pushed back by several screens and has to be accessed by scrolling. Ideally, you should not place critical content here; it is good for nice-to-know information.

Myth #4: Responsive eLearning Design is Just a Fad

On the contrary, Responsive eLearning Design is here to stay. Period.

The ever-increasing use of mobile devices means that more and more learners have now access to multiple platforms. They will, of course, demand consistent viewing experiences across all devices. Besides, your corporate learners are busy people.

With meetings and presentations crowding their days, they are hardly tethered to their desks. They might prefer to take your course at a time that is convenient for them and on a device that they can readily access wherever they may be.

Now that you know Responsive Design is not going away anytime soon, it is time you upped your skills. After all, you will want to keep pace with your learners as they switch to newer devices and create courses that will hold their own in a multi-screen world.


So, Why Should eLearning Professionals Care?

With the BYOD revolution slowly creeping in at workplaces, it is likely that your learners use a lot of different devices and browsers to view your course. Therefore, you have to know about the benefits it affords to you as a designer and to your learners. Incorporating Responsive Design into your courses ensures that you don’t have to create different versions for different devices. Read more benefits here.

responsive ebook


Karla Gutierrez
Karla Gutierrez
Karla is an Inbound Marketer @Aura Interactiva, the developers of SHIFT. ES:Karla is an Inbound Marketer @Aura Interactiva, the developers of SHIFT.

Related Posts

The 4 Adult Learning Elements You Should Include in Your eLearning Courses

Adult Learning highlights that adult learners are fundamentally different in their methods of learning in comparison with children. As an L&D professional, you need to understand these differences and figure out the best ways to apply them to meet your learner's needs. With adult learners, you will encounter unique expectations, demands, and challenges. The key is to accommodate these and design training and eLearning courses in a manner that is most effective and engaging for them. While there are multiple methodologies to make this happen, there is a model proposed by Lila Davachi, Associate Professor of Psychology at New York University that is known to be effective. Known as AGES (Attention-Generation-Emotion-Spacing), this model highlights four key elements that are essential for effective adult learning to happen. 

  • 9 min read
  • Fri, May 20, 2022 @ 01:51 PM

The Key Principles of High-Quality Instructional Design

The quality of instructional design is often gauged on three things: effectiveness, efficiency, and cost.  Effectiveness has to do with how well the instruction enables learners to achieve stated goals or expected outcomes. Efficiency deals with the energy and time invested to complete the instruction while cost covers all expenses incurred for its design and delivery.  These are good points, to begin with. It's equally important, however, to zero in on the details involving the design and development of quality instruction. As with any other good design principles, there are human characteristics deeply involved here.  Richard Buchanan, a professor of Design, Management, and Information Systems, said it best: “a good design can be defined not only to be creative, stylish with an extraordinary visual look, but it must consider human engagement in its activities.” Follow these five golden principles to help you achieve high-quality instructional design:

  • 8 min read
  • Wed, May 18, 2022 @ 05:55 PM

Learner-centered e-Learning Design: 4 Steps to Get There

Take a moment to step back from your role as an eLearning designer, instructor, or course developer and focus on yourself as a learner. Answer these questions:  How do you learn best? What learning activities are the most motivational to you? How do you interact with other learners? What do you struggle with when learning new information or mastering a new skill?  Understanding your own learning preferences is an excellent place to start when considering the benefits of a learner-centered eLearning model.

  • 9 min read
  • Sat, May 14, 2022 @ 08:17 AM