Was this page helpful?
Yes No

Create Dashboard Layouts for Different Device Types

After you've built a dashboard you can create layouts for it in Tableau Desktop that are specific to particular types of devices. When you publish the dashboard to Tableau Server or Tableau Online, people who interact with it experience a dashboard designed specifically for their screen size, whether it's a phone, tablet, or desktop. As the author, you only have to create a single dashboard, and deliver a single URL.

In this article

Preview and add device layouts

  1. Open a dashboard.

  2. On the Dashboard tab on the left, click Device Preview.

    In device preview mode, these options appear above the dashboard:

  3. Take a moment to click through the Device types and Models and explore the different screen sizes. Then set these options:

    • To see how the dashboard will look in landscape vs. portrait mode, click . Usually, landscape is optimal for tablets and portrait is best for phones.

    • Select Tableau Mobile app to see how the dashboard will look with the app instead of the browser. This option is available for iOS or Android devices and shrinks the dashboard slightly, leaving space for the app controls.

  4. Choose a Device type, such as Tablet.

  5. In the upper-right corner, click the Add Layout button for the device type you selected (for example, Add Tablet Layout).

  6. Add an additional layout by selecting a new Device type and clicking Add Layout.

    Creating a layout for each device type gives you the most control over your users' experience as they view your dashboard from different devices. After you publish a dashboard with all three layouts, users won't see the default dashboard layout; instead, they'll always see the appropriate device-specific layout.

Note: If you make changes to a view, double-check related devices layouts to ensure that they look as you expect.

How the default dashboard relates to device layouts

After you add a device layout, the black frame changes to a lighter outline with angle brackets and you’ll see the layout appear on the Dashboard tab, under Default. The new device layout contains every item that the Default dashboard does and its size and layout are derived from Default as well.

Think of the Default dashboard as the parent, and the device layouts (desktop, tablet, and phone) as its children.

Any view, filter, action, legend or parameter that you want to add to a device layout must first exist in the Default dashboard. However, each device layout can contain independent web, image, text, and layout objects.

Customize a device layout

After you've added a device layout to your dashboard, you can customize it.

  1. Click Custom and start removing and rearranging views and objects to create the look you want.

    Click the image to replay it.

    If you remove an item from the device layout, it's only removed from that layout. It still exists on the default dashboard and can be added back to the device layout again.

    Anything you can add to your layout is listed on the left, under Layout. If an item has a blue check mark, it means that it's part of the device layout you're currently working on.

  2. Click through the Device model options to see how the layout will appear on different models.

    Ultimately, it's the size of the web browser that loads the dashboard that determines which layout appears on the device. For details, see Confirm which layout a device will display.

  3. At left, explore the options under Size.

    Default: The height and width of the device layout mimics whatever the default dashboard is using. For example, if you're creating a tablet layout and the default dashboard is set to a fixed size of Desktop Browser (1000 x 800), setting Size to Default for the tablet layout will make it use 1000 x 800 as well.

    Fit all: All items are automatically resized to fit the device frame size. The device frame size is determined by the Device type, Model, and orientation (portrait or landscape) settings.

    Fit width (recommended for phones): Items are automatically resized to fit the width of the device frame, but the height is fixed. This is a great option for phone layouts and vertical scrolling.

Optimize for phones

The small screens of mobile phones benefit from further optimization. Try these techniques.

Automatically rearrange phone layouts

As you adjust dashboard items on a phone layout, click the pop-up menu to the right of Phone, and select Rearrange layout to optimize the placement of filters, remove white space, and more.

In the example below, filters are automatically moved higher so phone users don't need to scroll down to see them.

Add links that trigger instant messages and phone calls

To let phone users quickly contact key people about dashboard content, add URL actions to objects that automatically trigger SMS messages and telephone calls. Use the link format sms:phone-number or tel:phone-number. Be sure to include country and area codes if necessary.

Create phone-specific versions of views

Create duplicates of certain views in the default dashboard—one optimized for desktop viewing and a second optimized for phones.

  1. Go to the worksheet for a view, click its tab, and select Duplicate Sheet.

  2. Customize the view for mobile viewing.

    For maps for example, you may want to zoom in to a specific region by default, or you may want to disable panning, zooming, and other functionality. See Customize How People Interact with your Map.

  3. Now add the new view to the default dashboard so that it can be available to the device layouts you're creating.

Shorten titles

Short titles work best for mobile viewing. To edit a title, double-click it.

Optimize white space

White space is another visual element to consider. While screen real estate on a phone is scarce and you want to make the most of it, you may also want to provide additional safe places for your users to tap or initiate scrolling, so they don't select filters and other items unintentionally.

To add white space, use padding or Blank objects. For more information, see Size and Lay Out Your Dashboard.

Publish the dashboard

  1. Click Server > Publish Workbook. If you're not already signed in, you're prompted for your credentials.

  2. In the Publish Workbook to Tableau Server dialog box, make sure the Show sheets as tabs check box is cleared.

    When this check box is selected for device-specific dashboards, the tabs' sizing requirements interfere with the server's ability to correctly detect the size of the web browser and load the correct layout.

  3. Click Publish.

Test the dashboard

After you publish the dashboard to Tableau Server or Tableau Online, test the dashboard by viewing it from different browser sizes.

  1. Open the dashboard on Tableau Server or Tableau Online.

  2. In the upper-right corner of the page, click Share and copy the contents of the Link text box.

  3. Paste the string into a web browser URL. The string should include the following: embed=y

  4. With the embed code string as your browser URL, test the different layouts by changing the size of your web browser window and refreshing it.

Confirm which layout a device will display

The dashboard layout a device displays is based on the smallest dimension (height or width) of the iframe in which the Tableau view appears. Sometimes Desktop, Tablet, or Phone layouts may appear on other types of devices. For example, a Tablet layout may appear on a desktop computer if the display or browser window is small.

If the smallest iframe dimension is... This device layout appears...
500 pixels or less Phone
Between 501 and 800 pixels Tablet
Greater than 800 pixels Desktop