Make Your ISD Web-Savvy with Responsive Design  (Part 1)

Today’s tip comes from Dr. Thomas Welsh, professor, consultant and longtime DSA Associate. This is Part 1 of our two-part series on Responsive Instructional Design.

If there is one thing facing instructional designers today, it might be the insurmountable opportunity posed by the various contexts for which we are expected to design training and related content. While we continue to address typical situations such as designing for workshops, online (synchronous and asynchronous), and blended learning, we are also faced with constraints posed by Learning Management Systems (LMS) and dual-use strategies in which training is expected to also serve as an one-the-job performance support tool. Well, it’s time to throw another variable into the mix…

What is “Responsive Design”?

The phrase “responsive design” is a current hot topic in web design. It is an outgrowth of the fact that people access web content from a wider variety of devices than ever before. Because of this, designers have to take into account the various screen sizes on which their content will be viewed. They have to make decisions about how to format content, as well as whether to hide non-critical content from viewers using smaller screen sizes. The image below is an example of how a single web page is reformatted on the fly based on the device with which it’s being viewed.

Examples of responsive design are everywhere! Just sit at your computer with your smart phone in hand and visit CNN.com, Slate.com, BostonGlobe.com, and the Sweet Hat Club (to name a few!) on both devices at the same time.  Notice how the same web page is formatted differently based on the device accessing it. That’s responsive design. There is only one source of content, but that content is manipulated on the fly so it displays according to the designer’s wishes.  Cool, eh?

Responsive ID for Training Programs

What are the implications of responsive design for instructional designers? One implication is that we now have the means to adjust the not only the formatting, but also the contents, of our training to be suit the learner. For example, we might design one training program the does the following:

• When viewed on desktop, laptop or tablet device: Includes in-depth training content, visually-rich interactive elaborations, required simulations, and post-test assessments; Tracks user progress, links to social media forum
• When viewed on phone device: Emphasizes only core training elements and quick reference information; omits required simulations and elaborative content; Tracks user progress, links to social media forum

In this case, a learner may be able to access training in a limited form on a phone device, but would eventually be required to visit the training using a desktop, laptop or tablet device in order to complete required embedded activities and assessments. With this approach, we can better meet the needs of learners, while ensuring the consistency of our training outcomes. At the same time, we don’t have to create two different programs. We can use responsive design to develop device-sensitive formatting, content, and interactions!  In Part 2, we will explore some strategies for Responsive ID and look at a few examples.