UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Mobile Priority Stack Layout

Mobile is not a smaller desktop; content and actions should restack by task priority.

mobileresponsivelayout

Design Principle

Small screens need important information, controls, and feedback early without overlap.

Principle Small screens need important information, controls, and feedback early without overlap.

Design action On mobile show title, search/status, and main content first, then filters and sidebars; tables become horizontal scroll or card rows.

Examples Positive example: Knowledge lists, detail pages, forms, and review queues. Counterexample: Sidebars squeeze the main content.

Apply when Knowledge lists, detail pages, forms, and review queues. Desktop uses sidebars or multi-column layout.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

On mobile show title, search/status, and main content first, then filters and sidebars; tables become horizontal scroll or card rows.

Apply When

  • Knowledge lists, detail pages, forms, and review queues.
  • Desktop uses sidebars or multi-column layout.

Avoid

  • Sidebars squeeze the main content.
  • Fixed-width tables overflow horizontally.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
82%
Version
v1
Published
6/6/2026