Learn how and when to optimize your app for mobile

When a user opens a notification from your app on their phone, they expect the page to work well. The new Mobile experience guide helps you decide which parts of your app to optimize and explains best practices to design better mobile app experiences.

Decide what to optimize first

Your mobile app should give users the same information as the desktop version; only the degree of optimization changes. The new guide explains five criteria to prioritize the work: trigger source, task urgency, interaction complexity, information density, and frequency of mobile use. For example, fully optimize pages that users reach directly from a push notification or alert, because that's where they land first.

Adapt layouts and tables

It's essential to keep layouts usable on small viewports. The new guide shows you how. For example, you'll learn when and how to set a defaultWidth for the Sidebar and Details panels of the PageLayout component for different breakpoints; when to use overlay mode; and how to plan custom grids that look good and work well on mobile.

Handle truncation, collapsing, and overflow

Three principles keep mobile content reachable: never delete content, collapse by importance, and don't rely on hover-only interactions. The guide also covers patterns for inline text, chips, badges, button groups, toolbars, and card lists, so you can choose between wrapping, an overflow menu, or scrolling.

Explore the guide

Read the full Mobile experience guide for all recommendations and links to related components.