Design guides for mobile devices and tablets

Last updated:

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 for tablets, you can design it using a Tablet's frame. 

  1. 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).
  2. Select the device’s type (phone/tablet) and orientation (portrait/landscape).

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

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. Their 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.
Screen_Shot_2020-05-21_at_10.09.00.png

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

Screen_Shot_2020-09-09_at_15.20.00.png

The same is true if your app runs on 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. 

 

Was this article helpful?
0 out of 3 found this helpful