As more eLearning moves to mobile devices, adaptive web design helps designers present content in ways that are accessible and appealing to learners. Design for mobile has moved along a continuum:
- As consumers increasingly relied on their smartphones for more types of content and services, developers raced to create apps for just about everything.
- Soon, consumers soured on downloading individual apps for myriad functions and services, driving a trend toward mobile-optimized websites.
- Adaptive web design and responsive web design came next, as mobile became a focus rather than an afterthought.
Unlike apps or mobile-optimized website design, adaptive and responsive approaches to design place the mobile experience equal to or above the laptop and desktop experience: Mobile functionality is no longer an add-on to web content. Both adaptive and responsive designs seek to provide mobile users the same content that those learners would see on a laptop or desktop computer. However, they are different in their look and feel, so the learner’s experience is different.
They are also very distinctive from the designer’s perspective. Each offers advantages—as well as drawbacks—and designers might use each for different goals. This article focuses on adaptive web design; see “Responsive eLearning Design: What Is It, and How Does It Work?” for an in-depth discussion of responsive design for eLearning. Adaptive web design can be especially important when developing games: see “Four Important Considerations for Development of Mobile Serious Games.”
Significant benefits of adaptive web design
When using an adaptive web design process, the designer creates static layouts for different screen sizes; generally, separate “device-first” layouts are created for six common screen widths. At specified “breakpoints” the layout shifts or jumps to the next size. This differs from the fluid approach of a responsive design, which scales up or down as window size changes.
Adaptive web design offers significant benefits to designers, particularly when they need to adapt existing websites for mobile use.
- While creating six layouts per page might sound like a lot of extra work, there’s a tradeoff with creating responsive design which requires considerable coding expertise; missing or incorrect media queries, for example, can cause performance issues.
- Creating layouts targeted to specific screen widths gives designers control over where elements appear on each device screen. The layout might be different for each, but the designer can think through the information flow and tweak each design as appropriate. The fluidity of a responsive design can mean that visual hierarchy is hard to maintain; this can make following the flow of eLearning content difficult for some learners.
Downside to adaptive web design: maintenance
A key downside to using adaptive web design is maintenance. Creating and maintaining multiple sets of web pages requires a large investment of resources—design and development time and effort. An additional consideration for eLearning professionals is that learners’ experience might not be as consistent across devices as a responsive design that serves the same content and layout to all devices.
When to use adaptive design
Some experts, such as UXPin’s Jerry Cao, suggest using adaptive design when updating existing web content. “Adaptive is useful for retrofitting an existing site in order to make it more mobile friendly,” he wrote in “Responsive vs. Adaptive Design: What’s the Best Choice for Designers?” He also notes that most new sites use responsive design.
Alternative approaches may make more sense
Sarah Gilbert, president of meLearning Solutions, said that, for eLearning designers, what matters is the learner’s experience, so designing responsive content generally makes more sense. “As an industry, we are likely to work with responsive over adaptive. This is because there are limited use cases for designing entirely different web content experiences based on web browser size,” she said. “We can be efficient by looking at a mobile-first design and then looking at how to modify that design as the screens scale up.”
Gilbert also said that the best choice might be neither adaptive nor responsive design—but a dedicated app. “There are benefits to developing apps over responsive or adaptive content, though, because of the ability to tap into device affordances and design specifically for the device’s operating system,” she said.
The bottom line for eLearning designers is to start by deciding what the learner’s experience should be, and choose the design approach – responsive design, adaptive web design, or dedicated app --once that goal is defined.
Learn more
Join Sarah Gilbert and other mobile eLearning design experts at DevLearn 2017 Conference & Expo, October 25 – 27 in Las Vegas, Nevada. Hundreds of sessions explore best practices for creating engaging mobile learning, designing outstanding learner experiences, and much more. Gilbert will present “xAPI Basics for Mobile Learning” on October 27.