Tufte for Mobile

A desktop dashboard card—280 pixels wide, 160 pixels tall—displays a metric with generous typography, decorative borders, a full-width sparkline chart, and a legend. It works.

Now put three of them on a phone. 375 pixels wide. The same cards. A fraction of the space.

Most responsive implementations choose one of two paths: hide information (show less on mobile) or break layout (accept cramped, unusable interfaces). Both sacrifice the user.

There is a third path. It requires understanding what the card is for.

Before a card has color, before it has type, before it has anything—it has structure. This is the wireframe.

The wireframe holds the intent:

• A large rectangle for the primary value
• A smaller rectangle for the label
• A line or area for the trend
• A badge for the change indicator

The question becomes: Can this intent survive transformation?

Edward Tufte's 1983 work The Visual Display of Quantitative Information established principles that, when applied to mobile interfaces, enable intent preservation.

Watch one card morph from desktop to mobile. The camera zooms in as Tufte's principles are applied—borders fade, the chart compresses to a sparkline, labels move inline.

Applying these five principles transforms a 280×160px desktop card into a 320×72px mobile card—55% smaller in area, but with identical information.

// Desktop: 280 × 160 = 44,800 px²
// Mobile:  320 × 72  = 23,040 px²
// Reduction: 49% area, 0% information loss

// Data-ink ratio improved:
// Before: ~30% data pixels
// After:  ~75% data pixels

The transformation is implemented through an embodiment pattern—the same component renders differently based on viewport and optimization level.

interface DashboardCardProps {
  card: CardData;
  embodiment: number;         // 0 = wireframe, 1 = styled
  viewport: 'desktop' | 'mobile';
  tufteLevel: number;         // 0 = decorated, 1 = optimized
}

// Three states, one component:
// 1. Wireframe (embodiment=0): Gray placeholders
// 2. Desktop (embodiment=1, tufteLevel=0): Full decoration
// 3. Mobile (embodiment=1, tufteLevel=1): Data-forward

The @create-something/tufte package provides components that automatically enforce these principles—Sparkline, MetricCard, HighDensityTable—making Tufte-compliant mobile layouts the default.

Tufte's principles optimize for data comprehension. They are less applicable when:

• Brand expression matters: Marketing sites may need decoration to convey personality
• Interaction density is low: A single-metric display might benefit from visual breathing room
• Users are unfamiliar: First-time users may need more explicit labeling and hierarchy

Desktop and mobile are not different products. They are different densities of the same intent.

The wireframe structure—value, label, trend, change—survives transformation when we apply Tufte's principles. We remove decoration, compress charts to sparklines, label directly, maximize density, and maintain consistent structure.

The result: cards that work on any screen size, because they never carried anything that didn't belong.

"Every pixel either shows data—or it doesn't belong."