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 dans le même genre, vous pouvez les signaler en commentant cet article. A vous !
