Lesson 16 / 25

Testing responsiveness

Test layouts at multiple breakpoints, use browser DevTools, and test on real devices to catch responsive design issues.

The testing checklist

  1. Use DevTools device emulation. 2. Test at 320px (smallest mobile). 3. Test at common breakpoints (375, 768, 1024, 1440px). 4. Test on real devices when possible. 5. Check touch interactions and form inputs. 6. Verify images load properly. 7. Check performance (Core Web Vitals).

Use DevTools to test

Open DevTools → Toggle device toolbar (Ctrl+Shift+M). Choose a preset device or drag to resize. Test at narrow widths. In the Network tab, throttle to 3G to simulate slow mobile.

Emulator vs real device

DevTools emulation is quick but real devices show performance issues that emulators miss.