Blog Series: Responsive eLearning with Adobe Captivate 2017

In this 14-part blog series, we took a deep dive into how to create responsive courses using Fluid Boxes and customize the properties to suit our requirements.

Here are the links to the posts:

Part 1: Creating a responsive project

Part 2: Resizing the responsive project

Part 3: Adding Fluid Boxes

Part 4: Adding objects to Fluid Boxes

Part 5: Using the fill option for Fluid Boxes

Part 6: Modifying Fluid Box properties

Part 7: Using Static Fluid Boxes

Part 8: Using Optional Fluid Boxes

Part 9: Using responsive text

Part 10: Using Fluid Boxes with master slides

Part 11: Recording responsive simulation

Part 12: Enabling gestures

Part 13: Converting non-responsive projects to responsive

Part 14: Switching to Breakpoint mode

If you wish to watch the videos for each of these parts, here’s a playlist with the videos:

The post Blog Series: Responsive eLearning with Adobe Captivate 2017 appeared first on eLearning.

Responsive eLearning with Captivate 2017 – Part 14: Switching to Breakpoint mode

This is the last part of the 14-part blog series on Responsive eLearning with Adobe Captivate 2017. So far we’ve learned how to create a responsive project, rescale it, add Fluid Boxes to the slides, add objects to the Fluid Boxes, apply background fill, modify the properties of the Fluid Boxes, use the static and optional properties, best practices for adding text, using Fluid Boxes in master slides, recording responsive simulations, enabling gestures , and converting your non-responsive projects to responsive in Adobe Captivate 2017. Now let’s learn how to switch from Fluid Box mode to the breakpoint mode in Adobe Captivate 2017.

Responsive eLearning workflow was added to Captivate back in version 8, but Fluid Boxes are new to version 2017. In Captivate 8 and 9, you could create responsive eLearning courses using the Breakpoint mode. This approach, based on breakpoints, is still available today in Captivate 2017.

You can use the Breakpoints approach if you have an older responsive project to maintain, or if you feel more at ease with the Breakpoint approach rather than with the new Fluid Boxes approach. You can also refer this blog post by Lieve Weymeis to choose between Fluid Boxes and Breakpoints to build the responsive courses.

Watch this video to take a look at the steps to switch to the breakpoint mode:

This brings us to the end of this blog series on responsive eLearning. Watch this space for more blog series on different Captivate workflows.

Happy captivating! 			</div><!-- .entry-content -->
	    
	<footer class=

Short answer in a responsive project

I have created a series of short answer slides in a responsive project.  When I run the Scorm Preview, and I type in answers to the questions, nothing appears.  The system acknowledges the typing though and tells me if the answer is correct or not, even though the answer is not shown on the screen.

What setting am I missing here?
Laurie

The post Short answer in a responsive project appeared first on eLearning.

Responsive eLearning with Captivate 2017 – Part 13: Converting non-responsive projects to responsive

In this Part 13 of 14-part blog series, let’s learn how to convert your non-responsive projects to responsive. So far we’ve learned how to create a responsive project, rescale it, add Fluid Boxes to the slides, add objects to the Fluid Boxes, apply background fill, modify the properties of the Fluid Boxes, use the static and optional properties, best practices for adding text, using Fluid Boxes in master slides, recording responsive simulations, and enabling gestures for responsive courses in Adobe Captivate 2017.

With the new Fluid Box responsive workflow in Adobe Captivate 2017, you can convert a non-responsive Captivate project created using version 8, 9, or 2017 to a fully responsive project.

Watch this video to learn how to convert your non-responsive projects to responsive:

This simple workflow will allow you to easily convert your legacy desktop-only courses to fully-responsive courses.

To learn more about the guidelines and best practices for converting the projects from non-responsive to responsive format, refer the following blog posts:

Guidelines Part 1

Guidelines Part 2

In the next and the last part of this blog series, we will learn how to switch to the breakpoint mode in Adobe Captivate 2017.

Happy captivating! 			</div><!-- .entry-content -->
	    
	<footer class=

Responsive eLearning with Captivate 2017 – Part 12: Enabling gestures

In this Part 12 of 14-part blog series, we will talk about enabling gestures for your responsive eLearning courses. So far we’ve learned how to create a responsive project, rescale it, add Fluid Boxes to the slides, add objects to the Fluid Boxes, apply background fill, modify the properties of the Fluid Boxes, use the static and optional properties, best practices for adding text, using Fluid Boxes in master slides, and recording responsive simulations in Adobe Captivate 2017.

One of the things that characterise the mobile experience (versus the desktop/laptop experience) is the touch screen. Owners of mobile devices use their fingers to interact with their devices by performing various gestures like swipes, taps, double-taps, pinches, and so on. The Mobile Palette feature in Captivate gives you the ability to leverage the power of those mobile gestures in your projects.

The Gestures option is not limited to the Responsive Projects only. You can use Gestures in any standard project as well, but they will function only if you publish the project in HTML5 format.

Watch this video to learn how to enable gestures for responsive and HTML5 courses:

In the next part, we will learn how to convert non-responsive projects to responsive in Adobe Captivate 2017.

Happy captivating! 			</div><!-- .entry-content -->
	    
	<footer class=

Responsive eLearning with Captivate 2017 – Part 11: Recording responsive simulation

