The Mental Model
You don't change the song.
QA isn't rebuilding. It's refinement. The mastering engineer takes a finished mix and makes it sound perfect on every speaker. You take a finished feature and make it work on every screen.
Check every screen on mobile — Does the layout survive at 375px?
Verify dark mode doesn't break — White text on white backgrounds kills UX.
Test with empty data — What does the user see when there's nothing?
Test with long text and slow network — Real users don't have your ideal conditions.
Mixing Console
The Monitors
Full Width
Multi-column grids, side navigation, expansive hero sections. This is your canvas.
Adjusted
Two-column layouts collapse, nav moves to hamburger, padding adjusts. Test the in-between.
Stacked
Everything single-column. Touch targets 44px minimum. No hover states to rely on.
Pro tip: Chrome DevTools → Toggle Device Toolbar (Ctrl+Shift+M) to preview any viewport size instantly.
The EQ Pass
Visual Polish
Dark mode compatibility, consistent spacing, font hierarchy. These details separate amateur from professional.
Before Polish
After Polish
Accessibility
Color contrast, keyboard navigation, alt text. Build for all users.
WCAG 2.1 Level AA
4.5:1 contrast ratio minimum
Performance
Image optimization, lazy loading, bundle size. Speed is a feature.
The Stress Test
Empty State
No Data
What happens when there's no data? Your users will see this more than you think.
No items yet
Create your first entry
Long Text
Overflow
What if the title is 200 characters? Text overflow will break your beautiful card.
This-is-an-extremely-long-title-that-someone-entered-because-they-didnt-know-there-was-a-limit-and-now-it-breaks-your-entire-card-layout-and-pushes-everything-down-and-overflows...
Slow Network
Latency
What if the API takes 10 seconds? Users need to know something is happening.
Common Patterns
✗ Dead Ends
"I only tested on my laptop"
Your users have phones. Most of them, actually.
"Dark mode can wait"
Add it early or it's 10x harder later. Every color becomes a variable.
"No one will enter that much text"
They will. They always will. Plan for it.
"Loading states aren't important"
They're the most visible part of your app. Users see loading before content.
✓ Clean Mix
Test on real devices
Chrome DevTools mobile mode is good. Real phone is better.
Check both themes
Light and dark. Always. No exceptions.
Handle empty and error states
These are seen more than success states. Make them thoughtful.
Lighthouse audit before launch
Free, fast, and catches 80% of issues before your users do.
The Exercises
Polish your product.
The Resize
Responsive Check
- →Open DevTools → Toggle device toolbar
- →Test at 375px width
- →Test at 768px width
- →Test at 1280px width
The Switch
Dark Mode
- →Add dark mode class toggle
- →Check all text is readable
- →Fix contrast issues
- →Verify images have proper backgrounds
The Audit
Lighthouse
- →Open DevTools → Lighthouse tab
- →Run audit on your page
- →Fix top 3 issues it finds
- →Re-run and compare scores
Quick Reference Cheatsheet
Mobile Test
Test at 375px width minimumContrast
WCAG AA = 4.5:1 ratioAudit
Lighthouse > 90 all categories