1.3 KiB
1.3 KiB
Responsiveness Strategy
Breakpoints
| Breakpoint | Min Width | Max Width | Target Devices |
|---|---|---|---|
| Mobile | 320px | 767px | iPhone, Android phones, small tablets |
| Tablet | 768px | 1023px | iPad, Surface, large phones landscape |
| Desktop | 1024px | 1439px | Laptops, smaller monitors |
| Wide | 1440px | - | Large monitors, ultrawide displays |
Adaptation Patterns
Layout Changes:
- Mobile: Single column, collapsible navigation, full-width components
- Tablet: Two-column layout, persistent sidebar, optimized for touch
- Desktop: Multi-column layout, hover states, dense information display
- Wide: Three-column layout, expanded panels, maximum information density
AI-Specific Responsive Patterns:
- Mobile: AI prompt becomes full-screen modal when focused, voice input option
- Tablet: Half-screen overlay with context selection chips
- Desktop: Inline expansion with preview panel
- Wide: Permanent expanded state with live suggestions
Critical Mobile Optimizations:
- Voice input option for AI prompts (speech-to-text)
- One-handed operation for task status changes
- Swipe gestures for status changes (swipe right = done)
- Offline queue for AI requests when connectivity limited