Il codice "finito" non significa funzionante su tutti i device, veloce su connessioni lente, o accessibile agli utenti con disabilità. Il testing tecnico completo identifica problemi prima che li trovino i tuoi clienti.
Responsive Design Testing
Non è solo "il sito guarda bene su mobile". È funzionalità reale su device reali:
- Mobile-first validation: iOS (Safari, Chrome), Android (Chrome, Firefox). Spesso il comportamento varia per device.
- Tablet responsiveness: iPad, Android tablets. Layout intermedi spesso dimenticati durante development.
- Desktop breakpoints: 1920px, 1440px, 1024px, desktop ultrawide. Testing su risoluzioni reali.
- Touch vs Click: Mobile touch interactions (tap, long-press, swipe) si comportano diversamente da mouse. Testo button sizing, form input size, spacing.
- Orientation changes: Portrait ↔ Landscape su device reali. Asset loading, layout recalculation.
- Font rendering: Variazioni di rendering tra device. Hoisting text, accenti, caracteres speciali.
Performance & Speed Testing
Core Web Vitals
Google classifica i siti per velocità. Non è opzionale:
- LCP (Largest Contentful Paint): Quando il contenuto principale diventa visibile. Target: < 2.5s. Testo su 3G, 4G, WiFi.
- FID (First Input Delay): Tempo tra interazione utente e risposta. Target: < 100ms.
- CLS (Cumulative Layout Shift): Elementi che si muovono durante il caricamento (layout instability). Target: < 0.1.
Technical Performance
- Image optimization: WebP vs JPEG, lazy loading, srcset per responsive images. Misuro kilobyte e tempo di caricamento.
- CSS/JS size & minification: Bundle size, code splitting, tree-shaking. Piccoli asset = fast load.
- HTTP requests: Network waterfall analysis. Numero di richieste, parallel downloads, caching strategy.
- Server response time: TTFB (Time to First Byte). Server lento = tutto lento, non è colpa del frontend.
- Connection speed profiles: Testo su 3G, 4G, 5G, WiFi con throttling per simulare connessioni lente reali.
Accessibility Testing (WCAG 2.1)
Color Contrast
- AA standard: 4.5:1 ratio per testo normale, 3:1 per testo grande.
- AAA enhanced: 7:1 ratio (a volte richiesto).
- Uso strumenti: WebAIM, Contrast Checker. Simulo daltonismo (rosso, verde, blu).
Semantic HTML & ARIA
- Heading hierarchy: H1 → H2 → H3, non saltare livelli. Screen reader dipende da questo.
- Form labels: Ogni input ha <label> o aria-label. ID e for attributes corretti.
- Alt text: Descrittivo, non "image.jpg". Per icon decorative: aria-hidden=true.
- ARIA roles: Quando semantic HTML non basta (custom widgets), uso aria-role, aria-expanded, aria-current, etc.
Keyboard Navigation
- Tab order logico. Shift+Tab = backwards.
- Focus visibile. :focus { outline } obbligatorio.
- Skip links per navigation (Jump to content).
- Modals: trap focus dentro il modal, focus torna al trigger quando chiudo.
Screen Reader Testing
- NVDA (Windows, free), JAWS (Windows, expensive, standard), VoiceOver (Mac/iOS), Talkback (Android).
- Navigo il sito con screen reader solo. Tutto deve avere senso senza visuals.
- Annuncio numero di links, headings, landmarks.
Cross-Browser Testing
- Chrome/Edge: Blink engine. Moderno, CSS Grid, Flexbox, CSS custom properties.
- Firefox: Gecko engine. Talvolta diverso rendering da Chromium.
- Safari: WebKit engine. iOS/Mac specific. Talvolta CSS older o comportamenti diversi.
- Older browsers: Se target include IE11 o vecchi Safari, testo fallbacks (polyfills, progressive enhancement).
Non è "il sito guarda identico dappertutto". È "il sito funziona dappertutto, anche se diverso visually".
UI/UX Technical Review
Form Validation & Feedback
- HTML5 validation (required, email, pattern) vs custom JS. Consistenza.
- Error messages: chiare, specifiche, actionable. Non "errore" ma "inserisci email valida".
- Success feedback: submit button disabled durante processing. Loading states.
- Accessibility: error messages linked a form inputs via aria-describedby.
Loading States & Spinners
- Skeleton screens vs spinners. Quale è migliore dipende da contexto.
- Timing: se carica in < 200ms, no spinner. Se > 1s, spinner + estimate tempo.
- Disabilita interazioni durante loading. Non click due volte.
Error Handling & Offline
- Network errors: 404, 500, timeout. Cosa mostrare? Retry button.
- Offline mode: se possibile, caching con Service Worker. Show "offline" indicator.
- Timeout handling: API calls timeout dopo 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 (dove possibile)
- Unit tests: JavaScript logic, Vue/React components.
- E2E tests: Cypress, Playwright. Simula utente reale: click button, form submit.
- Accessibility scanning: Axe, WebAIM. Cattura HTML violations (missing alt, wrong ARIA).
- Performance testing: Lighthouse CI. Track performance over time.
Browser Compatibility Matrix
Dipende da target audience. Esempio per sito moderno:
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari 14+
- Mobile: iOS 14+, Android 9+
Se target include utenti older: supporto più lungo. Se target è tech-savvy: latest only.
QA Checklist Pre-Deploy
- Responsive testing: mobile, tablet, desktop (orientamento sia portrait che landscape)
- Performance: Lighthouse > 90, Core Web Vitals green
- Accessibility: WCAG 2.1 AA standard. Keyboard nav, screen reader, contrast
- Cross-browser: Chrome, Firefox, Safari (latest versions)
- 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 con findings categorizzati per severity
- Screenshots/videos di issues su device specifici
- Lighthouse report
- Accessibility audit
- Browser compatibility matrix
- Recommendations per fixes con stima effort