Mobile-Optimization
This article walks you through how to optimize your interactive tours for mobile to ensure flawless experiences across the board.
Last updated
This article walks you through how to optimize your interactive tours for mobile to ensure flawless experiences across the board.
Last updated
Mobile optimization is crucial to delivering exceptional interactive experiences for all your buyers, no matter which device they're using. Without mobile responsiveness, you risk serving broken or poorly formatted content to users on mobile devices.
When you enable the mobile responsive setting, a dedicated mobile version of the tour is created and accessible via a toggle option within your existing tour. All screens, tools, and text are automatically applied, allowing you to fine-tune the experience for mobile devices. Think of these like two separate tracks of the same, single tour (accessible via one URL/embed)
Buyers using mobile will see the mobile track, while desktop users will stick to the desktop version. Remember, changes to one version won’t carry over to the other (e.g., removing screens on mobile doesn’t affect the desktop version).
Open the Tour Builder for the tour you want to optimize.
Navigate to the Settings tab.
In the Mobile section, enable the Mobile Responsive Version.
Optional: You can also enable the Mobile Tour Button. This replaces the embedded tour with a button on mobile devices, launching the tour in a new tab for a cleaner experience.
Now that your mobile track is set up, you’ll want to make a few adjustments for the best user experience.
On the mobile track, some tools may not be properly positioned, running off-screen or obscuring text. Make sure all interactive elements are visible and easy to navigate.
Adjust tool positioning: Drag interactive tools into the visible area of the mobile screen.
Optimize tool width: Ensure your tools fit within the mobile screen width to avoid cropping.
Leverage clickzones: Adding larger clickzones can make it easier for users to navigate the tour by simply tapping on highlighted areas.
Reposition content to focus on key product areas, ensuring the most relevant sections of the screen are highlighted.
Use the zoom tool and screen sliders: Double-click on the screen background to access these controls, available on the right side of the Tourial app.
With most of the heavy lifting done, it’s time to polish your mobile tour and make it perfect for buyers on the go.
Remove hover tools: Touch devices don’t support hover interactions, so replace any hover-based tools.
Change "Click" to "Tap": Update any text that refers to "clicking" since mobile users will be tapping.
Shorten your content: Mobile users typically spend less time engaging with your content so every second counts. Trim down text and remove non-essential screens to keep the tour concise and impactful.
By following these steps, you’ll ensure your interactive tours are optimized for mobile, delivering a seamless experience for all users regardless of device. Happy optimizing!
