Design guides for mobile phones and tablets

Last updated:

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.

  1. In the Visual Design Studio, open the Display Options drawer located in the top tray.
  2. From the dropdown list, select Phone or Tablet.
  3. 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.

ezgif.com-video-to-gif__5_.gif

Note: The frames used in the Visual Design Studio 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 might appear differently on your actual device.

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

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.

Screen_Shot_2020-09-09_at_15.20.00.png
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.  

ezgif.com-video-to-gif__6_.gif 

 

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