I have created a microlearning project to test new responsive features of Captivate 2017. (Here is the link.) In this article, I will review several issues that I faced while creating this demo.
The introduction of fluid boxes is a step forward compared to previous breakpoint mode. Designing for mobile devices is less time-consuming now. I only wish that Captivate had a separate tab for fluid boxes. It takes a lot of random clicking and moving a mouse before you can finally locate a fluid box selector.
Font issues
The new version of Captivate has less font customization options for responsive projects. In the old breakpoint system, you could adjust the font on smaller screens, and it would not impact the main desktop version. Now, any change you have made affects all the breakpoints. I had to experiment with different font sizes and ended up going with a smaller font that I would normally choose for a desktop view. Also, if you preview a project on your phone, Captivate might adjust the font to fit the screen.
I used Arial 20 for both screens; however, the font on the first screen clearly looks bigger that the one on the second. One might get an impression that a designer did not bother creating a uniformed look of the project. I understand though that when it comes to responsive projects, it is always a trade-off between usability and design.
Responsive quizzes
Creating three simple quiz questions took me more time than it should, and I am still not completely satisfied with the result. If you create a responsive project, quizzes are responsive by default and should not require any additional formatting. Still, if you preview them on a mobile device, text captions and buttons might disappear or get distorted. I had to manually adjust the Correct and Incorrect text captions and buttons to fit the smaller screens.
On the Quiz results page “You scored” and “Accuracy” seem bigger than “Attempts” even though they use the same font size. I have tried to adjust the text captions with score results, but as a consequence, the formatting of the desktop version got messed up, so I left it as is. Also, it is hard if not impossible to review quiz results on a mobile device.
I think that all responsive quiz templates still require additional work to display correctly across different breakpoints.
Final thoughts
The mobile learning is still in its infancy and tools are improving over time. Captivate 2017 is undoubtedly a step forward compared to the previous version. The biggest challenge in responsive development is that you have to constantly look for a balance between design and usability and often sacrifice one for another. Based on my experience using fluid boxes, I find that simple layouts and geometric shapes work much better than complex designs and images. Please share your thoughts if you have experienced any issues with the responsive design.
One of the biggest watershed moments for me was realizing you can put fluid boxes within fluid boxes. That helps a lot in terms of having more exact control over placement, but you do have to think ahead of how things are going to be laid out. Also good is the ‘optional’ checkbox allowing you to leave some items out of smaller views, I loved that about breakpoints and am glad that ability exists with fluid boxes as well.
I agree. You need a blueprint with a clear layout prior to starting your design. What I didn’t like is that the fluid box selector doesn’t have a permanent tab on the panel. I had to do a lot of clicking in order to resize a particular child-level fluid box. But I guess it’s just a matter of getting used to it. Yes, the “optional” checkbox is handy.
You’re welcome! Lot to discover about that totally new work flow. It is the reason I recommend Fluid Boxes for text-heavy projects, because being able to rescale font size automatically is a great advantage compared with breakpoint views. If design is very important, breakpoint views give you more control but mean a lot more work.
I agree! With breakpoint view, you can design for each breakpoint individually, but it is a LOT of work. My biggest issue with the breakpoints was adjusting to in-between views. Now, there are so many different devices, and new mobile phones and tablets appear all the time, so you cannot predict how someone would access your content. I sometimes wonder if the mobile learning is worth it, given the amount of time it takes to create something decent-looking. In this light, fluid boxes are a good compromise – you won’t be able to create a sophisticated design, but it works and can be done in a reasonable amount of time.
P.S. Your blog and Paul Wilson’s videos helped me a lot with Captivate. Thank you for that.
BTW I posted an in-depth review of the Fluid boxes on Quizzing Master slides recently. https://elearning.adobe.com/2017/05/fluidize-your-quizzes/
There are still some problems with the individual answers (not stored in individual fluid boxes) spilling over the answer area and even the slide for small mobile screens.
The score slide has a lot of issues at this moment, even bugs. I will post a separate article about the score slide, because it needs a lot of tweaking.
Awesome! Will read it now. From my experience, the score slide was the worst. It requires a complete remake.
I recommend to use Rulers and Guides to make design easier. One of my first request was to have the FB selector easier available and be able to use right click menu in tbe selector.
I did see you complaining about having to choose a smaller font. Did you see the ‘Enable uniform Text Scaling’ feature in the Slide Properties panel? If you check that, font size will rescale depending on the screen. Difference with Breakpoint views, where you have a fixed font size in between breakpoints. However the smallest font size is by default 14p in CP2017 (can be changed) where it was 10pt in CP9.
Thank you Lieve! I did not know about this feature! It helps a lot.
Hi Anastasia Kotelnikova , thanks for sharing your experience.
There is a simpler way to select fluid boxes. You can use the Fluid box selector in the properties panel which shows the fluid boxes currently inserted on a slide in a hierarchal fashion. Blue color highlights the fluid box which is currently selected on the slide. This is how it looks – 
Hello Harshith! Thank you for your reply. I did indeed use the fluid box selector. What I am referring to is that the fluid box selector does not have a permanent tab on the Properties panel, it only gets activated if you click on one of the fluid boxes on the screen.
You must be logged in to post a comment.
