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

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

In Part 1, we discussed “Responsive Design” and learned how thousands of web sites are using this technique to optimize the content and formatting of their site based on the user’s browsing device; be it desktop, tablet, or smart phone.  We also introduced the opportunities for ISD professionals that are made possible through Responsive Design. Now let’s explore some quick techniques for optimizing your online training programs for access on different devices.

Target the Contexts of Use

“Context of use” refers to situations under which a learner will access your training.  But first, let’s recognize that nowadays, much training also provides an on-the-job performance support function; that is, the training includes job aids, forums, and other features that the learner may wish to take advantage of before, during, and after they have completed the actual training program.  The first thing you have to think about is the types of training content you will provide, as well as the non-training components of your program. A typical training program might include the following:

Training Elements

• Core presentational text and media (graphics, video, audio)
• Elaborative text and media (information that enhances or elaborates on core training)
• Embedded activities (closed-ended interactions, interactive simulations, etc.)

Non-Training Elements

• Links to forums and peer-to-peer sharing tools
• Links to downloads and other support materials
• Contact information of mentors, etc.

“Block” Your Training Program

The next step is to block your program elements, targeting specific elements for display on specific classes of devices; namely desktop/laptop, tablet, and Smart Phone.  This image provides a representation of how the elements above are blocked for different devices.

Currently, most of the more interactive training elements require plug-ins, such as Flash, or larger amounts of screen space and peripheral devices such as a mouse.  In these cases, it is either impossible or impractical to attempt to run these interactions on SmartPhones and certain brands of devices (for example, Flash is not compatible with iPhones and iPads).  When employing responsive design, you set up your training so that the server checks the device accessing the training and does not show the elements that are incompatible.  This ensures that your learners have a positive user experience, regardless of how they are accessing the training.

Of course, responsive design also implies that learners may not be able to complete the training if they are accessing it solely on restricted devices. Typically, the learner will have to access the training on a desktop or laptop to complete certain required activities.  Therefore, you will need bookmarking and tracking to direct users to the training elements that they still need to complete.  Non-training elements, such as links to forums, downloads, and mentors, can be included in all device version of the training – typically in a footer or dropdown menu.

Test, Test, Test

During and after development, it is more critical than ever to test your training in all of its intended formats; this means accessing the training using the different devices for which it is designed. Web services such as crossbrowsertesting.com allow you to emulate different devices right from your computer.

The Never-Ending Catch-up Game

It’s a simple fact that web access device technologies will continue to evolve at a fast pace.  Lucky for us, web standards are evolving as well and are compelling device manufacturers to conform.  For example, it is now quite easy to serve video and audio in a format that is compatible with all major devices.  It is mainly in the area of simulations that non-web standard technologies, such as Flash, are still the go-to solutions.  ISD professionals will be playing catch-up as new technologies emerge to take the place of these tools.  We will be identifying new opportunities and adjusting our expectations.  As of now, applying responsive design to ISD projects is quite feasible.  And soon it will not only be feasible, but expected.