Skip to main content

Responsive Testing Guide

This guide covers best practices for testing responsive design across different devices and screen sizes.

Test Devices​

Mobile (320px - 768px)​

DeviceResolutionNotes
iPhone SE375x667Smallest modern iPhone
iPhone 12/13/14390x844Standard iPhone size
Samsung Galaxy S20360x800Popular Android device
iPad Mini Portrait768x1024Small tablet

Tablet (768px - 1024px)​

DeviceResolutionNotes
iPad Air820x1180Standard iPad
iPad Pro 11"834x1194Professional tablet
Surface Pro 7912x1368Windows tablet

Desktop (1024px+)​

DeviceResolutionNotes
Laptop1366x768Common laptop resolution
Desktop HD1920x1080Standard desktop
4K Monitor3840x2160High-resolution display

Testing Checklist​

1. Navigation​

  • Mobile: Hamburger menu visible and functional
  • Desktop: Horizontal navigation bar displays correctly
  • All devices: All navigation links are accessible
  • Touch targets: Minimum 44x44px on mobile
  • Keyboard navigation: Tab order is logical

2. Content​

  • Text readability: No zoom required to read content
  • Images: Responsive and properly sized for each breakpoint
  • No horizontal scroll: Content fits within viewport
  • Line length: Optimal reading width (45-75 characters)
  • Font sizes: Appropriate for each device size

3. Interactions​

  • Touch targets: Minimum 44x44px for mobile
  • Spacing: Sufficient space between clickable elements
  • Hover states: Only on devices with hover capability
  • Focus states: Visible keyboard focus indicators
  • Forms: Easy to fill on mobile devices

4. Performance​

  • Load time: < 3 seconds on 3G connection
  • Images: Optimized for each screen size
  • Animations: Smooth 60 FPS performance
  • Core Web Vitals: Meet Google's thresholds
  • Bundle size: Optimized JavaScript and CSS

5. Layout​

  • Grid system: Adapts correctly at breakpoints
  • Flexbox/Grid: No layout breaks
  • Spacing: Consistent padding and margins
  • Alignment: Proper alignment at all sizes
  • Overflow: No content overflow issues

Testing Tools​

Browser DevTools​

Chrome DevTools​

  1. Open DevTools (F12 or Cmd+Option+I)
  2. Click device toolbar icon (Cmd+Shift+M)
  3. Select device or enter custom dimensions
  4. Test different network speeds

Firefox Developer Tools​

  1. Open DevTools (F12)
  2. Click Responsive Design Mode (Cmd+Option+M)
  3. Select device presets
  4. Test touch events

Online Testing Services​

Performance Testing​

Target Metrics​

Lighthouse Scores​

MetricTargetCritical
Performance> 90> 50
Accessibility> 95> 80
Best Practices> 95> 80
SEO> 95> 80

Core Web Vitals​

MetricGoodNeeds ImprovementPoor
LCP (Largest Contentful Paint)< 2.5s2.5s - 4.0s> 4.0s
FID (First Input Delay)< 100ms100ms - 300ms> 300ms
CLS (Cumulative Layout Shift)< 0.10.1 - 0.25> 0.25

Mobile-Specific Metrics​

  • First Contentful Paint: < 1.8s
  • Time to Interactive: < 3.8s
  • Touch Target Size: >= 48x48px
  • Tap Delay: < 300ms

Testing Workflow​

1. Local Testing​

# Start development server
npm run dev

# Open in browser
http://localhost:3000

2. Device Testing​

  1. Use DevTools responsive mode
  2. Test on physical devices when possible
  3. Use remote debugging for mobile devices
  4. Test different orientations (portrait/landscape)

3. Automated Testing​

# Run Lighthouse audit
npm run lighthouse

# Run accessibility tests
npm run test:a11y

# Run visual regression tests
npm run test:visual

Common Issues and Solutions​

Issue: Horizontal Scroll on Mobile​

Solution: Check for fixed-width elements

/* ❌ Bad */
.container {
  width: 1200px;
}

/* ✅ Good */
.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 1rem;
}

Issue: Text Too Small on Mobile​

Solution: Use responsive font sizes

/* ❌ Bad */
body {
  font-size: 12px;
}

/* ✅ Good */
body {
  font-size: 16px; /* Base size for mobile */
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Issue: Touch Targets Too Small​

Solution: Ensure minimum 44x44px size

/* ✅ Good */
.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

Issue: Images Not Responsive​

Solution: Use responsive image techniques

// ✅ Good - Next.js Image component
import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  priority
/>

Best Practices​

1. Mobile-First Approach​

  • Design for mobile first, then enhance for larger screens
  • Use min-width media queries instead of max-width

2. Progressive Enhancement​

  • Ensure core functionality works without JavaScript
  • Add enhancements for capable browsers

3. Touch-Friendly Design​

  • Minimum 44x44px touch targets
  • Adequate spacing between interactive elements
  • Avoid hover-only interactions

4. Performance Optimization​

  • Lazy load images and components
  • Minimize JavaScript bundle size
  • Use code splitting
  • Optimize fonts and assets

5. Accessibility​

  • Test with screen readers
  • Ensure keyboard navigation works
  • Maintain sufficient color contrast
  • Provide text alternatives for images

Next Steps​

Resources​