Tableau Mobile Device Designer Testing through your browser

0:00Hello and welcome to this video. Today I'm

0:03going to be showing you how to do mobile

0:05device

0:05testing in the browser. Now you can do this

0:09in Google Chrome or Mozilla Firefox but

0:11today

0:11I'm going to be using Google Chrome. In

0:14order to show you how to do this I'm

0:15actually going

0:16to head to Tablo Public and I'm going to

0:18choose the Donald Trump tweets vids that I

0:20made for

0:20Makeover Monday. Now this feature is kind

0:23of unintuitive to enable because Google

0:25Chrome

0:26doesn't advertise this really really well.

0:28But if you've ever had a look at the HTML

0:31or the CSS behind a webpage you'll be

0:33familiar with right clicking on the page

0:35and selecting

0:36the inspect element. Now if you're familiar

0:39with HTML and CSS you'll know that this is

0:41basically the bare bone guts of how the

0:44webpage is built. You've got your HTML here

0:47and your

0:47CSS and these features are designed for

0:50developers essentially to hack around with

0:53HTML and CSS

0:54in order to complete their designs and

0:57develop their webpages. But what it also

0:59does is it

0:59gives developers the ability to toggle the

1:02browser so that it behaves like a mobile

1:04device.

1:05So you can see this option here as I hover

1:07over it says toggle device toolbar and

1:09there's

1:10also a shortcut here on the Mac which is

1:12command shift M. And when I do that you'll

1:15see that

1:16it instantly on the left hand side enables

1:18what looks like a mobile device render of

1:21my dashboard. Now when you do that in real

1:24time it doesn't actually refresh the page

1:26so what you need to do to actually render

1:28the mobile design is to hit the refresh

1:31option

1:31and get it to render the page. And when it

1:34renders you'll notice that this actually

1:36does

1:37load the mobile device design that I've

1:39built into this dashboard. So straight out

1:42the bat

1:42you have the ability to view a dashboard

1:45here that is rendered in place so it's got

1:48this

1:48border around it that makes it look like a

1:50phone and you're able to interact with it.

1:53You'll notice the mouse here is a circle so

1:55I can click and drag and it even has that

1:57behaviour you'd expect in an iPhone where

1:59when you let go of the page it continues

2:01moving

2:01to a gentle stop. You can obviously select

2:04items as you would on Tablo Mobile just by

2:07touching and selecting various points. If

2:09you had filters and you selected them it

2:11would

2:12also show you those options. Even the

2:14webpage for Tablo Public behaves like a

2:17mobile device

2:18so you can actually test that behaviour and

2:20see how it behaves on the webpage. Now you

2:23can see here I've actually also encountered

2:25a bug so when I tried to click out of that

2:27page it didn't quite work. So if I click

2:30back here then again my phone behaves as if

2:33I'm

2:33heading back in the browser. So now we're

2:36back to the visualisation I just want to

2:38show

2:39you some settings that you might not be

2:41familiar with. You'll notice here that my

2:43visualisation

2:44rendered with a phone layout and it also

2:46rendered with these three coloured areas up

2:49here. Well

2:50you can enable those all here so you can

2:52either hide the device frame and it just

2:54shows the

2:55frame of the page and I can also hide my

2:57media queries. Now media queries are

2:59essentially

3:00points on the dashboard or points on the

3:02webpage where different sorts of behaviour

3:05start to

3:05happen and essentially it's just showing

3:08you here where those breakpoints are. Now

3:10breakpoints

3:11in design are when things change from one

3:13design to another design, typically from

3:15mobile

3:16to tablet and tablet to desktop but they go

3:18a little bit further than that. Sometimes

3:20you can have three designs for a desktop,

3:22one for a laptop, one for a medium sized

3:25screen

3:25and one for a large screen. And likewise

3:28with phones, they all have very different

3:31sizes

3:31and so you're able to change the break

3:34points accordingly. Now another thing you

3:37might want

3:37to do is actually change the device and you

3:39'll see here that when I click this dropdown

3:42I

3:42have a big range of devices available to me

3:44. Now unless you've configured this option

3:46you

3:47probably won't have as big a list as mine.

3:49So if you actually just go here to edit,

3:52you'll

3:52see that this is where you enable all the

3:54devices that are available to you and you

3:56simply just select them and then once you

