Skip to main content
Inspiring
February 11, 2016
Question

Objects in responsive project resize and shift when previewed and published

  • February 11, 2016
  • 3 replies
  • 1705 views

Good day!

After editing the different views in a Captivate 9 responsive project, I was surprised to see objects such as lines and images move and resize when the project is previewed or published. The differences aren't even the same between the preview and published versions.

  • Line endings in captions change
  • Images reduce in size
  • Arrows change arrow and plain ends as well as line angle

Any one of these issues is difficult, but combining them all in each of the viewport sizes is catastrophic. The development views are correct, but the previewed and published versions are severely affected.

Any hints or ideas to try?

Mary

This topic has been closed for replies.

3 replies

Inspiring
February 12, 2016

Thank you both for your replies and suggestions. To answer somewhat in the reverse, I'm using responsive for a couple of projects for our field sales organization. Most of these people aren't on their laptops when interacting with our corporate resources, so I need both the desktop and tablet versions. Here's the general workflow I used:

  1. Add content to the desktop viewport and arrange as desired.
  2. I update the Object Style Manager if I need to make global style changes. This prompts at least one more review to ensure I haven't messed anything up.
  3. Check the tablet viewport to ensure elements are arranged correctly. This project is training for a mobile app, and I've used highlighted screenshots. The tablet viewport has been very close and has needed very few modifications.
  4. I preview the entire project in all viewports. This is where I started seeing problems with the previewed project not matching what I did in the development view. I understand about elements being resized, etc.; however, these issues are highlight boxes no longer aligning with screenshots and arrow heads changing from end of the line to the other.
  5. I published the project, hoping the issues I saw were only in the previews; however, the published version had even more.
  6. The text line end changes are really driving me nuts: I'm having to use manual line breaks and tabs to address not being able to specify the starting list number.

In checking screenshots from the development, preview, and published project views I noted the issue is usually caused by the screenshot image (.png) being resized rather than the highlights and arrows. I had to resize the screenshots after I added them to Captivate. My next steps:

  1. Experiment with resizing the images before adding to the desktop viewport
  2. For arrows that are behaving incorrectly, remove and replace
  3. I'm still not sure what to do with the lists that take two screens; I may have to redesign these a little

Thanks, again, for your suggestions.

RodWard
Community Expert
Community Expert
February 12, 2016

If you are essentially delivering software training via HTML5, I see no reason to go responsive.  You're just making your life difficult for little extra benefit.

To do this responsive you would ideally need to be using DIFFERENT screenshots for the mobile app for each viewport size and orientation.  Resizing screenshots will only cause them to lose resolution.  And if the screenshots were originally captured in landscape view, there's not a lot you can really do in PhotoShop or any other graphics editor to turn them into appropriate Portrait view screenshots.

Inspiring
February 12, 2016

Very good points, Rod. I have a couple of projects going right now, and I think I'll give this one a go at just HTML5. The screenshots are slightly different, but I don't believe enough. As an aside, I have had success with resizing images prior to putting them into Captivate. The originals aren't mine but come from a presentation someone did. The author isn't the best of communicators, and I've done a lot of editing and reworking language to clarify as well as change the focus for learning rather than data dump.

Thanks again for the help and quick replies!

Lilybiri
Legend
February 12, 2016

It would help if you explained your work flow. I always start with setting up the object styles in the OSM, which are part of the theme to be customized and have the functionality to set up for all breakpoint views. Then I'll set up the master slides. The Positioning panel is very important once you start working on the slides themselves: both for size and position.

Known Participant
April 23, 2016

Hi Lily

I was just wondering if you could advise on something - I like the way the different breakpoints adjust everything, especially if you have things set to %s etc. The one thing that I'm struggling with is the way that it deals with images. I'd expect that if images were going to be changed in size they would be changed relatively. Is there a way to force this so that images are not distorted in the various views. E.G. A square image stays square intead of being squashed?

Thanks

Lisa

Lilybiri
Legend
April 23, 2016

Width is most important size, set it to % and let the Height set to Auto.

RodWard
Community Expert
Community Expert
February 12, 2016

In responsive projects you have to set up each viewport to look the way you want, starting with the primary viewport and working your way through all of them.  It sounds like you may not have done this properly for some viewport sizes.  Responsive projects are supposed to have objects changing position and size etc in much the way you describe. 

If you are running into too many complexities with your content in responsive, I would be going back to the drawing board and considering whether you REALLY need to be using responsive over normal HTML5.  I'm seeing only very few projects that REALLY benefit from responsive.  Most developers seem to be finding it doesn't repay all the extra development time and headaches required.