Skip to main content
Dar29
Dar29
Known Participant
May 10, 2018
Answered

Content scales fine in preview but not in browser

  • May 10, 2018
  • 1 reply
  • 383 views

Hello! I am publishing my first project in Captivate. I'm using Captivate 2017 and have built a responsive project using fluid boxes. It will be viewed on a Surface Pro 4, so I have built my project at 2736 x 1824 to fit perfectly.  In my preview window, my project scales down fine, however, when I publish and open in my browser on my desktop, it doesn't scale down to fit. Shouldn't this happen automatically? I have to reduce the magnification of my browser to 50% to be able to see the whole project.

Thanks for any help!

    This topic has been closed for replies.
    Correct answer Lilybiri

    Why did you choose for a Fluid Boxes responsive project if you want to see it only on a Surface Pro? First thing to know is that the screen resolution is not the same as the browser resolution. It is the Browser resolution that should be taken into account when creating an eLearning course. At this moment I do type on a Surface Pro, which has indeed a retina screen 2736x1824, with a display percentage of 200% as default setting. However when checking the browser resolution of my system (viewportsizes.com) it is 1368x821.  You have to decrement those numbers with the pixels taken by the browser or the LMS, and eventually the playbar. Your start resolution is not correct. I has not much sense to develop with a resolution that has to be downscaled on all devices.

    Secondly: if the goal is to watch on a Surface Pro, using a non-responsive project with rescalable HTML output would have been a better choice. I publish most of the tutorials for which I offer links in my blog to that output. Maybe this post can clarify the differences between Rescalable, responsive with Fluid Boxes and responsive with Breakpoint Views: 

    https://elearning.adobe.com/2017/11/tough-choice-breakpoints-or-fluid-boxes/

    Here is a link to one of my published Rescalable tutorials:

    http://www.lilybiri.com/published/TimelineBlog/index.html

    1 reply

    Lilybiri
    LilybiriCorrect answer
    Legend
    May 10, 2018

    Why did you choose for a Fluid Boxes responsive project if you want to see it only on a Surface Pro? First thing to know is that the screen resolution is not the same as the browser resolution. It is the Browser resolution that should be taken into account when creating an eLearning course. At this moment I do type on a Surface Pro, which has indeed a retina screen 2736x1824, with a display percentage of 200% as default setting. However when checking the browser resolution of my system (viewportsizes.com) it is 1368x821.  You have to decrement those numbers with the pixels taken by the browser or the LMS, and eventually the playbar. Your start resolution is not correct. I has not much sense to develop with a resolution that has to be downscaled on all devices.

    Secondly: if the goal is to watch on a Surface Pro, using a non-responsive project with rescalable HTML output would have been a better choice. I publish most of the tutorials for which I offer links in my blog to that output. Maybe this post can clarify the differences between Rescalable, responsive with Fluid Boxes and responsive with Breakpoint Views: 

    https://elearning.adobe.com/2017/11/tough-choice-breakpoints-or-fluid-boxes/

    Here is a link to one of my published Rescalable tutorials:

    http://www.lilybiri.com/published/TimelineBlog/index.html

    Dar29
    Dar29Author
    Known Participant
    May 10, 2018

    Thank you very much for your response. I've been learning a lot from your posts online.

    Please clarify for me...does the non-responsive project with rescalable HTML output produce .swf files? I was advised to absolutely not use .swf files.

    Our client will be using the Surface Pro 3 and 4 and the Dell 5285, all which have an aspect ratio of 3:2, though different resolutions (and I assume different viewport sizes). Based on this, what type project would you recommend?

    Thanks so much!

    Lilybiri
    Lilybiri
    Legend
    May 10, 2018

    I don't use SWF since about one year. Look at my sentence 'Rescalable HTML'. 

    Check the browser resolution (or ask to check) on their devices. I am on Surface Pro 3, so you already have the browser resolution for that one. Choose Blank as project type, choose the highest browser resolution they have (do not forget the real estate taken up by browser/LMS/Playbar and eventually TOC if separate). Develop a non-responsive project. Publish it to HTML only, with the option 'Rescalable HTML' checked. 

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