#eLearning #LIVESTREAM – Designing for the Unknown Device – 09/18/2017, 16:00 EDT

Manufacturers are coming out with new smartphones, tablets and other devices all the time. A skill set that is still relatively new for eLearning designers is designing for responsive design. This Livestream will attempt to uncover some of these secrets and make it easy for you to develop responsive projects in the future.

As per usual, I will also be taking questions if time permits so get your Captivate Questions ready for the Live Chat.

Follow the link right now to set up a reminder to get notified when this event becomes live.

#eLearning #LIVESTREAM – Designing for the Unknown Device – 09/18/2017, 16:00 EDT

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

#eLearning #LIVESTREAM – Fluid Boxes vs. Breakpoints 08/28/2017, 16:00 EDT

I had an experience this week in developing a theme/template for a client that I thought could be the basis for this weeks discussion. I started off with the intention of developing a fluid box based theme/template for their upcoming Adobe Captivate work. In the end, their requirements are such that using breakpoints makes more sense.

Follow the link right now to set up a reminder for yourself so you get notified when this LIVE STREAM goes live.

https://www.youtube.com/watch?v=xBsZsRQVFaA

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 ($50 value).

Master those Fluid Boxes!

Intro

A while ago I published a post explaining the setup of the Quizzing Master slides, compulsory parts of each theme, even the almost empty Blank theme. In this article I will try to explain my experiences using Fluid Boxes on Content Master slides. Most themes shipped with Captivate have several content master slides (exception = Blank theme). Let us first start with the master slides that are not behaving like the content or quiz master slides.

Main master slide, Blank and Title master slides

Main Master slide

It is not possible to insert Fluid boxes on the main master slide: the button seems active but both options (Vertical and Horizontal) are dimmed. Objects placed on that Main master slide, and inherited by the daughter master slides, are to be set up using the Position Properties panel. Example: the text container with my name and copyright in the example movie.
As you probably know, it is not possible to have shape buttons timed for the rest of the project when you use Fluid boxes. You could put a shape button on the main or one of the other master slides but you cannot control it because it has no ID. In the example movie I preferred to have a Next button on the individual slides, because ton most slides it is hidden until the learner has visited everything. However a toggle shape button for Audio, for CC, for the TOC could be on the Main Master slide. They will not behave like objects in a Fluid box however, but act as defined on the Position Properties panel for size and location.

However after some more testing on iOS devices, the Position properties set up for those objects are not correctly displayed in portrait mode.

TIP: at this moment avoid putting objects on the Main master slide (except background of course), since they don’t display at the correct location on some mobile devices.

Blank Master slide

This master slide has no Fluid boxes by default but you could add them. As I have explained in previous articles, you should prefer to duplicate the master slide for editing, don’t edit the original slide because it is used for Powerpoint import and for software simulations.

Title Master slide

That master slide has one Fluid box (parent fluid box) but no child fluid boxes. It is set up as ‘Squeeze in a Column’, and vertically and horizontally centered. Since the Title Placeholder is inserted directly in this Parent Fluid Box, you are not able to add child fluid boxes.  Because each new project, using the default theme White will start automatically with a Title slide, this has caused already many frustrations when starting with the use of Fluid boxes. If you want to use fluid boxes on the first slide, you have to change the master slide from Title to Blank (exception Blank theme which starts with a Blank slide).

TIP: if you want to add objects on the Title master slide, first take out the Title Placeholder, to be able to insert child fluid boxes. Then put back the Title Placeholder in one of the child fluid boxes.

Content master slides

It can be a time saver to use a content slide that has already Fluid boxes. In a future next article I’ll explain how to create a custom content master slide with the help of Guides, but for now let us focus on an existing master slide, and see how we can tweak it.
In the example movie, the second slide is based on the Content04 master slide from the Theme ‘OldPaper’. I didn’t customize the theme, just applied the correction explained in my last post

Look at the setup of the Fluid boxes on the master slide: the parent fluid box (FB_15) has two vertcial child FB’s (FB_16 and FB_17). The top one is meant for the Title placeholder:

The bottom Fluid Box has 4 child FB’s, (FB_19,FB_20, FB_21, FB_22), which are set up to wrap Symmetrically (when width is too small, two FB’s will move to the next row), and have a padding both vertically and horizontally to have some spacing between the FB’s. Each of them has a placeholder for an image.

Example movie

Play with this responsive movie (will open in a new window) which has only 3 slides: Title slide (with inserted Next button, and taking over my name from the main master slide), a slide based on Content04 master slide, with a lot of tweaking, and an End slide. On the content slide you are supposed to click each of the 4 buttons in the top. The Next button on that slide will only appear when you have clicked all available shape buttons and seen all the content.

