Responsive Dashboards.

In this article I will present some ideas to help the development of responsive dasboards. I use the Pentaho suite but I believe the tips can be applied to other B.I tools.

We should be concerned about the responsiveness of our Dashboards because despite B.I having a focus on the desktop such a scenario is changing, once more users of this type of tool need their data wherever they are. To deliver a quality experience, the developer needs to be responsive, know how to present their content on a screen of 1260 x 720 px, or a 720 x 400 px, this does not mean just leave the tables responsive and decrease the font, You need to rethink the panel layout so that it makes sense in whatever resolutions are presented.

A good start is to use some framework for development that facilitates responsiveness, a good example is the bootstrap that already has a grids system and that makes it much easier to start development for multiple screens. It is worth remembering that the new version of Pentaho has the adaptive design functionality where the server detects the device, and adjusts the contents according to the HTML settings. In addition, this new version brings more compatibility with Bootstrap, now when we add an HTML element we can set the grid scheme according to the size of the device, starting in extra small going up extra large.

An interesting tip, not just thinking about responsibility, but as a good practice of developing Dashboards, is to develop your code so that it can be used in other panels, this will greatly facilitate the progress of the project, and save time.

To deliver a responsive quality panel we need to be attentive to some details, one of them is that when we are on a mobile device the interaction can be more complex, without the help of the mouse some events may not work on the mobile, mouse hovers and tooltips will not work on mobile devices, so the content of these items must be presented in other ways in the mobile, an example is to use buttons that when clicked display content previously shown on a mouse hover.

Without the help of the mouse some events may not work on the mobile.

Another tip that also makes use of the concept presented above, concerns the tables, when we have one with many columns, we must hide some of them with JavaScript, and again add a button to display such hidden columns, in this tip as in the previous one must have knowledge of the project and what is intended to show, so that when you choose to hide some items, do not end up hiding items of extreme relevance.

When developing using the Community Dashboard Framework Build you should take advantage of all the functionality the framework offers, one of which is to separate your components by Rows and Columns, so panel maintenance becomes easier. You can even combine Bootstrap and your grid system with CDBF, by adding a column for each indicator for example, you can put the col-md-x class directly into the property of the HTML element.

A responsible B.I project should be customizable, consistent, and “future ready”.

We should be careful with the @media querias and the CSS stylization, we should use them only as a last resort, the tip is to know the CDBF documentation well and know how to use all its properties, if allied with Bootstrap you will create incredible dashboards and responsive.

A final but not less important tip that can cause serious usability problems is that we must be aware of the hardware limitations that mobile devices have, avoid using many JavaScript animations, and ALWAYS use responsive images, it is worth remembering that Bootstrap has a class that already treats this for you.