iOS/Android player difference - vertical design for slides

Jun 10, 2022

Hi

I'm trying to design an accessible puzzle game as a proof of concept for a learning conference.

I've barely got off the ground with it yet, because I'm having issues with the responsive player and how it displays slides between Android and iOS.  When viewing the same slide published as HTML, using various sizes and aspect ratios, the player on iOS renders the content far smaller, with the player taking up a lot more room both vertically and horizontally.

e.g, on Android:

Android view of the player, showing the black slide taking up much more space

and on iOS:

iPhone 13 showing the player taking up much more space

I appreciate that different devices have different aspect ratios, so that would create a different experience - but it does seem that the player is much less obtrusive on the Android device.

Has anyone got any size/aspect ratio suggestions that might be useful?  This project is currently 1152x2047 (vertical orientation - 2047 is the max slide size) - I really want it to work in the more natural vertical layout.

If anyone wants to look at the file on their device, the URL is www.nicolafern.coml/nic-files/lock/story.html

Cheers

Nic

2 Replies
Maria Costa-Stienstra

Hi, Nicola.

Thank you for sharing a link to your course and the screenshots!

I'm hoping some of the community members with experience designing for both devices can chime in with their suggestions, but I wanted to offer an idea: if you don't need the player, have you considered turning it off? 

Windows 10 (1) 2022-06-10 at 1.45.18 PM

Here's a discussion with some sample screenshots:

Additional resources:

I hope this helps!

Nicola Fern

Hi Maria

Yes, I can turn the player off, but then the user loses access to the accessible text tool and the sound control – both of which I want. At the moment, there’s no sound but once I’m past the initial testing I will be adding audio in. The whole point of this interaction is to make it as accessible as possible…

I’ll take a look at the resources you suggested.

Thanks
Nic