216 lines
4.3 KiB
Markdown
216 lines
4.3 KiB
Markdown
---
|
||
name: testing-mobile-responsive
|
||
description: Tests mobile compatibility and responsive design (touch, viewports, mobile performance). Use after responsive CSS modifications, touch controls, or before releases
|
||
allowed-tools: Read, Grep, Glob, Bash, WebSearch
|
||
---
|
||
|
||
# Tests Responsive Mobile
|
||
|
||
Guide les tests de responsive design et compatibilité mobile pour garantir une expérience optimale sur tous les appareils.
|
||
|
||
## Table des matières
|
||
|
||
- [Quand utiliser](#quand-utiliser)
|
||
- [Viewports essentiels](#viewports-essentiels)
|
||
- [Outils de test](#outils-de-test)
|
||
- [Checklist responsive](#checklist-responsive)
|
||
- [Workflow de test](#workflow-de-test)
|
||
- [Checklist finale](#checklist-finale)
|
||
- [En cas de doute](#en-cas-de-doute)
|
||
|
||
## Quand utiliser
|
||
|
||
- Modifications CSS responsive
|
||
- Ajout de touch controls
|
||
- Avant chaque release
|
||
- Bugs reportés sur mobile
|
||
- Tests performance mobile
|
||
|
||
## Viewports essentiels
|
||
|
||
**Desktop:** 1920×1080, 1366×768
|
||
**Tablet:** 768×1024, 1024×768
|
||
**Mobile:** 375×667, 390×844, 412×915
|
||
|
||
Trouve les breakpoints CSS utilisés dans le projet.
|
||
|
||
## Outils de test
|
||
|
||
### Chrome DevTools Device Mode
|
||
|
||
Émule différents appareils :
|
||
|
||
- Viewports prédéfinis
|
||
- Touch simulation
|
||
- Network/CPU throttling
|
||
|
||
### Chrome DevTools MCP
|
||
|
||
- Capture screenshots multi-device
|
||
- Tests automatisés layout
|
||
- Performance profiling
|
||
|
||
### Tests sur vrais appareils
|
||
|
||
**Essentiels :**
|
||
|
||
- iPhone (iOS récent)
|
||
- Android (version récente)
|
||
|
||
**Pourquoi :**
|
||
|
||
- Touch réel ≠ simulation
|
||
- Performance réelle
|
||
- Bugs spécifiques device
|
||
|
||
## Checklist responsive
|
||
|
||
### 1. Layout
|
||
|
||
- Layout fluide (pas de horizontal scroll)
|
||
- Contenu lisible sans zoom
|
||
- Images redimensionnées
|
||
- Colonnes en stack mobile
|
||
|
||
### 2. Touch targets
|
||
|
||
**Taille minimum :**
|
||
|
||
- 44×44 px (iOS)
|
||
- 48×48 px (Android)
|
||
- 8px espacement minimum
|
||
|
||
Trouve les tailles de touch targets dans le CSS.
|
||
|
||
### 3. Navigation mobile
|
||
|
||
- Menu burger accessible
|
||
- Animation fluide
|
||
- Fermeture backdrop ou X
|
||
- Pas de piège clavier
|
||
|
||
### 4. Touch interactions
|
||
|
||
**Supportés :**
|
||
|
||
- Tap (pas de hover requis)
|
||
- Swipe si applicable
|
||
- Pinch-zoom si pertinent
|
||
|
||
**Éviter :**
|
||
|
||
- Hover-only interactions
|
||
- Gestures complexes
|
||
|
||
Trouve les touch handlers dans le JavaScript.
|
||
|
||
### 5. Formulaires mobiles
|
||
|
||
**Optimisations :**
|
||
|
||
- Input type approprié (`email`, `tel`, `number`)
|
||
- `autocomplete` actif
|
||
- Labels visibles
|
||
- Clavier adapté au type
|
||
|
||
Examine les formulaires et leur configuration.
|
||
|
||
### 6. Images responsive
|
||
|
||
**Techniques :**
|
||
|
||
- `srcset` pour résolutions multiples
|
||
- `<picture>` pour art direction
|
||
- Lazy loading
|
||
- WebP avec fallback
|
||
|
||
Trouve la stratégie d'images responsive.
|
||
|
||
### 7. Typography
|
||
|
||
**Tailles :**
|
||
|
||
- 16px minimum corps de texte
|
||
- Line-height ≥ 1.5
|
||
- rem/em pour scalabilité
|
||
|
||
Examine les tailles de police CSS.
|
||
|
||
### 8. Performance mobile
|
||
|
||
**Métriques cibles :**
|
||
|
||
- First Contentful Paint < 2s (3G)
|
||
- Time to Interactive < 5s (3G)
|
||
- Lighthouse Performance > 80
|
||
|
||
Lance Lighthouse en mode mobile.
|
||
|
||
## Workflow de test
|
||
|
||
### 1. Tests DevTools
|
||
|
||
Pour chaque viewport clé :
|
||
|
||
- Layout adaptatif
|
||
- Touch targets simulation
|
||
- Performance
|
||
- Screenshot
|
||
|
||
### 2. Tests vrais devices
|
||
|
||
iPhone et Android :
|
||
|
||
- Navigation complète
|
||
- Touch interactions réelles
|
||
- Formulaires
|
||
- Jeux arcade si applicable
|
||
|
||
### 3. Tests throttling
|
||
|
||
Avec 3G + 4x CPU :
|
||
|
||
- Temps de chargement
|
||
- Fluidité interactions
|
||
- FPS jeux arcade
|
||
|
||
### 4. Corrections
|
||
|
||
Priorise :
|
||
|
||
1. Bloquants (layout cassé)
|
||
2. UX dégradée (touch targets petits)
|
||
3. Performance (chargement lent)
|
||
|
||
## Checklist finale
|
||
|
||
- [ ] Tous viewports testés (mobile, tablet, desktop)
|
||
- [ ] Touch targets ≥ 44×44 px
|
||
- [ ] Pas de horizontal scroll
|
||
- [ ] Menu mobile fonctionnel
|
||
- [ ] Formulaires optimisés (input types)
|
||
- [ ] Images responsive (srcset/picture)
|
||
- [ ] Typography lisible (16px min)
|
||
- [ ] Performance 3G acceptable (< 5s TTI)
|
||
- [ ] Testé sur vrais appareils (iOS + Android)
|
||
- [ ] Lighthouse Mobile > 80
|
||
- [ ] Pas de hover-only interactions
|
||
|
||
## En cas de doute
|
||
|
||
**Source :** Vrais appareils + Lighthouse Mobile
|
||
|
||
**Règles absolues :**
|
||
|
||
1. Toujours tester sur vrais appareils (iOS + Android)
|
||
2. Toujours tester avec 3G throttling
|
||
3. Touch targets minimum 44×44 px
|
||
4. Jamais hover-only interactions
|
||
5. Lighthouse Mobile > 80 obligatoire
|
||
|
||
**Workflow minimal :**
|
||
|
||
- DevTools pour iterations rapides
|
||
- Vrais appareils pour validation finale
|
||
- Lighthouse mobile pour métriques
|