3:58go back here you get the full list

4:00available

4:01to you. Now another setting you can't quite

4:04see here is the ability to throttle the

4:06webpage.

4:07If I just expand this you'll notice that

4:09the throttling option appears here. Now

4:11what throttling

4:12does is it allows you to simulate the

4:14webpage as if you're loading it on a

4:16specific type

4:16of connection and so this allows you to do

4:19essentially field testing but from your

4:21desk

4:22through the browser because you can force

4:24the connection to behave like a mobile

4:26phone

4:26connection, either a slow 3G or a fast 3G

4:29and you can even add your own. You can see

4:32here I've added an edge connection so if I

4:35hit edit you can see here the edge

4:37connection

4:37that I've added. I haven't actually checked

4:39if these are the correct figures for an

4:40edge

4:41connection but I know for a fact that edge

4:42connections are super slow, much slower

4:44than

4:45a 3G connection. So how do I enable the

4:48throttling? Well I simply select the option

4:51and it then

4:51tells me here that the edge connection is

4:54enabled. What I want to do is I actually

4:56want

4:56to see this, I want to see this happening.

4:59So if I go over to the network tab over

5:01here

5:01you'll see what happened in the previous

5:04run when I loaded the webpage. Everything

5:06sort

5:07of loaded pretty quickly. So if I just hit

5:10refresh I actually get to see each and

5:13every

5:13single individual query to the Tableau

5:16website. As the content loads I can

5:18actually see which

5:20particular queries are taking the longest,

5:22how they behave during this connection and

5:25as you can see my edge connection is taking

5:27a super long time to actually load the

5:28content.

5:29In fact the longest thing it took to load

5:32was this JavaScript. So this JavaScript

5:34element

5:34was one of the longest items to load. So if

5:36you're trying to optimise content you can

5:39simply look at this and start to understand

5:42where the biggest impact is on your

5:45dashboard.

5:45Everything else loaded pretty much okay and

5:48now I have not only an ability to test how

5:50the design looks and feels but I can also

5:52see what's actually happening with the

5:54connection.

5:55It's a really handy tool. Now the last

5:58thing I want to show you is you might want

6:00to render

6:01this design in a mobile device and for

6:04popular devices like the iPhone Chrome

6:07actually gives

6:08you that capability. So if you actually

6:10just click on these three dots on the right

6:12hand

6:12side and show the device frame it puts the

6:15iPhone design around it and if I just set

6:17that to fit the window you can see that it

6:19's rendered the whole visualisation in the

6:22device

6:22and as I drag I can see that. Now wouldn't

6:25it be great if I could export this as an

6:28image?

6:28You absolutely can. Now here there's an

6:30ability to capture a screenshot. It will

6:33ask you where

6:34you want to save it. I'm going to save it

6:36to my desktop and then I'm also going to

6:38capture

6:38a full sized screenshot just so you can see

6:40the difference. Again I'm going to save

6:42that

6:42to my desktop. Now when I open up my

6:46desktop you'll see that the full screen

6:49shot doesn't

6:51render the device frame. It actually just

6:53renders the webpage and that makes sense

6:55because

6:55obviously this image is much much larger

6:58than my phone. But when I select this image

7:01here

7:02you'll see that it's actually generated a

7:04nice large iPhone image. This allows you to

7:07sort of simulate content to your users,

7:09allows you to add this very easily to your

7:11powerpoints

7:12when you're creating guides and also it

7:14gives you a very quick ability to do

7:17testing on

7:17your web browser, field testing through

7:20your web browser and then some simulation

7:23to your

7:23users. Now the thing to note here, and it's

7:26very important to note, is that I'm doing

7:27all this testing in Chrome. However on an

7:30iPhone the actual browser is run by Safari.

7:33So although this is a close to reality test

7:35it doesn't actually simulate the actual

7:37behaviour

7:38of that browser and that's quite an

7:40important detail. So it's always worth

7:43doing these tests

7:45in the appropriate environment. Nothing

7:47beats a real life test but whilst you haven

7:50't got

7:50access to hardware and as a developer you

7:52're just trying to see how things look, this

7:54is

7:54as close as you're going to get. I hope you

7:56found this video useful. Subscribe to my

7:58YouTube

7:59channel and reach out to me on Twitter.

8:02Thank you.