Mobile Dashboard Design: What to Cut on Small Screens
A dashboard built for a 27-inch monitor does not shrink gracefully onto a phone; it becomes an unreadable grid of tiny charts. Mobile dashboard design means picking 3-5 KPIs, stacking everything in a single column, and replacing dense charts with numbers and simple trend lines.
Quick answer: On mobile, show 3-5 KPIs max, stack them in a single vertical column, and swap multi-series charts for single-metric big numbers with a sparkline. Cut anything that needs a legend to interpret — legends and small multi-line charts don't survive a screen under 400px wide. If a chart needs zoom or pan to read, it doesn't belong on the mobile view at all.
Why doesn't a desktop dashboard just resize for mobile?
Desktop dashboards rely on side-by-side comparison across a wide grid, and a phone screen has no width to spare for that. Shrinking a 6-chart desktop grid into a phone width either makes every chart illegibly small or forces horizontal scrolling, both of which viewers abandon within seconds. Mobile needs a different information hierarchy, not a scaled-down copy.
What should I cut when designing for a phone screen?
Cut anything that depends on side-by-side comparison, fine detail, or hover interaction, since none of those work reliably on touch. Specifically: multi-series line charts with more than 2-3 lines, tables with more than 4-5 columns, and any chart that relies on a legend to be readable.
| Desktop element | Mobile replacement |
|---|---|
| 6-line comparison chart | Single metric + sparkline, one per screen |
| 10-column data table | Card list with 2-3 fields per card |
| Grouped bar chart (5+ groups) | Ranked list, top 5 only, "view all" link |
| Hover tooltips | Tap-to-reveal value labels always visible |
Should mobile dashboards use a single column layout?
Yes. Stack every element in one vertical column ordered by priority, so the most important KPI is the first thing visible without scrolling. Multi-column grids that work on desktop collapse into cramped, unreadable strips on a narrow screen, and users have to pinch-zoom just to tell which number belongs to which label.
Which chart types actually work on a small screen?
Big-number tiles, single-line sparklines, and short horizontal bar lists survive small screens because they don't depend on comparing many data points at once. Pie charts, dense heatmaps, and anything with more than 3 series in one chart should be reserved for the desktop or tablet view. See sparklines explained for how to compress a trend into a single inline glyph.
Common mistakes
- Reusing desktop chart images or iframes at native size, forcing horizontal scroll and pinch-zoom.
- Keeping every filter from the desktop view, which eats the limited vertical space before any data appears.
- Small tap targets — filter chips and legend items sized for a mouse cursor, not a fingertip.
- Text labels that truncate mid-word with no way to see the full label on tap.
Pro Tip: Design the mobile view first, then expand to desktop, not the other way around. Starting mobile-first forces you to identify the 3-5 KPIs that actually matter, and that same priority order makes the desktop layout better too — see dashboard layout tips for arranging what's left once you've cut the excess.
← Back to Visualization Tips