17 outils gratuits pour tester le responsive d'un site Web

Pourquoi tester le responsive design d'un site Web ?

Tester l'affichage et la navigation d'un site sur différentes tailles d'écran est une étape obligatoire lors de la création d'un site Web.

En effet, lorsque vous créez un site, 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 le visiter.

Vous devez donc vous assurer que les visiteurs peuvent facilement parcourir et lire le contenu du site quelle que soit la taille d'écran qu'ils utilisent. En bref, avoir un site responsive améliore l'expérience utilisateur (UX) et limite les taux de rebond.

De plus, avoir un site responsive est devenu un critère à ne pas négliger pour votre SEO. En effet, Google a fait du Mobile First un de ses facteurs critiques pour l’indexation et le classement d'un site.

Comment tester le responsive design d'un site Web ?

Ben, en fait, il existe pas mal d'outils qui peuvent vous aider : des outils en ligne, des extensions de navigateur ou encore des applicationss de bureau.

Au travers de cet article, vous allez donc pouvoir explorer 17 outils totalement gratuits qui vous permettront de vérifier et d'optimiser la réactivité de votre site.

A vous de les tester et de choisir celui qui vous convient le mieux ! 😉

Pour commencer, voici 10 outils en ligne qui vous permettent de savoir si un site est responsive !

Chrome DevTools les outils incontournables des développeurs 🩷

Chrome DevTools est un ensemble d'outils de développement web. Ce sont les premiers outils à utiliser lorsque vous finalisez un site Web. Avec les Chrome DevTools, vous pouvez, non seulement tester le responsive d'un site, mais également tester ses performances 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é dans diverses tailles d'écrans.

💡 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 la 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.

Deplus, 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

Enfin, via les onglets Eléments et Styles présents à droite, vous pouvez tester divers codes pour résoudre les problèmes de réactivité en live.

Le seul inconvénient des Chrome DevTools est que vous êtes obligés de tester les pages du site une à une.

XRespond Virtual Device Lab

XRespond est un outil en ligne gratuit qui permet de tester le responsive d'un site Web.

Pour l'utiliser, entrez l'URL d'un site, puis 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 la possibilité de naviguer dans les pages du site.

Concernant l'affichage du site testé, XRespond propose deux hauteurs : Default ou Stretch. Si vous choisissez stretch, toute les vues 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.

Via le menu déroulant d'un appareil, vous pouvez soit supprimer l'appareil en cliquant sur "REMOVE DEVICE", soit le remplacer par un autre. Vous avez alors le choix parmi 7 smartphones, 6 tablettes, 5 ordinateurs portables et 2 ordinateurs de bureau ou bien, vous pouvez indiquer une largeur/hauteur personnalisé (Custom screen size).

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 pouvez ainsi la copier afin de la partager ou la mettre dans vos favoris.

Cheap SEO Website responsive test

Cheap SEO Website responsive test est un outil de test responsive très basique. Mais, il a le mérite d'exister.

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. Puis, naviguez dans vos pages.

 ​Le gros point noir est qu'on ne peut pas mettre l'appareil en mode paysage.

Toutefois, il est possible de changer de taille d'écran en cliquant sur les différents boutons (5 tailles disponibles pour les mobiles, 2 pour les tablettes et 2 pour les ordinateurs).

Responsive Tool by Designmodo

Responsive Tool by Designmodo est encore 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.

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.

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".

Activez le défilement de la page de votre site Web en cliquant sur le bouton "Scrolling" .

Pour vérifier le responsive de la page en mode portrait ou paysage, utilisez le bouton "Rotate".

Enfin, si vous souhaitez partager ou conserver le résultat du test responsive, cliquez sur "Get Link" et copiez le lien.

Screenfly

Screenfly est encore un autre outil d'aide pour la conception réactive d'un site.

Pour effectuer un test responsive 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.

Il ne vous reste plus qu'à tester votre site dans 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, si besoin, copiez le lien du test pour le partager ou l'enregistrer dans les favoris.

Responsive Testing Tool 🩷

Dans les outils en ligne gratuits pour tester le responsive d'un site Web, Responsive Testing Tool est mon préféré.

Pour l'utiliser, 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.

Responsive Web design Checker de Media Genesis

Responsive Web design Checker de Media Genesis est, quant à lui, un outil de test responsive spécialement conçu pour les tailles d'écran personnalisées.

⚠️ Pour éviter les abus, cet outil est limité à 5 demandes par période de 5 minutes.

