• A la une
  • Catégories
  • Dossiers
  • +

Des outils pour bien tester ses sites responsifs

par Benjamin SANCHEZle 03/05/2017

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir