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. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
On mobile show title, search/status, and main content first, then filters and sidebars; tables become horizontal scroll or card rows.