Video |

Tableau | Data visualisation | Tool strategy

Tableau 10: Design for mobile devices (device specific designer)

Tableau 10 finally lets you design dashboards for phones, tablets and desktop in one workbook — but it's not responsive, and here's why that's actually fine.

Tim Ngwena •9 August 2016 •1 min read •11 min watch •13K

Part ofWhat's new in Tableau 10

Watch on YouTube

Tableau 10's device preview lets you add dedicated phone, tablet and desktop layouts from a single workbook instead of building separate dashboards switched via CSS and JavaScript
The feature isn't responsive in the web sense — there are no breakpoints, you design each device layout explicitly, which Tim argues makes sense because visualisations lack the uniform rules buttons and paragraphs have
Floating layout containers cause problems on mobile; layout containers fit far better because you need everything to sit logically on a scrollable canvas
Device layouts share underlying elements, so editing one item (like switching a click action to touch, or repositioning a map) can unintentionally change it across other layouts
Tableau auto-sizes content reasonably well with options like 'fit all' and 'fit width', but you'll often need to manually reposition elements and accept a messier process for narrow phone screens

0:00Hey, Tim here. And in this video, I'm going

0:02to be taking you through some new features

0:04in Tableau 10.

0:06I'm specifically focusing in on mobile

0:08device design in Tableau 10.

0:11So one of the most asked for features in

0:14Tableau has been the ability to design for

0:17devices.

0:18And so I'm actually going to take a work

0:20that I've worked on before.

0:22And this is a little dashboard I built as a

0:25marathon route scan.

0:27And I actually built two versions of this.

0:28In previous versions of Tableau, what you

0:30had to do was build two versions, one for

0:33mobile and one for tablet and maybe a third

0:36version for desktop.

0:38And then you'd have to rely on CSS and

0:40JavaScript to dynamically switch between

0:44the content.

0:45Essentially, the web-based code was

0:47deciding which one of the three visual

0:50izations to show. And that sort of gave you

0:53this fake, but it gave the same impression

0:56as responsive or more mobile device design.

1:00Now, the thing is, this new feature isn't

1:02responsive and you'll see why in a second.

1:05So I've got a dashboard here and what I can

1:08actually do is do a device preview. And

1:10when I click on that, you see the device

1:13pane at the top turns up and immediately I

1:17get this sort of border going around my

1:19visualizations.

1:21And what that's showing me is if I was to

1:23look at this on this particular device,

1:26this is where the screen would cut off my

1:29visualization.

1:31So I can actually start to customize this

1:33for different devices. So here I've taken a

1:36tablet, take a generic tablet and I can

1:39actually click add table layout, tablet

1:42layout, sorry.

1:44And when I do that, you have the default

1:46view up here and then you have the tablet

1:48view here.

1:49And I can actually just choose a standard

1:51option, for example, to fit all on this

1:53particular view. And Tableau automatically

1:56sizes the content down.

1:57And it does actually a pretty good job of

1:59that. It did a good enough job for that

2:01particular one that I'd actually trust it

2:03just to do that.

2:05And I don't need to change that again,

2:07basically. And then you've obviously got

2:09different devices.

2:11So you could actually go through, for

2:13example, and choose the iPad. And again,

2:16this has the same parameters.

2:19But what you can do is, for example, change

2:21this for different devices. So if I say

2:23went for the Google Nexus 7, it doesn't

2:26necessarily allow me to create a different

2:28device layout for the Nexus 7 as it does

2:31for the iPad.

2:33And that's a shame because there are quite

2:35different devices, very different screen

2:37resolutions. But as a first start, I think

2:40this is a great feature.

2:42If I ever change the device to, let's say,

2:44a phone, then I do get the option to add a

2:47phone layout. And again, like before, I can

2:50actually add a layout here.

2:52Now you'll notice one of the challenges

2:53with the phone layout is that it's much,

2:56much thinner.

2:57And if I actually switch to an iPhone, let

3:00's say, 6 Plus, you can see that although

3:04the content fits on quite nicely, we do

3:07have a few challenges here.

3:09And we actually have to redesign the

3:10visualization. And the way in which Tableau

3:13lets you do this is it assumes that you're

3:15going to use all the same elements and you

3:18're going to just resize them and reposition

3:20them.

3:21So one of the things I did in this

3:22particular dashboard was that I used a

3:25floating layout container.

3:27So here we have a floating element. Here we

3:30actually have a layout container that

3:32contains three elements. We have a floating

3:35logo. And again, we have a floating

3:37visualization here.

3:39And the problem with this design method

3:42using floating is that it comes to bite you

3:45in the back when you do mobile design

3:48because everything fits better when it's in

3:51layout containers in mobile device design.

3:54Because you've got to essentially think of

3:56it as a canvas and so everything has to fit

3:57on nicely so that when you scroll, there's

4:00a logical position to everything.

4:02So what can I do to rectify this in this

4:04particular dashboard? Now, what I'm going

