Note: This feature doesn't affect guide segmentation.
Pendo helps you create guides that look good on both mobile phones and tablets, whether in portrait or landscape mode. Most mobile guides are responsive by default, meaning they respond to device type and orientation. This article details additional settings that can be made to ensure your guides scale effectively.
Create a guide for a mobile device
If you're creating a guide for a mobile device, you can design it using the device's frame.
- In the Visual Design Studio, open the Display Options drawer located in the top tray.
- From the dropdown list, select Phone or Tablet.
- Select the orientation, landscape or portrait.
The default left and right margins are optimized for a smartphone, so make sure to change those to fit a tablet.
Guides are rendered in the Visual Design Studio preview in HTML versus using native iOS or Android components on the actual mobile device, so the Visual Design Studio preview provides a good sense of the guide's size and proportions, but it won't be an accurate representation of how the guide will look on a real device. It's highly recommended to preview the guide on a real device.
Styling settings
The following settings are used to optimize the guide styling for different mobile devices:
- Full Screen Guide
- Limit Guide Width
- Margin and padding
Full screen guide
Turn the Full Screen Guide toggle button on to set the guide to display full screen on any device.
Margin and padding
Use margins and padding to define the placement of a guide on the screen.
Limit guide width
This setting limits the maximum width a guide can expand to. This is primarily used to serve a single guide for both tablets and phones. This essentially gives a "phone sized" guide on a larger tablet screen. If you don't use this setting, the guide might be too big. You can use this setting when Full Screen Guide is turned off.
Limit the width to ensure that the guide isn't too wide (screen width minus margins) while maintaining a 'pop-up' look and feel when a guide displays on devices with wider screens.
The same is true if your app runs in both landscape and portrait orientations. In this case, setting a maximum width for pop-up guides maintains their pop-up look and feel when viewed in landscape mode.
Tooltips
Tooltips have a unique property. Their width is determined by the content (use line breaks to control the width). The tooltip size always remains the same size regardless of the device and doesn't require special adjustments for tablets.