801.796.BROS (2767)

Responsive Projects in Captivate 8

Responsive projects in Captivate 8 offer the ability to design and publish responsive mobile projects in a way we haven’t seen in the past. In order to effectively design courses for this new capability, we may consider keeping a few things in mind further up-stream in the design process, starting with a mobile-first approach to course design and storyboarding. We offer this blog as Quick Start Guide for instructional designers looking to design for responsive projects.

What Does Responsive Projects in Captivate 8 Mean?

A responsive project means that a single Captivate 8 responsive project file will, when published, have:

– A standard functional and visual design for a computer or “primary” display (the same as any other project you are used to)
– A separate, custom functional and visual design for a tablet display
– A separate, custom functional and visual design for a mobile display

Custom “functional design” means the file is geared to take advantage of features such as, swiping, tapping, pinching, etc. Custom “visual design” means that designers have the capability to individually optimize the visual design of each of the three views (primary, tablet, and mobile).

Designing Custom Screens in Captivate 8

How can you know if you need to design more than one view of a single screen? Start by determining the most common mobile screen sizes being used by your learner, and account for them in the setup of your storyboard. If you don’t know the screen size, you can use the mobile device itself to visit a site like whatismyscreenresolution.com to find out.


Once you know the primary, tablet, and mobile dimensions used by your client or organization, set your storyboard up to reflect them. eLearning Brothers is releasing a separate version of our free storyboard template that helps with responsive/mobile instructional design. Each screen within the template is set up for the “primary” dimensions of a default Captivate responsive project file (1024×627). Additionally, you can change the layout of a storyboard slide to “tablet view” (768×627) or “mobile view” (360 x 415) as seen below. These are the default responsive sizes within the Captivate project file, but you, could of course, customize them in the storyboard to match the sizes you choose to use in Captivate. Download the Free Mobile Instructional Design Storyboard Template for Captivate 8 here.

(You will have to sign up for a free account to get this template. After signing up, go to the free section of the Library click on ELB ID Template. You have the option between a Standard template or a mobile responsive template.)

Not only do these new layouts show you the real estate differences between primary, tablet, and mobile view, but they also provide an opportunity for you to specify the content that may appear offstage and need to be accessed via Up/Down swiping.

Although it’s nice to be able to have three completely different types of views for each screen in your course, most of us don’t want to do “three times the work” for a single course. With that in mind, here are a few tips for designing screens in a way that limits the amount of customization required in order for the screen to work well for all three views

Tip #1: Keep it Simple

While the primary view of your project may allow for ample graphical space, tiny text, or multiple click areas – the mobile view of your course will not.  Take a mobile-first design approach by keeping your primary view design simple. It will much more simply translate to the mobile view. Consider limiting the complexity of your interactions and creating more or separate slide views as an alternative to a single screen with multiple stages or levels of interaction and layers.

Tip #2: Keep It Central

Most eLearning courses are landscape-oriented. When you take a mobile-first approach to a course, your page design needs to work well whether it is landscape (primary/tablet) or portrait-oriented (mobile). To achieve this, keep content, action, decisions, and interaction “central” to the stage. This way, as the screen real estate shrinks horizontally, the most important elements can remain (perhaps with slight adjustments) without changing things too much.  Consider the difference between these primary, tablet, and mobile view storyboard screens below. You can see how the design supports both landscape and portrait-oriented layouts, making it easily adapt to mobile display through keeping the design elements central to the screen. This is especially painless between primary and tablet view, and requires only slight modification for mobile view.

Tip #3: Keep it Clean

Rather than trying to fit everything on the screen, consider resizing or simply eliminating some of your graphics. Content, clarity, and functionality should trump superfluous graphics. Consider the difference between this primary and mobile view to see what was cut, without sacrificing instruction:

(Primary View)

(Simplified Mobile View)

It would be tough to display the computer graphic from this course in a vertically oriented display. But – is the computer necessary? In this case, no. So the simple solution is to dispose of it and focus on the screen contents themselves for the mobile display.

Designing for Mobile Features

Published projects in Captivate 8 will have options for:

– Long Taps
– Swiping Right/Left
– Pinching
– Double Taps
– Swiping Up/Down
– GeoLocation

For the most part, these do not need to change the way you design your course. For example, if the project is published with gestures enabled, navigation will automatically be triggered by swiping, the Table of Contents will automatically be shown with a double tap, etc. The two main features you should be concerned about in design are:

#1 Swiping Up/Down

We previously discussed that most eLearning courses are landscape oriented. This doesn’t need to change – but when designing a mobile course, you may need to count on using up/down swipes to allow the user to see more screen real estate and digest the same content that could be displayed on a landscape/primary view. Keep in mind that the eLearning Brothers Storyboard Template has slides set up and ready for you to design with this feature.

#2 GeoLocation

Simply put, Captivate 8’s GeoLocation feature allows you display geographically based content from the same course file when designing mobile learning. The course will now be able to utilizing the mobile device’s GPS locator to determine the location of the learner and display, as appropriate, geographically based content just for them. This has many practical applications for instructional designers. You can now design courses that easily:

– Display custom policies and procedures for regional/international offices
– Play/display narration or text that best caters to local language, dialect, terms, acronyms, or policies
– Display images that are more representative of geographically-based learners (for example, displaying the image of a Euro instead of the US Dollar on a financial page)
– Include or exclude certain pages or content pieces based upon geographic relevance
– Include or exclude certain legalese or sign-offs based upon geographic needs

As you can see, there are many implications for how GeoLocation can be used. It is a simple variable that, when captured, can then be used to determine the on or off/in or out states of many different elements of your course.

GeoLocation works by pinpointing the location of a user, very specifically. Captivate can then establish a geographic radius around this user (customizable by the developer) and include that radius as part of their location. Keep the radius in mind. As an example, two offices in the same city would require different rules than having one office in London and another in Los Angeles. Likewise, you should account for learners who are remote or traveling and may be outside the radius.

In your storyboard, you need to specify what the GeoLocation settings should be (which locations and radius should be called what) and which course content should be dynamic based upon what the mobile device reports back, relative to those settings. For example:

If user is located [in the United States/Denver/within 8 miles of Orlando], display [X graphic]. If the user is located the [UK/London/within 8 kilometers of Glasgow], display [Y graphic].

As you can see, responsive projects in Captivate 8 open a world of options for mobile design and responsive project development. Get started today with the Free Responsive Storyboard Template. Also, check out the new Captivate 8 Responsive Templates in the eLearning Template Library.

Pin It on Pinterest