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 and target each new 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 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 it's modified until it hits the lower or upper bounds set.
- In the Visual Design Studio, select a guide step in your guide to open the Edit container window.
- In 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. 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:
- In the Guides 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 to launch in a new window.
- 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.