Responding to Adobe Captivate 8 Responsive Design

I'm excited to announce that I'm preparing to teach 3-hour online classes on Adobe Captivate 8 for IconLogic offered throughout he year for more info here, one of which is on Responsive Design. 

Additionally, I'm writing the Responsive Design chapter for his workbook on Adobe Captivate 8 (stay tuned it will be coming out very soon). 

Not only that, but in June, myself and Karen Blades (WhirlyBee Consulting) are presenting 2 sessions together at mLearnCon on Adobe Captivate and An Introduction to mLearning for the Responsive Age 


I'm also presenting 3 Adobe Captivate sessions at Learning DevCamp in a few weeks. 
To view sessions, click here
Topics include:

• Scenario based training using Advanced Actions
• Themes and Styles
• Content Development with Video Using Captivate and Presenter

I've been thinking about Adobe Captivate 8 and Responsive Design A LOT! 

Due to mobile device sales exceeding desk top devices, and from the desire of all my clients to publish to mobile devices, a responsive online course is essential! 

On Monday, I created my first Responsive mini-scenario course with the help of the eLearning brothers free template found here

Yesterday, on the plane home to SC from WA (was there teaching Adobe Captivate!), while stretching my legs walking up and down the aisle, I noticed how many different size devices there actually are. Almost everyone seemed to have a a different screen size device. I was actually a little shocked, although I know there are many size devices, I guess, I just hadn't really paid attention until now.

Developing Responsive courses enables your customized, interactive online content to display beautifully in both desktop and mobile learning environment without comprising user experience. Responsive design involves a lot more than scaling content to a device's screen size. With true responsive design, course content needs to be automatically rearranged and reflows, depending on screen size and orientation. 

The best part of Adobe Captivate 8 is that the engineers have made it easy to develop a responsive project without any programming. 

I'm not saying that it it's not time consuming, because it can be, especially if you want to customize each layout; however, after you take a few lessons and get used to the user interface, you'll get the hang of it and developing will become easier and faster as you practice. 

After spending time on Monday developing my first responsive mini-project, I'd like to give you my response to responsive design! There are 3 default layouts, the Primary, Tablet and Mobile. However in the Preview mode, there is a scroll bar so that you can see what your content will look like in any size device, which is very cool!

When you publish your project, your students will not see this scroll bar. The scrollbar is for you as a developer to view the screen in the various sizes. Notice that the objects that you place in the 768 layout stay on the scene until the layout changes to the 360 layout. 

As you scroll the bar to the right, the text boxes get smaller and the text takes up more real estate within the box. You don't want to change the size of the text to a smaller font because as the device get's smaller the text could be difficult to read if it is too small.

Notice there is quite a bit of free space in the text boxes in the image to the left.

Image 1 above: The 768 layout goes from 768 - 361, so the objects you place on the 768 layout stay on the screen until the device size changes to 360. 

Image 2 on right: The 361 view is still using the objects you placed on the 768 layout. Notice that the text boxes are now filled with the text. So if you made the text too large in the above image or the box too small then the text would not fit in the size on the right.

POSITION is Important

The properties you choose in the Position tab are very important and change how the objects react in different layouts,  you'll need to take some lessons and play around with them a bit to understand how these positioning work. The Position tab is color coded to the different layout colors.

For example: Percent (%) means that the image will adjust automatically, if you change the position to pixels, the object will stay the same size. 

The Primary layout is the PARENT, so you if you add text to an object, it will add the text to the Tablet and Mobile view, but not vice versa. 

If you don't know what size device your audience is using, you should create a Responsive Design project. 

If you know your student's will be using phones to view your content, you will need to customize the objects on the Mobile layout since it is significantly smaller. 

There are other NEW awesome features to Adobe Captivate 8 for instance:

• A very cool brand new User Interface 
• Geo-location and multi-device previews
• Even more out of the box assets, like characters 
• Responsive Screen captures (training simulations)
• Responsive Themes - I love this and you can even create and save a custom theme and attach the theme colors to the Learning Interactions! 
• Smart shapes also have States now, which I love. You can even customize your own smart shape and save it to reuse later.
• Support for HTLM5 animations 

A few warnings:
Be advised that you even though you can adjust your layouts size for up to 1280x1000 you can ONLY publish responsive design for HTLM5 output. You can NOT publish to SWF. You can still publish to SWF using a non-responsive captivate project. 

HTLM5 unsupported objects such Rollover objects will not function correctly. Use the HTLM5 Tracker if needed.

If you decide to change your break point (the default layouts are 1024, 768, and 360), you can not automatically reset to the default layouts. 

If you're publishing to Adobe Connect, do not click Scalable HTML content, if you do, the course will not respond as it should (at least it didn't in my iPhone).

If your know you're audience is only using desktop and iPad, then it might be faster to create a non-responsive project and publish the project to Scalable HTLM content. Here is an example of a project that scales, this project was created for iPads and desktops only. Designing a Winner  (it is a drag and drop interaction I created for WVU that was presented at STEM April, 2014).


Adobe has some examples and sample videos of Responsive Design on their blog here. 

Adobe KnowHow has some free tutorials on Adobe Captivate 8 here

Also feel free to join me at one of my IconLogic sessions (being offered through the year). The classes are 3-hour online sessions on Responsive Design, view description and register here