Mobile Optimization
Mobile optimization involves enabling a dedicated mobile responsive version of your interactive tour within the Tour Builder, allowing you to create and fine-tune a separate mobile track with properly positioned tools and content to ensure a seamless, device-appropriate user experience without affecting the desktop version.
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).
Step 1: Enable Mobile
- 1.Open the Tour Builder for the tour you want to optimize.
- 2.Navigate to the Settings tab.
- 3.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.
Step 2: Make Optimizations
Now that your mobile track is set up, you’ll want to make a few adjustments for the best user experience.
Interactive Tools Placement
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.
Screen Area Adjustments
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.
Step 3: Finishing Touches
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.
Final Thoughts
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!
Related
Mobile Optimization | Navless Product Documentation
The Navless Product Documentation explains how to optimize the Tour Center for mobile by enabling "Show on Mobile" in the Tour Center Overview, managing content visibility toggles for mobile display while ensuring no Content Track is left empty, and then publishing the changes.
Tour Building Best Practices | Navless Product Documentation
The Navless Product Documentation outlines best practices for creating effective product tours by recommending concise, linear tours of 10-15 clicks with clear, action-oriented copy, consistent branding, minimal filler steps, and strategic embedding of "take a tour" CTAs to maximize user engagement, pipeline generation, deal acceleration, and onboarding efficiency.
Before You Launch Checklist
The "Before You Launch Checklist" guides users through essential pre-launch steps for their Tourial marketing tours, including integrating with marketing automation platforms, testing lead tracking and attribution, configuring CTAs in key locations, setting up social sharing tags for better previews, optimizing for mobile responsiveness, and verifying the tour's appearance across various screen sizes to ensure seamless engagement and accurate data capture.
Tour Engagement Data | Navless Product Documentation
After setting up the HubSpot Integration, Tourial engagement data—including detailed metrics like time spent, clicks, form interactions, and metadata such as Tourial name, URL, and visitor IDs—is sent via HubSpot cookies to populate contact record activity feeds, enabling users to create targeted lists, workflows, and reports based on visitor interactions with Tourials within HubSpot.
Timed Tools | Navless Product Documentation
Timed Tools in the Navless Tourial builder are automated features—including Timed Tooltip, Timed Mouse, and Timed Typewriter—that enable creators to automate parts of interactive tours by adding timed tooltips, animated mouse movements, and simulated text entry to enhance engagement and streamline complex workflows, with the restriction that screens can only contain either interactive or automated steps, and timing for these tools is configured via a dedicated Timing tab after adding them from the orange-highlighted automated tools menu.
Building Tours with AI | Navless Product Documentation
The Navless product documentation introduces Tori, an AI-powered assistant that transforms approved tour plans into structured, interactive microtour storyboards by auto-generating screen recommendations and content, allowing users to easily customize and replace screens with branded media, capture product workflows, and efficiently prepare engaging, story-driven tours for marketing and sales purposes.