About responsive design in App Builder

"Responsive design" can be a key aspect of apps built in App Builder. Your apps can be designed and built to adapt automatically to different types of devices on which it might be used. App Builder has several tools and features that can enable you to make your app responsive to multiple devices and screen sizes. Most of these features operate automatically, based on the width of the screen on the device being used to access your App Builder app.

By "responsive design", we refer to the practice of creating your app in such a way that it can adjust automatically to the different sizes and different orientations of the devices on which it is to be used. So, for example, on a regular laptop screen, the display might be 1440 pixels wide and use a "landscape" orientation. On a mobile device, such as a smart phone, the display might be 360 pixels wide and use a "portrait" orientation.

App Builder makes it easy to provide for a variety of layouts from the same basic app, each one designed to work on a different device size and orientation. This is done by setting one or more "boundaries" for the app, with each boundary triggering a different size and/or layout.

Built-in responsiveness of components

Each basic component delivered with App Builder is designed to be responsive in itself. This means that it can automatically adapt to the size of your device's screen. This is the default responsive behavior. However, as each component can have its own responsive behavior, we recommend that you test and evaluate the result on any target device types or simulators.

To use an alternative to the built-in responsive behaviors in App Builder, you must modify the "boundaries" and component settings, where you can manipulate the orientation, visibility, style, size, or other settings of each component. This enables you to change the look and feel of your app on different devices, without having to create different versions of your app.

Simulating different screen sizes

To simulate the effect of various screen display sizes, App Builder uses a mechanism called a "boundary." Boundaries essentially define the various widths at which the app display changes. For example, you might define one set of boundaries for mobile phones, another set for tablets, another set of boundaries for a laptop display, and yet another for a standard computer monitor display. Each of these boundary settings can cause the display for your app to change automatically in response to the device on which it is operating—without you having to design different versions of your app.

The controlling factor for the change from one boundary display to another is the width of the screen on the target device. A boundary set at 320 pixels, for example, might be appropriate for a mobile phone, while a boundary set at 1440 pixels would be more appropriate for a standard monitor.