Skip to content

Research support for fullscreen design in mobile apps #68

Description

@MartinaeyNL

Description

In many of our custom apps, especially one for professional use cases, don't synchronize well with OS visual settings.
Some of our web apps are designed as "full screen" apps, where visual inconsistencies appear.
A small list of screenshots summarizing common problems:

  1. Design is meant to have a fullscreen background in green, but the header does not correspond.
Image

.
2. Android phone is set to dark mode, but the background of the system bar is in light mode.

Image

My proposal

Be aware: this is from a web developer perspective, but taking Android/iOS development into count.

First of all, I think all OpenRemote apps (Android and iOS) should display web browsers "as fullscreen" by default.
This means there is no padding vertically nor horizontally, and everything can be handled by the browser content. (our web app)
Since the web app controls visual design choices (background colors, etc), it makes sense to put the logic there.

Because every device and OS has different visual settings, the native app should communicate margins (and other preferences) to the web app.
It could for example communicate { left: 0, top: 16, bottom: 32, right: 0 }, whereafter the web app can decide how to act.
In the future we can add additional properties to this object, from dark/light mode to accessibility preferences.
Currently, I don't see any reason to "write" from the UI to the Consoles natively.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions