Responsive Layout Dashboard Mode
It takes time to develop dashboards. Traditionally most dashboards are created for displaying on a large device, such as a computer monitor or TV. However with today’s ubiquity of mobile devices with a variety of screen sizes, it is important to build dashboards that both display appealing informative information, but also adapt to the size of the device they are being viewed on.
Typically multiple dashboards would need to be created to serve every size of display. However with the Responsive dashboard mode, it is no longer always necessary to create separate dashboards. It still may be better to create separate dashboards when the dashboard is designed to display very large amounts of information, such as a very detailed map, or when designing a dashboard that will also be visible on a smart phone sized display, as the size limits the amount of information you can effectively communicate.
To build a responsive dashboard you must use template grids. For more details on how to use templates, see this article.
2. The responsive mode flow algorithm
Responsive mode re-flows the individual grid cells from left to right, then top to bottom, as the available size of the screen changes:
- The dashboard will attempt to fit as many cells as possible by using the edit-time width of the template cells. When there is not enough space, it will start a new row. The left-over space will then be filled by evenly resizing all the cells.
- The height of the row is defined by the cell with the largest edit-time height, after it was already placed in the row. All the cells in the row will expand to match that height.
- The header in a group of cells will be placed before the content cells, in the left-top position of the group. The remaining content cells in the group will be positioned according to the two points described above.
In Responsive mode, when the page is loaded the layout is calculated based on the current page size, and is recalculated each time the page changes size. This can happen either by resizing the browser window or changing the device from portrait to landscape mode.
3. Grouping and Headings
In a regular template, headers and groups do not need to be defined because the layout is static. However in responsive mode, some extra information is required on the cells to preserve certain important layouts.
In the layout below, a template grid with 6 rows and 6 columns has been created:
Grouping several cells together ensures that these cells are kept together when the page layout is computed. The group is considered a single cell when the layout is computed. To configure several adjacent cells to form a group, select the cells. If the objects are selected instead of cells, the cells themselves can be selected by clicking Select Template Cell in the toolbar.
Select Group Cells in the toolbar to create a group.
In this example, cells 1 and 2, 3 and 4, and 5, 6, 11 and 12 have been grouped. In responsive mode, the layout is recalculated to keep all groups together. Cells 1 and 2 take up the whole row because while cell 3 can fit onto that row, cells 3 and 4 cannot. Cells 5, 6, 11 and 12 appear before cells 7, 8, 9 and 10 because the group is kept together, and cells 5 and 6 come before cells 7, 8, 9 and 10.
Frequently, when grouping items together, a header is desired. When the layout is computed, a cell that is tagged a header row will not have any cells placed to the cells immediate right, even if there is space. When the header row is inside a group, this only applies within the group.
A cell can be designated a header row if it is the only cell in the row in the template grid OR the only cell in the row in the group. When creating a group this may require merging two cells to create a header row.
Select the header cell, and click “Toggle Header” on the toolbar.
In the example below, cells 5&6 have been merged, note how despite the merger, they do not function as a header.
When the header property is set, cell 5&6 (which is now one cell), contains no cells to the immediate right that are in its group (“5&6”, 11 & 12). As 11 & 12 can fit underneath “5&6”, the group is shrunk, and cell 7 is placed to the immediate right of the group.
4. Enabling responsive mode
Responsive mode is a property of the dashboard. It is selected in the Re-size mode property. Click on the dashboard, select properties, and change the Re-Size Mode to “Responsive”.
5. Using responsive mode
To use responsive mode you create the dashboard using the template grid, placing the visualizations within each of the grids. For best results element should use relative position.
6. Design Notes
Responsive mode is designed to cleanly modify the layout of the dashboard when viewing on a device with a smaller display size or different orientation. Viewing at screen sizes larger than the size the dashboard is designed for may cause undesired layouts. Dashboards targeted for larger displays should be designed for those displays from the outset. Smaller screens also require consideration of how information is conveyed in a small area.
Another consideration that must be taken into account is how the recalculation of the layout impacts the positioning of sections of the dashboard. When a dashboard is displayed at full size, two related visualizations that are in different cells that are adjacent may not be when the layout is recalculated. To ensure that related visualizations are kept together, the cells should be configured in a group.
6.1. Example Dashboard
The dashboard below has been created using responsive design. When designing the dashboard in the dashboard designer, there is a base size that is used, however when viewing the dashboard on smaller displays, the dashboard layout is recomputed to take into account the smaller sized display.
In edit mode, the original dashboard is designed to have a grid that is 3 across and 2 down. When viewed at full size, this is the display that is seen.
When the dashboard is viewed on a tablet device which is often used in portrait mode, the dashboard layout is recomputed, and it able to fit a layout of 2 across and 3 down.
On a smart phone, which has a much smaller screen, the layout can only fit a grid one cell wide.
7. See also