May 23, 2014

Adobe Captivate 8 Reimagines Responsive eLearning for a Multi-device World

ResponsiveIn the web world, being responsive has become a norm. It’s considered uncool if you don’t have your website mobile- or tablet-friendly. As much as we have been trying to make our eLearning courses responsive, we have been facing a lot of challenges all these years. The main challenge is that an eLearning course is not like a big long web page that you need to make responsive. In eLearning courses, you are dealing with screen/slide based approach, which are essentially of fixed width and height. Also, the elements in an eLearning course are more complex than a web page. A web page carries text and images, and sometimes audio, video, and animations. But an eLearning course has a timeline-based approach, with objects appearing/disappearing based on timing or click of a button. There are interactive objects, overlay objects, embedded content, assessment questions, simulations, and playbar, besides the other media elements.

Attempts have been made to create responsive eLearning courses but it called for a completely different authoring strategy and a lot of coding, which is very different from the normal eLearning course creation process. This required the authors to get trained on some new tools and technologies.

AdobeCaptivate8Adobe Captivate 8 has tried to simplify this process for eLearning authors and allow them to create responsive courses using the same authoring tool with the same set of options and absolutely no coding required.  To meet the eLearning look-and-feel requirement and make it simpler for the authors, you will find three breakpoints for Primary, Tablet, and Mobile layout. Here’s the default width and height for the three breakpoints:

Primary view: 1024×627 pixels

Tablet view: 768×627 pixels

Mobile view: 360×415 pixels

You can change the default size easily by moving the width and height sliders. One important thing to note here is that in responsive projects, only width is responsive and height remains static to give the same slide-based paradigm and give more control to the author.

To make it simpler for the authors, Adobe Captivate comes with pre-built responsive themes which allows them to lay out the content well on all the breakpoints without much efforts.

The authors need to design the content on Primary screen as they always have, and then tweak the content for the tablet and mobile layouts with the help of various size and position options. Also, when objects are added in a responsive project, they automatically takes a percentage-based size and position and resize themselves in different layouts. Of course, this can be changed to pixel-based size and position, along with other options that allow you to keep the overlay objects intact and move the related objects on the screen together.

Based on the device width and height, you can also exclude objects from some of the views to show just the important objects in the small size devices and use the space judiciously. There is also a possibility to assign a minimum or maximum size for an object so that it doesn’t become extra-large or extra-small on different devices. This comes in really handy when you are including branding imagery in your course which cannot be smaller/bigger than a particular size. You can also have a completely different look and feel for each device size.

There can be different text for each breakpoint along with different formatting for the text. The text can also be made fluid which reflows on different screen sizes instead of being truncated.

Previewing a project is a very important task while creating an eLearning course, and Captivate provides various options to preview the responsive content well. You can check the placement of the objects in different layouts in the edit area by switching to different breakpoints. You can preview the course in a browser, which comes with three different tabs to allow you to see the content. It also comes with a slider, which allows you to check how content is looking in between breakpoints. Adobe Captivate also has a preview option in Edge Inspect, to help you preview your courses directly on devices.

These responsive courses are gesture-enabled and you can easily use the swipe, tap, and pinch options to navigate through the courses.

Also, to take the mobile learning experience a step further, Adobe Captivate comes with variables to use the GPS-capabilities and device type to deliver location-aware and device-specific learning experience. Providing training based on the location of the learner can be really helpful for employee induction training, disaster recovery, health care options based on location, travel-related information, single training for global audience, etc.

Adobe Captivate 8 is the first tool that allows you to create true responsive courses and has opened a world of opportunities to explore the mobile learning arena!

To learn more about how to create a responsive courses, join me for a live webinar on Tuesday, 27th May 2014.

Happy captivating! 🙂

Posted by poojajaisingh11:43 PM
  • Neil Hoskins

    A few things:
    – I can’t afford CC on top of Captivate, so I guess Edge Inspect is out and it’s the WAMP server method for me.
    – It’s easily changed, but I’ve never understood why a default smartphone view should be portrait, with other devices as landscape. I suppose it’s some kind of iThing.
    – Everybody always hates UI changes, but I really think this is going to be considerably better once I get used to it.
    – When publishing a ‘responsive’ project, how does the webserver know which version to serve? Is it done with the javascript in ‘multiscreen.html’? If so, this will need to be kept up to date; in fact, ideally, there should be a GUI for people who aren’t keen on hacking javascript.
    – Will the learner/user get a choice of which version is served?

    Thanks, see you tomorrow.

    • Neil Hoskins

      Also, quite a lot still doesn’t work correctly in Windows Phone.

    • Neil Hoskins

      Just a couple more:
      – Not much of the new stuff (gestures, geolocation) works once it’s been through App Packager.
      – Surely it would be best to have a combination of this new ‘responsive’ way of doing things, but keep the option to set ‘rescaleable html’ when publishing. This doesn’t seem to be possible?

  • CU ELD

    Tried to register for the webinar link above and got the message, “There are no sessions currently scheduled for this event.” Did this get postponed or something?

  • Tania

    I created a responsive project and published it to Adobe Connect, and none of my devices recognize their design. I used Adobe Edge to preview the content, and all 3 options appear correctly BUT in Adobe connect only the primary design is appearing, all 3 devices are displaying the same, there is no change. Is the device delivery awareness supposed to work in Adobe Connect? I know its designed correctly as Adobe Edge confirms it so what am I missing or is this responsive design not supposed to work in Adobe Connect?

    • Currently, Responsive content is not supported on Connect.

      • Tania

        When will it be supported?

  • Theri

    Help. I just purchased Captivate 8 and now struggling with importing animated objects into a responsive project. Not sure how to do it as the current animations and figures are not what I want to use. When I copy an animated object to the responsive project and preview it, it’s not animated anymore. Can someone help?

    • Dr. Pooja Jaisingh

      Hi Theri, SWF animations will not work in Responsive projects. Only the first frame of the animation will be displayed. You will need to create HTML5 animations and import them to your project.

  • Kamarajut

    Need advice. Changes made in Project skin appear in project preview mode but do not reflect in the published mp4 file. I am trying to include CC option. I have also checked the settings and tried to play the file in Windows Media Player and Quick time, but could not get the play bar as set in project skin. Please advice.

    • Kamarajut

      Sorry, posted under wrong topic.

  • Michelle

    I am working with content created in Captivate 7 and I have Captivate 8 and would like to update the older content to a response design project. What is the best way to accomplish this?

    • Dr. Pooja Jaisingh

      Hi Michelle,

      Open the Cp7 project in Cp8. Copy the slides from the existing project and paste them in a responsive project. Then adjust the size/position of objects in different breakpoints, as required.

  • Deanna Geiger

    Does anyone know how to get the “breakpoints” to stay at the top of my Adobe Captivate 9 workspace? Some of my projects its there and then others it is not. Thank you.

  • Danny Mahadik

    Can you help me how to create responsive scalable text and background images or captions settings on Captivate 8.

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Anil Pan: I am a programmer. What tool(s) can I use to create an ebook that will allow me to embed code (Java, python...
    • zaman seo: Adobe photoshop, Is Awesome , Nice post and wonderful photoshop brushes collection with details describe...
    • Mahmud hasan: I agree with you Allen, as I actually have continually tried to bring humor into learning things I...
    • Su: I would like to change the play button position in the middle of forward and backward button. How can i do that?
    • Su: how to change position of the buttons?
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV