Designing Guides for Mobile and Tablets

Note: This feature does not affect guide segmentation. 

Pendo helps you create guides that look good on mobile and tablets, whether in portrait or landscape mode.

My app is running on Tablets

If you're creating a guide that's targeted for tablets, you can design it using a Tablet's frame. 
Open the Display Options drawer located in the top tray to select a different device frame that will allow you to view the Guide in a tablet frame (Landscape/Portrait).

The default left & right margins are optimized for a smartphone, so make sure to change those to fit a tablet.

 

ezgif.com-video-to-gif__5_.gif

Select the device’s type (phone / tablet) and orientation (portrait / landscape)

Note: The frames used in the Pendo designer fit the most common iPhone size (iPhone 8) and the most common iPhone's tablet (iPad 12) - these are generic frames with a specific ratio (phone 16:9, tablet 4:3), the guide may appear different on your actual device.

Guides are rendered in the designer preview in HTML vs. using native iOS or Android components on the actual mobile device so the designer preview can give you a good sense of the guide's size and proportions but it will not 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.

 

What about tooltips?

Tooltips have a unique property - A Tooltips width is determined by the content (use line breaks to control the width). Tooltip size will always remain the same size regardless of the device and does not require special adjustments for tablets.  

ezgif.com-video-to-gif__6_.gif 

Limit Guide Width

Optimize your 'pop-up' guides for mobile and tablets by using the 'Limit Guide Width' option in the Edit Container. You can use this setting when Full Screen Guide is set to off.

Limiting the width will ensure that the guide will not be too wide (screen-width minus margins) while maintaining a 'pop-up' look and feel when a guide is displayed on devices with wider screens.

The same is true if your app runs on both landscape and portrait orientations. In this case, setting a maximal width for pop-up guides will maintain their pop up look-and-feel when viewed in landscape mode. 

Screen_Shot_2020-09-09_at_15.20.00.png
Limit the guide's width to keep its 'pop-up' look across various devices

Screen_Shot_2020-05-21_at_10.09.00.png

'Limit Guide Width' is enabled only when 'Full-Screen Guide' is Off.