Adaptive and responsive mobile interfaces
Adaptive and responsive interfaces help your application successfully reach users through a variety of channels. By using Pega Platform features to build an adaptive and responsive interface, you can ensure that your application displays correctly on any mobile device.
Adaptive interfaces
Adaptive interfaces change how they display UI components in a view depending on the user's device. For example, if your application uses a complex chart that cannot fit on a mobile screen, the system hides the chart to save screen space and prevent a frustrating experience.
Pega Platform offers various out-of-the-box conditions that you can use to build adaptive logic, such as pyIsMobile, which evaluates to true on mobile devices.
In this example, users can see the layout only on mobile devices. You can configure adaptive settings in sections or layouts.
Responsive interfaces
Responsive interfaces change the visual representation of a view based on the form factor, and do not require any additional conditions. While you set up adaptive interfaces by defining view rendering logic, you configure responsive interface behaviors in the CSS file of your application.
In this example, when the interface reaches a certain breakpoint, for example a minimum screen size, the UI component becomes invisible. You can configure responsive settings in the skin of the application.
Best practices
Using design templates and dynamic layouts is a best practice for building adaptive, mobile-ready interfaces. For more information, see Creating views for case types and Creating a dynamic layout.
- Configuring an adaptive user interface
Ensure that your application offers a consistent user experience even on small mobile screens by configuring an adaptive UI. Adaptive interfaces change what they display depending on the user's device.
- Configuring a responsive user interface
Improve the clarity and usability of your application on mobile devices by defining how the user interface behaves on smaller screens.
Previous topic Building a UI for mobile apps Next topic Configuring an adaptive user interface