9 Tips For Converting Content to Mobile Using Adobe Captivate

Ensure a Smooth Conversion of Your Favorite eLearning Content

Mobile Development, User Experience Comments (1)

As more and more organizations move to a 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 challenging 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 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 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 must do this yourself.

2. Reexamine the User Interface

It’s likely that it optimizes your design 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. 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 might output versions of your modules that have been redesigned for the variety of screen sizes or aspect ratios you have to target.

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

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

Now, onto the basics.

4. Output Via HTML

This should go without saying, but if you want to target these mobile devices, you will 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 will likely 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 discuss compatibility issues before you push the publish button. It does a great job of alerting you to significant problems you might face related to content rendering and playback – a small thing, really, but it can save you some debugging headaches 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, primarily when used on a tablet or smartphone without headphones.

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, 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 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 data have extra whitespace and can enjoy compression.

You don’t want to deliver unneeded whitespace or other useless characters, so at the 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 portable.

This is because of how the click event is used for interactivity instead of more touchscreen-friendly games. The legacy interaction models used by these rapid tools don’t react to how 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 crucial tip.

And finally, to go even further…

9. Building An App

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

But there are 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 repeatedly.

Wrapping Up

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

If all of these sounds daunting, but you read this far, you may 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, contact us.

The following two tabs change content below.
Chad Udell is the Managing Partner, strategy and new product development, at Float. There he leads his design and development teams to successful outcomes and award-winning work via a strong background in both disciplines and a singular focus on quality. He has worked with industry-leading Fortune 500 companies and government agencies to design and develop experiences for 20 years. 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. Chad is author of Learning Everywhere: How Mobile Content Strategies Are Transforming Training and co-editor and chapter author, with Gary Woodill, of Mastering Mobile Learning: Tips and Techniques for Success. His newest book, Shock of the New, co-authored with Gary Woodill was released in April of 2019.

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

One Response to 9 Tips For Converting Content to Mobile Using Adobe Captivate

  1. […] – Content conversion is a topic many people ask us about at industry events, so we created this handy guide for […]

Leave a Reply

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

« »