Des outils pour bien tester ses sites responsifs

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 !

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 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.

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).

Enfin, je vous propose un dernier site permettant de tester sa responsive, ami.responsivedesign.is. Bien qu'assez peu pratique pour son but principal, je l'ai trouvé vraiment pratique pour faire de simples petites présentations de sites et voulais donc vous le proposer.

Synchroniser de nombreux devices avec BrowserSync

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.

Seul problème : bien que notre installation soit annoncée comme "simple", elle demande tout de même quelques connaissances en Node.js. Pour ceux d'entre vous qui ne se sentent pas du tout codeurs (mais qui acceptent tout de même d'installer Node et essayer d'utiliser une console) BrowserSync est intégré dans une solution clé en main de développement et testing : Blendid.