Outils pour tester le responsive d'un site internet

Aujourd'hui le BlogDuWebdesign vous proposer des ressources et outils permettant de vous simplifier la vie lors du test de l'aspect responsive de vos différentes créations de site web !

Afficher de nombreuses tailles d'ecran avec Sizzy

Bien que la simple vérification de l'aspect d'un site sous différentes tailles d'écran ne soit pas suffisante, c'est la solution la plus rapide et la plus simple à mettre en place pour tester le responsive de ses sites !

Attention, bien que cette solution existe et fonctionne, nous ne parlerons pas ici de redimensionner son navigateur et se dire "on est sur une taille Nexus 5, à peu près", mais des solutions plus automatisées comme par exemple Sizzy.

Sizzy

Sizzy est donc un petit service web permettant d'afficher de nombreuses ifs rames aux dimensions des appareils choisis. Il est évidemment possible de filtrer les appareils par tailles et par OS (Android, iPhone), et c'est à peu près tout ce que présente le service a l'heure actuelle.

Tester le responsive d'un site avec Google Chrome

Une autre solution, plus simple à intégrer à votre workflow habituel, est d'utiliser les outils mis à votre disposition par votre navigateur. Google Chrome par exemple vous propose un affichage "responsive" ainsi qu'une modification des événements Javascript déclenchés (nous n'avons plus les onClick mais des onTouch par exemple).

Chrome responsive

BrowserSync, package nodeJS pour tester le responsive d'un site internet

Tester son site sous différentes tailles d'écran c'est bien, mais c'est passer à cote de nombreuses petites particularités des différents mobiles, OS et navigateurs.

Certains mobiles vont avoir une taille d'écran largement impactée par des barres de navigation par exemple, alors que d'autres laissent toute la place aux applications, et donc au navigateur. Pire encore, les mobiles nous font parfois regretter le "bon temps" ou IE nous posait des problèmes, car au moins nous en avions un sous la main simplement sur notre poste de travail. Maintenant, certains constructeurs décident par exemple de bloquer le rafraichissement du Javascript lors du scroll (Apple, c'est à toi que je pense), ce qui nous pousse à tester nos sites sur différents devices, et donc à perdre beaucoup de temps.

Pour aller un peu plus vite sur ce genre de test il existe un outil vraiment pratique nommé Browser Sync, permettant de synchroniser de très nombreux devices entre eux. Allez sur un site sur votre navigateur et tous les mobiles feront de même. scrollez ou cliquez sur un lien et tous les mobiles vous suivront.

Browsersync