Entrez l'URL du site à tester, puis 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 renseigner d'autres valeurs 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é.

💡 On ne peut pas passer en mode paysage directement. Du coup, pour tester le mode paysage d'une tablette ou d'un mobile, vous devrez 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.

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 resteints :

• Desktop 1280 x 800
• Tablet 1024 x 768
• Mobile 360 x 640

De plus, le mode paysage n'est pas disponible. Néanmoins, il est possible de naviguer dans le site de manière individuelle pour chaque appareil.

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 !

Viewport resizer test responsive design bookmarklet

Viewport resizer est un outil qui permet de 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 dans 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 la zone actuellement visible (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.

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.

Lorsque vous cliquez sur l'extension, le site à tester s'affiche par défaut dans un "mur d'appareils" (Device Wall) en mode tablette (Tablets). Mais, vous pouvez sélectionner d'autres appareils comme les smartphones Android ou Apple (Android or Apple phones) ou bien encore les tablettes Apple (Apple tablets).

Il est également possible d'ajouter et d'enregistrer des tailles spécifiques d'appareils aux 49 déjà présentes en cliquant sur l'icône "+".

Avec Emmet Re:view, toutes les vues sont synchronisées, que ce soit pour les défilements, les clics ou les interactions avec la souris. 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". Puis, jouez 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.

L'absence de la possibilité du passage du mode portrait au mode paysage est à regretter.

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 lors de l'activation 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 sombre.

Enfin, il est possible de télécharger des captures d'écran en PNG transparent à volonté et 5 captures d'écran vidéo au format GIF par jour.

Pixefy - Responsive Design Checker 🩷

Pixefy est la troisième extension Chrome de ma sélection. Il s'agit de l'extension la plus complète pour tester le responsive design d'un site Web.

Par défaut, le site à tester s'affiche sous 6 appareils différents. Néanmoins, en cliquant sur l'icône +, vous pouvez choisir d'autres tailles ou encore ajouter des tailles personnalisées.

Les fonctionnalités principales de Pixefy sont :

• possibilité de supprimer les en-têtes X-Frame-Options pour vous permettre de tester des sites Web qui bloquent l'intégration des iframes.
• simulation de différents navigateurs et appareils en modifiant l'agent utilisateur
• synchronisation de la navigation, du défilement et des clics pour toutes les vues ou de manière indépendante
• bascule en un clic entre les modes portrait et paysage pour toutes les vues ou par appareil
• modes d'affichage par vues ou par écran partagé avec possibilité de supprimer des appareils
• analyse et modification des éléments de la page et du contenu en temps réel : styles CSS, distances, images, textes...
• enregistrement des modifications CSS dans un onglet "Activité"
• outil de capture d'écran pour des zones sélectionnées, des sections visibles ou en pleine page
• stockage local interne de vos préréglages, mises en page et paramètres avec possibilité de vider le cache
• analyse du constraste des couleurs pour l'accessibilité
• prévisualisation du site comme le verraient les utilisateurs malvoyants ou ayant des déficiences de couleur.
• ...

Je publierai un article complet en vue d'approfondir toutes les fonctionnalités qu'offre Pixefy. 😉

Pour finir, voilà 3 outils pour effectuer des tests responsive en local sur votre ordinateur.

Responsivize l'outil de test responsive en local minimaliste

Responsivize est une application de bureau open source dont l'objectif est de vérifier la réactivité dun site Web. Elle 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 appareils choisis :

• 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

Responsively App une app pour tester le responsive d'un site sur votre PC 🩷

Responsively App est aussi 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 disponible
• ...

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.

LT Browser 2.0 l'app de test responsive en 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 encore une autre application de bureau gratuite basée sur Chromium et compatible avec Windows, macOS et Linux.

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 pouvez afficher le site 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é ! 😉

Mon avis sur les outils pour tester le responsive design

Ceci dit, voici les outils que je préfère pour vérifier la réactivité d'un site  :

• Pour faire des tests responsive en local : Responsively App et LT Browser 2.0 ex aequo
• Pour évaluer la réactivité d'un site Web avec un outil en ligne : Responsive Testing Tool pour son nombre d'appareils disponibles et l'accès au validateur W3C Nu Html Checker en un clic
• Pour vérifier si un site est mobile friendly via une extension : Pixefy - Responsive Design Checker pour les fonctionnalités inédites qu'elle possède
• Sans oublier le couteau suisse de tous les développeurs : les Chrome DevTools

Et vous, quel est votre outil préféré pour tester le responsive de votre site Web ?