5 outils pour tester son site en responsive

Besoin de tester votre site sur tous les types d'écrans (ordinateur, tablette, mobile...) ? Dans cet article je vous partage 5 outils, un moment culture web et un bonus à la fin pour être sur que Google vous aime ❤️
Outils pour tester le responsive

Je ne vous apprend rien en vous disant qu’un site internet doit s’adapter à tous les écrans (ordi, tablette, smartphone).

Aujourd’hui c’est un standard.

Il y a quelques années ce n’était pas le cas…

J’ai profité d’une mission freelance de « responsivisation » d’un site du début des années 2010 (oui cela existe encore ?) pour vous partager quelques outils sympas afin que vous puissiez tester votre site ou celui de vos clients !

En fin d’article, j’ajoute quelques bonus (pour valider le site avec Google et pour les développeurs).

Culture Web : L’importance de la compatibilité mobile

Aujourd’hui la plupart des sites sont visionnés via des petits écrans (smartphone, tablette) et il est donc primordial que votre site soit agréable à lire sur ces plateformes.

C’est tellement important, que depuis 2015, Google, l’a inclut comme critère de classement dans son algorithme.

Post officiel : https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html

A l’époque cela avait bouleversé la manière de travailler des créateurs de site et fait évoluer tous les standards. A partir de là des technologies ont émergées et des outils on vu le jour.

Voici donc les 5 outils pour tester la compatibilité de votre site sur différents écrans :

1 – Le classique : Google Chrome (gratuit)

La plupart des développeurs connaissent cette fonction.
Dans Chrome il est possible de tester son site en plusieurs dimensions en activant l’inspecteur d’élément.

Pour cela : Clique droit > Inspecter l’élement

Puis clique sur l’icône pour activer la « Device Toolbar »

Ensuite il est possible de choisir quel appareil sur le haut de l’écran et ou / de customiser une taille

C’est facile et rapide.

Note : Cela change simplement la taille de l’écran et n’émule pas un véritable appareil.

2 – Am I Responsive (gratuit)

Facile et rapide. Il permet d’avoir un visuel rapide de différents appareils en même temps via une URL que l’on saisit.

Am i Responsive
Et voilà ma tronche en plusieurs formats ^^

Lien : http://ami.responsivedesign.is/

Note : Cela change simplement la taille de l’écran et n’émule pas un véritable appareil.

3 – Blisk.io, logiciel à installer (Freemium)

Blick.io est un logiciel gratuit que l’on peut télécharger et qui permet de simuler les tailles des différents appareils.

Il intégrer un navigateur intégrée avec une fonction d’auto chargement de la page, pratique en local.

Blisk

Il possède d’autres fonctionnalités en mode premium que je n’ai pas testé. Je n’en parlerais donc pas.

Lien : https://blisk.io/

Note : Cela change simplement la taille de l’écran et n’émule pas un véritable appareil.

Big up à David (SOSWP) de ma communauté Instagram qui m’a recommandé cet outil.

4 – Sizzy.co (payant)

Pendant la rédaction de cet article, j’ai rapidement étudié le marché et je suis souvent tombé sur cet outil.

Je vous avoue ne pas l’avoir testé car je n’aime pas commencé une relation avec quelqu’un qui me demande en premier ma carte bleue. (j’ai des principes que voulez-vous ?).

Blague à part, je pense que c’est un très bon outil qui semble émuler les navigateurs des plateformes.

Si j’étais développeur Frontend en full time j’aurai surement laissé ma carte pour tester les 14 jours gratuits.

Je vous le partage donc :

Lien : https://sizzy.co/

5 – Browserstack (payant)

J’ai testé Browserstack par le passé.

L’objectif était d’émuler des Internet Explorer 6 sur des Windows XP (la grande époque)

Cet outil va au delà du test de responsive. Il permet de faire plein de choses (tests, automatisations avec Sélénium…), sur toutes les plateformes et tous les navigateurs.

Je vous recommande de faire un tour pour voir le potentiel de la bête.

Lien : https://www.browserstack.com/

Bonus

Et oui, je suis un gars bien. Voici 2 petits bonus importants.

Bonus 1 : Le test Mobile friendly by Google

C’est bien de tester son site par soi-même, mais ce que l’on souhaite c’est que Google l’❤️.

Pour cela, Google a créé un outil :

Crash test réussi !

Lien : https://search.google.com/test/mobile-friendly

Bonus 2 : Pour les webmasters / développeurs

Pour ceux qui veulent allez plus loin voici 2 ressources sympas pour « reponsiviser » un site.

Bootstrap le fameux

Pratique si le site d’origine est bien construit. On peut rapidement intégrer le système de grid de Boostrap et arriver à quelque chose de pas trop mal.

Lien : https://getbootstrap.com/

Le GIST qui te sert de post it pour les medias queries

Petit rappel pour les curieux non techniciens.
Le responsive c’est « simplement » une technique de gestion de pourcentages par rapport à la taille de l’écran que l’on gère avec le CSS.
On appelle ceci les media queries.

Il y a un mec génial qui a partagé les bonnes tailles d’écran pour les media queries. Ce bout de code m’a souvent aidé :

Lien : https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488.js

Conclusion

J’espère que cet article pourra vous être utile ! J’envisage de le mettre à jour avec d’autres bons outils, n’hésitez pas à en partager en commentaire ou à me laisser votre avis 😉

Picture of Johann

Johann

Webmaster depuis 1998, Créateur de JeVendsLaBoutique.com, J’accompagne les Entrepreneurs passionnés et Freelances à développer leur activité sur Internet.

Partager cet article

2 réponses

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

A propos

Johann ROCHE

Webmaster depuis 1998, Créateur de JeVendsLaBoutique.com, J’accompagne les Entrepreneurs passionnés et Freelances à développer leur activité sur Internet.

Articles récents

Me suivre

✉️ Faire partie de mes contacts