Tag Archives: Scalable HTML

Captivate 8: Responsive or Scalable Software Simulation?

The process for creating software simulations has greatly changed over the past few years. Today most companies need to be creating software simulations that can be viewed on a variety of devices, including mobile. You might as well forget Flash output anymore.

Two exciting outputs for software simulation in Adobe Captivate 8 are Responsive and Scalable simulations for mobile-device learning. These both create an output of HTML5 so you don’t have to worry about them working on mobile devices. This means you can finally forget Flash output!

However, it might be a little confusing at first as to which you should create—a Responsive simulation or a Scalable one.

What’s the difference?

Both Responsive and Scalable simulations can be used on different devices for your mobile training, but the two are different when it comes to what your end-learner sees and in how you start creating them in Captivate 8.

Scalable Simulation

A Scalable simulation shows your entire captured screen on all three types of devices: computer screen (PC or Mac), tablets and smartphones. The screen is kept intact but just gets smaller for tablets and smartphones. A Scalable simulation is a good choice if you always want your entire screen recording to be seen no matter which device is being used to view your tutorial.

For example, below is the same portion of the simulation as it appears in estimated PC/Mac, tablet size and smartphone.

Scalable PC view

Once published, you are able to view the entire screen recording in whatever size device window. Above is an example of viewing it on a PC.

Scalable tablet view

Above is an example of how the same simulation would look on a tablet. Notice that the entire screen is still showing.

Scalable smartphone view

Above is an example of how the same simulation would look on a smartphone. This is when a learner would start squinting.

Note that when creating a Scalable simulation, you cannot scale it in Preview mode. You will need to Publish it first and then drag your window to different sizes to view how it will look in various mobile devices.

Responsive Simulation

A Responsive simulation allows you to show your entire screen recording for PCs/Macs, a smaller portion of the screen for tablets and an even smaller portion of the screen for smartphones. This is a good choice if a scalable simulation choice is too small to see on a smartphone.

In the screen shots below, you’ll see how different portions of the same screen recording are shown in Preview mode in Captivate 8.

Responsive view 1024

Above you see the entire screen in Preview mode for PCs/Macs.

Responsive tablet view

Above you see the portion of the screen in Preview mode for tablets. Notice that a smaller portion of the screen is shown for tablets.

Responsive mobile view

Above you see the small portion of the screen in Preview mode for smartphones. To smartphone users, this almost looks like a zoomed-in shot. But the good thing is, they can see a very clear portion of the screen (no squinting)!

Starting a Responsive or Scalable Simulation Project

As I mentioned above, you must start your Captivate 8 project differently based on if you want it to be a Responsive simulation or a Scalable one. This is something quite different than what we’ve seen in earlier versions of Captivate.

To start a Scalable simulation project, you can either select “Software Simulation” or “Blank Project” from the New tab. To start a Responsive simulation project, you must first select “Responsive Project” from the New tab.

New Project selection box

In either case, after clicking the Create button, you can add your screen recording anywhere in the project by clicking Slides on the menu. It then shows a sub-menu.

Slides menu

Note that “PowerPoint Slide” is unavailable in Responsive projects.

For either Responsive or Scalable simulations, you select “Software Simulation.” Then you would record your simulation just like you have in previous versions of Captivate. After you have recorded your simulation, the workspace is different between Responsive and Scalable projects. Responsive projects display the Primary, Tablet and Smartphone view tabs at the top of the workspace. Scalable simulations do not have this feature. This is why it is important to know which type of simulation you want to use before you start your project.

Responsive workspace

Above is the workspace for a Responsive project. Notice the Primary, Tablet, and Smartphone views.

Scalable workspace
Above is the workspace for a Scalable or regular simulation project.

Generating Scalable Software Simulations

To generate scalable HTML5 for your software simulation, when you click Publish, you need to select the “Scalable HTML content” checkbox.

Scalable Publish options

Working with Responsive Simulations

If you have created a Responsive simulation, Captivate 8 allows you to change which portion of the screen you show by dragging the smartphone or tablet window to the area that you want to show.

Responsive customizable window

Above I’ve moved the Mobile view (Smartphone) window to exactly where I want it.

Having the three views also allows you to change other things on the screen (like objects and text) so that it can be totally different between PCs and smartphones for example.

Summary and Hints

If you understand the output of both Responsive and Scalable simulations, it is easier to start a new project in the right way. This is a change for Adobe Captivate users who have used previous versions. Before, you didn’t have to think about output very much before starting your projects; now you do.

If you want to show the entire portion of your screen recording, no matter which type of device the learner is using, use a Scalable project (Software Simulation or Blank Project).

If you want to show different portions of the screen based on device, use a Responsive project.

From a Responsive project, you can go from a Responsive output to a Scalable output. However, you cannot do the reverse of going from a Software Simulation project to a Responsive project output. If you are in a Responsive project, there is a checkbox in Properties called “Use portion of background Image” that is selected by default for Tablet and Smartphone views. If you deselect that on either the Tablet or Smartphone view, the full screen recording is shown, which makes it like a scalable project.

Use portion checkbox

Above you see the “Use portion of background Image” checkbox is checked by default for the Mobile (Smartphone) view.

I love these outputs that you can find in Adobe Captivate 8. We can now easily create software simulations for mobile devices. The future is now.


Adobe Captivate 8 is a product of Adobe Systems, Inc. For more information, see their website at http://www.adobe.com/captivate.