Introduced just 5 years ago to make up for the deficiencies of native apps, Progressive Web Apps have evolved over this short time from a sketch or an essay in the field into a viable rival to them. PWAs are websites behaving like apps, so they combine the best of the two worlds. They don’t need installation, weigh little, can operate fairly well under bad internet connection conditions, and are easily discoverable by search engines. Besides, they can be run on all smartphones with any screen size and operational system.
Because of their numerous fortes, PWAs expand their reach conquering ever-wider audience of e-commerce ventures and their customers both of which have learned to appreciate the flexibility and native-like user experience they grant. Although Apple exhibits lukewarm attitude to the novelty, other high-tech manufacturers are more enthusiastic about it, furnishing new challenges for software developers. One of the tasks they have to solve while building a PWA is creating a Progressive Web App splash screen.
What is the PWA Splash Screen?
Once a user takes fancy to your PWA they don’t have to download it (like it happens with a native app). They just tap on the “Add to Home Screen” tab which results in the respective icon appearing on the screen of their device caching it locally. Clicking on the icon they run the PWA. What they see on the screen for a couple of moments while the app is launching (almost instantly and even offline) is called Progressive Web App splash screen (aka start-up image).
Chrome creates this image using your PWA manifest and for the default PWA splash screen Android reserves a blank white screen. At first, you may think that it doesn’t really matter since users will behold it 200 ms maximum. Yet, what differs a good businessperson from an outstanding one is the ability to see how to add value to their product and seize the tiniest opportunity at once. So, instead of resigning to the default Progressive Web App splash screen, you can modify it and create a custom PWA splash screen that chimes with your business goals and strategy.
A PWA Splash Screen Example
Blue-chip companies have learned to utilize the splash screen to the maximum turning it into an impressive lobby that ushers customers to the main building of their PWA. For instance, Nike+Running features a daring contrast on its splash screen where a white logo is placed against a red background. Another business giant Adobe entertains clients waiting for the app to start with various pictures keeping them informed about the loading process at the same time.
Having analyzed the best splash screen ideas, the specialists of Multi-Programming Solutions recommend pivotal points that you should focus on while thinking of a PWA splash screen.
Mind the Image Size
There are two possible ways to show a splash screen: it may cover the entire screen or show as a rectangle in the middle of it. Most apps today prefer the first option, but in either case, you should make sure your PWA splash screen animation has the resolution of the highest possible quality to fit all gadgets, whether it is an Android-using one or an iPhone. For the latter, you can avail yourself of the iOS Splash Screen generator.
Choose the Background Wisely
To captivate users, you should pick a bright motivating color. However, make sure it matches the color scheme of your brand.
Include the Verbal Component
Your company’s name and/or logo appearing on the splash screen (and contrasting with the background) will increase brand awareness and promote customer engagement and loyalty. To boost the effect, you may also feature the company’s slogan that exposes the apps’ principal goal letting users contemplate over it while the PWA is being launched.
Show the Loading Progress
Even if the PWA splash screen is on for a jiffy, it is important to keep users informed on how long they will have to wait. If they see the progress bar, the loading seems to proceed faster, so people wait patiently for the completion of the process. Moreover, this feature persuades them that everything is functioning well.
Go for Simplicity but Avoid Triviality
Don’t overdo it with the complexity of pictures and intricacy of the font. After all, the purpose of the splash screen is to engage a watcher for a very brief time, so the right color solution and a touch of creativity will suffice. And, of course, leave out any advertisement. Packing into the few seconds several splash screens is also a bad call.
How to Create a PWA Splash Screen
Android makes it quite easy to configure a custom PWA splash screen. To do it, four conditions related to the PWA manifest should be met:
The name property features the PWA name;
The background_color property corresponds to a valid CSS color value;
The icons array stipulates an icon of 512×512 px or more;
This icon is in evidence and its format is PNG.
Once you set these, Chrome will exhibit the splash screen you have built. This foolproof procedure doesn’t work with Apple devices though, since for creating a PWA splash screen iOS doesn’t support this method.
iOS Splash Screen Problem
On the one hand, the variety of Android devices is so large that it may be quite a headache for web designers to create a whole scope of splash screen resolutions. To address this challenge, developers build small-, medium-, and large-size splash screens. Yet, this Android-related headache is more than offset by what developers building PWA splash screens for iOS have to go through.
Currently, iOS is only reluctantly starting to support some Web App Manifest API specs, but splash screens aren’t a part of them anyway. So, if you want to set a custom PWA splash screen and icons, the only way out is to add special HTML tags. For splash screens, it is the <link rel=”apple-touch-startup-image” /> meta tag. For icons, you should add one more HTML meta tag – <link rel=”apple-touch-icon” />.
That done, your iOS headache isn’t over. Splash screen images must be added for each Apple device resolution and orientation. So far, there are more than a dozen of them, but that number falls definitely short of the dazzling quantity of Android gadgets, so Apple is decent in this respect at least.
How to Test a PWA Splash Screen
Once your Progressive Web App splash screen is created, it is time to test it. Typically, it is a part of an A/B PWA testing procedure (aka split testing), when two variants of the same page are simultaneously manifested to different groups of visitors to see which variant results in more conversions. This procedure differs significantly depending on the operating system of the device.
For Android devices, you can make use of testing tools Google Play provides, which streamlines and quickens testing considerably. The most popular testing approach is called the bracket method. Starting with one pivotal difference between the web page versions (say, one background color vs another), you determine the better performing aspect and retain it. By repeating the comparison of other features, you will identify variables of your splash screen that do better.
With Apple, it is a different story, since it doesn’t provide any testing platform so you conduct the test on a live listing fully by deploying testing elements. It means that your audience isn’t split, but is targeted as a whole, so measuring performance boils down to gauging the test’s conversion rates.
As you see, the testing procedure in particular as well as creating a PWA splash screen in general is a no-nonsense job which has its niceties often conditioned by the platform that was leveraged to design the PWA. Thus, building, say, a splash screen in Angular PWA can be somewhat different from doing it in React or Vue PWA. So, hiring a team of experts to create a splash screen is a wise decision, if you aim at getting a top-notch product that will satisfy your requirements and consumers’ expectations.
An attractive splash screen is a small but important summand that redounds to the success of your PWA. If you make it simple, catchy, and brand-related you will succeed in improving user experience and promoting customer loyalty.
Every self-respecting business owner, at some point, thinks of improving employees' knowledge, mastery, and confidence. They may already succeed in creating an eLearning platform for corporate training. However, it still needs constant updating to keep the staff up with time and deliver the most relevant data. While developing online lessons is a lengthy process requiring experience and tech power, distributing tasks can become the only solution for companies searching for quick and efficient results.
Today’s busy and tech-savvy online customers are interested in mobile-friendly educational courses suitable for smartphones, tablets, and other gadgets. User-centric and accessible, gamified and bite-sized, mLearning can happen anytime, anywhere. You should learn how to implement it in the organization to make it a part of your corporate culture.
If you practice edtech in your organization, then you might already understand the crucial role of digital learning platforms in constant employee growth. Corporate training has a direct impact on your company’s productivity.