We are almost at the end of this blog post series. So far we’ve learned how to create a responsive project, rescale it, add Fluid Boxes to the slides, add objects to the Fluid Boxes, apply background fill, modify the properties of the Fluid Boxes, use the static and optional properties, best practices for adding text, and using Fluid Boxes in master slides. Now let’s learn how to record responsive simulations in Adobe Captivate 2017.

The steps to record a responsive simulation are the same as a normal simulation. The only difference is that you cannot start the workflow from creating a simulation directly. You will first need to create a responsive project and then add simulation slides to it.

Watch this video to learn about the steps to record and edit responsive software simulations:

In the next part, we will learn how to enable gestures for responsive and HTML5 courses in Adobe Captivate.

Happy captivating! 			</div><!-- .entry-content -->
	    
	<footer class=

Responsive eLearning with Captivate 2017 – Part 10: Using Fluid Boxes with master slides

In this 14-part blog series, so far we’ve learned how to create a responsive project, rescale it, add Fluid Boxes to the slides, add objects to the Fluid Boxes, apply background fill, modify the properties of the Fluid Boxes, use the static and optional properties, and best practices for adding text in responsive projects. Now let’s learn how to use Fluid Boxes in master slides. Also learn how they are different from Fluid Boxes added to the Filmstrip slides.

When you apply a Master Slide to a slide in the project, it inherits the Fluid Boxes from the master slide.

Fluid Boxes on master slides work almost the same as the Fluid Boxes on filmstrip slides. Here are a few differences:

  • You cannot name the Fluid Boxes on Master Slides.
  • When a slide is associated with a Master Slide, the Fluid Boxes from the Master Slide are inherited by the slide.
  • These inherited Fluid Boxes cannot be deleted, but they can be resized.
  • Along with these inherited Fluid Boxes on the slide, new Fluid Boxes can be added and subsequently deleted on the slide.
  • Question slides in Captivate projects also inherit the Fluid Boxes from the associated master slide. And the same differences will apply to the Fluid Boxes inherited from the Master Slides on the question slides.

Watch this video to learn more about Fluid Boxes in master slides:

In the next part, we will learn how to record responsive simulations in Adobe Captivate 2017.

Happy captivating! 			</div><!-- .entry-content -->
	    
	<footer class=

First Impressions: Creating Responsive Content in Adobe Captivate 2017

If you design or develop eLearning content, you’ve likely run into issues displaying content on multiple devices, such as desktop computers, tablets and smartphones. For example, a really nice graphic may display well on a laptop, but look too small or be cut off on a smartphone.

Authoring packages that generate “responsive” content have solved the issue of displaying on different devices by allowing the content to rearrange itself based on the type of device. The advantage is that you create content once and it displays well on all devices.  Adobe Captivate 2017 is one such package, allowing you to create responsive content through Break points and Fluid Boxes.

Break Points

Captivate’s first method of creating responsive content is through the use of Break Points. In short, Break Points are views within the Captivate interface that show how your content will appear on different devices. What’s more, you can adjust the content within each view, such as changing the size or position of text and images. Captivate stores this information for future reference.

When you publish your project, Captivate includes the layout for each of the Break Points. This comes in handy when someone tries to view your content using different devices. Captivate will detect the type of device and present the content according to your Break Point format. For example, the text and graphics will display on the users phone according to your Break Point format for a smartphone.

Fluid Boxes

The second method Captivate uses to create responsive content involves the use of Fluid Boxes. This method differs from Break Points in that instead of formatting your text and graphics for a number of individual views, you enter content into one view that contains “Fluid Boxes”. These Fluid Boxes, in turn, resize and adjust themselves to the screen size of whatever device displays the content in a “fluid” manner.

Fluid Boxes are organized much like a spread sheet where you have a grid of cells, with each cell allowing formatting of its contents, such as the font size. However, with fluid boxes, you can specify how the cells and content react when the screen size of the display device changes. For example, you can set the properties of the Fluid Boxes so they adjust the content size or reorganize it by wrapping.

Comparison

Based on my initial experience, both Break Points and Fluid Boxes produce responsive content that will get the job done. However, each method has its own unique advantages and disadvantages.

Break Points provide a greater deal of control on how your content will display on different devices, allowing you to set specific font sizes, graphic sizes and their relative positions. However, the downside is that your content is optimized for only 5 display sizes. If your are delivering content through a variety of different smartphones and tablets, you could run into some problems.

Fluid Boxes, in contrast, will adjust to any device based on screen size. However, you give up some flexibility in specifying how the content will be displayed. Simple designs, that allowing wrapping of content, seem to work best.

Conclusion

Both Break Points and Fluid Boxes are powerful features that will allow you create responsive content for end users. Which method works best will likely depend on your design style and the number of different display devices your end user have. If you are into control, and can standardize delivery devices, Break Points will likely work better. If you are delivering to a large variety of devices, and don’t mind simplifying your designs, Fluid Boxes will likely work better.

I look forward to exploring the responsive features in Captivate 2017. Good luck with your own eLearning efforts.

The post First Impressions: Creating Responsive Content in Adobe Captivate 2017 appeared first on eLearning.

Captivate: Position Background Graphic for Demo Simulation

I’m editing a Demo Simulation created with Captivate 9 for a responsive project using breakpoints. I was able to adjust the position of the background graphic (or the position of viewed area of the graphic), but I can’t position it precisely. As a result, the background “jumps” between slides.

Is there an option to precisely position the background graphic for a simulation, for example, set the position of the graphic to 100,100 for two successive slides?

The post Captivate: Position Background Graphic for Demo Simulation appeared first on eLearning.