Responsive Breakpoints & Mobile Design #39
Description
Description
Define responsive breakpoints and design mobile-first layouts for all pages. Ensure all designs work seamlessly across mobile, tablet, and desktop.
Requirements and Context
- Must define standard breakpoints
- Mobile-first approach
- All pages must be responsive
- Touch-friendly (mobile)
- Test on real devices (guidelines)
Detailed Design Specifications
Breakpoints:
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px - 1919px
- Large Desktop: 1920px+
Mobile Design Principles:
- Single column layouts
- Stacked navigation (hamburger menu)
- Touch targets (min 44x44px)
- Simplified tables (cards instead)
- Bottom navigation (if applicable)
- Swipe gestures (if applicable)
Tablet Design Principles:
- Two-column layouts where appropriate
- Sidebar navigation (collapsible)
- Hybrid table/card layouts
Desktop Design Principles:
- Multi-column layouts
- Sidebar navigation (always visible)
- Full tables
- Hover states
Responsive Patterns:
- Navigation: Hamburger (mobile) → Sidebar (desktop)
- Tables: Cards (mobile) → Table (desktop)
- Forms: Stacked (mobile) → Inline (desktop)
- Charts: Simplified (mobile) → Full (desktop)
Design Deliverables:
- Breakpoint definitions
- Mobile mockups (all pages)
- Tablet mockups (key pages)
- Desktop mockups (all pages)
- Responsive guidelines document
- Design specifications
Guidelines
- Mobile-first approach
- Touch-friendly
- Consistent across breakpoints
- Test on devices
- Timeframe: 96 hours
- Project details: #