Mobile layout and embedding your Viz

by David Sánchez

Your audience:

We have already covered how to take into consideration our audience when we are preparing a visualization (see more details at Charlie’s post and mine). Today, I just want to give a quick tip on considering the device your audience is going to use. If you are showing it to a board in a meeting, you are probably safe to go with the Desktop/Default layouts. But if you are tweeting your viz, do you expect people to see it projected in a big screen or in their mobile?
Then make yourself a favour and prepare an alternative layout. It will take you a couple of minutes, but it will make it much easier for people to digest and interact with the content.

How to set up the mobile layout?

It’s pretty simple.

  1. Go to the dashboard.
  2. Select Device preview.
  3. Choose the custom layout from the dropdown menus.
  4. Rearrange your items.
  5. Fit width and height so that all elements needed have the proper dimensions.
  6. Once you are satisfied with your design, just save it and upload it to Public. Whoever access it on their phone will see the mobile version!

Want to see how easy it is?

For a more verbose and comprehensive analysis, read Craig’s take on going mobile or Andy’s video for a step-by-step demo.

Added bonus – embedded Viz:

As a bonus, taking the time to create a layout for different screen sizes will ensure that if you want to embed it in a webpage/blog post it will still look OKish. Compare how this just created mobile layout looks with the one at the bottom (the embedded desktop/default version).

I used this line to embed the Viz in the WordPress post (thanks to DataVizForAll for the explanation!)
[iframe src = "https://public.tableau.com/views/FormulaE-MakeoverMonday42/FormulaE-Doracesmatter?:showVizHome=no&:embed=true" width="500" height="2100"]

Any comments, please leave them here or reach me at @dsmd4vid.

The default/desktop version shows usually truncated or with scrolling bars NOTE that you will not notice this difference if you are reading this in your phone (both dashboards should look the same).