Your Source for Learning
Technology, Strategy, and News
ARTICLES       RSS feed RSS feed

Responsive eLearning with Adobe Captivate 8: Step-by-Step

by Pooja Jaisingh

June 12, 2014


by Pooja Jaisingh

June 12, 2014

“In Captivate, responsive courses have three breakpoints: Primary, Tablet, and Mobile. These breakpoints denote the starting point of a view; the range of width between two breakpoints has a common screen design. For example, if the width of your learner’s device viewport is 800 pixels, he will see the content designed for Primary view and the learner with device viewport width of 600 pixels will see the content designed for Tablet view.”

So, you’ve heard about the new Adobe Captivate 8 and you’re eager to start creating responsive eLearning courses, using a familiar eLearning tool. If you are looking for a quick step-list to help you create your first responsive course, read on!

First things first … What is responsive eLearning?

Responsive eLearning is a single eLearning course that plays well on any device—desktop, laptop, tablet, or mobile; and in any orientation—horizontal or vertical. The course dynamically adapts itself to the size and type of the device it is being viewed on.

Let’s create a responsive eLearning course

  1. Open Adobe Captivate 8.
  2. On the Welcome screen, under New section, double-click the Responsive Project thumbnail (Figure 1).

    Figure 1: Adobe Captivate 8 Welcome screen

This will create a responsive project for you with three different breakpoints for Primary, Tablet, and Mobile layout.

Breakpoint? What’s that?

If you are new to responsive design, you possibly haven’t heard of breakpoints. Breakpoints are the different design layouts based on the viewport size of the devices your learners use. Viewport size is the visible area (excluding the area covered by the address bar and other menu options) in the device browser. You can easily find out the device’s viewport size by visiting this site (Figure 2).

Figure 2:
Viewport size for an Android phone

In Captivate, responsive courses have three breakpoints: Primary (1024×627 pixels), Tablet (768×627 pixels), and Mobile (360×415 pixels). These breakpoints denote the starting point of a view; the range of width between two breakpoints has a common screen design. For example, if the width of your learner’s device viewport is 800 pixels, he will see the content designed for Primary view and the learner with device viewport width of 600 pixels will see the content designed for Tablet view.

  1. You can change the width of these breakpoints by moving the slider below the breakpoint name. The maximum width you can have for Primary breakpoint is 1280 pixels; and minimum width for Mobile breakpoint is 320 pixels (Figure 3).

    Figure 3: Primary breakpoint in responsive project

  2. To change the height for the breakpoints, select View Device Height and move the device height handle up or down (Figure 4).

    Figure 4: Changing the device height

  3. If you wish to change height for a single slide to allow scrollable content on the slide, go to the Properties Inspector, and click Unlink from Device height and increase the slide height (Figure 5).

    Figure 5: Increasing the slide height

Using Responsive themes and theme colors

Once you have finished setting the breakpoint dimensions for your course, the next step is to apply a responsive theme to your project.

  1. In the toolbar, click Themes and select one of the themes to apply. If you want to change the color scheme of the theme, click Theme Colors and either select one of the theme-color palettes or click Customize to create a new theme-color palette.

    Figure 6:
    Applying a new theme and changing theme colors

  2. Now switch amongst the three breakpoints and notice how the content reflows based on the device size.
  3. Add an image, shape, or character to the slide and notice that, by default, the size and position of the object is set to % (percent). Go to the Position Inspector (Figure 7) and change it, based on your requirement:

Positioning and sizing the objects right!

  • Let it remain % if you want the object size or position to be a percentage of screen width or height.
  • Switch to Pixel if you want the object to be of a fixed size or position.
  • If you want to maintain the aspect ratio of an object, set either width or height of the object to Auto.
  • If you are using overlay objects, and want them positioned on the slide together, use % Relative for the vertical properties (height/top/bottom) of the object, which will move the object based on the slide width instead of the object width.
  • You can also set a minimum/maximum size for an object by setting the values under the Advanced accordion in Position Inspector. This will resize the object based on the screen size but will limit it from going beyond the minimum or maximum size. This property is especially useful for logos and other branding elements, which need to look consistent and be legible at all times.
  • By default, the position of an object is linked to the edges of the slide. To change it to follow an object on the slide, select Smart Position and drag the object handles to attach them to the desired object. This functionality is highly useful for screens with flowcharts where you want the objects to move based on the main object(s) in the flowchart.

    Figure 7:
    Position Inspector

Please note: Captivate maintains a parent-child relationship amongst the breakpoints from Primary-to-Tablet, and Tablet-to-Mobile view respectively. The settings you make for a breakpoint will exist in all the lower breakpoints and views unless you modify the settings for a particular view and break the link.

Excluding objects from other views

If you wish to use different design elements for Primary, Tablet, and Mobile views, you can create and add view-specific objects.

  1. To remove an object from a particular view, simply move it from the stage to the scrap area.
  2. To keep the object in just one view and exclude from the rest of the views, right-click the object and select Exclude from Other Views.

Adding and formatting text for different views

You can add different text to the same text caption for each breakpoint. You can also have different text formatting settings for these breakpoints.

  1. Add a text caption, and change the text and text formatting in three different views. (Figure 8)

    Figure 8: Captivate 8 Responsive Course with different text appearing in different breakpoints

Previewing options

Previewing a project is an extremely important task while creating an eLearning course, and Captivate provides various options to preview the responsive content well.

  1. You can check the placement of the objects in different layouts in the edit area by switching to different breakpoints.
  2. You can also preview the course in a browser. Click Preview > Project to preview the course in a browser. (Figure 9)
  3. In the browser, click the 1024, 768, and 360 buttons to preview the course in three different views.
  4. Move the slider to preview how the course looks in in-between views.

    Figure 9: Responsive project preview in browser

  5. Adobe Captivate also has a preview option with Edge Inspect, to help you preview your courses directly on devices. Click Preview > In Adobe Edge Inspect to preview the content directly on devices.
  6. Start Adobe Edge Inspect on your desktop, connect the devices using the Edge Inspect plugin for Chrome, and preview the content directly on your iOS and Android devices.
  7. The last step is to publish your responsive course. Click Publish > Publish for Devices to open the Publish dialog. (Figure 10)

Publishing the responsive course

Figure 10: Publish dialog

  1. To enable gestures for your course, click Yes next to Mobile Gestures. This will allow you to swipe left or right to navigate, pinch to zoom, long tap to play/pause the movie, double tap to show/hide the table of contents, and swipe up or down to show/hide the playbar.
  2. Hit Publish and upload the course package to an LMS or web server.

Your responsive course is ready to share with the learners!

Editor’s comment

Want to build eLearning that can be consumed on all the devices—from desktop to laptop to tablet to mobile—that your learners use? Poojah Jaisingh will present “Creating Responsive Courses with Adobe Captivate 8” in The Guild Academy virtual classroom September 3 – 17! For more information on this Live Online Course, open this link.

Topics Covered

Appreciate this!
Google Plusone Twitter LinkedIn Pinterest Facebook Email Print

Login or subscribe to comment

Please I need to know how to export in swf format.
And how to link two or three project with a button
Related Articles