30 lines
1.3 KiB
Markdown
30 lines
1.3 KiB
Markdown
# 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
|