Build

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.

Mobile swipe demo (recommended)

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.

Document image


+ Copy from Flow allows you to reuse Captures and copy from your existing demo.

Document image


All Mobile swipe demos start with a Welcome and Farewell step. Click +Add to add steps in between. Each step contains an image, title, and description.

This is how a Mobile Swipe Demo appears on an iPhone
This is how a Mobile Swipe Demo appears on an iPhone


Best Practices

1. Include no more than 8 steps.

2. Upload an Image or existing Capture to the Welcome step.

3. If you are uploading your own image, use dimensions similar to height: 16rem or 256px and width: 24rem or 384px, allowing the image to cover a larger portion of the screen. Accepted file types include .PNG, .GIF, and .JPEG.

4. Keep the text minimal and clear and focus on short, impactful sentences. The Description should complement the Title, but keep it to a minimum since it’s often skimmed.

Good Example:

Document image


Bad Example:

Document image


5. Edit the Theme of your Mobile swipe demo to match your brand. To do this, visit the Theme tab in your demo > Edit Theme > Mobile Swipe.

Mobile Swipe Theme
Mobile Swipe Theme


Additional Customizations

1. 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.

2. Confetti: Toggle on Completion confetti to allow visitors to celebrate once they complete their final step!

Document image


3. Crop the Captures: Crop the Captures or upload a new Image to ensure the images are colorful and eye-catching.

  • Crop the Capture
    Crop the Capture
    

4. CTA Button: Toggle on the CTA button and use Open in new tab to ensure Visitors can easily access it throughout the mobile swipe demo.

CTA Button Configuration
CTA Button Configuration


Customer Examples

Make sure to view these examples in a window below 800px wide to activate the Mobile swipe view or use a mobile simulator like this Chrome extension.



Mobile alert (default)

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.

This is how a Mobile Alert appears on an iPhone
This is how a Mobile Alert appears on an iPhone


Message or Custom Image

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 an image from your local storage.

Mobile scaled view

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.

This is how the Scaled Mobile View appears on an iPhone
This is how the Scaled Mobile View appears on an iPhone


Check out Klue's Demo Arena in a window below 800px wide or use a mobile simulator like this Chrome extension to see examples of Mobile scaled view.