Responsive: It’s been a tech buzzword for a few years now, especially in reference to web design. But what does it mean? And, more importantly, what does it mean for your e-learning?
First, let’s talk about “responsive” in its original web design context, and then we can see how it applies to e-learning—and why it matters.
What is responsive design?
Imagine you’ve been asked to design a content layout for a standard 8.5 x 11-inch sheet of paper. Designing for that piece of paper is pretty simple since all of the dimensions are fixed, right?
Now let's add a new requirement: We'd like you to morph that same content layout onto a 3 x 5-inch note card and an 11 x 14-inch legal-sized sheet of paper. Of course all of the content should remain easy to read no matter what size sheet of paper it’s on. When the dimensions become fluid, your design work becomes a little trickier, doesn’t it?
This, fundamentally, is the challenge that faced web designers with the mobile device explosion that began in the early 2000s. Without responsive design techniques, web designers were forced to create multiple versions of the site—sites that were a copy of an original site, but designed specifically for users browsing on a mobile device. Using multiple sites in this manner was both a time-consuming and costly approach for meeting the growing demands for mobile-ready content. As more and more devices appeared, it became apparent that this device-specific approach simply couldn’t scale to accommodate every new device or use case.
The term “responsive design” was first coined by web designer and author Ethan Marcotte in a 2010 article on A List Apart titled “Responsive Web Design.” He used it to describe a web design approach for optimizing websites so they’d work on different devices. To summarize, Marcotte proposed that web designers use responsive design to create the best possible user experience by preserving a website’s content and features in a way that’s easy to read and navigate on any screen size or device.
Technically speaking, responsiveness is achieved through the use of fluid grids, flexible images, and media queries (part of the CSS3 specification). Practically speaking, web developers simply define how a website will reposition, resize, hide, or swap content at various screen size and resolution breakpoints. In responsive design, the browser does the hard work, with CSS guiding the way.
For example, a web designer might specify that a content layout adjust from one column to two columns depending on the available pixels of horizontal space. This would mean that when the content is viewed on a device with a narrower screen, such as a smartphone, it responds with a single column display. Likewise, that same content would adapt to a wider two-column layout when users access it on larger screen tablet devices.
Responsive design solves that tricky challenge we gave you earlier—to create a content layout that works equally well on a 3 x 5-inch card, an 8.5 x 11-inch paper, and an 11 x 14-inch paper. You no longer need to create separate, custom layouts for every size of paper. Now you can define how the layout should change depending on the size of paper. So you don’t have to make a design for every potential paper size—you just set the rules for how the content responds to different size constraints.
This example of morphing a content layout to changing paper dimensions illustrates how responsive design addresses some of the challenges around delivering web content in a multi-device world. But how does responsive design help us address the challenge of delivering e-learning courses to multiple devices?
Responsive e-learning embodies the same spirit of fluid adaptation as responsive web design, but with some important twists. To better understand those twists, let’s focus first on the challenges that are specific to developing e-learning for multiple devices.
The Challenges
Unlike web pages, which offer a vertical, scrolling layout for reflowing text and images, most of today’s e-learning courses follow a slide-based convention with a horizontal layout that relies on objects staying in a fixed position relative to one another.
Slide-based e-learning courses are often composed of many different types of content—everything from simple slides containing graphics and text to media-rich interactions that prompt learners to engage in a tactile fashion with content.
Responsive web design works because the relative positioning of web content doesn’t really matter. For example, the content still makes sense if the text goes from three columns to one column or if images are placed in a different spot.
But that’s not the case with slide-based e-learning content. Slide-based e-learning wouldn’t make sense to learners if objects changed position or disappeared to accommodate a smaller screen size. For slide-based e-learning to work on different devices, the position of elements on the screen must not change, regardless of screen size or aspect ratio. This has left most e-learning developers in a quandary: how to develop e-learning content (with elements that need to stay in fixed positions) that fluidly adapts to a learner’s desktop, laptop, tablet, or mobile phone.
While slide-based e-learning is the go-to choice for much e-learning content, some organizations have opted to create responsive e-learning by abandoning slide-based layouts in favor of scrolling, website-style e-learning. Basically, instead of creating interactive e-learning, they create micro-websites.
Because this type of content is developed using responsive web design tools and strategies, it’s made for mobile and doesn't have the same relative positioning requirements as slide-based content.
The downside of this approach? Historically, the tools that make responsive e-learning possible are web development tools—not e-learning authoring tools. This meant that, until recently, creating mobile-friendly, web-based e-learning content required more time, coding skills, and web development tools than most e-learning developers generally have.
So how can e-learning authors overcome the challenges of building responsive courses?
The solutions
The short answer to that question is: by making sure that technology does the heavy-lifting for course authors. At Articulate, we’re doing this with two game-changing tools.
A web-based authoring tool for creating fully responsive e-learning
Rise 360 is a revolutionary new application for developing responsive e-learning right in a web browser. It takes advantage of the same technologies used by responsive website building tools to produce inherently responsive content. But Rise 360 is different than these tools because it’s designed for e-learning. It includes eight lesson types, all super easy to build out. Course developers simply add text, insert images, and upload media files to pre-built video, timeline, labeled graphic, sorting activity, process, quiz, and URL/embed lessons. Or they can build a custom lesson by stacking dozens of text, media, and interactive learning blocks in any order to create a unique scrolling lesson.
All of the lessons in Rise 360 are inherently responsive and were designed specifically with mobile in mind. So they look great and work perfectly on every device, in every orientation with no coding or tweaking required. Best of all, course developers don’t need to limit learners to specific devices. Whatever devices learners use, Rise 360 courses will adapt automatically to provide the best user experience.
A responsive mobile course player
While Rise 360 is the perfect tool for creating inherently responsive e-learning in minutes, many organizations want to create highly interactive, slide-based e-learning courses that work on any and every device. And with the new responsive course player in Storyline 360 and Studio 360, they can do just that.
The responsive player detects the device a learner is using and fluidly adapts to different screen sizes and orientations, getting out of the way on smaller-screen devices and maximizing screen real estate for content. On smartphones, for example, the responsive mobile player hides sidebar menus, eliminates browser chrome, and delivers mobile-friendly playback controls. Most importantly, the responsive mobile player preserves slide-based e-learning content just as it was designed. With object positioning fixed, the course player bears the burden of adapting to the learner’s device, not the course author.
With Rise 360 and the new responsive mobile course player, Articulate is bringing the fundamental principles of responsive design to e-learning. Now course developers can deliver e-learning content that doesn’t tether learners to specific devices and doesn’t sacrifice quality.
Why does responsive matter for e-learning?
As we collectively increase our use of mobile devices and more internet-enabled devices emerge, it’s no longer realistic for us to assume learners will only access courses from desktop computers. We are a mobile society, and all of us are mobile learners.
Given the maturity of the mobile and tablet markets and with the vast assortment of untethered devices to choose from, it’s not surprising that we both need and expect organizations to remove barriers from our learning experiences. We expect courses that look beautiful and work intuitively on whatever device we use.
And with responsive e-learning tools, organizations can finally deliver exactly that.
To try Rise 360 and the responsive features in Storyline 360 and Studio 360, check out a free 30-day trial of Articulate 360.
Published 9 years ago
Version 1.0
