Mobile/Phone site...Rotation issue

[superheroic]

Question...I've set up my website and I designed a variant for mobile. When I check my site on my phone everything seems fine...until I rotate the phone. Once I rotate the phone the site reverts to the full aspect ration of the site and anything in my pop-up layers pop-up too large for the phone. Is there a way to fix this? Do I have to design another variant for when the phone is rotated?

[gwpriester]

Not sure about this but maybe if you design your mobile variant for the height of the phone instead of the width, and compensate by making the text large enough to read in portrait mode, then you should be able to get by with one mobile variant.

[Acorn]

Question...I've set up my website and I designed a variant for mobile. When I check my site on my phone everything seems fine...until I rotate the phone. Once I rotate the phone the site reverts to the full aspect ration of the site and anything in my pop-up layers pop-up too large for the phone. Is there a way to fix this? Do I have to design another variant for when the phone is rotated?

superheroic, it is a juggling act.

What are your Main and Variant widths?
The mid-point is the breakpoint and if your specific mobile can handle the Main then it will swing to that.

There is nothing in the Rules to prevent you including a second larger Variant to handle the transition space.

Have you applied Scale to fit width? If so it should not matter what the pop-ups do as you are seeing a smaller scaled Main on a Landscape phone.
As Gary said, you may need to tweak your font size to handle it.

Acorn

[superheroic]

Main width is 960. Variant is 480.

The mobile design is designed for the height of the phone, not width (landcape).

Designing another variant seems like a bit of a pain.

What would I apply "scale to fit width" to? The pop-up layer? The asset in the pop-up layer? The whole page?

superheroic, it is a juggling act.

What are your Main and Variant widths?
The mid-point is the breakpoint and if your specific mobile can handle the Main then it will swing to that.

There is nothing in the Rules to prevent you including a second larger Variant to handle the transition space.

Have you applied Scale to fit width? If so it should not matter what the pop-ups do as you are seeing a smaller scaled Main on a Landscape phone.
As Gary said, you may need to tweak your font size to handle it.

Acorn

[Acorn]

Main width is 960. Variant is 480.
The mobile design is designed for the height of the phone, not width (landcape).
Designing another variant seems like a bit of a pain.
What would I apply "scale to fit width" to? The pop-up layer? The asset in the pop-up layer? The whole page?

superheroic, Scale to fit width is for the design overall.

Main W (px)	Variant W (px)	Break point (px)	Explanation
960	480	720	If a mobile can render 480px across, its height is going to be much larger than 720px so Main kicks in. Few devices are as blocky as 4:3.
1280	480	880	Just above the Golden Ratio of 780px - a playing card.
1440	480	960	For a device 16:9, the break point is close to 850px.
1920	720	1320	My usual starting point is just right for 16:9 devices.

A width of 960px for a Main website on a desktop would appear tiny in a full width browser.
My browser zoom would be around 270%.
A Scale to fit width of 1280px would limit the zooming to 190%, less than double, so not overwhelming.
This does not overcome the Break point being at 720px so you would have the same, current issue.

I would propose increasing your Main to 1280/1440px if you feel 480px is OK for the Variant.
I would, however up the Variant to 640/720px and use Scale to fit width.
If the device truly can only work with 480px then the scaling down is 75%/66.67%. This allows the font size to be upped by 33.3%/50%, improving readability on most devices.

With scale to fit width, the pop-ups match what is presented in the page so they should neve swap the layout.

Another variant is overkill, I agree, but is is still an option if you cannot tune your site to match your expected viewing need.

Acorn

[superheroic]

Oh, OK...this is all great stuff...thank you!

I thought it was weird that the largest setting for a site using this program was 960. Last time I designed a site I used Adobe Muse and I'd set it to 1440, I think...but I just figured this program knew what was best for its own use.



Sorry...where do I find the "scale to fit width" setting for the site overall?

superheroic, Scale to fit width is for the design overall.

Main W (px)	Variant W (px)	Break point (px)	Explanation
960	480	720	If a mobile can render 480px across, its height is going to be much larger than 720px so Main kicks in. Few devices are as blocky as 4:3.
1280	480	880	Just above the Golden Ratio of 780px - a playing card.
1440	480	960	For a device 16:9, the break point is close to 850px.
1920	720	1320	My usual starting point is just right for 16:9 devices.

A width of 960px for a Main website on a desktop would appear tiny in a full width browser.
My browser zoom would be around 270%.
A Scale to fit width of 1280px would limit the zooming to 190%, less than double, so not overwhelming.
This does not overcome the Break point being at 720px so you would have the same, current issue.

I would propose increasing your Main to 1280/1440px if you feel 480px is OK for the Variant.
I would, however up the Variant to 640/720px and use Scale to fit width.
If the device truly can only work with 480px then the scaling down is 75%/66.67%. This allows the font size to be upped by 33.3%/50%, improving readability on most devices.

With scale to fit width, the pop-ups match what is presented in the page so they should neve swap the layout.

Another variant is overkill, I agree, but is is still an option if you cannot tune your site to match your expected viewing need.

Acorn

[Acorn]

Depends on your Version.

v17 and under is is Utilities > Web Export Options.
Current is Web Properties > Export.

Acorn