Responsive Layout Dashboard Mode

Contents[Hide]

1. Overview

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:

6x6 Template grid
6x6 Template grid

3.1. Groups

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 template cell toolbar icon
Select template cell toolbar icon

Select Group Cells in the toolbar to create a group.

Group Cells toolbar icon
Group Cells toolbar icon

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.

Template cells grouped in the dashboard designer
Template cells grouped in the dashboard designer

View mode of the dashboard using responsive mode
View mode of the dashboard using responsive mode

3.2. Headers

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.

Merge Cells toolbar icon
Merge Cells toolbar icon

Select the header cell, and click “Toggle Header” on the toolbar.

Toggle Header Row toolbar icon
Toggle Header Row toolbar icon

In the example below, cells 5&6 have been merged, note how despite the merger, they do not function as a header.

Cells merged in the dashboard designer
Cells merged in the dashboard designer

View mode of the dashboard with merged cells
View mode of the dashboard with merged cells

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.

Cells with header row toggled in dashboard designer
Cells with header row toggled in dashboard designer

Cells with header row toggled in view mode
Cells with header row toggled in view mode

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”.

Enable Responsive mode
Enable Responsive mode

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.

Position Kind set to Relative
Position Kind set to Relative

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.

Note
If you are interested in designing for both very large and very small screens anyway, see the article Improving Responsive Mode with CSS.

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.

Example dashboard designed for responsive mode in the dashboard designer
Example dashboard designed for responsive mode in the dashboard designer

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. 

Example dashboard as viewed on an iPad in portrait (vertical) orientation
Example dashboard as viewed on an iPad in portrait (vertical) orientation

On a smart phone, which has a much smaller screen, the layout can only fit a grid one cell wide.

Example dashboard as viewed on an iPhone in portrait (vertical) orientation
Example dashboard as viewed on an iPhone in portrait (vertical) orientation

7. See also

 

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri