Getting Responsive Captivate to Actually Go Full Screen on Desktop

In this video tutorial, I review a similar question I saw twice on the same day and that was how to get my responsive design to fill the screen on my desktop computer as well as on my tablets and mobile devices.

Fake Text Popups in Adobe Captivate Fluid Box Design

In this video tutorial, I show you how I would manage a simulated text popup in my fluid box responsive design eLearning project in Adobe Captivate.

Understanding the Position Panel in Adobe Captivate

This video will cover the use of the position panel when your slide objects are either unlocked from fluid boxes, or if you are using Breakpoint responsive design mode.

You can still design responsive design using Breakpoints in Adobe Captivate 2017 and newer by switching from the default of Fluid Boxes to Breakpoints. You can do this from the Project drop down menu and selecting Switch to Breakpoint Mode. In Fluid Box Mode you can continue to use unlocked objects on your slide in much the same way as in Breakpoint Mode. Personally, I refer to this mode as Single Point Mode and it offers some nice advantages over the other two responsive design methods. Mostly it centers around the ability to still have objects over top of one another, but also offers the advantage of designing with a single view as in non-responsive projects (Blank Projects).

Background images

When you add an image that is appropriately sized for desktop layout to a slide in either Breakpoint mode or what I’m calling my single point mode it looks fine. If you switch to another Breakpoint or resize your layout preview to another view, it becomes obvious that the image needs different settings in order to be a background image across a wide range of device screens. This is where knowing how to work with the position panel is helpful. By default, an image comes into Captivate with a width measured in percentage of the screen width and a height set to auto to maintain the aspect ratio. Because the width changes as the screen size is reduced, the height doesn’t cover the entire screen. Instead it shrinks down as to view the project on smaller or more narrow screen layouts.

My solution to this problem is to change the settings in the Position Panel for images intended to be used as background images. I will change the value of my width to be measured in pixels and set it at the maximum value for a Desktop view. For example, if I have a Desktop view of 1024 x 627, I will set the Width of my image to 1024 px.

By default, images are aligned with the left-hand side of your slide. When you set the above background image to a fixed number of pixels, the left-hand side of the image will always be present. On screen sizes that are smaller than the maximum width the image the right-hand side of the image will disappear. You can change this by changing the image position from Left 0.0 % to Right 0.0%. alternatively, you can open the Advanced section of your Position panel and check Align Center horizontally on the slide if you want the image to always display the center of the image on the center of the slide. Your decision will depend on the composition of the image you’ve decided to use as a background image. You will discover that knowing where the slide is in relation to the background image becomes difficult on the smaller screen layouts since the background image will covering up your entire stage. You can turn on a preview of the slide outline by selecting your slide and navigating to the Properties inspector and checking the Device Height option under the Style tab.

Company Logos

When designing organizational training, we often must include brand logos. Brands often have very precise rules over how their logos are displayed. Adobe Captivate has some features in the Position Panel that can help with this.

Rules About Space

Because of the importance of your company’s logo, there are often rules about it’s use. For example, company’s will dictate safety space around their logos to ensure prominence. You can apply these rules to your company logo in Captivate. The object position can be set to be a certain percentage or number of pixels from the top, left, bottom and right of the slide edges. For example, if your company logo must be 10 pixels away from the top left edge you can change the Top and Left Fields in your Position panel to pixels and enter values of 10 pixels in each field.

Another aspect about space between objects can be enforced using Smart Position. Smart Position isn’t on by default but it’s useful for ensuring that objects don’t get too close to one another when the screen size is smaller. If you check the Smart Position check box, your objects that are not centered one way or the other will now have two lines extending out from the object and what I call anchor points attached to either the top, left, bottom, or right edges of the slide. These anchor points can be clicked and dragged away from the edges of your slide and attached to any other object on your slide. You are then setting that object to not appear a certain distance from the edge but instead setting that object to appear a certain distance from other objects. I often will use this feature to ensure that the body of a slide is always below the title of the slide. It will help you make sure that objects don’t encroach on other objects and is helpful in designing your layout to be consistent across as many displays as possible.

Size Rules

Another rule about your company logo is its size. You might find that as you shrink your slide preview down to smartphone size, the logo becomes so small that it’s unrecognizable or lacks prominence. Captivate can help you with this as it allows you to set the minimum and maximum height and widths for each object as well. For example, your company might have a rule about the brand logo not being smaller than 80 pixels tall. By entering this value in the Min-Height field you can ensure that your logo remains larger for small screen sizes and continues to showcase its importance.

Setting your Adobe Captivate Dimensions

In this video tutorial, I show you how to set and resize the dimensions of various types of eLearning projects including responsive and non-responsive projects.

Here is the video that Johan commented on. It's a couple of years old at the time of this present video so it may not be applicable for new Adobe Captivate users.

https://youtu.be/7SnjwP8N4c0

Responsive Software Simulation

In this Adobe Captivate Video Tutorial, I'll show you how you can convert a non-responsive software simulation into a responsive software simulation that is suitable for mobile devices such as tablets and smartphones.

Responsive Learning

When designing for mobile I find you need to rethink learning. I always try to imagine what my learner needs from each project. For example, if an employee wanted to access my lesson while commuting on the train, what needs to be on their screen? Do I need just the basics or should I try to cram my desktop design onto their tiny screen?

Another colleague and I have coined the phrase responsive learning. This is not to be confused with responsive design. No, responsive learning is a theory that I have that true mobile learning should not only know what screen size you have and accommodate for that, but to also understand the environment your learner is in and adjust the learning to be suitable for that environment. Adobe Captivate has begun this process by integrating location based information into your course. For example you could design a course in Adobe Captivate that not only adjusts the on-screen content based on the size of screen you are using but also adjust the content based on where you are. One of the eLearning evangelists at Adobe designed a sample course that would act as a tour guide within a theme park. When users would change their physical location the Captivate project would present new information based on where the learner was located within the theme park. Here is a link if you want to see this in action.

Making of an Award-winning Location-aware App!

I think we are in early days of this type of technology. In fact I would like to see location aware technology go even further than just pinpointing where you are located on the planet but to gather enough information as to determine what type of activity you are currently engaged using sensors that can determine how fast you are moving and so on. For example, it wouldn't be appropriate to have text on screen for a course while you are driving. In such circumstances perhaps the learning switches to podcast mode and presents the material in a radio show format. Perhaps this is done through a combination of GPS location, speed of travel, or maybe it just asks you what you are doing at the present and adjusts the learning based on the answers you give.

In other words, I think mobile is just getting started and we can expect that the most successful instructional designers and developers are those that take advantage of each new mobile technology as they come out. It will no longer be acceptable to just pump out a series of PowerPoint slides any more. I think we are about to see some really cool technology implemented in some really original and different ways. Stay tuned…