Buzzword Decoder: Responsive Design

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

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

Is responsive design necessary?

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

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

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

Added benefit: Improved accessibility

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

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

The linkage between responsiveness and accessibility isneither absolute nor automatic, though. A responsive site could still beverbose, include extraneous images that lack alt text descriptions, uselow-contrast color combinations, or include elements that do not work with akeyboard or audio that lacks captioning, for example.