Dashboard Designs: Responsive Navigation Bars

Many would believe that Excel is a static environment and not suited for making responsive mobile reports. XLCubed users know better. With XLCubed’s Dashboard Designer, it is possible to create dashboards that are not only interactive and data-connected, but also responsive to fit any device.

If you are new to XLCubed Dashboards, read this article to learn how to get started. For those that have used this feature before, you may be wondering how to make dashboard designs that are both user-friendly and best display your data.

One often needed dashboard feature is the use of a navigation bar. For small devices in particular, it is difficult to portray everything in one screen, so having a system in which users can tab through pages is useful.  With XLCubed, reports are designed in Excel which inherently has tabs. As useful as this may be, for mobile reports this is not the most intuitive. Users expect simple navigation clearly displayed at the top of the page.

Below is an example of a dashboard that uses a responsive navigation bar.

Desktop view:

Phone view:

The dashboard uses a paged viewport that displays an Excel range with the navigation design. Each page has a different viewport pointing to a different range so that the current page appears to be highlighted.

The viewport remains responsive to screen size by using the ‘scale to fit’ with ‘lock aspect ratio’ option and setting the background colour of the viewport to be the same as the colour of the navigation bar. This means that if the screen width is longer than navigation bar display range, the viewport colours in the remaining space so it still appears to fill the screen.

For a better fit on a portrait view, the dashboard uses a different design optimised for a narrow screen. Then the ‘phone portrait’ target hides the original nav bar viewport and instead display a new viewport which displays this range.

For a step-by-step tutorial on how to recreate this design, read this article.

EDIT: You may find unexpected white borders in the viewport when viewing in Chrome or Firefox. You can fix this by setting the background colour on the entire sheet holding the navbar range, rather than just the range itself.