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 in a browser window. This removes the need to create multiple copies of the same guide to target each copy to segments based on your users’ devices.
To design your guides to be responsive, 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.
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.
- In the Visual Design Studio, select a step in your guide to open the Edit container window.
- In Styling, under Dimensions, select Fluid.
- 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.
- 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.
Requirements
- Minimum agent version required is v2.213.1
To preview your guides in a browser window:
- 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.
- In Preview settings, select where you want to launch the guide. To test responsiveness, select New window to launch in a new window.
- Select the required screen size. For a custom size, enter the width and height of the screen.
- 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.