Skip to main content
M
Mark A. Trickett
Participant
September 16, 2017
Question

Captivate 2017 - Fluid Boxes and avoiding the "Read More" Icon

  • September 16, 2017
  • 3 replies
  • 2140 views

I've been using Captivate since v8, so I guess I'm pretty fresh to the game. I've only just upgraded and started using Captivate 2017, and, in general, I'm loving the improvements.

With that said, I have a rather text-heavy (medical/science) course that I'm trying to prototype for a client. I would love for it to be compatible across devices, but I'm not a huge fan of the "read more" icon that shows up when there's too much text. It works, of course, but I'm not sure that it is the best option for the client. While I can chunk the content into smaller sections, the client has seen a course produced in Articulate that, when you shrink the H-space across mobile devices, extends the V-space such that on a mobile device you are required to scroll up/down to read through the content by swiping up/down.

So, the question: Without recourse to the breakpoint approach of Captivate 9 that allowed you to extend the height of the course beyond the physical dimensions of the device, is there a way that fluid boxes can replicate this?

I'm wanting to use scenario-based learning/gamification in the project, and my last experience with Articulate was that it didn't readily support this (I'm needing to track several "stress tracks" with variables to reflect the learner's choices and their impact upon the subject material). Is there a way that this aspect of Articulate can be supported with Captivate 2017, or should I dial back my expectations (and those of the client)?

This topic has been closed for replies.

3 replies

zeeshan hussain
Adobe Employee
zeeshan hussain
Adobe Employee
February 1, 2018

Hi All,

I see lot of interesting comments here, so thought it would be nice to share some ideas regarding text heavy projects.

Firstly i would like to clarify, slide height increase is possible in Responsive project version of Adobe Captivate 2017. It is just that fluid boxes are not allowed to be used on such slides. So even if some of your slides in project have fluid boxes and you are restricted to use the project height as your slide height, you can still increase height of slides which do not involve fluid boxes.

Having said that, let us have a look at two text heavy sample slides I created with and without fluid boxes :

This is slide 1, which has content placed within fluid boxes (Notice the slide height is 627px):

FB_slide

When you view the output on a device like iphone, it looks like this (text enlargement button shows up):

text_enlargement_output

 

Now, since we do not want this text enlargement button showing up in the output and need to provide the ability for learners to scroll down while viewing it, let us look at a different approach.

This is slide 2. This time no fluid boxes have been used on a slide, and since we know device screen width is going to decrease as compared to a desktop, which will automatically cause my text box to flow down the screen area, i have deliberately kept my slide height increased so that the text doesn't get cut. (Slide height in this case is 800px)

regular_slide

When you view the output on a device like iphone, it looks like this (No text enlargement button and a vertical scroller available in the output to view the whole content):

best_output

I would like to hear if this solves the issue being faced by Mark.

regards,
Zeeshan Hussain

M
Mark A. TrickettAuthor
Participant
May 21, 2018

Hi Zeeshan, 

    In the long-run I ended up going with BP design for most of my projects. I realise that this gives me some unusual layouts/glitches when you move beyond the discrete break points but... I'm willing to take that at the moment.

    With that said, I'm going to see if the hybrid approach would work for specific use-cases.

    I wonder if it is possible to create the hybrid option on the Captivate level? Create an option that allows responsive boxes to push down the slide height if you select a given option? At the moment fluid boxes are a little bit too tightly configured to height rather than having the option to scroll down pages. (After all, who doesn't scroll down on their phone al the time with multiple flicks of their finger.)

    Thanks for the responses, all.

    Best regards, 

                              Mark

    Paul Wilson CTDP
    Community Expert
    Paul Wilson CTDPCommunity Expert
    Community Expert
    September 16, 2017

    There are advantages to both methods of responsive creation with Adobe Captivate. Breakpoints really allow you to design the entire appearance, but when considering the spaces between breakpoints it's labour intensive. Fluid boxes offer the advantage of not having to test your material on all the variety of screen sizes and is more predictable. However, it means compromising on certain expectations that your stakeholder or client might have about what's possible to display on the screen. Given the choice, I'm enjoying designing responsive using fluid boxes but I know I need to continue to be ready to use breakpoints if the client's expectation is such that that is warranted.

    Paul Wilson, CTDP
    M
    Mark A. TrickettAuthor
    Participant
    September 18, 2017

    Thanks, everyone. I guess I'm going to have to see what the client wants to see from the prototypes that I sent through. There might be some hidden variables that I'm not privy to at the moment (up to and including having to use Articulate 360). We shall see.

    Lilybiri
    Lilybiri
    Legend
    September 16, 2017

    Probably not really an answer to your question, but since I presented a workshop recently about the choice between Fluid Boxes and Breakpoint Views workflow (still possible in 2017 version)  I could perhaps offer some tips.

    Fluid Boxes (IMO half way solution between pure rescalable and full responsive to be achieved exclusively with Breakpoint Views) have some advantages for text-heavy courses because text will rescale smoothly over all screen resolutions. If your gaol is also on phones, I would recommend to decrease the minimum font size to 10 p (like in Breakpoint Views) instead of the present 14p.

    One of he limitations of Fluid Boxes is that you cannot have slides with a different height (like is possible for Breakpoint views) with scrollbar to accomodate long texts. Another limitation is that you cannot have stacked objects in the same location. BUT you can have multistate objects which have solved for me in many cases similar problems: cut the text in smaller chunks, which can be stored easily in states of a text container, and offer a button to the learner, to continue the text. I use that same method to have bullets appear one by one during presentations (I always use CP for presentations, not PPT).

    Paul Wilson CTDP
    Community Expert
    Paul Wilson CTDPCommunity Expert
    Community Expert
    September 16, 2017

    You can stack multiple items in a fluid box but it needs to be marked as static in order to do so.

    Paul Wilson, CTDP
      Lilybiri
      Lilybiri
      Legend
      September 16, 2017

      But a static fluid box keeps its width/height ratio all the time, which is not a very efficient way to have a lot of text on a screen in portrait mode. A normal fluid box can change its width/height ratio which is IMO much better in combinations with a multistate text container to store a lot of text.  Static fluid boxes are excellent to have stacked feedback messages, which are short by definition. That is the reason why the Feedback fluid box for all Captivate themes is a static fluid box. In this particular use case personally I would never turn to a static fluid box.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices