Blog de web-eau.net

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 !

Outils 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.

Outils Responsive Design

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.

Outils 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 Responsive Design

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.

Outils Responsive Design

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.

Outils Responsive Design

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.

Outils Responsive Design

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.

Outils Responsive Design

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.

Outils Responsive Design

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".

Outils 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.

Outils 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.

Outils Responsive Design

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 !


 

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.

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

Ajouter vos commentaires

Poster un commentaire en tant qu'invité

0
Vos commentaires sont soumis à la modération de l'administrateur.

Participant à cette conversation

  • En réponse à: niati

    Merci, j'espère qu'ils seront utiles au plus grand nombre car j'aime partager ;)

  • :lol:
    Excellent article qui résume bien les outils de vérification du responsive design. J'airais pour ma part également présenté les outils web développeur, extension accessible sous Chrome ou Firefox, facile à utiliser et gratuit.
    L'ajout du responsive design dans la création d'un site web est un plus pour une entreprise car elle permet d'être plus "Friendly" avec son audience. même si cela ne semble pas jouer sur le positionnement dans Google

  • Julien

    Bonjour,

    Bien joué pour la liste c'est top ! On utilise beaucoup Responsivepx et il est vraiment pas mal, vous avez aujourd'hui site à conseiller dans le domaine ?

    Julien

    Dernière édition du commentaire il y a environ 2 ans par Daniel
  • En réponse à: Julien

    Bonjour et merci pour ton message, Julien.

    Oui, d'autres outils sont sortis depuis cet article (que je devrais rafraichir, d'ailleurs :) ).
    Sans révolutionner ce qui se fait déjà, il y a http://responsivedesignchecker.com qui est assez bien foutu, à mon sens.

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.