Tableau Mobile and Device Layouts

People open dashboards on laptops, tablets, and phones. A wide desktop layout squeezed onto a phone screen produces tiny text and endless sideways scrolling. Device layouts let one dashboard present a custom arrangement for each screen type.

How Device Layouts Work

A device layout is a saved arrangement of the same dashboard content. The charts and filters stay identical. Only their size and position change. Tableau detects the visitor's device and shows the matching layout automatically.

One Dashboard, Three Layouts

Desktop            Tablet          Phone
+------+------+    +-----+---+     +-------+
| A    | B    |    | A   | B |     |   A   |
+------+------+    +-----+---+     +-------+
| C           |    |   C     |     |   B   |
+-------------+    +---------+     +-------+
                                   |   C   |
                                   +-------+

Create a Phone Layout

1. Open the finished dashboard.
2. Click Device Preview at the top of the Dashboard pane.
3. Select Phone from the device list.
4. Click Add Phone Layout.

Tableau builds a starting layout, usually a vertical stack of your objects. Adjust it with the controls below.

Customize the Phone Layout

Remove Unneeded Objects

Drag secondary charts, large logos, and decorative objects out of the phone layout. Removing an object from one layout leaves the other layouts untouched.

Stack Vertically

Place the key chart or summary number at the top. Readers scroll downward naturally, so order content from most important to least important.

Set Fit Options

Each layout offers fit settings: Fit Width, Fit Height, and Fixed Height. Fit Width suits most phone views because the dashboard fills the screen width and grows downward as needed.

Design Rules for Small Screens

• Show one idea per screen section.
• Choose font sizes of at least 12 points for readable labels.
• Reduce axis labels and gridlines to cut clutter.
• Replace detailed tables with simple bar charts or large single numbers.
• Give filters enough room for a thumb tap.

Use Compact Filters

Large filter panels eat phone screens. Change a filter to a dropdown list or collapse it behind a menu. Click the filter arrow, choose a dropdown style, and place it at the top of the view.

Preview Before Publishing

Device Preview includes a model menu with several screen sizes. Select a phone model, rotate between portrait and landscape, and scroll through the layout. Fix cut-off labels and overlapping objects before sharing.

Tablet Layout

Tablets sit between desktop and phone. Create a tablet layout when the desktop design feels cramped on a tablet screen. Reduce the number of side-by-side columns from three to two and enlarge touch targets.

Choosing Fixed or Automatic Size

Size Option  | Behavior                 | Mobile Fit
--------------------------------------------------------
Fixed        | Same pixels everywhere   | Poor
Automatic    | Stretches to the window  | Fair
Range        | Flexes within limits     | Good
Device Layout| Custom arrangement       | Best

Tooltips and Touch

Phones have no mouse hover. Tooltips appear on tap instead. Keep tooltip text short, and avoid hiding essential information inside tooltips only.

Test Checklist

1. Open the published dashboard on a real phone.
2. Check that every label stays readable without zooming.
3. Tap each filter and confirm it responds.
4. Scroll the full length and confirm nothing cuts off.

Common Mistakes

Copying the Desktop Layout

A shrunken desktop view makes every element tiny. Rebuild the phone layout for the vertical format.

Ignoring Landscape Mode

Phones rotate. Check the landscape view and confirm the design still works.

Summary

Device layouts let one dashboard serve every screen. Add a phone or tablet layout from Device Preview, remove extra objects, and stack content vertically. Compact filters, readable fonts, and a real-device test finish the job. Mobile-friendly dashboards reach readers wherever they work.