Create responsive guides for web and mobile apps

Pendo lets you design your guides to be responsive so that the layout adjusts to the screen of the device it's viewed from when viewing the guides both in a web browser window or various mobile devices. This removes the need to create multiple copies of the same guide to target each copy to segments based on your users’ devices.

Create a responsive guide for a web app

To design your guides to be responsive when viewing in a web app, you can define fluid widths for a guide and also preview the guide in a browser window that mimics the screen ratios of a device.

Requirements

• Minimum agent version required is v2.213.1 

Set widths

Set minimum, maximum, and default widths at the guide's step level, based on percentage of the screen. Width values at the guide step level override the guide theme level width values. Guide steps readjust to match the percentage width as they're modified until they hit the lower or upper bounds set.

1. In the Visual Design Studio, select a step in your guide to open the Edit container window.
2. In Styling, under Dimensions, select Fluid.
   
   
3. Use Percentage width to select a minimum pixel width, or enter a minimum and maximum width. Pixel width is the default selection. The default percentage width and maximum pixel width is based on the viewing screen. Percentage values are required.
4. Select Done.

Preview your guide

You can preview your guide in a browser window that mimics the screen ratios of mobile phones and tablets to see how the guide responds to different screen sizes. Specify which preview mode you want to preview the guide in: Desktop, Tablet, Mobile, or Custom. You can change the orientation of the device by switching the width and height values.

To preview your guides in a browser window:

1. In the guide's details page, select the arrow next to Preview and choose Preview Options, or in the Visual Design Studio, select Preview in the header bar.
2. In Preview settings, select where you want to launch the guide. To test responsiveness, select New window to launch in a new window.
   
   
3. Select the required screen size. For a custom size, enter the width and height of the screen.
4. Select Launch preview.

Note: Viewing in full-screen mode prevents a new window from opening to the given dimensions and opens the guide preview in a new tab.

Create a responsive guide for a mobile app

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 the 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.

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.