DevLearn 2017 Expo

The DevLearn 2017 Expo is the largest learning technologies expo in North America, and it's completely free! Entering its 12th year, the Expo is the event for those interested in exploring the latest and greatest in learning technologies.

This post was first published on eLearning Industry.

Using Fluid Boxes in Adobe Captivate 2017

User experience has taken a front seat in design thinking and creation. As learners detach themselves from traditional learning methods, our attention turns to the use of mobile devices for consumption by learners.


Fluid boxes in Adobe Captivate 2017 give you the ability to place content in these intelligent containers and have Adobe Captivate resize and adapt the objects for any device size, the device specific preview menu (another new addition to this release) gives you complete control over previewing your content without having to hit the preview button.


One of the recent webinars we did for the launch of Adobe Captivate 2017 was to create interesting layouts for mobile devices using Fluid boxes. I used the concept of wireframes from web design to create web page like layouts which render well on various mobile devices.


I will be creating a short tutorial on how to create these frames and using the Fluid Boxes properties inspector to align and wrap objects to suit different device sizes.


Here are some screen shots of the preliminary design.

Screen Shot 2017-06-30 at 11.58.03 AM

Screen Shot 2017-07-18 at 12.25.15 PM Screen Shot 2017-07-18 at 12.25.31 PM Screen Shot 2017-07-18 at 12.25.50 PM

Wireframes in elearning design is still being used very sparingly, I found this approach to be very visual when it came to creating content for mobile devices. Once you start exploring this route for prototyping or storyboarding the possibilities become endless as there are new thoughts and ideas for web design and layouts coming through each day.

If you have already used Adobe Captivate 2017, you would have experienced the powerful Adobe Typekit Integration as well, the catalog of fonts which are tailored for web use will give your content that typographical edge on changing screen sizes.

Will have the tutorial out to all of you very soon.



Prevent Responsive Text Pop-Outs from Appearing

Some Adobe Captivate 2017 users are reporting seeing the following icon/button on their published responsive design eLearning projects.

2017-06-28 10-15-48 PM

The button you are seeing at the bottom of your text container (smart shape or text caption) is actually by design in Adobe Captivate (2017 Release). It appears when a text container has more text than can be accommodated by your minimum font size and the size of the text container. For example, when displaying large paragraphs of text on a smaller display. Tapping the button will display a dark overlay with all the text in white, and if necessary, with a scrollbar when the amount of text is too much for the screen.  Once your learner finishes reading all the text, tapping the screen will return them to the full slide. Sometimes it seems as if the button is appearing for no reason. There are a few possibilities as to why this happens.

  1. Your text container is right on the threshold of when the button will be determined to be necessary. In these cases, slightly increasing the size of the text container may solve your problem. Alternatively, you could also select a smaller minimum font size on your fluid box properties.
  2. Another item to consider is the margins set for your text container. Decreasing the margins will allow more space for your text and perhaps just enough to accommodate the text on smaller device screens.
  3. Lastly, consider where the text has been. If you copied and pasted this text from a word processor, it may contain unnecessary formatting codes, invisible characters, or extra line breaks that could be causing the pop out text button to appear.

Here is a video from my YouTube channel that shows you how you can get rid of the extra hidden characters that might be forcing your project to show these buttons when they are not actually needed.

If you found this article and video useful please share it with your eLearning colleagues. If you would like to see other tutorials like this one, please subscribe to my YouTube channel.