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.
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 ? Bref, il est important de pouvoir contrôler en permanence la qualité 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".

Pour vous aider dans votre 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).

Victor Coulon

Victor est un jeune français expatrié à New York et qui aime les choses simples et bien faites. Il a en effet développé un bookmarklet RWD responsive qu'il vous suffit de glisser/déposer dans votre navigateur pour avoir votre émulateur "Responsive Design". A installer de tout urgence !

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.

Responsive.Is

Responsive.Is, crée par TypeCast, est un autre outil de conversion de type 'émulateur de navigateur', que vous pouvez utiliser pour tester votre affichage "Responsive Design". Il vous suffit d'entrer votre URL et l'outil va automatiquement changer la taille en fonction de l'appareil que vous sélectionnez.

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.

<

Am I Responsive ?

Initié par Justin Averyami.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 votre affichage "Responsive Design", vous avez également la possibilité d'ajouter un bookmarklet à votre navigateur pour tester n'importe quel site en ligne.

Responsivepx.Com

ResponsivePx est un outil génial 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 dans votre site.

Matt Kersley

Matt a développé un outil très sympa qui peut vous permet de visualiser votre site "Responsive Design" avec différentes tailles d'écran simultanément sur un seul écran. J'aime cet outil, principalement parce qu'il montre toutes les résolutions d'écran côte à côte ce qui le rend plus facile pour le débogage.

Froont

Froont est une application online qui vous permet de modifier et de tester votre affichage "Responsive Design" à partir d'une approche "Desktop". Froont s'exécute dans votre navigateur et vous permet de voir ce que vous concevez dans les mêmes conditions que les utilisateurs. Au lieu d'avoir des images statiques, vous repartez avec des codes HTML et CSS entièrement fonctionnels.

Screenfly

Screenfly développé par QuirkTools, est un outil impressionnant qui vous permettra de voir votre site en mode "Responsive Design" sur une incroyable diversité d'appareils: écran de bureau, tablette, mobile et même TV. Également à disposition, des options pour activer ou désactiver le défilement ou même faire pivoter l'écran en mode paysage.

ReView.Js

ReView est un système de visualisation dynamique, développé en JavaScript pur, ce qui vous donne une excellente expérience de visionnage pour votre site Web "Responsive Design".

Screenqueri.es

Screenqueri.es est un outil de test qui travaille au pixel près. Il suffit d'entrer l'adresse du site Web que vous voulez vérifier, et l'outil affiche le site dans différentes configurations d'écran. Vous pouvez alors redimensionner manuellement la taille pixel par pixel afin d'identifier les points d'arrêt.

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.

Cette liste n'est pas exhaustive car en matière de web et de "Responsive Design" les choses évoluent très vite. Si vous connaissez d'autres très bons outils en la matière, vous pouvez les signaler en commentant cet article. A vous !

11 points essentiels pour réussir votre projet web

Tout savoir sur la pénalité Penguin

Analyse concurrentielle : mode d'emploi et outils

A PROPOS DE L'AUTEUR :

Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances avec les néophytes aussi bien qu'avec les personnes plus expérimentées.