Responsive view design

Learn why and how to design responsive views for Resco mobile apps.

Why responsive

Users have devices with different screen sizes (phone/tablet/computer), preferred screen orientations (landscape/portrait), and needs. Views in Resco mobile apps can be designed to adapt to make use of the available screen real estate to ensure they look good on any device.

Common indications of poor design include empty large screens with content huddled on a side or cramped small screens with abbreviated content, often unreadable without zooming in.

Responsive options

Resco mobile apps support multiple options that guarantee responsiveness and optimal user experience.

• You can define multiple row designs for each view. Chain these designs using the Next row property. When the screen width increases, the app displays rows designed for wider screens.
• You can define a threshold when the view switches into an Excel-like table view.
• You can display multiple records per line (for example, an image gallery view).
• At the cell level, you can choose whether the cell width should remain constant or grow/shrink to fit into the available space.

Multiple row designs

Unless you disable responsiveness for all fields, views adapt to screen width. No action is needed for that. But with enough screen width, the views could include additional fields that don't fit on narrow screens.

1. You can start by defining the most narrow screen design.
2. Clone it, name the clone and increase its width.
3. Reposition the fields in the editor and add more fields to use the available space and provide extra information to the user.
4. Repeat steps 2 and 3 until you have all row designs ready.
5. Use the Next row property of the various row designs to link to the next wider row.
6. Save all changes, publish the app project, and verify the result in the app.

Table view

If the screen is wide enough, such as in the case of a tablet or desktop screen, it is no longer practical or visually appealing to display data as a list. This is where the concept of a table view comes into play.

To maintain the responsiveness of your design and to ensure a seamless user experience across different devices, set up the 'auto table' feature. It allows the interface to automatically switch to a table view when the width of the display device exceeds a certain breakpoint.

1. Edit a view in Woodford.
2. Enable Auto table.
3. As Breakpoint, select one of the predefined thresholds (phone, tablet, computer) or enter a custom value in pixels.
4. Save all changes, publish the app project, and verify the result in the app.

Auto table displays the same fields as the row from which you are switching. If you switch from the default row with 3 fields, the table displays three fields. If you add a second row design at 400 pixels with 5 fields and enable auto table for 520 pixels, the table displays 5 fields.

Multiple records per line

Traditionally, views display one record per line. Grid design allows you to display multiple records per line. This can be useful when using an image as a dominant portion of the row design. Typically, this can be a list of spare parts, real estate properties, contacts; or anything where visual identification helps the user find the right record.

1. Edit a view in Woodford.
2. On the Properties pane, set Default layout to as Grid.
3. Save all changes, publish the app project, and verify the result in the app.

Responsive fields

A cell set to be responsive will stretch as the screen expands to avoid leaving empty space. If it is the only element in a row, it maintains consistent margins from its parent row, behaving as though its right and left sides are anchored to the edges. If two responsive cells are adjacent, they keep a distance from both sides. However, if an overlap occurs that wasn't originally designed, it gets corrected according to the template pattern, preserving the proportion of widths and their mutual indentation.

If you disable Responsive for a cell, you must specify anchoring, either on the right or the left side. The cell will have a fixed width and will be anchored on the selected side. Consequently, when the width changes, the cell will maintain its fixed width and distance from the marked side of the row.

See also: New cell resizing Blog

Best practice

If you are designing rows for different resolutions and uses, the basic width dimension must be adjusted to the smallest target width. This means that if we want to use a view as part of a tree view, we must take into account the width of the row in this component. Otherwise, overlaps may occur. Scaling works best from the proposed width upwards.