August 18, 2014

Super 7 Tips To Create Responsive Courses with Adobe Captivate 8

ResponsiveWith tons of devices in varied screen sizes being used by the trainees and employees, there is a dire need to make the content available on different devices. Thankfully Adobe Captivate 8 allows you to create responsive eLearning courses that can fit perfectly in different device sizes in both horizontal and vertical orientations. You can author as you always have—content will rearrange itself for the new tablet and mobile views. You can also tweak and/or design content for specific devices and use the in-product preview to see how your course will appear on various screens. And finally publish as a single project to automatically deliver the most appropriate experience for your learner’s device.

To make the most of responsive feature in Adobe Captivate 8, here’s a list of best practices you can follow:

Tip 1: First things first – Set breakpoints:

Adobe Captivate 8 has three default breakpoints/layouts based on the most common device viewport sizes. Viewport size is the visible area, excluding the area covered by the address bar and other menu options, in the device browser.

Do your own small research on the viewport sizes of the devices your learners use; and modify the breakpoints accordingly. You can find out the device viewport dimension by accessing this site on the device browser: http://viewportsizes.com/mine/

Tip 2: Planning to include playbar? Read on…

If you are planning to include a playbar in your course, make sure you deduct the pixels from viewport height that will be occupied by the playbar. Hint: The default mobile playbar in responsive projects is of 45 pixels height. So if the viewport size for the mobile device is 360 x 576, set the course dimension as 360 x 522 after deducting 45 pixels from the height. Do the same for other two breakpoints to fit content well on the devices.Playbar

Bonus tip: You can also customize the buttons appearing in Primary, Tablet, and Mobile views by modifying the playbarScript.js file. Here’s a detailed step list to make the changes.

Tip 3: Maintaining aspect ratio:

Maintaining aspect ratio is really important with responsive content as it can go haywire if the objects start scaling based on the screen dimension. To maintain aspect ratio of the objects, select Auto for either width or height of the object in the Primary view. Notice in this example, how the illustration on the left becomes distorted and the one on the right maintains the aspect ratio.

Tip 4: Resolving the text truncation issues:

Adobe Captivate 8 does a good job of adjusting the text font size to fit the text in the text captions in Primary, Tablet, and Mobile views, along with in-between views. But, if you are still facing text truncation issues, use Auto or %Relative size options for text caption height and the caption will auto grow to accommodate all the text in the caption. Notice in this example, how the text in top two captions are truncated in-between views and the bottom two text captions auto grow to accommodate the text.

Tip 5: Moving the objects together:

By default, the position of an object is linked to the edges of the slide. To change it to follow another 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 position of the main object(s) in the flowchart or character image with speech bubble. Notice in this example, how the right speech bubble moves along with the character image and the left speech bubble is out of sync.

Tip 6: Linking the overlay objects:

If you are using overlay objects, and want them to be positioned on the slide together, use % Relative for the vertical properties (height/top/bottom) of the object in Primary view, which will move the object based on the slide width instead of the object width. Some of the examples of overlay objects are: highlight box on top of an image, arrow pointing to the clickable area, video/animation on top of a placeholder image, etc. Notice in the example, how the highlight box remains intact on top of the right image, and goes out of sync with the left image.

Tip 7: Exclude objects with caution:

Adobe Captivate 8 allows you to design different elements for Primary, Tablet, and Mobile views. You can create and add view-specific objects and remove them from other views. To remove an object from a particular view, simply move it from the stage to the scrap area. 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.

Here are some words of caution when excluding objects from different views:

  • Don’t delete an object from any of the views, it will remove the object from all the views. Just move it to the scrap area.
  • Don’t exclude an interactive objects from any of the views. The interactive objects have a Pause action attached to them and will result in pausing the project with no button on the course interface, to click and move ahead.
  • Also, don’t exclude objects with audio/video attached to them. You might hear audio, even though the object is not visible on the stage.

 

Looking for more resources on creating Responsive eLearning with Adobe Captivate 8? Here you go…

 

