9 Tips For Converting Content to Mobile Using Adobe Captivate

Ensure a Smooth Conversion of Your Favorite eLearning Content

Mobile Development, User Experience Comments (0)

As more and more organizations move to mobile, the number of learning developers looking to extend the value of the instructional materials by targeting the growing smartphone and tablet market that’s also exploding.

The rapid eLearning tools are coming along in these regards, but it’s still not easy to provide great mobile-first experiences without some significant reworking.

Float is on the case here. Our development team is actively researching methods, tips, and tricks to enhance your workflow in order to ultimately produce better learning content using the tools you already know.

If you are using Adobe Captivate to produce your eLearning content and want to move the materials to mobile, follow these tips to help create a much better experience for your audience. They’ll thank you!

First, for some design changes…

1. Cut the Content Down

We must remember that the core user experience for mobile is one of the short sessions and repeated use.

Putting all the learning content into one monolithic module is counter to this design approach.

Instead of 5-6 learning objectives in one considerable experience, why not restructure the content to be 5-6 10-minute modules?

Adobe Captivate doesn’t do adaptive content publishing yet, so you’ll need to do this yourself.

2. Reexamine the User Interface

It’s likely that your design is optimized for a mouse and keyboard input method.

Your mobile experience needs to be touchscreen-friendly. This means looking at your user interface elements and buttons to make sure they provide an adequate touch area.

Are they approximately 1 cm – or even just a tad – larger when viewed on your targeted device? If not, time to redesign them for the output to help your users hit their touch targets and not fat-finger your user interface!

3. Fragment Your Design and Output

Adobe Captivate is a design tool based on absolute pixel measurement. As such, Adobe Captivate isn’t capable or even aware of responsive design. It doesn’t publish media queries in its CSS to help reposition elements as the screen size changes.

Because of this, you may want to consider outputting versions of your modules that have been redesigned for the variety of screen sizes or aspect ratios that you have to target.

This could mean 2-3 designs for a basic audience group (one smartphone size, one tablet size, one desktop size), or as many as needed to hit the appropriate devices on the other end of the spectrum.

In a BYOD environment, this may need some up-front surveying to get some basic parameters around what you need to support.

Now, onto the basics…

4. Output Via HTML

Of course, this should go without saying, but if you want to target these mobile devices, you are going to need to use a different output path than the legacy SWF method for publishing course materials with Captivate.

Some things to keep in mind, though:

  1. Don’t expect your embedded Flash widgets to work. You’re likely going to have to rebuild these interactions as native Captivate content or as HTML5 widgets. Cue sad trombone.

  2. Please review your HTML warnings palette in Captivate and use it to review compatibility issues before you push the publish button. It does a great job of alerting you to big problems you might be facing related to content rendering and playback – a small thing, really, but it can save you some debugging headaches as to where issues lie.

5. Compress Your Audio

Take advantage of Captivate’s built-in audio compression tools in the output settings.

In our experience, FM-quality bitrate (64kbps) is adequate for voice, especially when used on a tablet or smartphone without headphones.

Simply put, if you can’t hear it, then don’t worry about including it, because you’re wasting bandwidth, storage space and more. Every second count, and in mobile, time and responsiveness is of the essence.

Alternatively, one other approach would be to compress your assets beforehand using an audio tool like Adobe Audition, Audacity or some others available. The compression these tools offer is typically more configurable, and therefore more precise, in order for you to get the results you want.

6. Optimize Your Images After Output

Captivate also compresses images on publishing.

However, I noticed on a few modules I recently published that the PNG graphics that Captivate outputs are a bit weighty.

I suggest running an optimizer on your image directory after output to get a bit more out of your graphics and save on file size. You can use PNGCrush, ImageOptim, or other freely available software products to strip metadata, extra channels and save 25-30 percent or more on your image file size.

7. Take Care of Your JavaScript

The output files that live in your directories after the course gets published are also a tad weighty. The files have a bit of extra whitespace and can benefit from compression.

You don’t want to deliver unneeded whitespace or other useless characters, so at the very least, strip out the whitespace using a clean-up function in your text editor or an online tool and save a few KB. To go the extra mile, consider using a minify service to minify your CP.js.

In our initial tests, we shrunk our JavaScript by more than half, from 1.4 MB to 674 KB (other JS optimizations could be possible, and compatibility should be tested… your mileage may vary, offer not available in some states, see rules and regulations for details).

8. Optimize For The Mobile User Experience

These mobile experiences created by rapid tools don’t always feel so… mobile.

This is because of how the click event is used for interactivity instead of more touchscreen-friendly events. The legacy interaction models used by these rapid tools just don’t react the way that we expect mobile experiences to work.

We’re planning a full post on this topic for publishing on our blog soon, so follow us on Twitter or subscribe to our blog to see when that’s posted. You won’t want to miss this key tip.

And finally, to go even further…

9. Building An App

Captivate 7 included a pretty slick tool to allow you to use PhoneGap Build straight from your desktop.

But there are some limitations. The peskiest one is that that PhoneGap Build requires your files to be under 15 MB. I don’t know about you, but the typical last course I built in Captivate was well over this.

So, what do you then? Build it yourself locally to get around size limits with PhoneGap Build:

  1. Install Node.js and the PhoneGap SDK.
  2. Install Xcode and Eclipse for Android or the Android Studio Package.
  3. Have fun and build apps out of your content!

No more 15 MB limit!

One other quick tip for Mac developers: use Android Transfer to help copy files over for testing. It makes things a lot easier than having to download files and apps from Web URLs over and over again.

Wrapping Up

We’ve got lots more tips planned for our blog, so keep checking back. We’ll cover some other tools, frameworks, and tips. Things are about to get very interesting around here!

If all of this sounds daunting, but you read this far, you may just have it in you to take your development work further!

Developing better user experiences is really what this is all about. It takes work, but the results are worth it.


If you’d like to know more about converting your content for mobile using Captivate, or if you have a project on the horizon, feel free to contact us.

Follow Float
The following two tabs change content below.
As managing director of Float, Chad Udell designs, develops and manages interactive Web and mobile projects. Chad has worked with industry-leading Fortune 500 companies and government agencies to concept, design and develop award-winning experiences. Chad is recognized as an expert in mobile design and development, and he speaks regularly at national and international events and conferences on related topics. In 2012, Chad released his first book, “Learning Everywhere: How Mobile Content Strategies Are Transforming Training.” In 2014, he co-edited the book, “Mastering Mobile Learning: Tips and Techniques for Success” with Dr. Gary Woodill, Ed.D.

» Mobile Development, User Experience » 9 Tips For Converting Content...
On October 21, 2013
, , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

« »