I think it would be quite interesting to have an empty app “shell” as the loading/splash screen of the app instead of a random image. But I have no idea how to achieve this…
For a simple app this could look like this (this is the “blank” starter of Ionic):
Loaded App:
The problem of course is that a) the app shell looks different on Android and iOS because of the different visual styling of the header and b) just takingscreenshots and then running ionic cordova resources of course doesn’t work, as this positions and crops the images.
- Any idea how I could get this to work for iOS and Android in all resolutions?
- Do I have to create screenshots of all relevant combinations manually?
As a user I would find this supremely confusing and frustrating, because it looks like I can interact with it, but I can’t. I have no visual cue when the app is ready.
It is actually the recommended type of “launch/splash” experience for both iOS and Android:
Design a launch screen that’s nearly identical to the first screen of your app. If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch screen and the first screen of the app.
https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/
For apps that have very short load times, or don’t have a strong branding need, a placeholder UI presents the fewest possible transitions and greatest perceived responsiveness.
On launch, core structural elements such as the status bar, app bar, and bottom sheets are displayed without content until the app has loaded.
Unfortunately too many apps think their branding is more important than giving the user the best (recommended) experience…
It is also identical to the empty state we all show while data is not there yet as we wait for a Promise to resolve (HTTP request is still loading for example).
When there is actual content, you can interact. With empty UI elements you can’t. It feels really natural.
Both of those links have splash screens that look far different from the actual app, as so much is missing. Perhaps I didn’t understand your goal very well in part because there is so little going on in the “blank” app’s actual main page that there isn’t really much to take away.
In any event,
See the documentation for the CLI’s resources command.
The blank app was an example. It shows that the text is gone, but the empty base UI is still there.
(By the way identical to the Android link - it’s just pink instead of grey)
(As I wrote 2 sentences before that question) Using ionic cordova resources won’t work with the empty UI because it uses a “safe zone” in the middle of the much bigger template splash screen and zooms and crops around it. There is also no way to “top left align” the image being cropped or defining at which zoom level the image has to be taken to match the later UI.
So ionic cordova resources produces images with the UI elements at “random” locations and in “random” sizes. Which is why all Cordova apps seem to use the “branding” splash screens…
