Responsive Web Pages Will Impact Your Training Simulations

Objective of this Article

The aim of this article is to raise awareness around how responsive applications change their appearance depending on screen size and how that impacts training software simulations. This will help to clarify what resposive software simulation tools actually do.

What is a Responsive Application?

Responsive applications are hosted within a web page and they change their appearance to suit the dimensions afforded to them on that web page. As a web page changes its dimensions (width and height) then the application adjusts the way in which it presents information to users within that web page.

This is very useful if you want to run that application on a number of different devices, for example a phone, a tablet and a laptop. It means that the designer of the application can lay it out in a manner that best suits the screen size available to those devices.

There are a lot of good responsive pages out on the internet, but for the purposes of this article we have decided to use Salesforce as an example. (Saleforce people – this is a completely random choice, no offence or endorsement intended!)

This is a picture of saleforce running full screen on a standard laptop.

Salefroce at 1920x1080
Salesforce running in a browser window at 1920×1080 pixels.

Now, imagine a user takes their window and “snaps” it to the left hand side of their screen, reducing the width of it by half. This is how Salesforce now looks.

Saledforce 960x1080
Salesforce in a 960×1080 web page

This style of responsive behaviour isn’t uncommon at all. Menus can move all around the place and even change their appearance into a typical 3 bar view with the menu now as a dropdown. For example:

Responsve menu button
A responsive drop-down menu button

How Do Responsive Designs Impact Training Simulations?

In a nutshell, things move around. If you teach somebody where a menu option is for one screen resolution and they use a different screen resolution, the thing they are looking for may not be where you told them it was.

Software Simulation Tools That Have a Responsive Feature

There are a lot of tools out there. Adobe Captivate, Articulate, TT-Knowledge Force and all the rest of them.. Let’s not create a big list here. However, we should think about what it means when a vendor typically says they support “Responsive Output”.  What they mean is that the training materials you create with their tool are responsive when a learner views them. Authoring tools don’t typically capture all the responsive views of an application,


Responsive web pages are a great way of making content work on different size devices, but by doing so you cannot guarantee that what you see on one deveice is going to be the same as what you see on a different device. Indeed – by their nature you will generally see different things. So, when you are teaching people you have to be aware that the location of things in a responsive application is likely to change. If you have multiple authors using different devices then the compounded differences could be quite large when a learner is viewing a software simulation. (i.e. what they see in the training isn’t what they will see in real life).

Authoring tools that create software simulations are generally only responsive in what they output. Whatever they capture is at the resolution being used on that particular capture device by the responsive web page. Instructional Designers need to consider this when recording simulations.

Leave a Reply

Your email address will not be published.

14 + seven =

This site uses Akismet to reduce spam. Learn how your comment data is processed.