• Home
  • Tableau
  • Responsive design in Tableau: Chasing the Unicorn

Responsive design in Tableau: Chasing the Unicorn

In the last month, I’ve come across the phrase “responsive” quite a bit whilst testing the Tableau 10 Beta and the mobile device specific design capability. Most people’s gut reaction having seen the feature has been to ask whether it supports responsive design, to which I’ve replied no. That’s then caused some confusion because the device preview seems to suggest that would be a feature and then I explain that it’s “device specific not responsive” at which point I usually get more vexed faces. Let’s walk through this in logical steps.

What is Responsive design?

Responsive design is a concept that originates from web design and in simple terms, it’s a methodology that allows a design to adapt itself to the size of the screen it’s being displayed in, by using a fluid page, images that resize and scale to match these proportions and media queries to render the relevant design elements for the device. One thing that underpins all this is that the position and scaling is based on proportions (percentages) rather than absolute terms (pixels).

So if something isn’t responsive what is it?

Good question, well there is a related but subtly different term called Adaptive design. Here’s my best attempt to distinguish the two. Where a responsive design will continuously change in a fluid way to make the content best fit the device, adaptive designs seeks to serve and style content that works within certain ranges. You might have more commonly heard of breakpoints. Once a break-point is hit, the design changes to a new one and then stays fixed until either a larger or smaller break-point is hit again. Still confused, here’s a GIF to highlight the difference. The top bar obeys responsive design principals whilst the lower one behaves in an adaptive manner.

 

A comparison between responsive and adaptive.
A comparison between responsive and adaptive. Credit: CSS Tricks https://css-tricks.com/

Can we get back to Tableau?

So how does this all link in with Tableau and Responsive design? The point I’m leading to is this, in Tableau 10, what we have is device specific dashboard design, you build primarily for desktop and then adapt for mobile. You get one design for each platform, so a single mobile device design has to work on an all phones and likewise with tablets. Tableau does this by monitoring the device and also the breakpoints which it displays as an overlay so you can modify your design. This is why  if you visit tableau server or public on an iPad, via Safari, even though your visiting the browser version of the visualization, it recognises the device is an iPad and renders touch friendly filter options.

At present responsive has no place in a Tableau Dashboard.

I would also go one step further and say that responsive design is fundamentally not a concept that suits Tableau dashboard design at least until the way we build dashboards radically changes beyond the canvas and pixel orientated setup we currently have. Here are a few reasons why:

The very controls for dashboard design insist on being provided with pixel specific parameters rather than relative units.

Pixels-tableau

The automatic option isn’t relative either and here’s why. Load a Tableau dashboard that uses automatic in a browser window, then resize that window. Tableau will grey out the visualisation and then calculate the exact pixel dimensions for the space and then use these units to render a new graphic. That behaviour is neither adaptive or responsive but sits closer with the adaptive way of thinking. True responsive would mean you would see no refresh, something that does happen in the desktop version

 

tableau-adaptive-behaviour
Dashboard loaded in the browser behaving in a mostly adaptive way.

 

tableau-responsive-behaviour
Responsive-ish behaviour in the dashboard design experience.

 

The final reason based more on principal is that each visualisation is different. In web design, responsive works because you have consistent items that make up a page; paragraphs, images, headers, forms, text, backgrounds, headers, footers, links… the list of consistent items you can expect on each page in web design is endless. Each of those conform to a standard that the web design industry has spent time standardising out of a need for a uniform experience for users, and so you can design for a decent range of eventualities.

In contrast you take the Tableau public viz gallery, each visualisation is designed in a different way, headers are different, some use elements that would look out of place in others. There’s just not much that is uniform about visualisation. Each story requires an appropriate format, each story aims to evoke a different behaviour and so, whilst the industry does begin to standardise some elements such as chart types and when’s best to use them based on best practise, there’s still so much variety that means asking for responsive features is a bit like chasing a unicorn, even if it was implemented and you changed the way in which dashboards fundamentally behave, it would still, out of principal, not be best fit.