About responsive layout methods

There are several ways to configure a responsive layout. These are:

• Mostly Fluid: this is the most basic and the simplest type of responsive layout to configure. The only layout property that requires configuration in a mostly fluid layout is the Column Span property, which can be modified to define a different width for a pane at each screen resolution. Even though responsive layouts are easy to configure using only the column span parameters, the Mostly Fluid method provides sufficient capability for most applications.

• Column Drop: in addition to setting different widths with the Column Span parameter, the Column Drop method makes use of the Column Push and Column Pull parameters. This allows content to flow differently at different screen sizes. One scenario for using column drop would be an application that has a navigation screen followed by an overview display. When viewed on a large screen, it makes sense for navigation to be shown above the overview display. However, when viewed on a mobile phone, a user would prefer to have the overview shown at the top of the screen, instead of having to scroll down to get to the main content.

• Layout Shifter: this is the most complex method for creating responsive layouts. The Layout Shifter method lets you show different content when the ViewApp is opened on different size screens. As with the Column Drop method, Layout Shifter uses the Column Push and Column Pull properties, and also uses the IsVisible property to selectively allow a different pane that contains different content to be shown at specific screen resolutions. For our example scenario, we will again consider a ViewApp with a navigation pane. In this case, we not only want to move the navigation pane up for viewing on larger screens, we also want to change its orientation from horizontal to vertical. To effect this, we create two panes: one with a vertical navigation app and the other with a horizontal navigation app. In addition to using Column Push and Column Pull, we will also use the IsVisible property so that the pane with applicable content is shown only when it should be.

Column Offset is another pane property that can be used, but this property is primarily used to align a pane as needed at different screen resolutions, rather than for enabling column shifts. For example, you can use Column Offset to center an "orphaned" pane at certain resolutions.

The figure below shows Pane 1 is selected and overrides have been entered for Small (Tablet) and Medium (Laptop) screen sizes. For Small screen sizes, Column Span is set to 6. This also becomes the setting for larger screen sizes, unless a new override is set at a larger size. For medium layouts, Column Push has been set to 2. This setting will also be in effect for larger screen sizes, unless another override is set. Pane 4 is offset by 2 columns. However, the setting is not shown because the pane is not selected.