4:06to do to get me going is actually I'm just

4:08going to tell Tableau, "Okay, look, fit the

4:11width." That is my absolute bare minimum.

4:15And you can see here that there's a little

4:17bit of a constraint in terms of height. So

4:20it's basically squashed everything into

4:22this tight space.

4:23So to give myself a bit more space to work

4:25with, I'm going to increase the height. And

4:28you can see what Tableau does is it adds

4:31content to the bottom.

4:33Now, I'm also going to just move this

4:36floating element over here. And I'm just

4:38going to ask this to stop being floating.

4:42Okay?

4:43And I'm going to do the same with this race

4:44predictor as well. I'm going to say, "Don't

4:47make that floating either."

4:49And then you can start to see that I'm

4:51starting to get the resemblance of a

4:53dashboard here. That's gone to the bottom.

4:58The map needs a little bit more space. So I

5:00'm just going to drag this down a little bit

5:04and bring that there as well.

5:05And this particular area here, I have to be

5:08very careful, is also a layout container.

5:12So I'm just going to drag that out.

5:14And I'm also just going to make that not

5:16floating. And when I do that, it's taking

5:18it right to the bottom. And I just want

5:20this to be above the race split calculator.

5:24So I'm just going to put that there. Now,

5:26this is a little bit messy. Things are a

5:28little bit everywhere.

5:30But that's sort of the nature of this. This

5:34is actually a fair reflection of what you'd

5:36have to do if you're designing on, say, the

5:39web,

5:40where you have to design a slightly

5:42different design for different devices.

5:46Now, the reason I said this wasn't

5:48responsive is because what it's not doing

5:51is having a single dashboard to dynamically

5:55reflect the different constraints.

5:59There's no such thing as breakpoints. And

6:01this is a this is a challenging one.

6:03And I think I'm just going to try and

6:05explain why I think it's a good idea that

6:08Tableau didn't implement responsive design

6:11into the dashboard.

6:13So responsive design in web design is

6:15typically used because you're using uniform

6:19items.

6:20So, for example, buttons all tend to have

6:22the same properties. There are certain

6:24width, a certain height, and they tend to

6:27sort of follow the same set of rules.

6:30Right. So a button normally goes after an

6:33action. It can normally be collapsed into

6:36very small or very big items.

6:38Same with a paragraph. A paragraph is a

6:41sort of group of text.

6:43It has a pretty consistent set of rules

6:46like paragraph spacing above and below.

6:50And again, you can fairly easily predict

6:52what should happen to a paragraph, whether

6:54you're on a phone, a tablet or a computer.

6:58Now, with a visualization, the same rules

7:00don't apply. Not every single visualization

7:03has the same consistent elements across the

7:05dashboard.

7:07And so I think it's actually a good thing

7:09that responsive design isn't part of Table

7:12au 10.

7:14It wouldn't hurt if it was a feature, but I

7:16'm not exactly complaining that it's not it

7:19's not it's not in the tool for the reasons

7:22I've just explained.

7:24And so if I just go back to this, if I

7:26focus back on the visualization, you can

7:29see here I'm just spacing things out,

7:31making sure that everything is legible.

7:34I'm leaving some space at the bottom here

7:36for some legends and some items and some

7:38hints.

7:39These click activities don't quite work on

7:41a mobile. I think you'd want to change

7:43these to touch.

7:45But the issue with this, if I change it

7:47here, it does actually change across the

7:50dashboard.

7:51So I'm inclined to leave this as is rather

7:54than to edit that.

7:56And that's maybe a tweak you have to get

7:59used to. You maybe have to drag in a new

8:02text item and reflect that change over here

8:05.

8:06Now, if I just scroll up, I can see I've

8:08got the elevation item here that shouldn't

8:11be there.

8:13And this should actually sit across the top

8:15. So I should put that just over there.

8:19And what I can do is I can lift this like

8:21just here and the map. The map needs a

8:23little bit of customization because it

8:27doesn't it doesn't quite work.

8:31So I'm just going to allow pan and zoom for

8:34a second.

8:35And I'm just going to.

8:39I won't let me actually move this across,

8:42if you just bear me one second.

8:46There you go. So now what I can do is I can

8:48zoom this across. If I just reset that, it

8:52comes across nicely and sits at the top

8:54very well.

8:56So now I have a new problem with the logo.

8:59And you see in this particular case, the

9:01logo is actually a bad choice of color.

9:04So maybe I need a different logo for this

9:06particular thing, or I can keep it in this

9:09very, very tiny area here.

9:11So it just depends on what you're going for

9:13. I could put it across the top, but I didn

9:15't want to do that because for me, the map

9:18is a key feature.

9:20So here I have a dashboard and I've made

9:22some changes here. But now I have three

9:25different designs.

9:27I have a phone design. A tablet design.

9:33And a default design. And you can see one

9:37really important thing here. Now, if I just

9:42reset that.

