About the responsive layout mode

Video Tutorial: Introduction to responsive layouts in AVEVA OMI

Use the responsive layout mode if the layout you are designing is intended to be used in one or more ViewApps that will be viewed by a mix of devices, such as smart phones, tablets, and monitors. If the layout is only for use in a single ViewApp that will be viewed on a monitor, then using the fixed layout mode is appropriate.

For example, if you are viewing a ViewApp on a device that is 375 pixels wide, the Mobile layout is used, since the mobile device width is defined as no more than 375 pixels wide. If the device is 376 pixels wide, the next layout size (tablet) is used.

In the following descriptions, the nominal pixel dimensions (width x height) for each screen size are shown. The dimensions assigned to each screen size are fixed and cannot be overridden.

Four different screen resolutions (break-points) are defined for a responsive layout, as listed below. Each screen resolution represents a break-point, which represents the screen width at which a layout designed for that particular screen width takes effect. The layout design presented to the user is determined by the width, in pixels, of the viewing device. Screen height does not play any role in determining screen size for the responsive layout. Default layout settings are configured at the smallest screen size (mobile), and propagate to the larger screen sizes, unless overridden. See About responsive layout propagation for more information.

Note: The dimensions (width x height) shown for each screen size within the layout editor are nominal dimensions.

• Mobile (extra small layout): This layout is used when the viewing screen is 767 pixels or less. See Display a web ViewApp on a mobile device for information about ViewApp appearance at runtime.

  The parameters set for the Mobile layout are used for each of the larger screen sizes, unless an override is set for larger screen size. An override set for Tablet, for example, would also apply to the Laptop and Desktop screen sizes, unless also overridden at one of those larger screen sizes.

• Tablet (small layout): This layout is used if the width of the viewing screen is between 768 and 991 pixels.

• Laptop (medium layout): This layout is used if the width of the viewing screen is between 992 and 1199 pixels.

• Desktop (large layout): This layout is used if the width of the viewing screen is 1200 pixels or more.

• TV (extra large layout): This layout is used if the width of the viewing screen is 1200 pixels or more.

  Note: If you change the orientation of a device, the height of the screen becomes its width. For example, if you are viewing a layout on a mobile device and turn it sideways, the screen resolution becomes 812 x 375 (using the nominal dimensions in the Layout Editor). Therefore, the Laptop layout would be used instead, since it is used for screen widths between 768 and 991 pixels. You can demonstrate this by configuring a pane in a Mobile layout, and then select the Rotate Screen icon. The layout automatically switches from the Mobile to the Laptop layout. You can demonstrate the same effect by dragging the right side of the layout to change its width.

You can change the number of columns used for a pane at each of the defined screen resolutions. By default, new panes span the full width of the layout (12 columns). To create side-by-side panes, set the number of columns that each pane uses so the total number of columns for all the panes is 12 or less. If you have two 12-column panes configured for mobile devices, you may want to have the panes side-by-side when viewed in larger devices. In this case, you could set the width of each pane to 6 columns.