How to scale correctly in a responsive project.
Hello all!
I have been working on a responsive project for a few weeks now and cannot seem to get the setting correct for the project to scale correctly. The project is very simple, screenshots of an app with click boxes over icons on the picture to show the learner how to walk through the app. At first I was using fluid boxes but then I realized that when viewed on a smaller device the whole image does not show (the bottom is cut off). I switched to break point view and the picture is shifted right and it is cut off on the bottom or does not fill the screen. We have tested in an iPhone 7 and an iPhone XS. I have looked at some blog posts and discussions and I haven’t found anything on how to get the image to scale correctly. I think the big part that I do not understand is the position settings, such as if I should use px, %, % relative, etc.
I am not understanding breakpoints and the sizing of the screen. The photo is smaller, but it is cut off when we try on smaller screens. What sizes should I be developing in? When publishing out a module with breakpoints, shouldn’t it adjust to the screen that I am using? My experience is that when using a larger phone, everything is super small on the screen but with a smaller phone, it it is cut off on the bottom. I am not sure how to go from here. Also, I am using captivate 2019.
DId you have some training on breakpoints. Did you read that blog? With Breakpoints you set up to 5 views. Inheritance is from first (primary) to lower views but you can override them on each view. Between the breakpoints most objects rescale, depending on the set up of the Position Properties. Exception are the font sizes. Have a look at my recent post:
https://elearning.adobe.com/2019/02/object-styles-responsive-projects/
Take time to read some blogs, you will not find many YouTube videos explaining breakpoints well.
You have to check the browser resolutions, not the screen resolutions. Are you aware of that? Many recent smartphones have screen resolutions which are as high as a non-retina monitor but the browser resolution is much smaller. In Breakpoints the layout and setup of the ‘higher’ breakpoint is used if the browser resolution is between two breakpoints, which may be the case for that large phone.
great tip!! I was always wondering that if i see specification of any mobile, it show resolution something 1024…. simillar to as of normal monitor. And we develop for far small resolution !!! Your point cleared my confusion. Thanks.
That is very basic knowledge, wonder why this is so rarely mentioned even in basic training. Soo many users are not even aware of the fact that any LMS and non-LMS eLearning course always needs a browser, and that the very high resolutions of smartphone screens are totally different from those browser resolutions. Look at the browser resolutions of older iPhones, they are very low. Android mostly better.
Thank you for your help! I read your blog and that helped me with getting break points, but when we tested on devices there was always an issue with all of the components showing on the screen.
Here is a link to a post I wrote comparing Fluid Noxes with Brekapoints:
https://elearning.adobe.com/2017/11/tough-choice-breakpoints-or-fluid-boxes/
The first reason why this would never work with Fluid boxes is not what you mention, but that Click boxes are not allowed in normal fluid boxes, because stacking of objects is prohibited.
Breakpoint views offers you a lot more control, but indeed setting up the Position Properties is a very tiresome workflow before getting everything correct.
An image will never fill all screens fully, because you need to keep the width/height ratio to avoid distortion of the image. Maybe you’ll have to use a different image for small Portrait mode? Normally you set the width to % and the height to Auto if you want to keep the ratio fixed.
short & sweet meaningful advice. useful to everyone.
I am short…. but certainly not sweet
. ‘only sweet’ is harmful to health.
You must be logged in to post a comment.
