Responsive Design

Responsive design ensures products work seamlessly across device sizes and orientations. Follow a mobile-first approach — prioritize mobile, then enhance for larger screens.

Breakpoint system

Device	Breakpoint range	Primary use case
Mobile	320px – 767px	Touch interactions, single-column layouts
Tablet	768px – 1023px	Touch and mouse, multi-column layouts
Desktop	1024px – 1439px	Mouse interactions, full feature access
Large desktop	1440px+	High-resolution displays, maximum content width

CSS breakpoint variables

/* Breakpoint variables */
--breakpoint-mobile: 320px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-large: 1440px;

@media (min-width: 768px) { /* Tablet and up */ }
@media (min-width: 1024px) { /* Desktop and up */ }
@media (min-width: 1440px) { /* Large desktop and up */ }

Touch targets

• Minimum size: 44px × 44px for all touch targets
• Spacing: 8px minimum between touch targets
• Visual feedback: Clear touch states and feedback

Gesture support

• Tap — primary interaction method
• Long press — context menus and additional options
• Swipe — navigation and content browsing
• Pinch — zoom where appropriate

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Navigation patterns

Mobile

• Hamburger menu for main navigation
• Bottom navigation for primary actions
• Tab navigation for content sections
• Breadcrumbs for deep navigation

Desktop

• Horizontal top navigation
• Sidebar navigation for complex applications
• Dropdown menus for secondary actions
• Breadcrumbs for context

Table patterns

Tables adapt to smaller screens with alternative layouts:

• Horizontal scroll — maintain table structure with scroll
• Card layout — convert rows to cards
• Stacked layout — stack columns vertically
• Collapsible sections — hide less important columns

Form patterns

Mobile

• Single-column layout
• Larger input fields (minimum 44px height)
• Appropriate input types (email, tel, number)
• Inline validation with clear error messages

Desktop

• Multi-column layouts where appropriate
• Side-by-side form sections
• Advanced input controls
• Real-time validation feedback

Performance

• Use WebP format with fallbacks; lazy-load below-the-fold images
• Minimize CSS and JavaScript bundle sizes
• Use CSS Grid and Flexbox for layouts
• Avoid layout shifts with proper image sizing

Testing

• Test on actual devices, not just browser dev tools
• Test across browsers, orientations, and network conditions
• Test with accessibility tools across breakpoints
• Monitor Core Web Vitals across device types