Responsive and Mobile
Responsive UI is not shrinking the desktop layout until it fits. It is deciding what matters most at each size and context.
Mobile-First Means Priority-First
Design the smallest screen as a forcing function.
Ask:
- what is the core task?
- what must be visible immediately?
- what can move behind disclosure?
- what interaction patterns work with one hand and touch?
Breakpoint Strategy
Use breakpoints based on layout stress, not device marketing names.
| Range | Typical Concern |
|---|---|
| 320-479px | Tight mobile, reduced room for side-by-side content |
| 480-767px | Larger phones, easier CTA placement |
| 768-1023px | Tablets, split layouts become possible |
| 1024px+ | Desktop, more room for parallel information |
Mobile Rules That Matter
- keep primary actions within comfortable reach when possible
- respect 44x44px minimum touch targets for important interactions
- avoid hover-dependent interaction as the only path
- prefer bottom sheets, inline expansion, or full pages over tiny popovers
- keep forms compatible with mobile keyboards and autofill
Responsive Layout Adjustments
| Desktop Pattern | Mobile Adaptation |
|---|---|
| Multi-column comparison | Stacked cards or segmented comparison |
| Sidebar + content | Collapsible nav, drawer, or priority tabs |
| Table with many columns | Priority columns, horizontal scroll, or card transformation |
| Toolbar with many filters | Primary filters visible, advanced filters collapsible |
Content Prioritization
The top of a mobile screen should earn its position.
Good candidates for top placement:
- current status
- primary CTA
- most important field or filter
- trust and price summary in buying flows
Lower priority candidates:
- secondary links
- decorative imagery
- advanced settings
- verbose explanatory copy
Mobile Conversion Considerations
- avoid forced account creation too early
- reduce typing with autofill, tap targets, and smart defaults
- keep sticky summary or CTA when the flow is long
- ensure payment and checkout steps feel stable and trustworthy
Common Mistakes
- simply stacking desktop components without rethinking hierarchy
- preserving too many top-level nav items on small screens
- hiding critical context behind accordions to “save space”
- using fixed elements that cover content or keyboard interactions