The Splash Page
The Splash Page is the first page you'll customer will see when they connect to the WiFi. It is important that they perceive the WiFi service as an extension of the digital services offered by your organization so you should make sure they recognize your brand in this page.
If your brand is strong and trusted, they'll recognize you in the Splash Page and they'll be more willing to go through the end and provide their real data.
Page Templates
Although Cloud4Wi allows creating very customized Splash Pages, by working with many customers we learned that the simplest is the page the better is the conversion of users. The most used Splash Page template in Cloud4Wi is what we call Full Page.
The Full Page layout is very simple and includes the following elements:
- Top bar: provide access to the multi-language selector
- Main image: can be the logo of the brand
- Headline: welcome message or incentive to sign-up
- Login box: the content is dynamic and depends by the settings of your login profile
- Background image: the image on the background of the page that covers the entire viewport
Personalize your template
Cloud4Wi offers your several tools to personalize the template, either via the Cloud4Wi Dashboard settings or by using a custom CSS. Using a custom CSS allows you to get a greater level of personalization but requires some web design skills.
Typical template customizations that rely on CSS include:
- hide the top bar
the top bar gives access to the language switch menu. The Splash Page, however, is able to detect the language automatically so the user doesn't have to pick it manually. - changing font colors and form style
In this article you can find some code snippets for the most common CSS hacks:
Optimize images
Optimize images before uploading as background. 90% of users are on mobile, you don't need a large image (max 800 px of width).
Use online tools to optimize images. Try to stay below 80Kb.
Pick images with a uniform level of darkness. Either entirely bright or dark so you can then make the text over it as black or white to make it readable. This tool allows you to easily darken the image so that you can set the text white.
Pick blurred images, they suffer less the lack of details caused by compression
The customer smartphones have many different resolutions, the image may look different in each one of them. It is not possible to make sure that a part of the background image is not covered by other contents of the page.
Splash Pages collection for your inspiration
If you need the inspiration to design a great Splash Page, you can check this gallery of Splash Pages!
https://photos.app.goo.gl/MHHtLJ7KK4yWDug76
