Building a mobile user interface differs from creating a user interface to be used solely on a desktop browser. Users expect a level of performance and usability from mobile applications.

There are two important considerations when developing a mobile application. The first is to optimize initial rendering performance by reducing the size of the static content (CSS, JavaScript, icons, etc.). The second consideration is to reduce the number of client-server interactions by process as much as possible on the client.

Disable unused styles

The skin rule creates the CSS for your application. By limiting the number of enabled styles, the amount of CSS generated is reduced. Reducing the CSS size facilitates faster downloads of the CSS files. By default, all the styles are selected for inclusion in a skin rule.

Open the skin rule and in the Included styles tab, clear the check boxes next to the styles that are not used in your application. Consider creating a specific skin for your mobile application that includes only those styles that you need.

Disable the styles that are not needed for your application to minimize the amount of code that is downloaded

Use fewer actions

When possible, use fewer actions on your UI rules. Instead of an action, use an expression. For those actions that are required, bundle them in one user interface rule. If a single action requires multiple things to happen on the server, bundle them together. For example, if you have an on-click action that calls both an activity and a data transform, call the data transform from within the activity. This makes only one call to the server instead of two.

Run on client

The Run on Client? check box is displayed beneath a when condition field if the expression can be run on the client. Selecting the Run on Client? check box causes evaluation and execution of the condition each time the value of a property stated in the condition changes.

Use layout groups

A layout group can contain any number of dynamic layouts, column layouts, repeating dynamic layouts, or other layout groups. On a mobile device, layout groups support swiping. Responsive breakpoints can be set on a layout group that enables the layout group to adjust to the available space. When the user resizes to the breakpoint dimensions, tabs turn into an accordion or a menu. Setting responsive breakpoints eliminates the need for horizontal scrolling on a mobile device.

On a mobile device the user can swipe to navigate across available content in tabbed or menu-style layout groups. The swipe action setting is enabled by default.

Defer section load

Deferring the load of a section delays loading of the section content until the user clicks the header. Deferring enables users to start using other parts of the page rather than waiting for this section to load.

To defer the load of a section, select the Defer load contents check box in the General tab of the section rule. Note that load deferral happens asynchronously and can cause errors when a section is embedded inside another section.

Defer load on UI elements to reduce initial display time

Select Master-detail for repeating dynamic layouts

Select Master-detail in layout properties to display data in read-only mode. When the editable row is selected, the editable fields appear in a detail area below the grid. When the user selects a new row, the edits are applied.

A grid layout with Master-detail selected

Use icon classes

In a layout cell properties, select Icon class as the icon source. Icon classes download the icons as CSS in one download rather than several in downloads.