12 outils pour valider le Responsive Design de votre site

12 outils pour tester le Responsive Design d'un site

Afin de vérifier le bon affichage de votre site web sur les différents écrans et les différentes résolutions, il existe aujourd'hui des outils fort simples à utiliser et qui vous permettent d'effectuer ces différents tests. Par exemple, est-ce que le tableau HTML que vous avez ajouté s'affiche correctement sur mobile ? Est-ce que l'image inserée dans cet article ne va pas déformer ma mise en page sur les mobiles ? Est-ce que cette vidéo est-elle toujours lisible sur smartphone ?

Pour vous en assurer, il est important de pouvoir contrôler en permanence la qualité et le rendu du contenu que vous mettez en ligne sur votre site (ou votre blog) afin de vous assurer de sa parfaite adéquation avec l'affichage Responsive Design.

Afin de vous aider dans cette tâche, je vous ai sélectionné 12 outils qui vous permettront d'effectuer ces vérifications et ces contrôles. Et pour gagner du temps, ajoutez cet article à vos favoris pour retrouver très rapidement cette liste dès que vous en aurez besoin (le classement des outils présenté est purement aléatoire).

Malte Wassermann

Malte est un développeur et designer allemand qui aime les choses simples et bien faites. Il a développé l'excellent Viewport Resizer, un bookmarklet qui s'installe dans votre navigateur d'un clic. A découvrir de toute urgence !

valider le Responsive Design

ProtoFluid

ProtoFluid est un outil de prototypage en ligne qui vous permet de tester votre site avec différentes tailles d'écran et différentes résolutions. Il suffit de saisir l'URL, de sélectionner l'appareil (ou les dimensions voulues) et d'appuyer sur 'Envoi'. Comme c'est un outil online, il est également possible d'utiliser des extensions du type Firebug.

tester le Responsive Design

Design Modo

Design Modo est un système de visualisation dynamique d'une grande facilité d'utilisation. Vous indiquez l'adresse URL de votre site et vous faites varier la largeur de l'écran avec la barre verticale afin de vérifier la qualité de l'affichage "Responsive Design". Vous avez également à votre disposition : 14 vues moblies, 11 vues tablettes, 12 vues ordinateurs portables et pour les écrans de bureau, un affichage allant de 21 à 27 pouces.

controler le Responsive Design

Responsinator

Testez votre site dans différentes configuration d'écrans (iPhone, iPad, Kindle, Android, etc) avec le Responsinator. Cet outil montre également votre site à la fois en mode portrait et en mode paysage. J'aime vraiment cet outil à cause des contours des périphériques affichés sur la page, ce qui apporte plus de sens à l'ensemble.

outils pour le Responsive Design

Am I Responsive ?

Initié par Justin Avery ami.responsivedesign.is/ est le fruit d'une recherche sur les différents modes d'affichage "Responsive Design". Outre l'émulateur online que vous pouvez utiliser pour tester l'affichage de votre site, vous avez également la possibilité d'ajouter un bookmarklet à votre navigateur pour tester n'importe quel site en ligne.

outil pour valider le Responsive Design

Responsive Test Tool

Responsive Test Tool est un autre outil de conversion de type 'émulateur de navigateur', que vous pouvez utiliser pour tester votre affichage sur une quantité énorme d'appareils. Il vous suffit d'entrer votre URL et l'outil va automatiquement changer la taille en fonction de l'appareil que vous sélectionnez.

outil pour tester le Responsive Design

Responsive Design Checker

Responsive Design Checker est un outil très bien conçu pour tester le "Responsive Design" de votre site. La principale caractéristique qui le distingue des autres, c'est sa capacité à redimensionner le site pixel par pixel. Je trouve ce dispositif impressionnant car cela permet d'identifier les points d'arrêt et également de tester la façon dont les médias queries CSS travaillent sur votre site.

outils pour contrôler le Responsive Design

Responsive Web Design Tester

www.esolutions.se propose Responsive Web Design Tester un très bon addon pour les navigateurs de type Chromium qui vous permet de visualiser votre site avec différentes tailles d'écran dans une fenêtre séparée. J'aime cet outil, principalement parce qu'il propose des vues portraits et landscape pour les différents appareils.

Outils Responsive Design

Responsive checker

Responsive Checker est une application online qui vous permet de modifier et de tester l'affichage de votre site sur les principaux appareils en circulation ou de choisir une résolution spécifique en fonction de vos besoins.

Outils Responsive Design

Responsive checker

Responsive Checker est un test en ligne impressionnant qui vous permettra de voir votre site en mode sur un nombre incroyable d'appareils: Apple, Amazon, Nvidia, Toshiba, Samsung, Nokia, LG, Oppo, etc. que ce soit en mode portrait ou en mode paysage.

Outils Responsive Design

Google Search Console

Le test d'optimisation mobile de Google Search Console est un outil en ligne qui vous permettra de vérifier que Google valide le responsif de votre site web. Ce test a une valeur très importante car en cas d'erreur, vous aurez sans doute des rappels à l'ordre dans votre Search Console.

Outils Responsive Design

Et enfin pour terminer, je vous propose un site vraiment très étonnant...

Screensiz.es

Screensiz.es est donc une sorte de bibliothèque qui liste une quantité énorme d'appareils en mobile, tablette et desktop. Pour chaque appareil, vous avez l'OS, la résolution, la taille physique de l'écran, la largeur et la hauteur de l'écran, la densité de pixel, etc. ENORME !.

Outils Responsive Design

Conclusion

Cette liste n'est pas exhaustive car j'ai volontairement exclu de cette présentation, tous les outils qui exigent une inscription pour faire ce type de test. Si vous connaissez d'autres très bons outils dans le même genre, vous pouvez les signaler en commentant cet article.
A vous !

