Designing a Responsive User Interface

You can design the user interface of a WebVI to respond to different screen sizes.

Suppose you want your WebVI to run on both a computer monitor and a tablet device; or you want the WebVI to run on a mobile phone that users expect to scroll only vertically. Instead of creating a user interface for each use case, you can design a single user interface that adapts the panel and its contents to the screen size.
  1. Create a WebVI within your application document.
  2. On the Panel tab, set Panel layout to Flexible.
  3. Create containers by placing objects on the panel.
    • On an empty panel, place a control or indicator anywhere on the panel to create a container.
    • Place a control or indicator outside an existing container to create a new container. You can create multiple containers in a column or in a row.
    A container appears as a border when you hover over objects on the panel.
  4. Select a container and configure the layout options in the Layout section of the Item tab to determine how objects in the container arrange and align when the screen size changes.
  5. Select an object and configure the layout options in the Layout section of the Item tab to set the object size and whether the object resizes when the screen size changes.
  6. Click File » Save all to save all files.
  7. Select Run » Run in browser to view your application in a web browser.
    Resize the web browser and ensure the controls and indicators resize appropriately.

To make your web application available to other users, host your build output on a web server that is accessible to other users.