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

About DSA

Darryl L. Sink and Associates, Inc. (DSA) helps organizations design and develop learning and performance solutions that get results. DSA works cooperatively with organizations to:

  • accomplish internal custom projects
  • train and educate their internal staff in Instructional Systems Development.

Check out DSA presenters and Consultants at

DSA Tips Newsletter Archive

If you haven’t visited the tips archives lately, check it out –

Darryl’s tips are now conveniently organized not only by published date, but by these topics:

  • Project Management
  • Front End Analysis
  • Design Strategies
  • Instructional Strategies/Techniques
  • Measurement/Evaluation
  • Implementation
  • Professional Development
  • Coaching with DSA Tips

We have lots of great ideas just waiting for you to use!

Tap into DSA’s expertise and experience!

Call me at 831-649-8384 or email me at

Bring our expert presenters on-site with a workshop from DSA. Click here for details. Call or E-mail Jane Sink to help you decide which workshops are right for your group.

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, 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:

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.

See you next time,