Skip to main content
mikedashg
mikedashg
Inspiring
August 7, 2017
Question

2017 responsive issues on mobile

  • August 7, 2017
  • 2 replies
  • 2215 views

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:n892kp8.png

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

n3ER6c2.png

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:

A4iOP7Y.png

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 ...

CsQVD3N.png

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 ...

2WvmC3S.png

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:

jcvsp93.png

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 ...

5ASAfAv.png

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

Thanks in advance!

    This topic has been closed for replies.

    2 replies

    b.rembrandt
    b.rembrandt
    Known Participant
    August 27, 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

    Lilybiri
    Lilybiri
    Legend
    August 27, 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.

    b.rembrandt
    b.rembrandt
    Known Participant
    August 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).

    S
    StevePixel
    Inspiring
    August 7, 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 

    mikedashg
    mikedashgAuthor
    Inspiring
    August 7, 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

    0GkvDmM.png

    How I had it before min scaling turned off

    2WvmC3S.png

    Min scaling off on the desktop how I had it before

    aZlsdsH.png

    12 pt min scaling turned on the desktop

    eV57DxP.png

    8 pt min min scaling turned on the desktop

    I5EFpFx.png

    S
    StevePixel
    Inspiring
    August 7, 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 

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices