Buzzword Decoder: Responsive Design

Written By

Pamela Hogle

October 25, 2016

Content designed to be “responsive” detects the size of the screen or browser window that a learner is using and adjusts to fit that window. Using responsive design when creating eLearning ensures that learners can access the content on any device—smartphone, tablet, laptop, or desktop computer. It frees the content from the constrictions of a particular size or type of screen. So, while the term does not specifically refer to eLearning content targeted for use on smartphones, using responsive design simplifies support for mobile eLearning.

Responsive design considers the technical specifications and demands of different digital display spaces. Therefore, content designed to be responsive does not look the same on all screens. A developer can tag some elements so they do not appear, for example, on a very small screen. Other elements will be repositioned; text and images are scaled to an appropriate size. A truly responsive design does more than simply shrink font sizes and move blocks of text to accommodate narrower or wider screens, though; it provides all learners an appealing, easily navigable eLearning experience. Using responsive design also eliminates the need to create separate web and mobile modules for an eLearning course, making it easier to update and maintain eLearning content.

Is responsive design necessary?

As with so many questions, the answer is a resounding “It depends.” Does the designer know where learners will use the eLearning content?

  • When creating eLearning for a stationary kiosk or for delivery on specific, company-issued computers, there might not be a compelling reason to incorporate responsive design.
  • On the other hand, if eLearning is targeted to learners in multiple locations, learners who use their own devices, or learners who are sometimes off-site—sales personnel or frequent travelers, for example—a responsive design is essential.
  • When designing eLearning that will be used across a long period of time, a responsive design will make it easier to accommodate additional devices in the future without a full redesign, while still allowing for content updates.

More and more, companies and employees use multiple devices and work in multiple locations. If eLearning is designed responsively, learners can access it anywhere, moving from smartphone to tablet to laptop. When it comes to job aids, product information, and other types of content that learners might reference frequently and while on the go, responsive design builds in the flexibility that can make these tools more useful and therefore more effective.

Added benefit: Improved accessibility

Responsive design aims to improve access to information, and it emphasizes flexibility in the use of content. Thus it stands to reason that a well-designed responsive eLearning module incorporates many aspects of design that also make content usable for a broader pool of learners, including some with low vision or limited mobility. These features include:

  • Logical navigation, such as blocks of text that can be read (and arranged) sequentially
  • Consistent use of HTML tags to identify headings, subheadings, and body text
  • Predictable navigation and consistently located navigation aids, such as links and arrows
  • Content that learners can navigate by scrolling or using arrow keys
  • Search capability
  • Use of scalable fonts for labels on buttons and other navigation elements, rather than icons based on vector graphics
  • The ability to zoom in and enlarge text

The linkage between responsiveness and accessibility is neither absolute nor automatic, though. A responsive site could still be verbose, include extraneous images that lack alt text descriptions, use low-contrast color combinations, or include elements that do not work with a keyboard or audio that lacks captioning, for example.

Remember—responsive design is just one tool that designers and developers can use to create a better eLearning experience; ensuring that content is clear and focused is also essential.

More Design

You May Also Like