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:

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:

      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.

      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 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 ( and Firefox still does not display html 5.
        Did you not go to work on that?

        • Shriyansh Agnihotri

          Captivate 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..

  • 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 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!
    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…

          • Willow R. Neilson

            Hi, I have been having the same issues. I was selecting “apply text properties etc.” so it would flow through but then it wouldn’t resize. Has anyone fixed this issue and advised a best practice?

          • Nsukumar

            Hi Willow,

            Can you please elaborate little more on the issue?
            “It would flow through but then it wouldn’t resize”, by this you
            meant the object in tablet/mobile view doesn’t re size to fit the text after
            selecting ‘Apply Text and Text Properties to all the views’ option?

          • Willow R. Neilson

            Hi, When I make any changes in a text caption in the primary view, even deleting text, it doesn’t carry through to the tablet/mobile view. It is the same with text formatting, it just doesn’t carry through. If I use “Apply text and Text Properties to all views” then the text doesn’t resize for views so it will for instance stay 18pt on primary, tablet and mobile view. It’s really annoying and frustrating and wastes a lot of time. Is there a setting I can put on and then it will all flow through?

        • 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’

  • Thompson Lewis

    i have several versions of Captivate on my machine. When i am in version 8 and go to help it sends me to the local help file for Captivate 6. How can i make it point to the right version?

  • Sam

    Trying to find a way to include a fun avatar in responsive design. Know any free ones that are compatible with HTML5? Or how to easily create?

  • George

    Hello there, I have created a Responsive elearning course and have used Helvetica Neue. When I preview the same course the fonts have not transferred to the mobile device, Times New roman is used instead. Is there a way of forcing the mobile device browser to show my preferred font?? Thanks in advance. George.

  • Yassin

    Have been using Captivate for a couple of years now, and CP8 is just awesome. Although I want to raise some request for improvements.
    1. Be able to add company logo in the TOC and the width is the same as the TOC. Today is the width is very small so the logo becomes very little.
    2. The border settings in the skin editor is not working in HTML5 output.
    3. The border settings is not appearing under the playerbar, only upper, right and left in SWF output.

  • Bev

    Is Captivate 8 compatible with OS X Yosemite v. 10.10.1?

  • Bev

    Is there a reason why I can’t publish to Adobe Connect? Publishing options do not show in Captivate 8 like they did for all of my Captivate 7 projects. The only option that shows is to publish to my computer.

  • Clara Moll

    Hello, I created a training module on captivate 8, how do I publish on our website. The publish button only gives me two options Publish for devices and Publish to adobe connect

  • Sanjay Sood

    I have recently downloaded the Adobe Captivate and learning the various features. In my project I want an image to appear at a click of a button. How can I do that?

  • Elly Brewer

    We are using Captivate 8 and loaded into our LMS. When the learner is in a course, and cannot finish, we cannot get Captivate 8 to recall where the learner left off, and open back up to that slide. We ask them to use re-launch and it always takes them right back to the very beginning. Frustrating for our learner. Any advice?

    • Shriyansh Agnihotri

      Hi Elly,

      We like to help you on this issue, please drop me a mail stating your problem as well as the LMS name and Standard you are using.

      Adobe Engineering Team.

  • Yassin

    Please add the resources function in Adobe Captivate, where students can download some files and documents.

  • Cassie

    Love the responsive design, but I cannot get the HTML5 output to display in an iframe, it just does the loading symbol. If the responsive courses do not play in iframes, is there a way to publish them as mp4’s instead?

  • Marc

    I am having trouble with these videos they do not playback.

  • awesome keep it up

  • Steven Squires

    can Captivate 9 play audio only when an object is clicked?

    • Dr. Pooja Jaisingh

      Yes, you can assign Play Audio action to any interactive object in Captivate.

      • Steven Squires

        Dr. Jaisingh – can you point me to instructions and also maybe recommend a good book for Captivate 9 study?

  • Lisa Matthews

    I have been using Captivate 8 to create quizzes and exercises for online video courses in the IT industry. They are published as HTML5 and generally work great. However, I am getting reports that they are not working on Linux machines. I would love to figure out why.

    • Dr. Pooja Jaisingh

      Hi Lisa, can you please let me know which browser is being used for viewing the content?

  • Brie Cohen Vlach

    I am creating responsive projects in Captivate 9 and am having an issue with overlay objects working for some devices. It works for all the breakpoints I have set up in Captivate, but when I move the slider bar on the preview (to see all possible breakpoints/devices), there are multiple breakpoints I am having a problem with.

    I have an image and have different arrows pointing to different parts of the image as they are mentionedin the narration. I followed the instructions in the video for overlay objects (using % relative), which works great to keep those elements together. Just one problem: for some breakpoints, the overlay object grouping moves up on the slide, covering up other elements on the slide. How can I fix this, so my project can work seemlessly for any breakpoint or device? Thank you!!

    • mayank mehrotra

      Hi Brie ,
      Layout for viewports that fall between or beyond preset breakpoints cannot be controlled much. If the preset breakpoint widths are 1024 (primary), 768 (tablet) and 360 (phone), then output on a device that has a viewport width of 962 cannot be controlled and can cause alignment or overlapping of contents. With Captivate 9 you have additional breakpoints to overcome this to some extent. You must know the device view ports for your audience to avoid such issues.

  • Valerie Wood

    In Captivate 8, I select New Projects > Responsive Projects and all of my draggable and droppable images are on the stage, I am not able to access the Drag and Drop menu. Why is this?

  • May

    Hi my company works with a LMS&LCMS which uses the SCORM 1.2.

    I worked with Captivate before but it’s the first time that we are creating a
    Captivate Responsive Project and we are currently testing it.

    The first try was not really successful:

    1. If I try to start the elearning in our LCMS I received an error message (API failure) after doing the quiz, I also was not able to set it to ‘completed’.

    2. After clicking on ‘Ok’, I got a white screen with a ‘Play button’. I have to click on it to start the course. Is there a way to remove it, maybe in the settings?

    Thank you in advance for any support.

  • Vanashree

    Captivate 9 published HTML 5 output not playing audio in mobile device ow in i-pad.
    Could you please help for this?

  • rjim

    I have some Captivate 9, responsive slides. When I publish the slides, the timed objects do not shown in the final html5. Some slide have objects such as graphics(png), arrows, and text boxes that have a delay period or show only for a given time. They work within Captivate when I run the timeline, but do not even show in the published code. I tried several different browsers. ????

  • Samuel Ramos

    How do I delete the portrait view in responsive mode? I only want the landscape mode…

  • Shreya Datta

    Hey guys! I am creating e learning modules for my company in adobe captivate but i am stuck with Screen size issue. My computer screen is 1680 x 1050. just guide me how to make a responsive project with this size that I have a full screen of my project.

    waiting for your reply…..

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Darrell McElmurry: I’m having trouble seeing the text captions using Captive Studio 8 to create a multiple...
    • Alrazy: same here. no e-commerce functionality; you will have to sue a separate solution for registration and the...
    • Alrazy: Great product, but it does not provide an end-to-end solution – there is no e-commerce functionality;...
    • Andrew Gould: Same here…
    • jack heeney: You’re wrong and there isnt one… hand code your own learning environment if you want freedom...
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV