Tableau Course
Mobile Dashboards
A dashboard designed for a 1366×768 desktop screen looks broken on a phone. Tableau's device designer lets you build a separate layout for each device type — phone, tablet, and desktop — all from the same worksheets, so viewers always see a layout optimised for their screen without you maintaining three separate workbooks.
Device Layouts — How They Work
A Tableau dashboard can have up to three device-specific layouts: Phone, Tablet, and Desktop. Each layout is an independent arrangement of the same underlying sheets — you can show different sheets, hide some, reorder them, and resize them for each device. The source worksheets and their data are shared; only the layout changes.
When a viewer opens the dashboard, Tableau Server or Tableau Cloud detects the device type and automatically serves the matching layout. If no device layout has been created for a device type, the default layout is shown instead.
Opening the Device Designer
Desktop vs Phone Layout — Side by Side
Mobile Design Principles
Designing for mobile is not just shrinking a desktop layout — it is rethinking which information matters most when screen space is severely limited and the viewer is using a finger rather than a mouse.
| Principle | Desktop Approach | Mobile Approach |
|---|---|---|
| Layout | Multi-column grid — several charts visible at once | Single column — one chart per row, viewer scrolls down |
| Chart count | 4–8 charts in view simultaneously | 2–3 charts maximum — show only the most critical views |
| Touch targets | Marks can be small — mouse is precise | Marks and buttons need 44px minimum touch area — increase mark size |
| Filters | Visible filter cards on the side panel | Hide filters in a show/hide drawer — they take too much space when always visible |
| Maps | Full-size maps with symbol layers and detail | Replace with a ranked bar chart or hide — maps are hard to interact with on a small touch screen |
| Text size | 10–12pt axis labels, 14pt titles | 12–14pt axis labels, 16–18pt titles — small text is unreadable without zooming |
Hiding Sheets on a Device Layout
A sheet that is visible on desktop can be hidden entirely on the phone layout. To hide a sheet: in the phone layout's device designer, select the sheet tile and click the X that appears on the tile. The sheet disappears from the phone layout but remains unchanged on all other layouts. The sheets panel on the left still lists it — drag it back onto the canvas to restore it.
Charts worth hiding on phone layouts include: maps with many layers, scatter plots with small marks, wide tables with many columns, and any chart whose insight is already communicated by a KPI tile above it.
The Automatic Size Mode for Responsive Layouts
Setting the dashboard size to Automatic before building device layouts gives the best results. With Automatic sizing, the canvas expands and contracts to fit the viewer's window — tiles scale proportionally. When combined with a phone device layout, the phone layout takes over on narrow screens and the automatic desktop layout handles everything wider.
If the desktop layout uses a Fixed size, the phone layout should also use a Fixed size set to a standard phone width — 375px for iPhone, 360px for most Android phones. Mismatching sizes between device layouts causes unexpected scaling behaviour when Tableau serves the layout.
Testing the Mobile Layout
The Device Preview mode in Tableau Desktop shows an approximation of how the layout will look on each device type. For more accurate testing, publish the dashboard to Tableau Cloud or Tableau Public and open it on a real phone. The browser's developer tools (F12 → device emulation) can also simulate a phone-sized viewport without leaving the desktop.
The most important mobile design decision is choosing what to leave out. A phone screen is roughly one quarter of a laptop screen in area — fitting the same number of charts just produces an unreadable mess. Start the phone layout from scratch rather than accepting Tableau's auto-generated output, which typically shrinks everything into a cluttered single column. Add only the 2–3 most important views and let each take full screen width. If a dashboard is primarily used on mobile, design the phone layout first and treat desktop as the expanded version.
Practice Questions
1. A dashboard exists for desktop viewers. How do you create a separate phone layout for it — what are the steps to open the device designer for phone?
2. A desktop dashboard has a regional map that is useful on a large screen but too small to interact with on a phone. How do you hide it from the phone layout without affecting the desktop layout?
3. Describe the key structural differences between a desktop dashboard layout and a well-designed phone layout for the same dashboard.
Quiz
1. A dashboard has a desktop layout and a phone layout. A viewer opens it on a phone. Which layout does Tableau serve and how does it decide?
2. A dashboard will be viewed on a wide range of desktop screen sizes from 1024px to 2560px wide. Which size setting gives the best responsive behaviour for the desktop layout?
3. A scatter plot is hidden from the phone layout by clicking the X on its tile in the device designer. What happens to the scatter plot on the desktop layout?
Next up — Lesson 47: Dashboard Performance — identifying slow dashboards, reducing extract size, optimising queries, and using the Performance Recorder to find bottlenecks.