801.796.BROS (2767)
Select Page

Responsive eLearning Design

As you may know, when using Adobe Captivate 8, you can design for responsive courses to adapt to the device or the devices you are using. The adaptability of this software is fantastic. That is why you should take the time to harness the power of this tool. By the end of this post, you will have better responsive eLearning design skills and basically become an eLearning Rockstar in the process (which is totally optional). Ready to learn more? Here are six responsive eLearning design tips:

#1 Define and Set Your Three Breakpoints

You’ll find Adobe Captivate has three breakpoints for desktop, tablet, and mobile. Each organization or client is different when it comes to screen sizes or breakpoints. To identify the breakpoints for your devices, we recommend using whatismyscreenresolution.com.

Responsive eLearning Design Video

Here is a simple video that goes through the basics of using the three breakpoint design features.

(Watch video on YouTube.)

#2 Plan for Your Playbar

Don’t forget to plan for a playbar in your course. You will want to subtract the pixels from your breakpoint height because your new playbar will use that space. The default size for a mobile playbar is 45 pixels. If your mobile breakpoint is 360 x 545 pixels, then you will want to set your mobile dimensions to 360 x 500 pixels after subtracting the 45 pixels from your height. You can do the same process for the other two breakpoints.

#3 Optimize for Mobile Projects

In Captivate, every responsive project will allow you to use the gesture configurations for mobile design. This is an excellent opportunity to optimize your content for mobile learning. Here are some options you have when publishing projects in Adobe Captivate 8:

– Long Taps
– Swiping Right/Left
– Pinching (Zoom)
– Double Taps (Show or Hide Table of Contents)
– Swiping Up/Down (Show or hide playbar)
– GeoLocation

#4 How to Maintain Aspect Ratio

You should know how to keep the aspect ratio for every object or image in your course. To do this, select an object and choose the auto option for either width or height. By setting your width and height to auto, your object will be able to maintain the right aspect ratio. I found a great example of this on the Adobe Captivate Blog. In the video example below, see how the image on the left will become distorted, and the one on the right maintains the correct aspect ratio.


#5 How to Get Objects to Move Together

In your projects, some things should just move together.  You might be thinking, “Wouldn’t it be nice if one object could follow another object on my slide? You can do this in Adobe Captivate 8. In order to make one object follow another, select “Smart Position” and drag the object handles to be attached to the object you want it to track.


#6 Design with Responsive Elements in Mind

Here is a fun tip. Start by designing in desktop view, keeping the most important elements on one side, like the left side. As you design for smaller screens, use your buttons and responsive elements on one side for your whole course. In the example below, notice the background is fixed to the top left of the course while the other elements are responsive. To make your background fixed, you will want to make sure that the element or image is set to zero for your X and Y values. That will be for the top left corner of the slide. Lastly, make your background have the same image value (height and width), so each breakpoint of the image is fixed on the left and doesn’t change in size when switching devices. You can refer to this YouTube video for ideas or see the examples below:

Desktop Preview

Tablet Preview

Mobile Preview

In closing, I highly recommend using the Adobe Captivate blog. They make awesome tips that are important with respect to creating responsive eLearning content. You should get familiar with the following resources:


Pin It on Pinterest