7 excellents outils pour tester vos conceptions Web réactives

Chaque concepteur Web moderne doit connaître les principes de la conception Web réactive - comment obtenir un rendu parfait de vos sites sur n'importe quel appareil ou taille d'écran sur lequel il apparaît. (Si vous avez besoin d'un rappel, consultez notre guide des professionnels de la conception Web réactive ).

Mais la théorie est une chose et la pratique en est une autre. Pour vous assurer que votre site est entièrement réactif, vous devez en fait le tester sur différents appareils.

La plupart d’entre nous, cependant, n’avons pas le budget nécessaire pour vous procurer les centaines d’appareils physiques dont vous auriez besoin pour effectuer un test dans le monde réel. Mais n'ayez crainte! Ces outils offrent une solution intermédiaire en vous permettant de tester vos conceptions réactives dans un environnement virtuel.



01. Responsable

Voir à quoi ressemble votre site dans différentes fenêtres avec Responsinator

Voir à quoi ressemble votre site dans différentes fenêtres avec Responsinator

La beauté de Responsinator réside dans sa simplicité. Tapez simplement l'URL de votre page Web et cet outil gratuit basé sur un navigateur vous montre comment votre page Web s'affiche dans les formes et tailles d'écran les plus populaires.

Brillamment, vous pouvez ensuite interagir avec votre page, en cliquant sur des liens, en tapant dans les champs de recherche et ainsi de suite. Notez que ce sont des périphériques génériques, mais pas spécifiques.

02. Screenfly

Vérifiez comment votre site Web apparaît sur différents appareils, y compris les téléviseurs, avec Screenfly

Vérifiez comment votre site Web apparaît sur différents appareils, y compris les téléviseurs, avec Screenfly

Screenfly est un outil gratuit pour tester un site Web sur différentes tailles d'écran et différents appareils. Il existe depuis quelques années maintenant, mais il est toujours populaire et fait extrêmement bien son travail.

Entrez simplement votre URL, choisissez votre appareil et la taille de votre écran dans les menus et vous verrez à quel point votre site Web fonctionne correctement. Les appareils proposés incluent les ordinateurs de bureau, les tablettes, les téléviseurs et les smartphones.

comment ajouter des polices à photoshop cs2

03. Mode appareil Google DevTools

DevTools Device Mode émule différents appareils dans Chrome

DevTools Device Mode émule différents appareils dans Chrome

Le mode appareil de DevTools offre aux développeurs un moyen simple de simuler des appareils mobiles dans le navigateur Chrome. Utilisez-le pour découvrir comment votre site apparaît sur différentes tailles d'écran et résolutions, y compris les écrans Retina.

Vous pouvez même simuler les entrées de périphérique pour le toucher, la géolocalisation et l'orientation de l'appareil dans l'émulateur.

04. Google Resizer

Resizer vous aide à établir des points d

Resizer vous aide à établir des points d'arrêt Material Design pour votre site réactif

Les consignes de conception matérielle de Google incluent des conseils sur l'utilisation des points d'arrêt, des grilles réactives, des comportements de surface et des modèles d'interface utilisateur. Et l'année dernière, il a lancé un outil gratuit pour que vous puissiez voir à quoi ressemblent ces conseils sur les appareils du monde réel.

Google Resizer vous permet de saisir une URL personnalisée et d'afficher un site à travers des points d'arrêt Material Design pour ordinateur et mobile. Si vous souhaitez d'abord voir une démonstration, cliquez sur la barre d'adresse et sélectionnez ' Pesto ' ou ' Tombeau »Dans le menu déroulant.

05. Ghostlab

L’accent de Ghostlab est sur les tests simultanés sur un grand nombre d’appareils et de navigateurs

L’accent de Ghostlab est sur les tests simultanés sur un grand nombre d’appareils et de navigateurs

Une application de test de site Web payante, Ghostlab vous permet de tester votre site Web sur une multitude de navigateurs et d'appareils mobiles simultanément. Commencez le test dans un navigateur ou appareil et tous les autres refléteront vos actions, que vous cliquiez sur des liens, sélectionniez des boutons, remplissiez des formulaires ou rechargiez la page.

De manière pratique, vous pouvez également prendre une capture d'écran à partir de n'importe quel appareil, l'annoter et la faire glisser et la déposer sur votre outil de suivi des bogues. Voyez-le en action dans cette vidéo .

06. Navigateur Pile

Browser Stack est un outil de test payant destiné aux entreprises

Browser Stack est un outil de test payant destiné aux entreprises

Browser Stack est l'un des outils de test les plus avancés et les plus complets du marché. L'application payante offre un accès à plus de 1 000 navigateurs mobiles et de bureau à des fins de test, une liste constamment mise à jour, en fonction des tendances du marché et des statistiques d'utilisation basées sur les 36 000 clients de Browser Stack.

Avec des utilisateurs tels que Twitter, Microsoft, AirBnB et Mastercard, il fait évidemment quelque chose de bien.

07. CrossBrowserTest

CrossBrowserTesting offre une vaste gamme d

CrossBrowserTesting offre une vaste gamme d'appareils et de fonctionnalités de test du monde réel

Le plus grand rival de Browser Stack dans le domaine des tests est CrossBrowserTesting, qui propose plus de 1 500 navigateurs et appareils sur lesquels tester votre site Web réactif.

Sa plate-forme tout-en-un vous permet d'exécuter des tests automatisés parallèles, de comparer visuellement des captures d'écran, de faire glisser et d'interagir avec votre site Web sur des appareils réels et de déboguer à distance votre code au fur et à mesure.