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

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 ]