15 outils gratuits pour tester le responsive design d’un site Web

De nos jours, tester le responsive design d’un site Web est une étape obligatoire 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, la navigation sur Internet se fait souvent sur des smartphones ou des tablettes qui ont des résolutions d’écran plus petites ou même sur des TV connectées avec des résolutions plus grandes.

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.

Imaginez un site avec des textes minuscules ou des pages qui nécessitent de zoomer pour être visualisées… Ni une, ni deux, les visiteurs lui disent bye bye.

Idem, pour les moteurs de recherche dont la réactivité d’un site Web est un des facteurs critiques de classement… Adieu l’espoir du référencement du site en première page.

Alors, ne vous laissez pas abuser par un thème qui se prétend “optimisé pour les mobiles “. Vérifiez par vous-même si votre site s’adapte bien à la visualisation sur toutes sortes d’écran.

Pour vous aider, voici 15 outils totalement gratuits pour tester le responsive design de votre site Web.

(Pour cette liste, j’ai éliminé de mes outils favoris ceux qui ne sont pas passés au HTTPS ou qui demandent une inscription.😉).

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

Pour activer la barre d’outils de l’appareil, si elle ne l’est pas, c’est simple. 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

Test mobile friendly de Google Search Console

Test Mobile-Friendly de Google ne sert qu’à vous indiquer si votre site est adapté aux mobiles selon Google ou non.

Saisissez simplement l’URL de la page Web et cliquez sur “TESTER L’URL”. Le verdict s’affiche en moins d’une minute :

• La page est utilisable sur mobile
• La page n’est pas utilisable sur mobile
• Google n’a pas accès à cette URL
• Aucune donnée disponible

Les résultats des tests incluent une capture d’écran de la page vue par Google et son code HTML.

Lorsque vous êtes sur l’affichage HTML, vous pouvez y rechercher un terme, copier ou modifier le code.

Si votre page n’est pas adaptée aux mobiles, alors une liste de tous les problèmes à corriger s’affichera.

Cette liste peut comporter :

• Utilise des plugins incompatibles (Flash qui n’est pas pris en charge par la plupart des appareils mobiles)
• Fenêtre d’affichage non configurée (absence de la balise meta viewport)
• Fenêtre d’affichage non configurée sur “device-width” (propriété viewport dont la largeur est fixe)
• Contenu plus large que l’écran (pages utilisant des valeurs CSS absolues ou des images conçues avec une largeur selon le navigateur)
• Texte illisible, car trop petit (taille de police trop petite en mode mobile)
• Éléments cliquables trop rapprochés (pas assez d’espace autour des boutons ou des liens de navigation pour qu’ils soient cliqués en mode mobile)

À vous de corriger les erreurs et de retester votre page…

XRespond Virtual Device Lab

XRespond est un outil en ligne gratuit pour tester la réactivité 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. Et pour chaque appareil, vous avez 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.

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 (320×480, 320×568, 375×667, 414×736, 600×800, 768×1024, 1280×800, 1920×1080).

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.

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+
• 360×760 : 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 : 768×1024 (iPad mini) et 2048×1536 (iPad Air).

Et enfin pour les ordinateurs, seules les tailles 1280×720 (ordinateur portable) et 1920х1080 (ordinateur de bureau) peuvent être testées.

Responsive Tool by Designmodo

Responsive Tool by Designmodo est un autre outil gratuit de test responsive.

Premièrement, saisissez l’URL du site Web et appuyez sur la touche “entrée” de votre clavier.

Dans le coin supérieur droit se trouvent 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.

Responsivepx

Responsivepx est un outil gratuit spécifiquement conçu pour vous aider à trouver les largeurs exactes des points d’arrêt à utiliser dans vos requêtes multimédias (media queries).

Pour commencer, entrez l’URL de votre site, puis cliquez sur “Open”. Le site s’affiche alors dans une résolution de 640×480 pixels.

Ensuite, servez-vous des réglettes pour ajuster la largeur et la hauteur de votre fenêtre d’affichage. Cela vous permettra d’identifier les valeurs exactes des points de rupture en pixels. Enfin, utilisez ces informations pour saisir vos media queries.

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 et cliquez sur “Go” (ou appuyez sur la touche “Entrée” de votre clavier).

Votre site s’affiche alors sous la taille 1024×600 px.

À ce stade, n’oubliez pas de cliquer sur le bouton “Allow Scrolling” pour activer à la fonction de navigation.

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

Pour le basculement du mode portrait au mode paysage, cela se fait en un clic grâce au bouton “Rotate”.

Enfin, sachez qu’il est possible de copier le lien du test pour le partager ou l’enregistrer dans les favoris.

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 par défaut en 1024×600 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 donc 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 ça ne vous suffit pas, alors, indiquez la taille que vous souhaitez et cliquez sur “GO”. 😉 

Comme pour Screenfly, pensez à activer le défilement du site en cliquant sur “Enable/Disable Scrolling”.

Pour passer automatiquement du mode portrait au mode paysage, cliquez sur “Rotate Screen”.

De plus, Responsive Testing Tool possède une fonctionnalité inédite par rapport aux autres outils de test responsive. 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 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 411×731 en mode portrait, saisissez 731×411. 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.

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.

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 diversifier vos moyens de tester le responsive de vos sites, voici également mes deux extensions de navigateurs préférées.

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.

Test site responsive extension de Mobile FIRST

L’extension de navigateur test site responsive pour Chrome est un simulateur de smartphones et tablettes en français. Pour les fans de Firefox, sachez que l’extension existe également pour votre navigateur.

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.

Responsively App un outil pour tester le responsive d’un site sur votre PC

Pour finir, j’ai envie de vous partager Responsively App, un outil à installer sur votre PC que je trouve vraiment top pour tester le responsive d’un site.

Il s’agit d’une application 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, une intéressante panoplie d’outils est disponible.

Il y a tellement à dire sur cet outil que j’ai préféré lui dédier un article exclusif pour vous le faire découvrir. 🎯 

Mon avis sur les outils pour tester le responsive design

Bon après, si vous voulez savoir les outils que je préfère. Voici mon tiercé gagnant :

🥇 Responsively App 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 ?