sf-lwc-mobile: Mobile-First Design for LWC

Build Lightning Web Components that work beautifully on the Salesforce Mobile App and mobile browsers. Design for touch first, then enhance for desktop.

Core Principles

1. Touch targets: 48px minimum — fingers are not mouse cursors
2. Thumb zone first — critical actions in the bottom center of the screen
3. Progressive enhancement — works on mobile, enhanced on desktop
4. Content priority — show what matters most; hide the rest behind progressive disclosure
5. Offline-aware — graceful degradation when connectivity drops

Touch Target Sizing

Every interactive element must be at least 48x48px (WCAG 2.5.8, Salesforce mobile guidelines).

Minimum Sizes