Scratch-www: When editor displays on mobile in portrait, tell the user to rotate to landscape

[benjiwheeler]

Many mobile devices have a landscape width of >= 1024 (the minimum width to display the gui editor without horizontal scrolling), but portrait width < 1024.

On those devices, it would be good if opening the editor in portrait (or rotating the already open editor to portrait) caused the user to be asked to rotate to landscape.

Maybe there could be a full page view or modal saying something like "Not enough space! Please rotate your device to display the Scratch editor".

To implement this, we may need to use a combination or subset of:

• the screen.orientation property, which is currently supported on Android Chrome but not on iOS Safari: https://caniuse.com/#search=screen%20orientation
• css's orientation mixins
• the ratio of the window's height and width
• user-agent detection of whether the device is likely mobile

It might be a good idea to make the message dismissable, in case the user really does want to use the editor with the available width.

Plan:

• Will take some iterations
• Several interlocking questions
• Try to do it before jan, to get feedback from community and maybe a recess of us?

[apple502j]

4th option: bowser.mobile
(NOTE: Won't work when using "desktop mode")

[Kenny2github]

I suggest:

1. Checking the width in the first place, and if < 1024px,
2. if height >= 1024px, display the modal.
3. If the modal is dismissed or neither width nor height >= 1024px, don't care about it

[benjiwheeler]

@Kenny2github That makes a lot of sense, at least as the start of the logic.

The only problem is that the sequence you suggest can happen on desktop as well; I'm imagining someone resizing an editor browser window as they make room for other windows. Unclear to me in that case if we want to display the editor as-is, or the same modal as in portrait on mobile, or a distinct modal explaining that the user needs to widen their browser window.

I tend to prefer doing nothing if we are not totally sure the advice is helpful :)

So YES, I agree, and we might need some more logic to deal with edge cases.

[kathymakes]

I've drawn some designs for modal that might appear... Here's one of them:

(We can finagle the text if we want to go this direction)

Ideally, we would have no modal, and default the GUI into landscape mode, if it's possible :)

If we're not able to default the GUI into landscape, then show modal.

I think it's best to discourage portrait as much as possible, since we just don't know how that experience is going to be and don't want to think about optimizing that in case folks start using it anyway.

[benjiwheeler]

@kathymakes It looks like, unfortunately, it is not possible to force the device into landscape mode -- at lease not in mobile web browsers (we may be able to do that when we build our own apps).

Should we may be put a close button in the corner just in case the user has a reason they really need to stay in portrait, or in case we have missed some edge case like a weird screen dimension?

[locness3]

@benjiwheeler

to stay in landscape

Don't you mean portrait ?

when we build our own apps

No more info on this ? 😋

[benjiwheeler]

@locness3, you're right! I edited my comment.

No official plans for native apps at this time :)

[kathymakes]

Thanks for the thoughtfulness around this @benjiwheeler - just seeing your updates now! @carljbowman and I were thinking about having a broader convo around responsive - even if we got this perfect for iPad there other devices to think about. Stay tuned for a convo about this more in depth :)