The second post explored in depth the Object Style Manager, for creation and management of Object Styles.
In this last article the focus is on Responsive projects: tips and tricks to keep in mind for Object Styles in a responsive theme. Since CP2017 Captivate offers two workflows for responsive projects: first is using Fluid Boxes, second older using Breakpoint Views. Tips will be specific for each of those workflows. If you want to re-read the advantages/limitations of both workflows, may I recommend reading this post. I also mention the workflow of Rescalable HTML project as alternative for responsive projects.
Fluid Boxes project
Objects not allowed in normal Fluid Boxes
What are the limitations of real fluid boxes? Many objects cannot be used. For the Object styles, that means you don’t have to bother about styling those objects. They all are in the category of the Standard objects:
- Highlight Box cannot be used because it is meant to be stacked over the object to want to highlight. If outer fill is selected, it is covering up the rest of the slide which is breaking the stack rule..
- Rollovers are not possible in any fluid box (not even in a static fluid box): Rollover Area, Rollover Slidelet, Slidelet.
- Zoom object cannot be used for the same stacking rule: Zoom Source and Zoom Destination
Font size in Fluid Boxes
No need to bother about the other browser resolutions. After publishing fonts will decrease in size smoothly until the minimum font size is reached. At that moment the famous ‘icon’ will appear to indicating text doesn’t fit in the available text container (shape or caption). Just one tip: set the minimum font size to 10p if you expect to have learners on small browser resolutions.
Objects not allowed in Breakpoints
Font size in Breakpoints
It is no secret that the Adobe team is promoting the Fluid Boxes workflow over the Breakpoints (which mean more work but offer more control to the developer). For that reason, there are no real Breakpoint views themes packaged with Captivate 11 (CP2019) anymore. A responsive project will always start with a Fluid Boxes, where you can use a packaged or custom theme. When switching to Breakpoints that theme loses all fluid boxes, but the object styles for fonts are not changed: all breakpoint views keep the same font size which is the maximum font size set up for Desktop (or higher Custom size) in the Fluid Boxes.
This is a situation where I use the Object Style Manager to start with the tedious work, eventually to be edited later on while designing the master slides. The OSM will now have a dropdown list for the activated Breakpoints, whenever font size is needed. That is the case for the Captions and Shapes under Standard Objects and for most of the Quizzing Objects. Of course, you don’t have to bother about Captions if you only use shapes and vice versa. Look at this screenshot, for the Title shape, common style in most themes:
When you check the font size for the 4 Breakpoints below the Desktop, you’ll see that the size is fixed. You need to decrease the size gradually. Minimum font size is 10pt. It is a bit guessing at the start to find a good distribution between the maximum and that minimum font size (which is for Mobile Portrait). My workflow:
- I look for the smallest used font size on Desktop, that will have to be 10pt for the Mobile Portrait.
- Once you have chosen Mobile Portrait in the dropdown list, that resolution will remain for the other styles until you change again. Edit all mobile font sizes at once, related to that smallest size.
- Landscape Tablet doesn’t have to be much smaller than Desktop, unless you use a really big resolution for the desktop breakpoint. So I’ll set up all the font sizes for that breakpoint.
Here is a check list of the objects I usually edit. Know that I never use captions, only shapes as text containers. As for the buttons, only shapes and transparent buttons (compulsory for quiz slides) are used. They appear in the same sequence as in the OSM.
- Buttons: I edit the style(s) for the Transparent button and for the Quiz button here (both will also appear for Buttons in the Quizzing category)
- Text Entry Box: edit only one style which I set as default style.
- Text Entry Box button: switch to Transparent button whose default style has already been edited
- Smart Shape: for use as text container.
- Title: often start with 16p for the lowest breakpoint
- Subtitle: often start with 14p for the lowest breakpoint
- Success/Failure/Hint Shape: all need same font sizes. Beware some included themes use same style (Success), you’ll want different styles but with same font size in breakpoints.
- Quizzing Partial Correct Shape: all other shapes use a default style which has been edited under the Standard objects.
- Quizzing Progress indicator
- Quizzing Review Area: is only used on the score slide to store the text about passing/failing
- Short Answer
IMPORTANT: Do not forget to save the theme when you have finished. Indicate clearly that it is a Breakpoint Views theme. That way you will be able to apply the theme when you have converted another project to a Breakpoint views workflow. If you change the design a lot throughout , it may be worthwhile to create a Blank project with edited font sizes for Breakpoint Views projects.
If you do use Breakpoint views because you have learners using a lot of devices and want to have a simple look for the smallest screens instead of having the same layout fluidized, please log feature requests. It should be possible to choose which workflow to prefer when creating a responsive project: Breakpoints or Fluid Boxes. Fluid Boxes should not be imposed by default as is the case at this moment in CP2019.