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 produce 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 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 large 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.
Obviously, 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, 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:
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.
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 issues 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 counts, 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 a number of 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 publish.
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.
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.
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.
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 most pesky one is that that PhoneGap Build requires your files to be under 15 MB. I don’t know about you, but the last typical 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:
- Install Node.js and the PhoneGap SDK.
- Install Xcode and Eclipse for Android or the Android Studio Package.
- 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 really makes things a lot easier than having to download files and apps from Web URLs over and over again.
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.
Latest posts by Chad Udell (see all)
- Examining the Realities360 App – A Deep Dive Whitepaper - September 22, 2017
- Missed Realities360? Check out the app that Float delivered here. - September 11, 2017
- Realities360 Augmented Reality App Now Available - July 21, 2017