Refining slide based on Content master slide

The FB setup on the master slides can be tweaked on a slide based on that master slide. You can remove all fluid boxes, but that has not much sense. To demonstrate I did a lot of tweaking for the second slide of the movie which you just watched:
  • I deleted the image placeholders
  • I decreased the height of the top fluid box (FB_MS2_16) to 10%, originally it was 15% (edited font style as well)
  • I added a third vertical child FB under the parent FB_MS2_15, it is labeled FB_9

    TIP: changes like this will not affect the master slide. You can get the original layout from the master slide back by using the ” Reset Master Slide” button in the Properties panel of the slide.

  • That last FB_9 got two horizontal FB’s, FB_37 (70% of the width) and FB_38 (30% of the width); the last one will be used for the navigation buttons (Back/Next)
  • The setup for FB_38 is visible in this screenshot
  • Each of the four FB’s in the center (FB_19,FB_20, FB_21, FB_22) has no longer any object (see 1) and can be divided in two new vertical child FB’s
  • As you can see on the screenshot, the top FB will have a shape button and explanation text (originally hidden, but cannot be grouped in FB’s what would make the advanced actions a lot easier), the bottom one has an example of the style of that state in a shape (also initially hidden).
  • Setup for the top FB’s here is visible in this screenshot; for the Shape button (‘Normal’) the option Maintain Aspect Ratio is kept, but not for the Text container, so that it can change for smaller screen sizes (especially in portrait mode).

More questions?

You will have seen that I always had Rulers and Guides activated. My next blog post will focus on the use of that great tool, which almost no one seems to use?

Sure, I have several advanced actions in that movie, but that was not the goal of this post. No explanations here about those actions.

Font Based Icons in Responsive Design Using FontAwesome (this is really awesome)

Previously I showed viewers how they could include the icons from the FontAwesome font in your Blank Projects (non-responsive projects). [watch that video here] In this video, I will show you how you can get the same icons in your responsive projects and add an awesome quality to your eLearning projects. Remember that fonts are essentially scalable vector graphics. There is no better way to make beautiful navigation and control icons in responsive design projects.

If you found my videos useful please consider subscribing to my YouTube channel: Paul Wilson Adobe Captivate Tutorials

If you think your colleagues will like my videos please use the share button at the top of this post.

Using Fluid Boxes in Adobe Captivate 2017

User experience has taken a front seat in design thinking and creation. As learners detach themselves from traditional learning methods, our attention turns to the use of mobile devices for consumption by learners.

 

Fluid boxes in Adobe Captivate 2017 give you the ability to place content in these intelligent containers and have Adobe Captivate resize and adapt the objects for any device size, the device specific preview menu (another new addition to this release) gives you complete control over previewing your content without having to hit the preview button.

 

One of the recent webinars we did for the launch of Adobe Captivate 2017 was to create interesting layouts for mobile devices using Fluid boxes. I used the concept of wireframes from web design to create web page like layouts which render well on various mobile devices.

 

I will be creating a short tutorial on how to create these frames and using the Fluid Boxes properties inspector to align and wrap objects to suit different device sizes.

 

Here are some screen shots of the preliminary design.

Screen Shot 2017-06-30 at 11.58.03 AM

Screen Shot 2017-07-18 at 12.25.15 PM Screen Shot 2017-07-18 at 12.25.31 PM Screen Shot 2017-07-18 at 12.25.50 PM

Wireframes in elearning design is still being used very sparingly, I found this approach to be very visual when it came to creating content for mobile devices. Once you start exploring this route for prototyping or storyboarding the possibilities become endless as there are new thoughts and ideas for web design and layouts coming through each day.

If you have already used Adobe Captivate 2017, you would have experienced the powerful Adobe Typekit Integration as well, the catalog of fonts which are tailored for web use will give your content that typographical edge on changing screen sizes.

Will have the tutorial out to all of you very soon.

Thanks

Bhim

Prevent Responsive Text Pop-Outs from Appearing

Some Adobe Captivate 2017 users are reporting seeing the following icon/button on their published responsive design eLearning projects.

2017-06-28 10-15-48 PM