9:44You can see that my change to the phone

9:47design has actually adjusted what's going

9:51on with all my other maps.

9:53This is slightly frustrating because what I

9:56've actually done is I've created a custom

9:59positioning here and it's changed it

10:01somewhat.

10:03So it should actually be more like this.

10:06And in the other maps, it should be

10:08slightly different.

10:10So it's a little bit of a shame there, but

10:13at least this feature is coming along

10:16nicely.

10:17It could just be that I'm not using this

10:19correctly as well. So as with all new

10:21things, you learn more from the community.

10:24But in my limited testing, this is as far

10:26as I've got. You can definitely work within

10:28these limitations and you can also create

10:32some more best bulk options.

10:34And I just think the fact that you have the

10:37ability to preview for different devices is

10:40a really big step forward in the right

10:43direction.

10:45I'd love to know your thoughts. I'd love to

10:47know if you've enjoyed using this feature.

10:50And also, if you've been discovering any

10:52sort of niggles, I've definitely discovered

10:54a few and obviously been sending them back

10:56to the beta feedback.

10:58But some of it, as I've explained, is

10:59expected behavior. And we just have to sort

11:01of learn to work within the limitations.

11:05So that's it. That's been mobile device

11:07design in Tableau 10.

11:09[ Silence ]

Rollup

Tableau 10 lets you design phone, tablet and desktop layouts inside a single workbook instead of building separate dashboards stitched together with CSS and JavaScript, but it's worth understanding it isn't truly responsive before you rely on it.

Tim reworks a marathon route dashboard he'd previously built as two separate mobile and tablet versions, using it to test Tableau 10's new device preview and layout options.

The Breakdown

Old way: separate dashboards, code-switched 0:00

Previously you'd build a distinct dashboard per device and use CSS/JavaScript to decide which one to show, faking a responsive feel rather than truly achieving it.
Turn on device preview 1:05

Device preview shows a border on your dashboard indicating where a given screen would cut content off, so you can see the problem before you fix it. From there you add a dedicated layout (phone, tablet, desktop) and Tableau's auto-size options like 'fit all' can do a reasonably good job on their own, especially for less cramped devices like tablets.
Layout options are limited to broad device categories 2:22

You can create a layout for a generic phone or tablet class (e.g. iPad) but not for every individual device model, so very different screen resolutions within the same category still share one layout.
Floating containers break down on mobile 2:42

If your original dashboard uses floating elements, they cause real problems once you shrink to a phone layout — switch elements to standard layout containers instead, since mobile design works best as a scrollable canvas where everything sits in logical order.
Rebuild the phone layout manually 4:00

Starting from 'fit width', increase height to give yourself room, un-float elements one by one, and manually reposition and resize things like maps and floating logos. Expect this to be a somewhat messy, iterative process rather than a clean automated fit.
Why there's no responsive breakpoint system 5:46

Responsive web design works because elements like buttons and paragraphs follow consistent, predictable rules; visualisations don't share that uniformity, so Tim argues it makes sense that Tableau requires you to design each device layout explicitly rather than trying to infer breakpoints.
Shared elements can leak changes across layouts 7:24

Editing an item in one device layout — such as changing a click action to a touch action, or repositioning a map — can unintentionally alter that same element in your other layouts, since layouts share underlying objects. Be deliberate about which changes you make where, and expect to sometimes duplicate an item rather than edit a shared one.

Worth Knowing

Custom positioning changes made while refining a phone map layout altered the same map's position in the tablet and default layouts too.
Click-based interactivity doesn't suit touch devices well, but changing it in one layout changes it everywhere it's used.
Device-specific layouts only cover broad categories (phone/tablet/desktop), not individual device resolutions.
This was tested in a beta/early state, so some quirks may be expected behaviour rather than bugs.

Use It When

Reach for this when you need a dashboard to work reasonably well across desktop, tablet and phone without maintaining three separate workbooks and custom code to switch between them — accepting that you'll still need to manually tailor each layout, especially for phones.

How this Rollup was made provenance & method

A Rollup is drafted by AI from the video's transcript, then reviewed and edited by Tim. Everything used to produce this one is listed below — the model, the exact prompt, and the source video — so the process is transparent and reproducible.

Transcription: On-device — NVIDIA Parakeet v3 for recent videos, OpenAI Whisper large-v3 for earlier ones. The transcript never leaves the machine or gets published.
Drafting: Claude Sonnet 5 in the cloud, from that transcript.
Prompt: The exact Rollup prompt (v2) — the full system prompt, unedited.
Source video: Watch on YouTube
Drafted: 5 July 2026 at 09:38
Reviewed & edited: 5 July 2026 at 09:41 · by Tim Ngwena

Model + prompt + video is everything you'd need to recreate a Rollup like this yourself. The one thing we don't share is the transcript.

Rights. The video and its transcript are the property of TN Media Ltd. Unauthorised use or download is prohibited. © TN Media Ltd.