"Done" code doesn't mean working on all devices, fast on slow connections, or usable by people with disabilities. Complete technical testing catches issues before your users do.
Responsive Design Testing
It's not just "looks good on mobile". It's real functionality on real devices:
- Mobile validation: iOS (Safari, Chrome), Android (Chrome, Firefox). Behavior often varies per device.
- Tablet responsiveness: iPad, Android tablets. In-between layouts are often overlooked.
- Desktop breakpoints: 1920px, 1440px, 1024px, ultrawide. Testing on actual resolutions.
- Touch vs Click: Mobile touch interactions (tap, long-press, swipe) behave differently than mouse. Test button sizing, input size, spacing.
- Orientation changes: Portrait ↔ Landscape on real devices. Asset loading, layout recalculation.
- Font rendering: Rendering variations between devices. Text hoisting, accents, special characters.
Performance & Speed Testing
Core Web Vitals
Google ranks sites by speed. Not optional:
- LCP (Largest Contentful Paint): When main content becomes visible. Target: < 2.5s. Test on 3G, 4G, WiFi.
- FID (First Input Delay): Time between user action and response. Target: < 100ms.
- CLS (Cumulative Layout Shift): Elements moving during load (layout instability). Target: < 0.1.
Technical Performance
- Image optimization: WebP vs JPEG, lazy loading, srcset for responsive images. Measure kilobytes and load time.
- CSS/JS size & minification: Bundle size, code splitting, tree-shaking. Small assets = fast load.
- HTTP requests: Network waterfall analysis. Number of requests, parallel downloads, caching strategy.
- Server response time: TTFB (Time to First Byte). Slow server = slow everything.
- Connection speed profiles: Test on 3G, 4G, 5G, WiFi with throttling to simulate real slow connections.
Accessibility Testing (WCAG 2.1)
Color Contrast
- AA standard: 4.5:1 ratio for normal text, 3:1 for large text.
- AAA enhanced: 7:1 ratio (sometimes required).
- Tools: WebAIM, Contrast Checker. Simulate colorblindness (red, green, blue).
Semantic HTML & ARIA
- Heading hierarchy: H1 → H2 → H3, no skipping. Screen readers depend on this.
- Form labels: Every input has <label> or aria-label. ID and for attributes correct.
- Alt text: Descriptive, not "image.jpg". For decorative icons: aria-hidden=true.
- ARIA roles: When semantic HTML isn't enough (custom widgets), use aria-role, aria-expanded, aria-current, etc.
Keyboard Navigation
- Logical Tab order. Shift+Tab = backwards.
- Visible focus. :focus { outline } mandatory.
- Skip links for navigation (Jump to content).
- Modals: trap focus inside, return to trigger when closed.
Screen Reader Testing
- NVDA (Windows, free), JAWS (Windows, expensive, standard), VoiceOver (Mac/iOS), TalkBack (Android).
- Navigate site with screen reader only. Everything must make sense without visuals.
- Announce number of links, headings, landmarks.
Cross-Browser Testing
- Chrome/Edge: Blink engine. Modern, CSS Grid, Flexbox, custom properties.
- Firefox: Gecko engine. Sometimes different rendering than Chromium.
- Safari: WebKit engine. iOS/Mac specific. Sometimes older CSS or different behavior.
- Older browsers: If target includes IE11 or old Safari, test fallbacks (polyfills, progressive enhancement).
Not "site looks identical everywhere". It's "site works everywhere, even if visually different".
UI/UX Technical Review
Form Validation & Feedback
- HTML5 validation (required, email, pattern) vs custom JS. Consistency.
- Error messages: clear, specific, actionable. Not "error" but "enter valid email".
- Success feedback: submit button disabled during processing. Loading states.
- Accessibility: error messages linked to inputs via aria-describedby.
Loading States & Spinners
- Skeleton screens vs spinners. Which is better depends on context.
- Timing: if loads in < 200ms, no spinner. If > 1s, spinner + time estimate.
- Disable interactions during loading. No double-clicks.
Error Handling & Offline
- Network errors: 404, 500, timeout. What to show? Retry button.
- Offline mode: if possible, caching with Service Worker. Show "offline" indicator.
- Timeout handling: API calls timeout after 30s. Fallback UI.
Browser DevTools & Automation
Manual Testing
- Chrome DevTools: Performance tab, Network tab, Lighthouse.
- Lighthouse score: Performance, Accessibility, Best Practices, SEO. Target: 90+.
- Network throttling: 3G Fast, 4G, Offline simulation.
Automated Testing
- Unit tests: JavaScript logic, Vue/React components.
- E2E tests: Cypress, Playwright. Simulate real user: click button, submit form.
- Accessibility scanning: Axe, WebAIM. Catch HTML violations (missing alt, wrong ARIA).
- Performance testing: Lighthouse CI. Track performance over time.
Browser Compatibility Matrix
Depends on target audience. Example for modern site:
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari 14+
- Mobile: iOS 14+, Android 9+
If target includes older users: longer support. If target is tech-savvy: latest only.
QA Checklist Pre-Deploy
- Responsive testing: mobile, tablet, desktop (both orientations)
- Performance: Lighthouse > 90, Core Web Vitals green
- Accessibility: WCAG 2.1 AA standard. Keyboard nav, screen reader, contrast
- Cross-browser: Chrome, Firefox, Safari (latest)
- Forms: validation, error messaging, success states
- Links: no broken links, correct URLs
- Images: alt text, loading, responsive srcset
- SEO: meta tags, heading hierarchy, schema markup
- Security: HTTPS, no mixed content, no console errors
- Analytics: event tracking setup, goal tracking
Deliverables
- Testing report with findings categorized by severity
- Screenshots/videos of issues on specific devices
- Lighthouse report
- Accessibility audit
- Browser compatibility matrix
- Recommendations for fixes with effort estimate