Using Fluid Boxes in Adobe Captivate 2017

July 18, 2017
Learning and Technology Evangelist.
Newbie 9 posts
Followers: 13 people
5

Using Fluid Boxes in Adobe Captivate 2017

Learning and Technology Evangelist.
Newbie 9 posts
Followers: 13 people
July 18, 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

Comments (5)
2017-07-08 22:51:14
2017-07-08 22:51:14

Hi,
Thank you so much for being willing to look at my interface using adobe captivate fluid boxes. I emailed you with screenshots and the project to the email address you gave in your response to me. Also, my name is Elissa. I can’t figure out how to change the profile name from Elliot!

Thank you again!!

Elissa

Like
(2)
>
elliotf80997246
's comment
2017-07-09 03:55:49
2017-07-09 03:55:49
>
elliotf80997246
's comment

Hi Elissa, log into Adobe.com n click manage accounts. Under your profile, you can modify the name else wait for 3 days, we are pushing a release, option to update you profile name n to enhance your profile link will be made available in eLearning community profile page.

Like
>
Shambu Nashi
's comment
2017-07-09 04:27:37
2017-07-09 04:27:37
>
Shambu Nashi
's comment

Hi,

Thanks so much for your response! I just tried your first suggestion to manage accounts. I changed the profile name so hopefully that will work. I’ll also look out for the release option in 3 days.

Thanks! Elissa

Like
2017-07-04 04:50:47
2017-07-04 04:50:47

Hi, I recently created a navigation for an interactive resume using fluid boxes. It almost killed me. I’m wondering if you could take a look. I want to continue using this interface as I add things to the resume, but I’m nervous about how adding multiple pages to the navigation may affect the fluid boxes. Well if you had any time to comment, that would be great. If not, I certainly understand. Thanks!

Like
(1)
>
elliotf80997246
's comment
2017-07-05 10:06:37
2017-07-05 10:06:37
>
elliotf80997246
's comment

Hi Elliot,thanks for reading the blog, could you share a few screen shots of the design and if possible share the project at bhkaul@adobe.com, will give it a shot.

Like
Add your comment