16 outils gratuits pour tester le responsive d'un site Web en 2024
✍️ Christine Siembida | 📅 Dernière mise à jour 17/08/2024
Vous recherchez un outil gratuit pour tester le responsive design d'un site Web ?
Vous avez tout à fait raison !
Car tester l'affichage et la navigation de votre site web sur différentes tailles d'écran est une étape inévitable lors de la création d'un site.
En effet, lorsque vous créez un site Web, vous le faites sur un ordinateur de bureau. Or, les visiteurs utilisent de plus en plus des smartphones, des ordinateurs portables, des tablettes ou même des TV connectées pour visiter un site.
Il est donc primordial de vous assurer que les visiteurs puissent facilement lire son contenu et le parcourir sans qu'il leur soit nécessaire de redimensionner le navigateur. Sinon, bonjour le taux de rebond !
Et puis avoir un site responsive, c'est aussi obligatoire pour le SEO car Google a fait du Mobile First un de ses facteurs critiques pour l’indexation et le classement d'un site.
Alors, pour vous aider, voici 16 outils totalement gratuits pour tester le responsive design de votre site Web:
- 10 outils en ligne pour savoir si un site est responsive
- 1 bookmarklet pour vérifier si un site est mobile friendly
- 2 extensions Chrome pour tester la réactivité d'un site Web
- 3 applications de bureau pour faire des tests d'affichage d'un site Web sur mobile en local
(Article publié en septembre 2023 et mis à jour en juillet 2024)
Pour commencer voici 10 outils en ligne pour savoir si un site est responsive !
1 Chrome DevTools 🩷
Les Chrome DevTools sont les premiers outils à utiliser lorsque vous finalisez un site Web. Ils font d'ailleurs partie de mes outils pour tester les performances d'un site ou bien encore son accessibilité.
Pour y accéder et tester le responsive d'un site Web, c'est simple :
Saisissez l'URL du site dans une fenêtre de navigation privée du navigateur Chrome. Puis, faites un clic droit avec votre souris et sélectionnez "Inspecter".
Lorsque la fenêtre s'ouvre, la page s'affiche immédiatement et vous pouvez en tester sa réactivité.
💡 Si vous ne voyez pas la barre d'outils de l'appareil, c'est qu'elle n'est pas activée. Pour l'activer, allez sur l'icône avec une image d'ordinateur et de mobile, puis cliquez sur "activer/Désactiver la barre d'outils de l'appareil".
Dans cette barre d'outils, vous avez deux modes pour la dimension de la fenêtre : réactivité ou un choix de smartphones. Je vous conseille le mode réactivité qui vous permettra de jouer avec la taille de la fenêtre.
Si vous souhaitez ajouter d'autres types de téléphones ou un appareil personnalisé, c'est possible. Il suffit de passer soit par "Modifier" en bas de la liste des portables, soit par le bouton Paramètres/Appareils.
Par ailleurs, la taille de l'appareil est modifiable directement dans la zone dédiée, le zoom est ajustable et on peut passer du mode portrait à paysage en un clic.
Pour finir, en cliquant sur les trois points, vous trouverez diverses fonctionnalités telles que :
- Afficher les requêtes medias (media queries)
- Afficher les règles
- Ajouter le rapport de pixels de l'appareil
- Ajouter le type de l'appareil
- Effectuer une capture d'écran
- Effectuer une capture d'écran en taille réelle
👍 On peut tester divers codes pour résoudre les problèmes de réactivité en live.
👎 Il s'agit plutôt d'un outil réservé aux développeurs.
2 XRespond Virtual Device Lab
XRespond est un outil en ligne gratuit pour tester le responsive d'un site Web.
Pour l'utiliser, entrez une adresse de site Web et cliquez sur le bouton "Load URL". Le site Web s'affiche alors sur différents appareils virtuels côte à côte. Pour chaque appareil, vous avez alors la possibilité de naviguer dans les pages de votre site.
Concernant l'affichage du site testé, XRespond propose deux hauteurs : Default ou Stretch. Si vous choisissez stretch, l'image de tous les appareils auront la même hauteur.
Au-dessus de chaque écran, se trouvent la taille et le nom de l'appareil. Il y a aussi une icône pour switcher entre la vue paysage ou portrait et un menu déroulant.
Cliquez sur le menu déroulant pour choisir un autre appareil. Vous aurez alors accès à une sélection de 7 smartphones, 6 tablettes, 5 ordinateurs portables et 2 ordinateurs de bureau. Vous pouvez également supprimer la vue.
Cette liste déroulante prend également en charge un paramètre de largeur/hauteur personnalisé.
XRespond permet aussi d'ajouter un nouvel appareil. Pour ce faire, accédez au menu déroulant "Add new device" tout au bout, à droite. Puis, renseignez son nom et sa taille.
Enfin, en haut, à droite, si vous cliquez sur "SHARE", vous obtenez l'URL du test responsive. Vous pourrez ainsi la copier afin de la partager ou la mettre dans vos favoris.
👍 Il est possible d'indiquer une taille spécifique d'appareil, de partager l'URL du résultat du test. De plus, les différentes tailles d'écran s'affichent simultanément.
👎 Pour visualiser les appareils, la page doit être défilée horizontalement.
3 Cheap SEO Website responsive test
Cheap SEO Website responsive test est un outil de test responsive très basique.
Entrez l'URL complète de la page, puis cliquez sur "Check it".
Votre site apparait alors dans différents mockups d'appareils sur la même page. Pour les visualiser, faites défiler la page et pour changer de taille, cliquez sur les différents boutons.
Les différentes tailles disponibles pour les mobiles sont :
- 412 x 869 : Samsung Galaxy S10+, A41+, A22+, A33+
- 360x760 : Samsung Galaxy S10, A41, A22, A33
- 360 x 740 : Samsung Galaxy S9, Samsung Galaxy S9+
- 414 × 896 : iPhone 14 Pro Max
- 375 x 812 : iPhone 11, 12, 13, XS
Pour les tablettes, vous avez le choix entre deux tailles : 768x1024 (iPad mini) et 2048×1536 (iPad Air).
Et enfin pour les ordinateurs, seules les tailles 1280x720 (ordinateur portable) et 1920х1080 (ordinateur de bureau) peuvent être testées.
👍 La navigation dans le site est possible.
👎 Les tailles d'appareils sont limitées et on ne peut pas mettre l'appareil en mode paysage.
4 Responsive Tool by Designmodo
Responsive Tool by Designmodo est un autre outil gratuit de test de réactivité de site Web.
Premièrement, saisissez l'URL du site Web et appuyez sur la touche "entrée" de votre clavier.
Dans le coin supérieur droit vous trouverez des icônes d'appareils qui vous permettent de choisir parmi différentes tailles d'écran :
- 19 mobiles
- 12 tablettes
- 12 ordinateurs portables
- 7 ordinateurs de bureau
Outre les largeurs d'appareil prédéfinies, vous pouvez également faire glisser le volet d'aperçu pour l'adapter à toutes les largeurs d'écran. Et, si cela ne vous suffit pas, en haut, il est possible de saisir des tailles manuellement.
Un autre avantage indéniable de cet outil est la grille en pixels qui l'accompagne. Elle vous aide à trouver les points de rupture afin de saisir les media queries adéquates en CSS.
👍 Il est possible d'indiquer des tailles spécifiques, d'ajuster la largeur avec la souris et de visualiser les tailles en pixels.
👎 Pour les grandes largeurs, il faut faire défiler la fenêtre latéralement.
5 Responsive Check Tool d'UltimateWB
Responsive Check Tool est un outil gratuit permettant lui aussi de vérifier la conception réactive d'un site Web. Il est proposé par UltimateWB
Pour l'utiliser, entrez l'URL de votre site Web, puis cliquez sur le bouton "Go". Ensuite, jonglez avec les différents appareils parmi ceux présents :
- 9 ordinateurs
- 9 tablettes
- 9 mobiles
- 3 TV
Ou bien, indiquez une taille d'écran personnalisée via le bouton "Custom".
Ensuite, cliquez sur le bouton "Scrolling" pour activer le défilement de la page de votre site Web.
Et puis, afin de vérifier le responsive de la page en mode portrait ou paysage, n'hésitez pas à utiliser le bouton "Rotate".
Enfin, si vous souhaitez partager ou conserver le résultat du test responsive, alors cliquez sur "Get Link" et copiez le lien.
👍 Il est possible de saisir une taille personnalisée et de copier le lien du test afin de le partager.
👎Il n'y a pas énormément de tailles d'appareils
6 Screenfly
Screenfly est un autre outil d'aide pour la conception réactive d'un site.
Pour effectuer un test avec Screenfly, entrez l'URL du site, puis cliquez sur "Go" (ou appuyez sur la touche "Entrée" de votre clavier).
Votre site s'affiche alors sous la taille 1024x600 px.
Après, cliquez sur le bouton "Allow Scrolling" afin d'activer la fonction de défilement.
Ensuite, testez les différentes résolutions prédéfinies :
- 9 tailles d'ordinateurs
- 9 tailles de tablettes
- 10 tailles de mobiles
- 6 tailles de télévisions dont la 8K
Vous pouvez également ajouter une taille personnalisée via le bouton dédié et aussi basculer du mode portrait au mode paysage en cliquant sur le bouton "Rotate".
Enfin, sachez qu'il est possible de copier le lien du test pour le partager ou l'enregistrer dans les favoris.
👍 Possibilité d'indiquer une taille spécifique et de partager le lien du test. Une grille en pixels est présente.
👎 Il n'y a pas beaucoup de tailles prédéfinies.
7 Responsive Testing Tool 🩷
Dans les outils gratuits pour tester le responsive d'un site Web, Responsive Testing Tool est un des outils de mon top 3 💞.
En premier lieu, entrez l'URL de votre site sans oublier d'ajouter le "s" à http, puis cliquez sur "Check".
Votre site apparaitra alors en 1024x600 px. Mais de nombreuses autres tailles sont disponibles, que ce soit des tailles d'appareils physiques ou des tailles en points d’arrêt (breakpoints).
Vous avez en effet le choix entre :
- 81 tailles de mobiles
- 27 tailles de tablettes
- 12 tailles d'ordinateurs jusqu'à 27 pouces
- 6 tailles de télévisions dont la 8K
Et si cela ne vous suffit pas, alors, indiquez la taille que vous souhaitez et cliquez sur "GO". 😉
Le défilement de la page est également possible en cliquant sur "Enable/Disable Scrolling".
D'autre part, le passage du mode portrait au mode paysage est présent et se fait grâce au bouton "Rotate Screen".
Il est à noter que Responsive Testing Tool possède aussi une fonctionnalité inédite par rapport aux autres outils de test responsive. En effet,vous pouvez accéder directement au W3C Nu Html Checker en cliquant sur "W3C". Et ça, c'est vraiment sympa pour aider à la détection des erreurs dans les fichiers HTML, CSS et SVG. 😉
👍 De nombreuses tailles sont disponibles que ce soit pour des appareils ou des points de rupture. Et on peut accéder en un clic au validateur W3C Nu Html Checker.
👎 Par défaut, l'encart pour saisir l'URL indique http://, il faut donc penser à ajouter le "s".
8 Responsive Web design Checker de Media Genesis
Responsive Web design Checker de Media Genesis est un outil de test responsive spécialement conçu pour les tailles d'écran personnalisées.
Une fois que vous avez entré une URL, cliquez sur "GO".
Dans la barre latérale, vous trouverez des tailles d'écran prédéfinies pour 3 ordinateurs portables, 5 bureaux, 10 mobiles et 9 tablettes. Les appareils se testent un par un et pour chaque vue les hauteur et largeur sont renseignées en haut.
Vous pouvez modifier la largeur/hauteur comme vous le souhaitez. Il suffit de rentrer la largeur et la hauteur dans l'espace dédié en haut de l'écran et de cliquer à nouveau sur "GO".
Pour partager ou mettre votre test en favoris, copiez l'URL et le tour est joué.
💡 Pour tester le mode paysage d'une tablette ou d'un mobile, il vous faudra indiquer les valeurs inversées de l'appareil. Par exemple, pour le Google Pixel qui a une taille de 411x731 en mode portrait, saisissez 731x411. Puis cliquez de nouveau sur "GO" pour le voir en mode paysage.
👍 Possibilité d'indiquer une taille spécifique et de partager le lien de votre test.
👎 Pour éviter les abus, une limitation de cinq demandes par période de cinq minutes est en place. Autre point noir relevé : on ne peut pas passer en mode paysage directement.
9 Responsive Website Test par Pastel
Responsive Website Test est un outil pour tester le responsive d'un site, on ne peut plus basique.
En premier lieu, entrez votre URL et cliquez sur le bouton "Preview website". Votre site apparait alors sous trois formats alignés horizontalement à faire défiler latéralement.
Les formats affichés sont :
- Desktop 1280 x 800
- Tablet 1024 x 768
- Mobile 360 x 640
Il est également possible de naviguer dans le site de manière individuelle pour chaque appareil.
👍 Affichage des différentes tailles d'écran en simultané.
👎 Il n'y a pas assez de tailles d'appareils et pas de possibilité d'en ajouter. De plus, le mode paysage n'est pas disponible.
10 Les générateurs de mockups de site Web multi-appareils
Afin de tester le responsive de votre site, vous pouvez également utiliser les générateurs de mockups de site Web multi-appareils comme Am I Responsive, Yujin Yeoh Website Mockup Generator ou encore Techsini Multi Device Website Mockup Generator.
Mais sachez que vous n'aurez rien de plus que la visualisation de votre site dans des mockups d'appareils.
Pour continuer voici 1 bookmarklet pour vérifier si un site est mobile friendly !
10 Viewport resizer test responsive design bookmarklet
Viewport resizer est un outil pour tester la réactivité de n'importe quel site Web via un bookmarklet.
💡 Pour rappel, un bookmarklet est comme un favori, sauf que ce n'est pas une URL. Il s'agit en fait d'un code JavaScript qui est destiné à apporter des fonctionnalités au navigateur. Pour le faire fonctionner, il suffit de cliquer dessus lorsque vous êtes sur une page Web.
Pour utiliser viewport resizer, rendez-vous sur sa page d'accueil et glissez/déposez le bouton présent dans votre barre de favoris. Cela enregistrera le bookmarklet avec la version standard qui propose 8 tailles d'écran.
Ensuite, accédez à la page que vous souhaitez tester, puis cliquez sur le bookmarklet créé. Le bookmarklet charge alors une barre d'outils en haut de l'écran.
Les icônes de gauche vous permettent de visionner le site sous les tailles prédéfinies avec ou sans orientation automatique. Pour basculer entre l'affichage paysage et portrait, cliquez sur une des icônes.
Au centre, vous pouvez saisir une taille personnalisée et l'enregistrer.
À droite, des icônes permettent de déclencher une animation, de rafraîchir la page, d'imprimer le viewport, d'afficher des informations et de fermer la barre d'outils.
Il est également possible de jouer sur la taille du viewport avec la souris.
Mais, le plus intéressant est que vous pouvez aussi configurer votre propre bookmarklet de viewport resizer. Pour ce faire, rendez-vous en bas de la page d'accueil. Ensuite, sélectionnez les différentes tailles d'écran qui vous intéressent ou bien saisissez votre code. Et enfin, enregistrez votre bookmarklet personnalisé en faisant un glisser/déposer du bouton "Your customized bookmarklet" dans votre barre de favoris.
👍 On peut créer un bookmarklet personnalisé.
👎 Les appareils prédéfinis sont quelque peu anciens.
Et voici mes 2 extensions Chrome préférées pour tester la réactivité d'un site Web.
12 Emmet Re:view extension Chrome
Emmet Re:view est une extension de navigateur pour Chrome qui propose deux modes d'affichage : un mur d'appareils ou bien une vue redimensionnable.
Pour l'utiliser, installez l'extension, accédez à une page Web et cliquez sur l'icône de l'app pour l'activer.
Instantanément, un "mur d'appareils" (Device Wall) s'affiche avec votre site à l'intérieur. Par défaut, il s'agit du mode tablette (Tablets). Mais, vous pouvez sélectionner d'autres préréglages comme les smartphones Android ou Apple (Android or Apple phones) ou bien encore les tablettes Apple (Apple tablets).
Et là où ça devient intéressant, c'est qu'il est possible d'ajouter et d'enregistrer des tailles spécifiques d'appareils aux 49 déjà présents en cliquant sur l'icône "+".
Il est à noter que toutes les vues sont synchronisées, que ce soit pour les défilements, les clics ou les interactions de la souris comme le mouvement et le survol. Ainsi, vous visionnez en live les éventuels problèmes de responsive selon la taille des écrans.
Après, pour basculer sur la vue qui permet de visionner les points de rupture, cliquez sur "Breakpoints View". Jouez alors avec votre souris sur le côté droit de la vue pour redimensionner l'appareil. La taille s'affichera en dessous de la vue et vous aidera dans la saisie de vos media queries en CSS.
👍 La vue "Breakpoints" est utile pour saisir des media queries. Il est possible d'enregistrer de nouveaux appareils.
👎 Les noms des appareils indiqués en dessous de chaque vue en mode "Device Wall" ne sont pas assez lisibles. De plus, les appareils préenregistrés sont assez anciens et le passage du mode portrait au mode paysage n'est pas présent.
13 Test site responsive extension Chrome de Mobile FIRST 🩷
L'extension de navigateur test site responsive pour Chrome est un simulateur de smartphones et tablettes en français.
Elle offre certaines fonctionnalités que d'autres tests responsive ne proposent pas.
En effet, en passant par la configuration, vous pouvez gérer l'affichage de l'appareil simulé en choisissant d'afficher ou de masquer :
- Les éléments haut et bas du navigateur
- Le faux clavier au focus d'un champ de saisie
- La barre de défilement native
- L'appareil
Vous pouvez également choisir le style du curseur, l'appareil par défaut à utiliser et aussi la couleur du fond.
De plus, le changement de modèle d'appareil se fait en un clic. Pour ce faire, cliquez sur "changer de modèle" et choisissez parmi les appareils disponibles dans la version gratuite :
- 11 modèles de smartphones Android & Google
- 10 modèles de smartphones Apple
- 5 modèles de tablettes
- 3 appareils spéciaux comme l'Apple Watch, le Galaxy Fold 2 ou le Macbook Air
Et les fonctionnalités ne s'arrêtent pas là...
En effet, si vous cliquez sur l'icône "i", vous accédez à une page contenant les caractéristiques du terminal : résolutions viewport et constructeur, densité de pixel et au Mockup HD au format PNG en téléchargement gratuit.
Et en cliquant sur l'icône en forme de lune, l'appareil passe en mode nuit.
Mais le mieux est qu'il est possible non seulement de créer et de télécharger des captures d'écran en PNG transparent, mais également des captures d'écran vidéo au format GIF.
👍 L'extension est en français et on peut faire des captures vidéo.
👎 Certains appareils ne sont disponibles que dans la version premium. De plus, il y a une limite de 5 captures animées par jour.
Enfin, voilà 3 outils pour faire des tests responsive sur votre ordinateur.
14 Responsivize l'outil de test responsive en local minimaliste
Responsivize est une application de bureau open source qui permet de vérifier la réactivité dun site Web. Elle a été créée par Virej Dasani et est disponible pour Windows, Linux et macOS.
Je la trouve assez simpliste et minimaliste, mais elle peut vous servir quand même.
Pour l'utiliser, téléchargez et installez l'app sur votre ordinateur. Ensuite, sur la page d'accueil, cliquez sur l'une des 4 options de tests responsive : Phones, Tablets, Laptops ou Custom Size.
Sur l'écran suivant,en haut, indiquez l'URL à tester. Le site s'affichera alors avec la possibilité de le faire défiler indépendamment sur les écrans disponibles de l'appareil choisi :
- Phones : téléphones mobiles (iPhone 11 Pro, iPhone 11 Pro Max, Samsung Galaxy A51, Google Pixel 5)
- Tablets : tablettes (iPad Pro 12.9"portrait et paysage, iPad Mini 7.9" portrait et paysage)
- Laptops : Ordinateurs portables (MacBook Pro 16", MacBook Air 13.3")
- Taille personnalisée (Custom Size) : taille à définir sur l'écran suivant
👍L'interface est agréable et il est possible de saisir une taille personnalisée
👎Le test responsive est trop minimaliste et les appareils pas assez nombreux.
Pour faire un autre test, il faut retourner sur la page d'accueil.
Il n'existe aucun moyen de sauvegarde des préférences que ce soit pour les appareils ou pour l'URL.
15 Responsively App une app pour tester le responsive d'un site sur votre PC 🩷
Responsively App est une application de bureau open source et gratuite disponible pour Mac, Windows et Linux.
En bref, avec Responsively App, vous pouvez visualiser un site dans divers appareils sur la même page et utiliser les DevTools de Chrome pour l'analyser.
De plus, il propose une panoplie d'outils intéressante :
- Scroll synchronisé et possibilité de désynchronisation par appareil
- Possibilité de créer des tailles d'appareils personnalisées
- Outil capture d'écran
- Mode sombre possible
- ...
Il y a tellement à dire sur cet outil que j'ai préféré lui dédier un article pour vous le faire découvrir.
👍 Les DevTools sont intégrés et le site est visualisable sur tous les appareils sélectionnés sur une page unique.
👎 Responsively App, comme la plupart des autres outils de test responsive, n'est pas disponible en français.
16 LT Browser 2.0 l'app de test responsive local de LambdaTest 🩷
Pour conclure cette liste d'outils, j'ai envie de vous parler également de LT Browser 2.0.
LT Browser 2.0 est une autre application de bureau gratuite basée sur Chromium et compatible avec Windows, macOS et Linux.. Celle-ci a été créée par LambdaTest.
Tout comme avec Responsively App, vous pouvez tester le responsive d'un site sur une multitude d'écrans. Mais par contre, avec LT Browser, vous ne pourrez l'afficher que dans 6 appareils simultanément.
Néanmoins, de nombreux outils complémentaires sont disponibles, comme :
- Le scroll synchronisé avec possibilité de désynchronisation
- Les captures d’écrans et vidéo
- L'intégration des Devtools
- La possibilité d'obtenir un rapport Google Lighthouse en 1 clic
- La simulation de réseaux plus lents
- ...
Pour découvrir LT Browser 2.0 en profondeur, consultez l'article que je lui ai dédié ! 😉
👍 Les DevTools sont intégrés et il est possible d'obtenir un rapport Google Lighthouse.
👎 LT browser n'autorise l'affichage que de 6 appareils simultanément.
Mon avis sur les outils pour tester le responsive design
Les outils pour tester le responsive design d'un site peuvent aider, mais ils ne pourront jamais rivaliser avec les tests sur des appareils réels.
Alors, privilégiez de tester le site sur les différents appareils que vous possédez ou bien faites appel à vos amis ou votre famille. 😉
Bon après, si vous voulez savoir les outils que je préfère. Voici mon tiercé gagnant :
🥇 Responsively App et LT Browser 2.0 pour faire des tests sur un PC 😍
🥈 Les Chrome DevTools
🥉 2 ex æquo : Pour les outils en ligne : Responsive Testing Tool pour son nombre d'appareils disponibles et l'accès au validateur W3C Nu Html Checker en un clic et pour les extensions, test site responsive pour sa fonctionnalité de capture du site au format GIF.
Et vous, quel est votre outil préféré pour tester le responsive de votre site Web ?
Vous pourriez aussi aimer...
Soumettre un commentaire 💬