Afin de vérifier le bon affichage de votre site web sur les différents écrans et les différentes résolutions, il existe aujourd'hui des outils fort simples à utiliser et qui vous permettent d'effectuer ces différents tests. Par exemple, est-ce que le tableau HTML que vous avez ajouté s'affiche correctement sur mobile ? Est-ce que l'image inserée dans cet article ne va pas déformer ma mise en page sur les mobiles ? Est-ce que cette vidéo est-elle toujours lisible sur smartphone ?

Pour vous en assurer, il est important de pouvoir contrôler en permanence la qualité et le rendu du contenu que vous mettez en ligne sur votre site (ou votre blog) afin de vous assurer de sa parfaite adéquation avec l'affichage Responsive Design.

Afin de vous aider dans cette tâche, je vous ai sélectionné 12 outils qui vous permettront d'effectuer ces vérifications et ces contrôles. Et pour gagner du temps, ajoutez cet article à vos favoris pour retrouver très rapidement cette liste dès que vous en aurez besoin (le classement des outils présenté est purement aléatoire).

Malte Wassermann

Malte est un développeur et designer allemand qui aime les choses simples et bien faites. Il a développé l'excellent Viewport Resizer, un bookmarklet qui s'installe dans votre navigateur d'un clic. A découvrir de toute urgence !

valider le Responsive Design

ProtoFluid

ProtoFluid est un outil de prototypage en ligne qui vous permet de tester votre site avec différentes tailles d'écran et différentes résolutions. Il suffit de saisir l'URL, de sélectionner l'appareil (ou les dimensions voulues) et d'appuyer sur 'Envoi'. Comme c'est un outil online, il est également possible d'utiliser des extensions du type Firebug.

tester le Responsive Design

Design Modo

Design Modo est un système de visualisation dynamique d'une grande facilité d'utilisation. Vous indiquez l'adresse URL de votre site et vous faites varier la largeur de l'écran avec la barre verticale afin de vérifier la qualité de l'affichage "Responsive Design". Vous avez également à votre disposition : 14 vues moblies, 11 vues tablettes, 12 vues ordinateurs portables et pour les écrans de bureau, un affichage allant de 21 à 27 pouces.

controler le Responsive Design

Responsinator

Testez votre site dans différentes configuration d'écrans (iPhone, iPad, Kindle, Android, etc) avec le Responsinator. Cet outil montre également votre site à la fois en mode portrait et en mode paysage. J'aime vraiment cet outil à cause des contours des périphériques affichés sur la page, ce qui apporte plus de sens à l'ensemble.

outils pour le Responsive Design

Am I Responsive ?

Initié par Justin Avery ami.responsivedesign.is/ est le fruit d'une recherche sur les différents modes d'affichage "Responsive Design". Outre l'émulateur online que vous pouvez utiliser pour tester l'affichage de votre site, vous avez également la possibilité d'ajouter un bookmarklet à votre navigateur pour tester n'importe quel site en ligne.

outil pour valider le Responsive Design

Responsive Test Tool

Responsive Test Tool est un autre outil de conversion de type 'émulateur de navigateur', que vous pouvez utiliser pour tester votre affichage sur une quantité énorme d'appareils. Il vous suffit d'entrer votre URL et l'outil va automatiquement changer la taille en fonction de l'appareil que vous sélectionnez.

outil pour tester le Responsive Design

Responsive Design Checker

Responsive Design Checker est un outil très bien conçu pour tester le "Responsive Design" de votre site. La principale caractéristique qui le distingue des autres, c'est sa capacité à redimensionner le site pixel par pixel. Je trouve ce dispositif impressionnant car cela permet d'identifier les points d'arrêt et également de tester la façon dont les médias queries CSS travaillent sur votre site.

outils pour contrôler le Responsive Design

Responsive Web Design Tester

www.esolutions.se propose Responsive Web Design Tester un très bon addon pour les navigateurs de type Chromium qui vous permet de visualiser votre site avec différentes tailles d'écran dans une fenêtre séparée. J'aime cet outil, principalement parce qu'il propose des vues portraits et landscape pour les différents appareils.

Outils Responsive Design

Responsive checker

Responsive Checker est une application online qui vous permet de modifier et de tester l'affichage de votre site sur les principaux appareils en circulation ou de choisir une résolution spécifique en fonction de vos besoins.

Outils Responsive Design

Responsive checker

Responsive Checker est un test en ligne impressionnant qui vous permettra de voir votre site en mode sur un nombre incroyable d'appareils: Apple, Amazon, Nvidia, Toshiba, Samsung, Nokia, LG, Oppo, etc. que ce soit en mode portrait ou en mode paysage.

Outils Responsive Design

Google Search Console

Le test d'optimisation mobile de Google Search Console est un outil en ligne qui vous permettra de vérifier que Google valide le responsif de votre site web. Ce test a une valeur très importante car en cas d'erreur, vous aurez sans doute des rappels à l'ordre dans votre Search Console.

Outils Responsive Design

Et enfin pour terminer, je vous propose un site vraiment très étonnant...

Screensiz.es

Screensiz.es est donc une sorte de bibliothèque qui liste une quantité énorme d'appareils en mobile, tablette et desktop. Pour chaque appareil, vous avez l'OS, la résolution, la taille physique de l'écran, la largeur et la hauteur de l'écran, la densité de pixel, etc. ENORME !.

Outils Responsive Design

Conclusion

Cette liste n'est pas exhaustive car j'ai volontairement exclu de cette présentation, tous les outils qui exigent une inscription pour faire ce type de test. Si vous connaissez d'autres très bons outils dans le même genre, vous pouvez les signaler en commentant cet article.
A vous !

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net