testing-mobile-responsive
Tests mobile compatibility and responsive design (touch, viewports, mobile performance). Use after responsive CSS modifications, touch controls, or before releases
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
--- 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