16 outils gratuits pour tester le responsive d’un site Web en 2024

16 outils gratuits pour tester le responsive d’un site Web en 2024
27 mn de lecture

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

Accéder aux Chrome DevTools pour tester le responsive d'un site Web

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
Fonctionnalités existantes pour les appareils mobiles dans les Chrome DevTools

👍 ​​ 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 outil en ligne gratuit pour tester la réactivité d'un site Web

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

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.

👍 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 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”.

Ultimate Web Builder Responsive Check Tool tailles appareils

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.

Responsive Check Tool d'UltimateWB

👍 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 1024×600 px.

AprĂšs, cliquez sur le bouton “Allow Scrolling” afin d’activer la fonction de dĂ©filement.

Screenfly test responsive gratuit

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 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 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”. 😉 

Responsive Testing Tool tailles disponibles pour les mobiles
Responsive Testing Tool tailles disponibles pour les tablettes, ordinateurs et TV

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

Responsive Testing Tool

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.

Responsive design checker de Media Genesis

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.

 👍 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 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

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.

Viewport resizer test responsive design bookmarklet

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.

viewport resizer aperçu

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.

viewport resizer création bookmarklet personalisé

👍  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 “+”.

emmet re:view application Chrome device wall

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.

Emmet Re:view vue des points de rupture

 👍​​ 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.

test site responsive app Chrome de Mobile FIRST configuration possible

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Ă …

fonctionnalités de l'extension Chrome test site responsive app

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.

Responsivize le test responsive en local minimaliste

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
Aperçu du test avec Responsivize

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

Responsively App test responsive en local avec Chrome DevTools

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.

LT browser 2.0 application de bureau pour faire des tests responsive en local

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

 👍​​ 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 ?

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires