2017 responsive issues on mobile

Report · Aug 07, 2017

Fluid boxes sound great, and all the webinars I went to (several of them in fact from Adobe and others) show everything working perfectly within Captivaite, in the preview mode, and published on the desktop. Everything scales fine, looks fine, etc.

But when I ACTUALLY view it on an iPhone 6, it works/looks different then it did within captivate, and differently then preview mode. It completely breaks when I view it in horizontal/landscape mode as well. I've tried playing with the fluid box settings with how things wrap/fit, but nothing works right or looks good on the desktop at the same time. You can download this sample file here if you want to play along: https://www.dropbox.com/s/k2g2rxgr3qxqcae/mikegproject.zip?dl=0

Here's what I mean (click to enlarge images) ...

Here's all the content on the desktop, which works fine within Captivate, preview mode, and published viewed from the desktop:

Here's how it looks on an iPad, again, this works/looks fine in Captviate, preview mode, and published viewed from an iPad:

Here's how Captivate says it'll look on iPhone 6 within Captivate. To my surprise, the text in the dark gray box, and the text at the bottom is just cut off, it doesn't display all the text:

When I go "Preview" mode though from the mode above, it automatically shows me the iPhone 6 view on the top slider bar within my browser, yet it's completely different then it shows within Captivate, all the text is scaled down and fits nicely. It would be great if it actually looked like this on the phone ...

Unfortunately it doesn't look like this on the phone. Here's how it looks on the actual iPhone 6. The dark gray box text is fitting, but I get the "view more content" icon in the lower right. Which, technically I could live with. But it's a little hard/frustrating to develop when Captivate shows you one thing, Captivate Preview mode shows you another, and in reality, it's a third thing all together ...

Also, when I view it on the desktop published, and scale my browser down to the iPhone 6 size, it shows it all scaling just fine:

This is an absolutely deal breaker here though for Captivate 2017 fluid boxes if I can't get this to work correctly. Maybe it's something I'm doing wrong (although I've tried many different settings. I can kind of get it to work on the phone, but it messes up the desktop view). When I rotate the iPhone 6, it completely messes up the layout different then the desktop, iPad, etc ...

I've since fixed the "juglging" type-o, but this is just placeholder content anyway .

Thanks in advance!

Report · Aug 07, 2017

Hi Mike,

I hear your frustration. I worked on a mobile project and ran across similar issues. Here are a couple of work-arounds I came up with.

1. Enable "Minimum font size scaling" This should help alleviate your font scaling issue.

2. My second tip is a best practice for using Fluid boxes in design. If you need your design to be attractive and professional at the iPhone 6 dimensions, you need start your design. from that setting. This will limit your creative choices, but it will also work across all aspect ratios. You need to design, to your most restrictive dimension. Scaling up is much more accommodating, Scaling down from a design originally created from a desktop dimension, is much more difficult technically and aesthetically. Its not really a Captivate issue, its just physics, how much graphics can you professionally put into such a small space.

Cheers,
Steve

Report · Aug 07, 2017

Thanks for your reply Steve.

We are definitely designing with mobile in mind, and not just designing on the desktop and wondering if it'll fit, but a good practice just to start with mobile and go up from there.

As far as that thing to try, the enabling the "min font scaling" just made things worse on the iPhone 6. That was one of those things I mentioned that I tried that also messed up the desktop to boot. Depending on what size I put in there as the min, it makes the desktop smaller, and doesn't help the mobile version at all. So if I put 8 pt in there, then that makes the desktop all like 8 pt too, which just won't work, that's too small. Primary users will be on desktop. Mobile is more of a nice to have/after thought, but it has to work too. See screen caps below.

Still not sure what to do about horizontal/landscape view on mobile either.

Min scaling turned ON as you suggested on iPhone 6

How I had it before min scaling turned off

Min scaling off on the desktop how I had it before

12 pt min scaling turned on the desktop

8 pt min min scaling turned on the desktop

Report · Aug 07, 2017

Hey Mike,

Sorry the "scaling" didn't work out, but I do have a work-around (that actually works--kinda) for your landscape view issue. There is an option in Preferences/Publish/Project- "Disallow landscape view in Mobile" It also gives you an option to write a message "best viewed in portrait mode etc"

