Trouvez dans cet article les outils incontournables pour faire des responsive test à votre site web.
Dans le dernier article du blog nous avons essayé d’expliquer ce qu’est un site web responsive. Cette fois nous avons voulu partager avec vous quelques outils pour le responsive test d’un site web aux différents écrans. Comme, il est normal, nous n’avons pas toutes les sortes de smartphones, tablettes ou écrans pour tester notre site, ces outils vont nous permettre d’émuler ces dispositifs d’une façon très simple.
Outils en ligne
The responsinator : ce site nous permet de tester les « media queries » qu’on a défini pour différentes sortes de smartphones et de tablettes. Il permet de regarder le site sur des écrans allant de 204x320px jusqu’à 1024x768px. La contrainte la plus grosse est qu’il ne permet pas de montrer le navigateur correct pour chaque plateforme.
Matt Kersley Responsive : le seul avantage par rapport au précédent, c’est qu’il permet de regarder les différentes tailles des dispositifs dans une ligne horizontale. Cela va nous aider à trouver des erreurs d’une façon beaucoup plus simple.
Screenqueri : Cet outil est plus complet que les deux que nous venons de voir, même s’il n’émule pas directement les navigateurs des dispositifs, il a une liste très complète de smartphones et de tablettes (Blackberry, Sony, Xperia, HTC et Motorola).
IpadPeek : avec cet outil nous pouvons voir quel est le comportement du site dans des dispositifs Apple.
MobilePhoneEmulator : Cet outil a des très bonnes options et permet de paramétrer la taille des écrans en pouces. Il permet aussi faire le choix parmi différents modèles de portables.
Outils Offline
Window Resizer : Une extension pour Chrome avec laquelle nous pouvons redimensionner la fenêtre du navigateur selon les différentes tailles d’écrans. Elle permet de personnaliser les tailles des résolutions et de les mettre en ordre à notre goût. La seule contrainte est qu’elle ne permet pas de tester d’une façon efficace la position « horizontale » (landscape).
Chrome Developer Tools : C’est la façon la plus facile que nous avons pour tester le responsive. C’est très personnalisable et nous n’avons pas besoin d’installer d’extensions. Il suffit d’ouvrir les Outils pour développeurs de Chrome, cliquer sur la roue dentée, aller vers « Overrides » et personnaliser la vue.
Et voilà, vous avez déjà quelques outils pour faire des responsive test de vos sites web. Moi, personnellement, j’utilise beaucoup le Developer Tools de Chrome. C’est un outil très puissant et comme il est intégré dans le navigateur, cela permet de modifier le code des media queries pendant qu’on voit le résultat. Mais maintenant le choix est à vous.