Onboarding pages are hosted on the Liquid State Servers and stored offline in the app after a rebuild. As a result, your Onboarding Web App should be designed to support some features.

Design constraints...

Onboarding webpages are cloud-hosted on Liquid State servers, and served to the app as needed. As a result, your onboarding webpages and supporting assets should:

Be as small as possible. Using appropriately sized images and other assets is recommended.
Include the fewest number of files as possible
Preferably use a single web page (HTML file). Multiple pages can be used (just like a normal website), but more pages result in more complexity, and a greater chance for bugs to occur.

Page recommendations...

The web pages in use for your onboarding experience will be viewed across a range of screen sizes. As a result, these pages should:

Always be designed for small, medium and large viewports
Use CSS media queries to identify screen size
Be tested on a range of devices before being published in your app

Screen sizes...

As above, it is necessary to design your onboarding web pages for a range of screen sizes, and for mobile use. As a result, we recommend that you:

Avoid using complex JavaScript (loops, animations etc.)
Ensure all interactions are touch compatible
Take both and portrait and landscape viewing modes in to account when designing your pages
Consider accessibility on mobile devices, including factors such as:
- Font sizes
- Buttons sizes
- Colour contrast across varying display densities and other device-specific hardware considerations

Technical constraints...

An app onboarding experience should always include the following interactions:
- Registering a new app user
- Logging in an existing app user
- Loading the profile data for the currently logged in app user
- Setting the profile data for the currently logged in app user
All onboarding specific interactions happen in Javascript code. Remember to:
- Use the Liquid State JavaScript library provided to you when you enable the onboarding app feature
- Refer to example code when creating your web pages
Onboarding pages must include forms, such as registration and login forms. Always:
- Design forms as normal HTML forms
- Remember that the Liquid State JavaScript library provides utility functions to load and set form data

Browser not supported