7 outils gratuits pour tester les mises en page réactives
Chaque site Web doit être conçu avec une approche réactive. Pour rester sur la bonne voie, les tests rapides et fréquents, avec n'importe lequel de ces outils de test réactif, garantissent que votre conception a l'air correcte sur tous les navigateurs et à toutes les tailles de fenêtre.
Chaque site Web moderne a besoin un design réactif . Cela demande plus d'efforts, mais le résultat final est intéressant.
Je vous recommande en fait de tester vos idées avec des outils de conception réactifs pour voir à quoi ressemble votre site à chaque étape. Vous pouvez rechercher des problèmes de convivialité sur différentes tailles d'écran à partir d'un seul outil pratique.
Et ces outils gratuits sont mes meilleurs choix pour les tests réactifs car ils sont tous extrêmement faciles à utiliser. Mieux encore, ils prennent en charge de nombreuses tailles d’appareils, ce qui vous permet d’avoir une bonne idée de la façon dont votre mise en page doit s’adapter des smartphones aux ordinateurs de bureau.
1. XRespond
le Application XRespond s'appelle lui-même un "laboratoire de périphérique virtuel" et je dirais que c’est très intéressant.
Avec ce site, vous pouvez prévisualiser la façon dont chaque site Web regarde sur une variété de périphériques. Le site fonctionne dans un style horizontal long où vous devez faire défiler les pages pour voir tous les formats d'écran.
L'étiquette au dessus de chaque écran vous indique la taille exacte et le périphérique auquel elle correspond. De plus, dans le menu déroulant, vous trouverez un large choix de smartphones, tablettes et ordinateurs portables pour tester des appareils spécifiques.
Ce menu déroulant prend même en charge un paramètre de largeur / hauteur personnalisé si vous souhaitez voir comment votre site apparaît sur des moniteurs spécifiques. Un excellent outil de test pour un design réactif et supportant une grande variété de styles de périphériques.
2. responsable
Une application similaire que vous pouvez également apprécier est Responsable .
Au lieu d'utiliser une barre de défilement horizontale, ce site répertorie chaque aperçu de périphérique dans une colonne verticale. De cette façon, vous pouvez faire défiler chaque périphérique et prévisualiser le site sur chacun.
Les appareils incluent les iPhones les plus courants et les appareils Android Nexus, avec des aperçus portrait et paysage. Vous trouverez également des aperçus de périphériques iPad également en mode portrait et paysage.
Une autre fonctionnalité intéressante est le basculement entre HTTP et HTTPS. Responsinator propose les deux types de prévisualisation des sites en fonction de l'URL saisie. Il correspondra automatiquement à tout site que vous prévisualisez pour éviter les erreurs SSL.
3. Vérificateur de conception réactif
Besoin de vérifier rapidement si un site Web est vraiment réactif? Ensuite, essayez d'utiliser ceci Vérificateur de conception réactif fait spécifiquement pour les tailles d'écran personnalisées.
Une fois que vous entrez une URL, vous avez le contrôle total sur l'espace de test réactif. Vous pouvez modifier la largeur / hauteur comme vous le souhaitez et même l’utiliser pour faire correspondre certains ratios d’écran si vous utilisez un outil de ratio d'aspect .
Dans la barre latérale, vous trouverez une tonne de tailles d'écran prédéfinies pour les périphériques courants tels que les tablettes Nexus, Kindles et même les nouveaux téléphones tels que Google Pixel.
Le site prend également en charge de grandes tailles d’écran avec des écrans de bureau jusqu’à 24 po de largeur . Étonnamment, ces grandes tailles fonctionnent bien, même sur de petits écrans, car le volet de prévisualisation est redimensionné en fonction du ratio et non de la largeur totale des pixels.
Donc, si vous avez du mal à tester les moniteurs 1920px sur votre écran MacBook plus petit, cet outil vaut bien la mise en signet.
4. Test Google Mobile
Google regorge d’outils formidables pour les webmasters et leurs Test adapté aux mobiles est un exemple.
Cet outil de test n’est pas vraiment un outil de prévisualisation et il ne vous aide pas à détecter les bogues d’interface utilisateur. Au lieu de cela, c'est un outil mobile dédié pour identifier les problèmes sur votre site sur mobile.
Une fois le test exécuté, vous réussirez ou échouerez en tant que site mobile. C'est un peu trop générique pour les concepteurs, mais Google propose des astuces basées sur les zones à problèmes et les éléments de page susceptibles d'être améliorés.
Conservez cette sauvegarde en tant qu'outil de test mobile fiable. Ce n'est pas une ressource complète pour des tests réactifs, mais c'est un endroit idéal pour recueillir des informations et peut-être la société la plus fiable du Web.
5. Outil réactif de Matt Kersley
Designer et développeur Matt Kersley libéré sa propre outil de test pour des mises en page réactives. Celui-ci est beaucoup plus simple que les autres et n'a pas beaucoup de fioritures.
Au lieu de cela, il s'agit d'un prévisualisateur de site simple en ligne avec 5 largeurs fixes: 240px, 320px, 480px, 768px, 1024px.
Les volets de prévisualisation comportent des barres de défilement qui vous permettent de parcourir le contenu sans effort. Cependant, vous ne pouvez pas cliquer sur des liens ou parcourir d'autres pages dans les volets, ce qui est vraiment préférable pour tester des pages singulières.
Mais pour un outil simple qui fait le travail, cela fonctionne très bien et c'est l'un des rares outils de test offrant une largeur de 240 pixels par défaut.
6. Suis-je sensible?
Vous n'aurez probablement pas besoin de cet outil si vous recherchez une précision parfaite.
Au lieu de cela le Suis-je réactif? Le site Web fonctionne mieux pour des vérifications et des aperçus rapides sur quelques types de périphériques courants.
Il vous suffit d'entrer une URL de site Web et de la charger dans quatre volets de prévisualisation: un smartphone, une tablette, un ordinateur portable et un ordinateur de bureau. Celles-ci ne sont pas à l'échelle, donc vous ne regardez que le site comme un ratio.
Mais c'est vraiment cool de saisir des captures d'écran de votre site pour montrer son apparence dans divers appareils. Le rendu est précis à l'échelle et repose sur votre navigateur pour un rendu correct.
De plus, cet outil vous permet d’exécuter des adresses localhost afin que vous puissiez même vérifier les projets que vous avez construire localement sur ton ordinateur.
7. Test réactif Designmodo
Un autre outil que j'aime vraiment est le Testeur Web réactif créé par Designmodo. Cet outil gratuit vous permet à nouveau de prévisualiser un site dans votre navigateur en fonction de certaines largeurs.
Mais le seul ajout intéressant à cet outil est la mise en page basée sur une grille. Vous pouvez vérifier votre page pour les points de pixel et même étudier la grille de la page en utilisant cette webapp.
Outre les largeurs de périphérique prédéfinies, vous pouvez également faire glisser le volet de prévisualisation pour l'adapter à la largeur de l'écran que vous testez. Il a des entrées pour la largeur / hauteur si vous devez entrer manuellement des tailles.
Mais chaque icône de périphérique dans le coin supérieur droit vous permet de choisir parmi des dizaines de tailles d’écran communes, ce qui rend cet outil parfait pour vérifier tout appareil que vous pouvez imaginer.
