Fluid Boxes In Adobe Captivate 2017: Secret Sauce To Responsive eLearning?

Fluid Boxes In Adobe Captivate 2017: Secret Sauce To Responsive eLearning?
Summary: So you have heard about Adobe Captivate's fluid boxes in Responsive projects, but what are the differences from previous versions of Adobe Captivate? Are the Fluid Boxes really the secret sauce to Responsive eLearning? What should you consider when working with Fluid Boxes in Captivate.

Creating Responsive eLearning With Fluid Boxes In Adobe Captivate 2017

While we are still getting used to the new possibilities that Adobe Captivate 2017 provides, we want to give you some insights on how this tool can create responsive e-learning courses and what other new features you can find in this Adobe Captivate version. FasterCourse has created hundreds of Adobe Captivate templates before, and recently started working with Fluid Boxes and Adobe Captivate 2017, so we want to share the experience.

Fluid Boxes Options

This Fluid Boxes feature gives you a different perspective on responsive eLearning. With Fluid Boxes you can create content that can be viewed on multiple devices. I know, this isn’t anything new, but unlike in the previous version, Adobe Captivate 9, where you had to build the course in 5 different breakpoint views, you will have to add your content only once and the design will adapt to every device from desktop to mobile. In this article we want to take a closer look on Adobe Captivate 2017 newest features and the ability to create responsive courses with Fluid Boxes.

There are lot of options to choose from when working with Fluid Boxes. We will take a look on layout, wrapping, and padding options and see how Fluid Box selector can help you navigate through your content.


First of all, you can choose the layout of the Fluid Boxes – if they are going to be stacked vertically or horizontally. This may sound easy, but once you start dividing each Fluid Box into smaller containers, you will have to think two steps ahead on how you want them to be arranged in smaller devices. The good part is that you can change your mind later and switch any Fluid Box from horizontal to vertical flow.



The next styling option is wrapping – you can choose different ways how you want your content to be placed in slide. This gives you a variety of choices on how your slide can look on different devices. You can change the look with one click and try every option to see which wrapping alternative suits you the best. Choose from 4 options – wrap to next column, squeeze in one column, wrap in one column/row, or choose symmetrical wrapping. Here in this example where we changed the wrapping option from one to another with only few clicks:



Besides the fact that you can align the content in each Fluid Box, you can also set padding to all content. This is a simple feature that can give your slide more confident look, because all white space between objects will be in the same size. Here we changed the padding from 5px to 50px and gave our slide a fresh new look:


Fluid Box Selector

Now, try to imagine packing all your stuff in boxes. Then pack those boxes into bigger ones. At one point it’s almost impossible to find what you need. After couple of times you would probably start writing what you put in each box and where can you find them. That is exactly what Adobe Captivate developers created – a list of all Fluid Boxes, that shows how many boxes are within each box. You can name them to make it even easier to find the exact Fluid Box you want to work with.


Time Saver

Fluid Boxes might save you a lot of time, considering that you won’t have to create design for every breakpoint and you don’t have to align all objects differently, so that they would look good in different screen sizes. But this also includes a lot of planning beforehand, because once you start creating your content with Fluid Boxes, it will be hard to reorganize the whole slide if you missed some important aspect.

Optional Fluid Boxes

This option allows you to have slightly different content between devices. For example if you want less information to be visible on your mobile device, simply select the extra Fluid Box and check the “Optional” checkbox in your Properties panel. Now when you will resize the screen, you will see that at one point the Fluid Box will disappear with all the information it contained.


Save As Responsive Project

Great feature they have added in this version of Adobe Captivate is the possibility to turn non-responsive course into responsive one with one click. It will sure take some time to put all objects into Fluid Boxes, but at least now you have ability to change your mind in the middle of developing process.


Expand Icon

Remember when we had to fit the same amount of text in different devices? In this Adobe Captivate version you don’t need to worry about that anymore. Now if your text exceeds the available space limit, you will see a small icon that allows you to read all text. This feature is useful, but sadly there is no easy way how to change the icon to something that would go well with your design.


New Preview Option

There are no more breakpoints as it was in the previous Adobe Captivate version, so now there is a simple slider that changes the width of the screen. You can also choose from few mobile screen sizes that are available in preview mode and see how your course would look on iPhone and other popular mobile devices.


Other Features

Fluid Boxes are great for responsive projects, but Adobe Captivate 2017 has got some new improvements that can help you with both responsive and non-responsive projects.

Object States

Usually, buttons and smart shapes that you turned into buttons had 3 inbuilt states – normal, down, and roll over. Now we have the fourth inbuilt state – visited. This is a great addition to existing states, because it gives you more options to create interactive slides without using advanced actions.

Another feature that we are really happy for is that now smart shape buttons can have states in master slides. In the previous version, you could place smart shapes in master slides and they worked great, but you couldn’t add any states. Now if you create a button from a smart shape in your slide with different states, you can simply copy it to the master slide and the states will be showing.


Advanced Actions With Condition

This feature may not seem so essential, but for a developer, I can say that this put a smile on my face. Now you don’t have to create silly conditions to all advanced actions just so you could change your mind later and turn them into an advanced action with condition. Now you can do this with a single click any time you want.

Another addition to the advanced actions is second condition – “while”. Previous we could only create advanced action with “if…else” condition, but now we can choose between “if…else” and “while” conditions.


Typekit Integration

Usually with Adobe Captivate you would choose “web safe” fonts. With Typekit integration in Adobe Captivate 2017 you can choose all kinds of different fonts that are synchronized in your Typekit account. You can find the integrated Typekit fonts at the top of your font list, right above the web safe fonts. If you use some of the Typekit fonts in your course, you will have to set the domain of this Typekit font when you publish your course.


Closed Captions

Closed Captions had limited options before, but now you can change the position, color, and text alignment, and you can choose to have the same style in the whole project or each slide can have their own closed caption style. This way you can create modern closed captions that suits your design.



Overall, Adobe Captivate 2017 has some great features that can help you create eLearning courses faster, but you might have to spend some time to get used to the new additions in this Adobe Captivate version. Fluid Boxes have some great characteristics, but your design might suffer from the fact, that now you have to divide your content in boxes. Other features have some nice touches, that makes your work with Adobe Captivate more pleasant than before. Try the new features for yourself and see how they could improve your eLearning courses.