Intro
Captivate 2017 added a new workflow to develop a responsive project: Fluid Boxes. It doesn't mean that the existing workflows to make projects accessible with all devices are no longer important. In this post I will try to explain my way of choosing a workflow for such a project. It is possible that not everyone will agree with my point of view and I would welcome all discussions. At the same time I believe that the current work flow for those Fluid Boxes will be optimized in the future by the team as well, which will probably lead to editing this text. It is valid today, November 2017, about half a year after the launch of the Fluid Boxes method. More than ever, this post is valid today, November 2017 and will certainly change in the future.
Overview Workflows
If you want to publish a project to be watched on any device, you have to forget about SWF output! Only HTML5 output can be used. presently Captivate offers 3 workflows:
-
Scalable Projects: you can publish a blank (normal) project to HTML5 with the option 'Scalable HTML Content' activated.
This will not result in a real 'responsive' project, because the layout will be the same on all screens. Another word sometimes used for this type of project is 'adaptive'.
Advantage of this workflow is that the development time will not increase compared with a project that is meant only for desktop/laptop. It can be a good choice for courses that will rarely be viewed on smartphones, and you don't mind to have only landscape mode. I just wanted to mention this easy workflow, but the rest of this post has its focus on the two other workflows.
- Responsive Project with Fluid Boxes which is the work flow introduced with CP2017. I see the result as a solution between the Scalable HTML projects (same layout on all screens) and a esponsive project developed with Breakpoint views. Such a full responsive project can have different layouts for diferent screen sizes corresponding with the Breakpoints. When using Fluid boxes the layout will be rearranged by the application depending on the screen size and the settings. Some items can be left out for small screens but you will not have full control over the design for each size. Moreover there are some limitations which I will explain later on (with possible workarounds and tips). Developing time for this type of project will be in between time needed for scalable project and for a Breakpoint Views project. Fluid boxes have a great way to make font size changing in a 'fluid' way.
- Responsive Project with Breakpoint Views is available since version 8. It is no longer the default approachn when starting a responsive project. You have to switch to this workflow from the Project menu.
This workflow allows fully responsive projects: you have control over the design for a maximum of 5 resolutions. You can not only leave out items, but also replace them by other items, like replacing an animation or video by a static image or even an icon to cope with smaller screens. Control over the design means control over size and position of each item in each breakpoint. However developing time for such a fully responsive project will be much larger.
Example Movies
I published two responsive projects, one developed with Fluid Boxes and another with Breakpoint views. They have the same content, but show limitations and workarounds for the Fluid Boxes, compared with the Breakpoint views development.
Both projects have 4 slides:
-
Titlee: not all images which in the Breakpoint example could be used on the Fluid Boxes version because you cannot stack items. I could have combined the images in a graphical application to have one image for Fluid Boxes, but the different effects and timing didn't have a workaround.
The images used for the mobile screen (Breakpoint) are different and smaller than for the other breakpoints. Not so for the Fluid Boxes example.
-
Buddies: similar: the ruler cannot be used for Fluid Boxes, at least not when stacked with other images.
-
Content: different items can be clicked to show more information. For the Breakpoint version that information is stacked and Hide/Show is used. Text and images are combined in a group. For the Fluid Boxes I used the workaround by creating one object with different states. Grouping is not possible here.
- Comparison: maybe less apparent, but I used an effect on a group (image + shape with text) for the Breakpoint view version, since grouping is not possible for Fluid Boxes I had to use separate effect on the items.
Responsive projects cannot be embedded, use these links with any device please:
Comparing setup Theme Breakpoints vs Fluid Boxes
As described in this article, setting up a theme means the creation of a Theme Colors palette, Object Styles, Master Slides, Skin and eventually Recording defaults. The main differences between Breakpoint Views and Fluid Boxes are in the Object Styles for Text containers and in the Master slides:
Object Styles
Design of Breakpoint Views for text, when decreasing the width of the screen, will keep the font size fixed until the width of the next Breakpoint is reached. That means that for any text container, caption or shape, and for button labels, you need to define a font size for each used Breakpoint. That can be a tedious process, because you have to test it out for all possible screen resolutions. A lot of text styles are needed, both for Standard and for Quizzing Objects. To improve the readability I will often also increase the leading (distance between lines) since it is set to 1 (term used in Captivate for leading is Spacing).
For Fluid Boxes this is not necessary, because font size will adapt to screen size in a 'fluid' way when changing the screen width. It is limited by the 'minimum size', which is set at 14pt, which is IMO too high. In previous versions the minimum font size was 10pt which still leads to readable text on smartphones.
Master Slides
Since I am working in the Expert UI, I created two separate workspaces for Fluid Boxes and for Breakpoint Views because the work flow is quite different especially when editing master slides. In both workspaces I have Master slides and Filmstrip visible at the same time, which means they have to be in two different docking stations. For both workflows I will have Rulers active on the stage to be able t use guides for a consistent design.
Breakpoint views: the most important panel here is the Position Properties panel. In combination with Rulers/Guides you can size and position all items on the master slides, including the placeholders. For Breakpoint workflow all master slides can be used, including the main master slide. Main master slide is a great tool for items that are common to most slides, including daughter master slides. The object styles defined in the previous step will be used automatically provided you defined them as default styles! If you plan to use quizzes, do not overlook checking the default quizzing master slides. Labels to be used on quizzing master slides have to be defined in the Quiz Preferences.
Fluid Boxes do not need the Position Properties panel, except for Static Fluid Boxes. Fluid Boxes are defined with the Properties panel. You cannot use the main master slide for Fluid Boxes, because all default themes with the exception of the Blank theme, have fluid boxes set up. Even when editing the Blank theme the option Fluid Boxes is unaviailable for the Main master slide. In two previous posts I described the work flow for quizzing master slides and content master slides. Do not forget to have a look at the post about Fluid Boxes and Guides, because those Guides are indispensable to set up a consistent design spanning all master slides.
Limitations and workarounds - Fluid boxes
Do not use objects on the main master slide. Most other limitations are due to the fact that fluid boxes have to be "twodimensional", which means that you cannot have objects overlapping or stacked in the same location, even if they don't appear at the same time in the timeline. Here are some of the the results of that 2D paradigm and possible workarounds::
-
Grouping of objects is impossible
That is not only disappointing for management of crowded timelines, but it also means that group effects are impossible. THse group effects can be very useful, look at this article.
A widespread workflow consists in having different texts, grouped and stacked in the same location. Based on a click to show one out of the group can be done with a shared action with two commands: first hides the group, second shows one text. That work flow is impossible in fluid boxes. You'll have to create duplicate advanced actions with a lot more commands.
Lightboxes are also impossible with fluid boxes.
In many cases a workaround is possible by using one multistate object instead of the group. In the movies for which I posted the links, that approach has been used on slides 3 and 4. Compare both movies. A multistate object can also be an alternative for objects appearing staggered on the timeline, but in the same location. Using an On Enter action with the command Delay Next actions can be a workaround (see Autolists).
- It is not possible to have an object timed for the rest of the project
This is often used as alternative for objects like toggle shape buttons or a logo on the master slide. Since such a object has a unique ID, it can be controlled, hidden on some slides and shown on other slides. Controlling objects on master slides is not possible because they do not have an ID. You'll need perhaps more master slides when working with Fluid Boxes as workaround.
- Some types of objects cannot be used: Zoom object, mouse object, highlight box, click box over another object and line object.
Many users still stick to the the old work flow of putting click boxes over images to create a hotspot. Workaround is to use a shape filled with the image, a workflow that is available since many years but apparently not well-known.
For a highlight box: use a shape as well with multistates, one having a thick border and eventually a semi-transparent fill. No workaround however for the outer fill which exists only for a normal highlight box.
The Line shape is a rebel, often causes issues (only shape that cannot be rotated in Options). You can replace it by a rectangle with a minimum width of 4 px which is the minimum.
If you really need to use a zoom object, mouse object or stacking items in the same location: use a static fluid box. That is the case for the default fluid box where feedback messages are stacked on the Quizzing Master slides. You have to be aware that static fluid boxes will just keep the width/height ratio, but are not really 'fluid'.
Conclusion
Do not misunderstand my post, because it sometimes looks like I don't like Fluid Boxes workflow. It is a great way to create responsive projects in much less time than with Breakpoint views, but you need to be aware of what is possible. I am confident that some of the present limitations will disappear in future releases. Use your design skills and knowledge to judge if a project is suitable to be developed with Fluid Boxes or if you need Breakpoint Views workflow.
If you like Fluid Boxes, do not hesitate to enter feature requests for those present limitations that bother you most of all. It will be a big help for the Adobe Captivate team.