The button you are seeing at the bottom of your text container (smart shape or text caption) is actually by design in Adobe Captivate (2017 Release). It appears when a text container has more text than can be accommodated by your minimum font size and the size of the text container. For example, when displaying large paragraphs of text on a smaller display. Tapping the button will display a dark overlay with all the text in white, and if necessary, with a scrollbar when the amount of text is too much for the screen.  Once your learner finishes reading all the text, tapping the screen will return them to the full slide. Sometimes it seems as if the button is appearing for no reason. There are a few possibilities as to why this happens.

  1. Your text container is right on the threshold of when the button will be determined to be necessary. In these cases, slightly increasing the size of the text container may solve your problem. Alternatively, you could also select a smaller minimum font size on your fluid box properties.
  2. Another item to consider is the margins set for your text container. Decreasing the margins will allow more space for your text and perhaps just enough to accommodate the text on smaller device screens.
  3. Lastly, consider where the text has been. If you copied and pasted this text from a word processor, it may contain unnecessary formatting codes, invisible characters, or extra line breaks that could be causing the pop out text button to appear.

Here is a video from my YouTube channel that shows you how you can get rid of the extra hidden characters that might be forcing your project to show these buttons when they are not actually needed.

If you found this article and video useful please share it with your eLearning colleagues. If you would like to see other tutorials like this one, please subscribe to my YouTube channel.

$25 off Adobe Captivate 2017 Udemy Course

I wanted to let my friends on the Adobe eLearning Community know that I’ve posted my first premium tutorial on Adobe Captivate 2017 through Udemy. In this course, you will learn how to…

  • create a responsive design interface for your question slides in Adobe Captivate 2017 using fluid boxes
  • setup variables to keep track of the selections made by the users of your eLearning course
  • write advanced actions that will form the basis of the interaction for your users
  • write conditional actions that will validate if your user has submitted the correct answers to your questions
  • convert your questions to become scored final quiz questions

The regular price for this course is $50 USD, however, If you are willing to provide me feedback on this first course I would like to offer the first 20 Adobe eLearning Community members a $25 USD discount by using the link for the coupon below:

Adobe Captivate 2017 – Responsive Custom Quiz Questions

 

Building responsive simulations with Adobe Captivate 2017

Adobe Captivate 2017 comes with an exciting new workflow to aid in the creation of responsive eLearning courses: Fluid Boxes. Instead of designing multiple slides for different screen sizes (known as breakpoints), you work on a single slide. Fluid Boxes, containers that you insert on the stage and then populate with content, improve the responsive development time significantly.

Let’s take a look at the steps to record a responsive simulation with Captivate 2017:

To begin, start Captivate 2017 and double-click the Responsive Project thumbnail on the New tab of the Home screen.

1_Captivate 2017 Welcome Screen
A new, responsive project is created. Unlike Captivate 8 and 9 responsive projects, there are no breakpoints. Instead, you will see the Preview-in drop down list and the Preview Slider, to view how the content will be displayed on different device sizes, right inside the Captivate edit area.
2_Responsive Preview Options

Notice that the default maximum width and height of responsive projects in Captivate 2017 is set to 1024 x 627. You can increase or decrease it by rescaling the project.

To rescale the project, click Modify > Rescale Project.

In the Rescale Project dialog, enter the new width and height in pixels or percentage, and click Finish.

3_Rescale Project

Now let’s record the simulation. Go to the Toolbar and click Slides > Software Simulation (Click OK to confirm addition of slides after the selected slide.)

Select the window you wish to record, click the Record button, and then record the simulation (press the End key on your keyboard to finish recording).

The recorded slides are added to the Captivate project. Notice that there’s a blue rectangle on each of the simulation slides. The blue rectangle is the focus area of the simulation. It’s only visible in the edit area, and will disappear when you preview or publish the project. Note that the size of this blue rectangle is the minimum supported device size for Captivate responsive projects.

4_Blue Rectangle

You can reposition this blue rectangle to any other location and you’ll want to ensure that the rectangle covers the click area in the simulation.

To preview the slide in different device sizes, select the device options from the Preview-in drop-down menu. Notice that the visible area is always surrounding the blue rectangle and the rest of the area is greyed out.

5_Preview In Devices

To preview the entire project, choose Preview > Project. You can move the slider to check the responsiveness of your simulation.

When you publish and deploy the responsive simulation course to an LMS or web server and view it on a mobile phone or tablet, you will be able to pan to the areas which are not shown in the simulation. And as a result of this special panning functionality in responsive simulations, the default Swipe Right, Left, Up, or Down gestures are disabled for all the responsive simulation slides.

Want to learn more about the new features and enhancements in Adobe Captivate 2017? Check out my Captivate 2017: First look course on Lynda.com and LinkedIn Learning.

This post was first published in IconLogic blog.