Mobile
Navattic provides multiple options for viewing demos on devices smaller than 800px wide - this includes most smart phones and smaller tablets. Test these options on a variety of devices to find the optimal viewing experience (a Mobile Simulator like this may help).
Access Mobile Strategies by visiting your Demo > Build > Mobile.
The Mobile swipe demo is used to engage your mobile visitors with a short and visual experience they can swipe through. To create a mobile swipe experience visit your demo > Build > Mobile > Mobile swipe demo > Edit Mobile Swipe Demo.
All Mobile swipe demos start with a Welcome and Farewell step. Click +Add to add more steps.
Toggling on Fullscreen in the Mobile Swipe Editor allows images that are taller than they are wide to fill the entire screen. This feature enables you to seamlessly create Mobile-on-Mobile demo experiences.
- Auto Progress:
- Enabling Auto Progress for your Mobile Swipe Demo will automatically guide visitors through the demo by advancing to the next step after 4 seconds. To turn on Auto Progess select Advanced Options > toggle on Auto Progress.
- Confetti:
- Toggle on Completion confetti to allow visitors to celebrate once they complete their final step!
- Use Vibrant, Stylized Visuals
- Ensure the images are colorful and eye-catching. They should be visually engaging without overwhelming the user with too much detail.
- Use visuals that are not clearly associated with either desktop or mobile UIs to avoid narrowing the audience. The focus should be on showcasing your product’s functionality, not the platform.
- Keep Copy Concise and Flowing
- Keep the text minimal and clear. Focus on short, impactful sentences that can be easily skimmed.
- The smaller text underneath should complement the main message, but keep it to a minimum since it’s often skimmed.
The Mobile alert is a good option if you prefer not to present your demo to mobile viewers or do not expect heavy mobile traffic to your demo.
You can either use the default mobile alert or create your own. The Mobile alert includes a title and description which can be edited in Build > Mobile > Mobile alert > Edit > Message.
If you'd prefer to upload a custom image, select Custom Image. You can then upload a dimage from your local storage.
With Mobile scaled view enabled, the Capture will appear on top of any dialog that is present on this step, while maintaining the proportions of your original app. We recommend taking Captures on a smaller window if you plan to use Mobile scaled view to ensure that elements remain legible on smaller devices.
To use the Mobile scaled view, visit your demo > Build > Mobile > Mobile scaled view.
