[Vote it up if you like it https://community.tableau.com/ideas/8813]

In my two recent posts, I described some practices on designing vizzes for phone view. All of these thoughts stem from the fact that phone plays a more and more important role as a media platform. On the other hand, Tableau is awkward to be viewed on phone. I hope it could be made better for user experience.

Here I would summarize them as a proposal for adding a potential template for tableau desktop, in addition to the current Worksheet, Dashboard and Story Point.

It could be thought of a mobile version of the Story Point or standalone template for phone viz.
1.Template with card layout
I imagine that a template for phone viz is based on card-like layout. Each card contains one view, much like those in Story Point. The cards are stacked up vertically. Card has the option of being in landscape or portrait orientation. It can be done manually today. But having a template in the Tableau Desktop would make the design a lot easier for formatting.

It can be the mobile version of the Story Point template. A big difference would be, the mobile version needs to be totally spread out, so that it is easier to scroll up and down on phone and potentially exported as a tall image.
2.Swipe per view
One swipe per view would make the user experience a lot better on phone than scrolling up and down. Scrolling is a desktop mouse action. On phone swipe is much better.

3.Image button
This button would allow user to have an image preview of the entire viz, with a single touch. The template can generate this button automatically if we decide to design so. The button should be placed at the top left corner for visibility and easy access. Please refer to this post on how the image button works.

Below is an example of a phone viz. A template can make its design a lot easier. Click the image to view the viz. In one way or another, I hope that we can make better viz design for phone.

Currently phone is the de facto platform for viewing vizzes, especially for those public vizzes. Not surprising. However, it's not so easy to view vizzes on phone at all. Here is a little effort to make it a bit easier to view any viz on phone. This enables the greater distribution and dissemination of vizzes, and also makes it easier to check dynamic data on the go.

The solution is adding an image button at the top-left corner of your viz. With a single touch on the button, user will be able to preview the entirety of the target viz.

Try the image button in this viz on your phone: https://goo.gl/yqYDBv or click the image below to access the viz.
So, how to create this image button?

1.Publish your initial viz (without image button) to the Tableau Public server first and get the URL of the viz, such as the one below (ignore the string starting with ? and after.)
https://public.tableau.com/views/MexicoIntentionalHomicideRate2010-2017/MexicosIntentionalHomicideRate2010-2017

2.Create the image URL by attaching the following string to the above URL.
.png?:showVizHome=no

The resulting image URL will be 
https://public.tableau.com/views/MexicoIntentionalHomicideRate2010-2017/MexicosIntentionalHomicideRate2010-2017.png?:showVizHome=no

3.Create an image object in dashboard with this image:
Note that the white area is transparent. Make the image object floating. Place it at the top-left corner of the target viz.

4.Fill the URL of the image object with the image link in Step 2.

That's it. Publish the viz again. And test the button.

On enterprise Tableau server or Tableau online, just add .png to the URL of your target viz. This will make the preview of any viz on phone a bit easier.

Let us know if this works for you by leaving comments.

Phone is after all the primary computing device for everyone. It's so pervasive.

Although Tableau's mobile device layout options have been available for a while, I haven't found a satisfactory use case for them. A few tries are simple and yet far from being practical.

Today, I found an approach that I think will make my yearning for phone viz design a bit more realistic. Here are three main components of designing a phone viz.

1.Landscape Orientation
Always design for the landscape orientation. The portrait orientation on a phone is quite limited in width, which is not good for chart views. Human eyes are positioned better to view horizontally. A wider view is always more pleasing, just like wider screen for movies or desktop computers.
2.Vertical Card-based layout
Card-based layout makes design look organized. A card should be more or less the same to a phone screen. In Tableau, the size should be around 667x375 for a landscape card.

In the viz, we just need to stack up vertically equal-sized cards, so that the user can simply scroll up and down. Tableau has a great option for making the sizes evenly distributed in a vertical container.
Each card is one slide or one story point. Make it simple. Instead of stuffing too much in a single card, you can always opt for multiple cards. Do not use the default title for each card. Instead, you can use annotations or floating text objects.

Yes, vertically-stacked card layout is the equivalent to story point or power point on phone.

3.Image button
A camera button is placed at the top left corner which allows user to go to the image version of the viz.

The viz on a phone is not as interactive as on a desktop. There are some inherent technical problems for that, such as screen size, fat fingers, bandwidth, memory etc.

A viz is itself a plugin that takes time to render on a phone. The user experience is kind of way more volatile on a phone than on a desktop computer.

In summary, a picture is worth a thousand words. We should make an image option as easily available as we can. Tableau allows us to export an image of the viz. But the navigation on a phone is not so easy. Thus I added an image button at the top left corner. One touch and you will get the viz in a image.

And the image is suitable for viewing both in landscape and in portrait orientations.

How to do it? Here it is. If your viz URL is like:
https://public.tableau.com/views/MexicoIntentionalHomicideRate2010-2017/MexicosIntentionalHomicideRate2010-2017

Attach this to it: .png?:showVizHome=no Then the new URL becomes:
https://public.tableau.com/views/MexicoIntentionalHomicideRate2010-2017/MexicosIntentionalHomicideRate2010-2017.png?:showVizHome=no
This points to a PNG image that is exported from the viz. Use an image object to create this button with the image URL.

Voila, that's what I found an interesting approach for designing a phone viz. Below is an example design. Click the image to go to the interactive viz and give it a try.