Since mobile is only a "nice-to-have" feature, much easier than trying to reconcile both portrait and landscape views. I used this on mime, worked great!

Cheers,
Steve

Report · Aug 07, 2017

Having an option to Disallow PORTRAIT view on a mobile device would make more sense to me than only having the option to disallow Landscape view. Desktop view is always going to be Landscape. Tablets are good for Landscape. Only mobile phones usually create this issue where you need to restructure everything on the page to accommodate a portrait orientation. But they can easily turn the phone around to landscape. So disallowing Portrait view and giving the option to write a message telling the phone user to turn their device would make a lot more sense to me (personally). Then you'd only ever need to build Landscape views.

Report · Aug 07, 2017

Hey Rod,

I don't disagree with you, but that is the only option available. Perhaps in future updates we can choose!

Cheers,

Steve

Report · Aug 26, 2017

I just viewed my captivate fluid boxes on the phone and it looks nothing like the previews. Do fluid boxes work? Did you get it worked out? And when I say different I mean drastically different. My r

Report · Aug 26, 2017

Yes, they work but you have to realise that only the published version will

show really the result. Preview is not always to be trusted. If you

explained more, maybe some suggestions could be made.

Report · Aug 27, 2017

Ok, thanks, Lilybiri, after some quick tests, I see that in order for everything to work correctly on my layouts the wrap setting has to be set to "squeeze in row" for all boxes. So, a note to anyone simply trying to get a layout with rows to appear correctly on the phone, do not have any of the fluid boxes wrap. (Sounds obvious now).

Report · Aug 27, 2017

I suspected as much, but since you told it didn't look like the preview I was hesitating. It should have looked exactly the same if you looked at the Preview for a screen with the same browser resolution as your phone.

You don't always have to choose Squeeze in a Row (or Column), it depends on the output you want. In many instances a portrait mode on a phone would look better if you allow some objects (or fluid boxes) to wrap to the nex row. Here are some blogs recommended to read about Fluid Boxes settings:

Using Fluid boxes: Knowledge Facts – 3 | eLearning it has a reference to the first two blogs by the autor Zeeshan from the Adobe team

Using Optional with Fluid Boxes in Captivate 2017 to customize content across devices | eLearning by Mohana from Adobe team

Fluid Boxes and Master slides - Captivate blog

Tips for 'Fluid' Quiz Slides - Captivate blog

In both two last articles I tried to explore and explain the setup of master slides, for normal content slides and for quiz slides.

Report · Aug 27, 2017

Thanks.

Report · Aug 29, 2017

b.rembrandtI never got it worked out. It was way easier to just the old style responsive. I could predict how things were going to happen better with that. It's very difficult to predict fluid boxes and how they will re-act when the software shows you one thing, the preview shows you another, but when you get to the device it's a third thing all together. I get the settings, and it looks good on the desktop. But when I view on the device it's not right. Plus I can't do any repositioning of items from say the left side of the screen to the top right. It's just all about flow, and sometimes it doesn't flow right. Also font scaling is unpredictable and blanket scaling often. Stuff I don't want scaled gets scaled. It would be nice if it worked like in the previews on the devices, but they don't. I'm using the new version of Captivate, but I reverted back to the break points. I have way more control over how things look with that. I don't feel like this version is ready for prime time. It's a nice idea if it worked in the real practical world on the devices with lots of content. It only works in theory when you're viewing it on the desktop with a limited amount of content.I tried disallowing landscape view, which worked on the iPhone 6, but not on the 7 plus, the resolution is too high it thinks it's a tablet or something so stuff is cut off and you can't scroll.

Report · Aug 29, 2017

I hear what you are saying and managed to get my layouts worked out using fluid boxes, but I have the luxury right now of making the design fit the software, not making the software fit the design. We're really really early in the design process so I don't have to fight it. I'm still using smart positioning on items not in the fluid boxes, so it's a combination of the two. If you want a collaborator that is messing around with this full time, in Denver, please add me in Skype, or if you'd like we can set up a chat on Slack (which I use more).

Thanks for the reply.

Brian

Skype: brembrandt