Intro
Overview 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. You have to know that developing time for such a fully responsive project will be much larger tahn for the first two workflows.
Example Movies
- Title: 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.
Difference between Theme Breakpoints and Fluid Boxes
Object Styles
Master Slides
Limitations and workarounds – Fluid boxes
- 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
Such an object is often used as alternative for objects (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.
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 limitations that bother you most. It will be a huge help to the Adobe Captivate team.
Thank you for this! It was really well written and clear for a beginner like me.
You’re welcome. I am amazed that you find such an old blog, which is very rare. Most blogs here disappear in the dungeons after a couple of months. That is not the case on my personal blog, where even 10 years posts are still visited.
Hi Lieve,
Thank you for sharing your knowledge. Too much information to process in a single reading.
I browsed both projects, but the Breakpoint view never loaded on Google Chrome.
Greetings
I published this blog when CP2017 wwas released, which is a while ago. It is impossible for me to keep track of all the posts that are screwed up by updates in versions and browsers. After all, I am offering tons of information all for free. I never earned anything with that blog, on the contrary, have to pay to keep it online, without the slightest support (not even by Adobe).
Most recent versions of Chrome caused a lot of problems, maybe that is the reason. Does it work with another browser?
Great blog post.
I’ve used a number of authoring packages over the years, but am relatively new to Captivate 2017. I think the Responsive features are a real step forward as they open up possibilities in delivering content on a range of devices.
The comparisons of the three responsive methods was very helpful. I can see using any of three, depending on the project, and your detailed comparisons make a nice checklist for deciding which method might work best. I wasn’t aware of the HTML scaling content, but could see that working in a situation where you wanted to rapidly deploy content. One option with the HTML scaling would be to use a mobile first design. Just a thought.
I also like the workarounds, especially the use of multi-state objects. I’m looking forward to trying the workarounds in future projects.
Jim
I’m a big fan of using an image as a shape fill! 🙂
You’re welcome, Lita. Article is bit different from what you mostly read about Fluid Boxes only? It is always useful to know about positive and negative points IMO.
This was an excellent and helpful comparison with useful tips. Thank you!
You must be logged in to post a comment.
