Get access to premium assets for free. Be the first to hear from Adobe.

Super 7 Tips To Create Responsive Courses with Adobe Captivate

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 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 the 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 has 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.

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 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 aninteractive objectsrom 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…


64 Responses

  1. 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……

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

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

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

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

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

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

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

        • 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

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

  5. 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 🙂

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

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

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

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

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

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

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

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

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

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

  10. Hello
    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?

  11. 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?

  12. 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?

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

  14. 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!!

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

  15. 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?

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

  17. 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. ????

Leave a reply