9 des meilleurs outils et sites de test de conception de sites Web réactifs

Nous y avons tous été…

Un site Web que vous concevez a fière allure sur votre ordinateur portable, votre téléphone et votre tablette. Mais ensuite, quelqu'un vous montre une capture d'écran de ce à quoi ressemble le site sur son appareil et vous avez juste envie de pleurer. Ce qui s'est probablement passé, c'est qu'ils sont sur un écran avec un point de rupture pour lequel vous n'avez pas testé votre conception.

La conception réactive est une évidence à ce stade. Vos conceptions doivent être parfaitement visibles sur n'importe quel écran. Si vous êtes un utilisateur de Divi, vous disposez déjà d'une suite d'outils pratiques pour vous aider à concevoir de manière réactive. Néanmoins, c'est toujours une bonne idée de vérifier le plus de fenêtres possible. Votre meilleur pari est d'avoir une fenêtre avec le Divi Builder et une autre avec un outil réactif que vous pouvez actualiser régulièrement.

Certaines personnes préfèrent concevoir « mobile-first », d'autres le font simultanément et d'autres conçoivent d'abord le bureau, puis s'adaptent aux écrans plus petits. Quel que soit votre processus, vous devez disposer des bons outils pour vérifier la réactivité de votre site.

C'est pourquoi nous avons dressé cette liste avec certains des outils et sites de test de conception de sites Web réactifs les plus pratiques. Essayez-les et voyez avec lequel vous êtes le plus à l'aise.

Plongeons-nous.

Abonnez-vous à notre chaîne Youtube

Outil d'inspection sur Chrome

Le premier outil de test réactif de la liste se trouve directement dans votre navigateur Chrome. Le même outil que vous utilisez pour inspecter le code d'un site dispose également d'une fonctionnalité pour tester les tailles d'écran et les fenêtres d'affichage. Cliquez avec le bouton droit sur n'importe quel site Web et cliquez sur « Inspecter ». Une fois la fenêtre d'inspection ouverte, vous verrez l'icône des appareils à côté du bouton nommé « Éléments ». Lorsque vous cliquez sur le bouton des appareils, votre écran affiche le site Web sur lequel vous vous trouvez à différents points d'arrêt.

Vous pouvez saisir une taille spécifique ou simplement saisir et faire glisser le coin de la fenêtre pour modifier le point d'arrêt manuellement. C'est idéal pour vérifier comment votre conception s'adapte aux différentes fenêtres.

Outil de test réactif

L'outil de test réactif est comme la plupart des sites Web de test réactif, vous pouvez saisir l'URL de la page que vous souhaitez tester dans une barre de recherche en haut de l'écran. Cet outil particulier a une longue liste de tailles d'appareils prédéfinies parmi lesquelles choisir. Si vous avez besoin d'une autre taille, vous pouvez choisir les mesures de taille personnalisées. Lorsque vous souhaitez vérifier un changement dans la conception, cliquez simplement sur le bouton « Vérifier » pour recharger. Il y a un bouton pour basculer les capacités de défilement dans la fenêtre de test et un bouton « pivoter » pour vérifier les dispositions verticales et horizontales.

Le développeur derrière cet outil a également créé un système de grille pour les sites Web réactifs. Vous le trouverez dans l'icône d'ampoule en haut à droite.

Essayez cet outil

Vérificateur de conception réactif

Responsive Design Checker est un site avec un certain nombre de tailles d'écran prédéfinies et une option de taille personnalisée. Ce qui manque à cet outil par rapport à l'outil ci-dessus, c'est la règle numérotée en haut de l'écran et un bouton de rotation. Ce qu'il a en commun, c'est que le bouton « Go » fonctionne de la même manière, il suffit de cliquer dessus lorsque vous avez modifié la conception et que vous souhaitez vérifier les résultats.

Essayez cet outil

Modo de conception

Design Modo est un constructeur de sites Web et d'e-mails avec un outil de test réactif gratuit dans le cadre de leur site. Cet outil a toutes les choses que les deux outils ci-dessus ont plus un bouton de déplacement pour voir comment la conception change à mesure que la fenêtre se rétrécit et s'agrandit. Bien sûr, il fonctionne également comme un dispositif de génération de publicités et de leads pour leurs principaux services. Le seul inconvénient est que les mesures affichées par l'outil sont par résolution, pas par la fenêtre. Cela peut devenir un peu déroutant.

Essayez cet outil

ÉcranFly

Screenfly est un autre site Web avec les mêmes fonctionnalités de test réactif que les exemples ci-dessus, mais les préréglages sont un peu obsolètes. Le dernier préréglage iPhone est le 7X. Néanmoins, l'outil fonctionne toujours correctement et dispose d'une fonction de taille personnalisée, de boutons de rotation et d'actualisation et d'une bascule de défilement.

Essayez cet outil

Répondant

Responsinator est toujours l'une des applications de test de conception Web réactives les plus populaires, probablement parce qu'elle a l'air si cool. Lorsque vous ajoutez une URL, elle affiche le site sur un certain nombre d'appareils mobiles différents dans des dispositions verticales et horizontales. Cet outil est pratique pour des vérifications rapides dans les appareils les plus courants mais il est limité si vous souhaitez vérifier tous les points d'arrêt.

Essayez cet outil

Suis-je réactif

Am I Responsive est similaire à Responsinator en ce sens qu'il affiche le site de test dans un nombre défini d'appareils. L'avantage de cet outil est que vous pouvez capturer les résultats et les utiliser pour votre portefeuille. De plus, chaque écran peut défiler indépendamment.

Essayez cet outil

Accordeur de pixels

Pixeltuner est un site similaire à Responsinator. L'outil n'affiche que 6 tailles d'écran, mais elles constituent une bonne sélection. Avec ces six tailles, vous pouvez être sûr d'avoir couvert toutes les bases. Les seuls qui manquent sont les tailles d'écran plus grandes au-dessus de 1500 pixels.

Essayez cet outil

Testeur de conception de sites Web réactifs

Responsive Web Design Tester n'est pas un site Web, c'est une extension de navigateur. Vous le trouverez dans l'extension ou la bibliothèque de modules complémentaires de votre navigateur. Le lien ci-dessous concerne l'extension Chrome, mais l'outil fonctionne également pour Safari et Firefox. Lorsque vous cliquez sur l'icône d'extension, vous pouvez choisir parmi une liste de préréglages, puis le site s'ouvre dans une nouvelle fenêtre à la taille de la fenêtre que vous avez sélectionnée. Les préréglages sont un peu obsolètes, mais vous pouvez ajouter de nouveaux appareils et créer vos propres groupes préférés.

Essayez cet outil

Récapitulatif de notre liste Outils et sites de test de conception réactifs

Lorsque vous concevez avec Divi, vous avez le choix d'ajuster vos mises en page pour les écrans de bureau, de tablette et de téléphone. Les options de Divi sont super pratiques et peuvent vous aider à obtenir une mise en page parfaite pour toutes les tailles d'écran. Mais il est toujours dans votre intérêt d'utiliser un outil supplémentaire qui prend en charge vos conceptions Divi réactives.

Quel outil utilisez-vous ? L'avons-nous mentionné ici? Nous avons choisi les outils de cette liste car ils sont tous pratiques et faciles à utiliser. Certains sont meilleurs que d'autres et celui dont vous avez besoin dépend de la complexité de votre conception. Essayez-les jusqu'à ce que vous trouviez votre favori et dites-nous lequel c'est.

Image en vedette via aurielaki / shutterstock.com