Mobile is no longer a smaller version of desktop — it's a different interaction model with its own conventions, constraints, and patterns. This guide covers the patterns that consistently produce usable mobile UI.
Core Constraints
| Constraint | Spec | Why |
|---|---|---|
| Tap target | 44pt / 48dp / 48 CSS px min | Thumb accuracy |
| Body font | 16px min (prevents iOS zoom on focus) | Readability + UX |
| Thumb zone | Bottom half of screen for primary actions | One-handed reach |
| Safe area | env(safe-area-inset-*) | Notches, indicators |
| Viewport | width=device-width, initial-scale=1 | Correct rendering |
| Color contrast | WCAG AA 4.5:1 text | Outdoor visibility |
The Reliable Patterns
- Bottom navigation for primary destinations (3-5 items). Always visible, thumb-reachable.
- Sticky action bar for primary CTAs at the bottom of long content.
- Full-screen modals instead of small floating dialogs. Easier to read, easier to dismiss.
- Card lists over dense tables. Tap targets are bigger and content layout flexes.
- Pull-to-refresh for feed-style content. Conventional and discoverable.
- Bottom sheets for secondary actions, filters, or pickers — friendlier than full-screen modals for partial interactions.
The Antipatterns
- Tiny tap targets crammed together.
- Inputs smaller than 16px that trigger iOS zoom on focus.
- Hamburger menus hiding all primary navigation.
- Tooltips and hover-only interactions (no hover on touch).
- Multi-column layouts forced onto narrow viewports.
- Buttons in the top-right corner where thumbs can't reach.