Posted by poojajaisingh6:38 PM
  • Jeffrey

    Help! I am trying to create an ELearning interactive that, if possible, is contained on 1 slide, in which the Menu of learning topics [3 major] is on the left and looks either like drop downs [Topic 1; Topic 2; Topic 3], or like the expandable/collapsible bookmark menu in Adobe Reader [with hyperlinks, which when clicked, will take the learner to the associated topic/lesson – which may be a picture, video, or software demonstration] Reference the Captivate Help and Tutorials.pdf
    My deliverable requirement is that I have Drop down selectable menus for the topics [I have used rollover slidelets, and light box menus – the boss doesn’t like those]. So I tried using the Interactions/Learning Interaction/Drop-Down, and while I can enter the csv items into the drop down, I can’t seem to get anything to happen, or see where to tell Captivate what to do once the user clicks on a drop down menu item. I have added labels in the variable box …. I’m running out of time……

    • Dr. Pooja Jaisingh

      Hi Jeffrey, it looks like you are attempting to create a Lightbox-style menu. Watch this video for a step-by-step procedure to create it: http://youtu.be/bkVsy7YkT0Y

      Let me know if that helps.

      • Jeffrey

        Thank you Dr. Jaisingh. I actually watched this and created the Lightbox-style menu. What I am trying to mimic is the navigation pane in Adobe Reader, where all the titles of slides [chapters] are listed, and if there are subtopics in the chapters they are indented much like an outline, and are clickable links, when the user clicks them, it will either expand, collapse, or navigate to the topic listed. If you have other ideas I am very OPEN to see what else can be done. Otherwise, I think I must rely on the table of contents.

        • Dan Tasota

          If you’re looking for indentation of subtopics within chapters to occur in the TOC you can:

          1. Select the slides for a chapter (must be sequential in the left hand Filmstrip Captivate pane)
          2. Right click the selection. From the popup menu, choose Group>Create
          3. In the Properties panel, name the group “Chapter 1″
          4. Repeat steps 1 thru 3 for each chapter that you want to create.

          5. Choose Project>Table of Contents (Skin Editor displays)
          6. Click the Reset TOC button (the icon located just above the “Settings…” button in the TOC tab of the skin editor.

          The TOC will now have expandable/collapsible sections.

          • Jeffrey

            Thanks Dan.
            I have done just that on the TOC. It does collapse and expand as the client desires, I was trying to get to simpler interface, much like Adobe Reader’s Navigation Pane within a PDF document. Where each Chapter, each subject title, and even each page title could be a link to the specific topic, and then even have hyperlinks to external content within those pages. I am just unsure of which Adobe title to use to create that.
            Thank you for your response.

  • Carolina

    Hey i have a question for Captivate 8, i try to export my project in .exe and i cant find the way to do this, How can i export my proyecto in captivate 8 in .exe?

    • Richard Broom

      This is a very good point. In Captivate 7 I could (and did) publish to .exe and .dmg. This facility is missing in Captivate 8. This is a REAL pity. Adobe, please would you put this facility back and please would you explain why it was taken out. Or, if there facility is still there. Please would you tell us where it is.

      I’ve been using Captivate 8 for a couple of weeks now and, frankly, I think Captivate 7 was better. The responsive side of things in Captivate 8 is flakey and unpredictable.

      Please would you the best ways to embed a Captivate file into a web page. It seems .swf is the only option – and, when I try this with a file produced in Captivate 8, I get error messages. So far, Captivate 8 is disappointing on many levels.

      When (oh when) will Captivate be part of Creative Cloud?

  • Megan Hamilton

    I’m using Captivate 7 and have a question…I created a quiz and have an advanced action that evaluates a system variable that indicate’s the number of questions answered correctly and jumps to a specific slide based on that score. When I publish my presentation in HTML5 format, the advanced action will not run in Firefox web browsers – a blank slide that I don’t even have in my project is produced. The same project works great in Chrome, Internet Explorer, and Safari. Has anyone experienced difficulties with support for advanced actions in HTML5? What I’m doing isn’t even that fancy.

    • Shriyansh Agnihotri

      Hi Megan,

      Firefox does not supports Captivate HTML5 content, this is due to difference in implementation of standards and APIs, we might try to target covering this in upcoming releases.

      Regards
      Shriyansh
      Adobe Engineering Team.

      • Angela

        I’m noticing the same issue when trying to publish with Captivate 8. Was this not included in the release of 8? Are there any workarounds?

        • Shriyansh Agnihotri

          Captivate 8.0.1.242 HTML5 content is not compatible with Firefox Browser for now. We will include it in our specs once we succeed to certify Firefox for running Captivate HTML5 content.

      • María Carmen Usoz

        Hi Shriyansh.
        I just upgraded to the latest version of Adobe Captivate (8.0.1.242) and Firefox still does not display html 5.
        Did you not go to work on that?
        Regards

        • Shriyansh Agnihotri

          Captivate 8.0.1.242 HTML5 content is not compatible with Firefox Browser for now. We will include it in our specs once we succeed to certify Firefox for running Captivate HTML5 content..

          • http://cabezadeojo.com María Carmen Usoz

            Ok. It´s a shame… We have to wait then.

            Thanks.

            C. Usoz

  • Peter

    Hello – new to captivate 8 (great tool) but does anyone know how to KILL THE CLICK SOUND on the recordings – settings dont show that option – really annoying if you are using a headset

    • Dr. Pooja Jaisingh

      Hi Peter, you can disable the click sound by following these steps:
      1. Select one of the click boxes on the slide.
      2. In the Properties Inspector, select Disable Click Sound.
      3. Click the drop-down button next to Display, and select Apply to all items of this type.
      4. This will disable the click sound for all the click boxes.

      Let me know if this helps.

  • Richard Broom

    An news yet on whether we will be able to export to .exe .dmg from Captivate 8? Would really love to have this facility back

    • Richard

      Any chance that somebody at Adobe will answer the question in my posting above?

      • Dr. Pooja Jaisingh

        Hi Richard, we’re working on getting back this option in Captivate. You’ll hear from us soon.

        • Richard Broom

          Very many thanks Dr Pooja. This is really good news. Whilst I’m trying to get my students to do web-based training, some of them are not keen to engage with online services (i.e. Moodle). I work in the security industry (training) and that means web/Internet access is not always possible or desirable (oh the Dark Web has so much to answer for!!!!). Being able to deploy my Captivate sessions as .exe or .dmg from a ‘clean computer really makes a huge difference to my presentations and it is really important to me (and, I hope, my students!). I’m sure I am not alone. Otherwise, delighted with Captivate 8 (and still using Cap 7 for .exe .dmg)…..Very much looking forward to your news. Best Wishes. Richard

  • Lynn

    I have recently upgraded to Capt 8 at work. I want to create responsive learning projects but notice you can’t use imported pptx in responsive projects. Anyone know a way around this. Thanks

    • David Jumeau

      This feature is not available in 8.0.0.145. Hopefully, this will be integrated in a future update. (Oct 2014? Maybe?) :)

  • Susan

    I would like to know if it is possible to display the practice questions/knowledge checks in the TOC.

    • David Jumeau

      You can access the slide containing the question with the TOC via the menu (Project) or Shift+F10 and click on the “Reset TOC” button to update the table of contents.

  • Sandra Lammas

    Loving the responsive design so far but a little frustrated with some areas:
    1. How can I get a button (image button) not to resize on each view? Can I set the button size for the entire presentation? Changing it it making me crazy.
    2. When I colour and Bold text in the Primary view, it doesn’t carry over into the Tablet and Mobile views. I’m not sure why and can I make this happen as it’s a lot of triple handling.
    If you can help me with these, you’ll make me a very happy trainer!
    Thanks
    Sandra :)

    • Dr. Pooja Jaisingh

      Hi Sandra, you can maintain the button size by changing object height and width unit to pixels in the Primary breakpoint.

      Making changes to the text in tablet and mobile view will break their link with the Primary view text. Delete the text caption and add again and you’ll have the text linked again.

      • Sandra Lammas

        Thanks for the reply! I just want to confirm. We add in a training simulation within a responsive design captivate. Once we have recorded the steps and the text captions have been added automatically (which we then edit), if we only alter the Primary text captions, they will go to the other views. But if we edit a Tablet or Mobile view, it will break the link?
        Also just an idea for the next update, it would be great if some of those position options were included in the Object Style Manager. We use an arrow button on nearly every slide but have to add the position options on each slide to make sure it doesn’t shink too much in the mobile view. It would be great if it could be set in it’s default settings.
        Sandra :)

        • Dr. Pooja Jaisingh

          Hi Sandra, i’m asking someone from the engineering team to help you resolve this issue. You’ll hear from them soon.

          • Sandra Lammas

            I still haven’t been contacted by anyone Dr Pooja. :)

          • Dr. Pooja Jaisingh

            Oops! Sending then a reminder…

        • Tamish

          Hello Sandra,
          When we make any format changes (like Bold and color) for some part of the text inside a text caption, those changes will not flow in the lower views. But if the format properties are applied for the whole text caption then changes should flow in lower views.

          For the positioning of the Arrow, can you please try the following options:
          1. Instead of redrawing the Arrow you can use copy/paste, it will maintain the position properties.
          2. Draw the Arrow in Master slide to save rework.
          3. Change the display time for the arrow to ‘Rest of the Project’

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Lisa M. Matthews: Hi, Yes that is what my conditional action is doing. I was actually able to get this working. I had...
    • Bob: Expresso for you and me, not you and I.
    • Marie Andersson: Thanks for a blog post focusing on company related knowledge sharing. As is obvious from this...
    • Mohana: Hey Lisa I have assumed that you have used a conditional action which jumps to a slide if the entry is...
    • Dr. Pooja Jaisingh: Yes, you can convert the Submit button from Text to Image button and add your own custom button...
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV

Recently Approved