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.

In a responsive layout, how much content is displayed depends on the screen size. For example, you can configure a product image to appear in full size on a desktop computer, but reduce its size for tablets and hide the image completely on mobile phones. This way, you can save screen space and ensure that users with smaller devices do not have to scroll through unnecessary information. To define the screen size range for each interface configuration, you set up responsive breakpoints.

  1. In the header of Dev Studio, click the name of the application, and then click Skin.
  2. On the Component styles tab, on the left side of the Dynamic Layouts header, click the More icon.
  3. In the Layouts list, click the layout that you want to edit.
  4. In the layout pane, in the list of available formats, select the format that you want to edit:
    • To select a custom format, on the My Formats tab, click the target format.
    • To select an inherited format, on the Inherited tab, click the target format.
  5. In the format settings panel, expand the Responsive breakpoints node, and then select the Enable support for responsive breakpoints check box.
  6. If no breakpoints are defined for the layout, click Add breakpoint.
  7. Under the breakpoint header, select the behavior that you want to trigger with the breakpoint:
    The available settings depend on the type of layout.
    • To hide columns with importance that is set to Other, select Drop columns with importance 'other'.
    • To transform the layout to a list, select Transform to list.
    • To hide the layout, select Hide this component.
    • To transform the layout, in the At the settings below switch layout to list, select the alternative layout that you want to use.
    • To transform the layout to another format, select Transform to other format, and then select the format that you want to use.
  8. In the Media type list, select the type of display to which you want to attach the breakpoint.
  9. In the max-width field, define the maximum screen width that triggers the breakpoint behavior.
    For mobile apps, define the trigger width in percent.
  10. Optional: To define the minimum screen width that triggers the breakpoint behavior, complete the min-width field.
    For mobile apps, define the trigger width in percent.
  11. Click Save.