Skip to main content
Participant
March 8, 2021
Question

Mobile version of responsive project looks totally different than preview

  • March 8, 2021
  • 2 replies
  • 158 views

I am using a template from website that I have found, that uses responsive projects. I have made sure that all elements look good on desktop and vertical mobile version, however, after publishing and viewing the project on a phone, the project is all messed up. The elements are overlapping each other, titles are not what I set them to be and the navigation does not work properly. 

 

I believe the template does not use fluid boxes, as that option is grayed out, even when I click on certain objects. 

Desktop version looks and works fine by the way, this is only a mobile issue. 

 

Any ideas what could cause this issue and how to fix it?

This topic has been closed for replies.

2 replies

Paul Wilson CTDP
Community Expert
Community Expert
March 8, 2021

First of all the idea of a template in Adobe Captivate can mean something else entirely. the CPTL file that Lieve is referring to is what we used years ago to save a template design. You can still start a new project from these template files but very few people use them anymore. Today it is more common to create a Theme file that includes all the master slides, colour pallets, playbar design and so on. Anyone can design a theme and unfortunately, some themes are designed for responsive design and others are not. I have a theme I'm working on for a personal project right now. I have no intention of using this Theme for responsive so I haven't included the fluid boxes on my master slides that would be required to truly make it a responsive theme. Unfortunately, you could create a responsive project and apply such a theme and as you would expect it would look entirely wrong when previewed on anything other than desktop.

 

Let's assume for the moment that it is a theme that was designed for responsive design. The live preview in Adobe Captivate only accounts for changes in width but generally assumes the same height. The reality is that with all the devices in the world you may see a variety of heights as well. If it's a relatively new responsive Captivate project it likely does use fluid boxes. The fluid box icon on your toolbar will be greyed out if the fluid boxes already contain objects. You would need to unlock any objects from the fluid boxes before adding more fluid boxes to your slide. 

 

My advice is that if there are fluid boxes I would look carefully at the wrap options. Having the wrong wrap options can make your project look entirely different on a variety of screen sizes. Unlike Adobe, my feeling is the default fluid box wrap option should be squeeze in a row and only converted to wrap if it's necessary for the design. I wish I could make squeeze in a row a default.

 

Also, look at the minimum font sizes. They are often too large for many smaller mobile devices and often force the text popout icon. Depending on the content on your slide you can also experiment with Enable uniform text scaling. This can help when fonts that should be the same size as one another are completely different.

 

One last note about fluid box responsive design. It is by far the most difficult way to design eLearning. I understand that you may have been asked by an employer to design for mobile as well. There is a belief that more people want to use their mobile phones to complete more work-related tasks such as completing their training. I'm not sure if this is true. Anyway, as the responsive design takes more time to complete well and is one of the more difficult designs to implement, I might want to suggest you build your first courses using non-responsive design (blank project). Best of luck.

Paul Wilson, CTDP
Lilybiri
Legend
March 8, 2021

Paul, the template files are still used in some companies notwithstanding the many warnings Rod and myself have posted everywhere. Over twenty blogs trying to explain Themes as ultimate styling start didn't help so far. Using the same term for something different is just confusing. 

This 'template' was from another website... no idea which workflow was used.

Lilybiri
Legend
March 8, 2021

It is very improbable that you will be able to find help since apparently that 'template' (was it a cptl file?) doesn't tell you how it was set up. The term 'reponsive' has been used often when it was not relevant. You should ask the authors of that template for advice.
Captivate has not only Fluid Boxes to create responsive projects but also the Breakpoint Views workflow. However, if set up correctly, that other workflow would not lead to the mess you describe.