ADOBE CAPTIVATE 2017: Responsive Design Has Never Been So Fluid

by Kevin Siegel, CTT, COTP

When it comes to eLearning that will look awesome on just about every kind of device (including desktop computers, smart phones, and tablets), Adobe Captivate jumped to the front of the eLearning development tool class when Responsive capabilities were introduced in Captivate version 8 and continued in Captivate 9.   Using Captivate's Responsive features (available only if you chose File > New Project > Responsive Project), you can design each of your slides for up to five different devices (known as breakpoints, three of which are shown in the image below).

In Captivate 8 and 9, the problem with creating Responsive projects was having to deal with multiple breakpoints. If you had an image on the Desktop breakpoint that would be too large or not cropped appropriately for the tablet of mobile breakpoints, you would have to manually edit the image on the other two breakpoints. While modifying slides elements across a few breakpoints on a few slides isn't a big deal, imagine how much work it would be if your project contained 100 slides and you had to modify objects across all those slides for each breakpoint!   To make Responsive design easier than ever, Adobe has done away with breakpoints (at least by default... if you loved working with Breakpoints in Captivate 8 or 9, you can choose Project > Switch to Breakpoint Mode and design with breakpoints like always).   When you create a new Responsive project in Captivate 2017, you'll see a Preview menu above and to the left of the slide. Using the Preview menu, you can quickly see how a slide will look across several devices including a Desktop computer, iPhone, Google Pixel, and Galaxy S6.

Above and to the right of the slide is a new Preview Slider (shown in the first image below). You can drag the slider to any width you like and then save the side to the Preview menu by clicking the Plus sign shown in the second image below.

Fluid Boxes   I used to teach an introduction to HTML class years ago when creating web pages in Notepad and then previewing your work in a web browser was about as sophisticated as it got (there was no Dreamweaver back in those days... pages were hard coded). The problem with web pages in the old days was that it was difficult to position page elements in specific regions of a page unless you used tables.   I like to think of Fluid Boxes much like a table (where you've got cells, rows, and columns that can contain any kind of Captivate object). While Fluid Boxes aren't tables, and there aren't any cells, thinking of Fluid Boxes as tables might make it easier for you as you play with them.   If you look at the Captivate 2017 toolbar, you'll notice there's a Fluid Box tool (keep in mind that this tool will only be available if you create a Responsive project). Clicking the tool presents two options: Horizontal and Vertical. From there, you decide how many "table cells" you want. In the image below I'm going Vertical with three "cells."

And here is how a previously blank slide looks after inserting the Fluid Box.

And check out the Properties Inspector. There's a Fluid Box Selector that shows the contents of the slide sort of like a parent (the Fluid Box itself) and the three "cells."

I had the parent selected so was quickly able to resize each of the "cells" as needed. I was also able to add text, images, and other objects just as I always could. However, because Adobe is attempting to streamline your development time, there are limits to how specific you can be when working in Fluid Boxes. The intent here is to quickly add content to a box and move on. If exact position of objects is more your cup of tea, you should work with Breakpoints as mentioned above.   I was able to create the slide below in about five minutes.

The slide I created isn't going to win any beauty contests, but that's not the point. Thanks to Fluid Boxes, I was able to quickly get a responsive slide finished.   Look what happens when I preview the project in my web browser: the layout doesn't simply resize, it automatically reflows the content based on the size of my browser window.

Did you notice in the image above that some of the slide text about Biff is missing? And did you also notice that fancy icon to the right of the text? The icon is a visual indicator to the learner that there's more text than will currently fit onscreen. Should the learner tap the icon, they'll see the missing text in an overlay.

What do you think, pretty nifty right? And while there's certainly more to Fluid Box layouts than I've covered here (goodness there's all kinds of controls to play with on the Properties Inspector), I'm hoping this has gotten your attention and you'll spend some time playing with them.   There are other new features to love in Captivate 2017 and I'll be covering them here. Stay tuned.

***

Looking to learn Adobe Captivate? No travel budget? Check out these live, online, and very hands-on Captivate classes.

Kevin Siegel, CTT, COTP, is the founder and president of IconLogic. Following a career in Public Affairs with the US Coast Guard and in private industry, Kevin has spent decades as a technical communicator, classroom and online trainer, public speaker, and has written hundreds of computer training books for adult learners. He has been recognized by Adobe as one of the top trainers world-wide.