Responsive design : trois services web pour tester facilement un site sans émulateur

Comment voir à quoi ressemble un site en responsive design sur plusieurs écrans, smartphones, tablettes et même téléviseurs ? Voici trois bonnes adresses.

Une petite note pour nos amis webdesigners et intégrateurs Web, mais également pour tous les curieux qui s’intéressent à la façon dont sont construits les sites web, et plus particulièrement ceux – de plus en plus nombreux – faisant appel au responsive design.

Pour les non initiés, le responsive design est une méthode qui consiste à concevoir les pages d’un site de façon à ce qu’elles s’affichent automatiquement de façon adaptée en fonction du terminal, de la résolution de l’écran, et du navigateur sur lequel elles sont appelées, sans qu’il soit nécessaire de développer plusieurs versions différentes d’un même site.

Une méthode qui a ses partisans et ses détracteurs, comme souvent dans les sujets qui passionnent les professionnels du développement web.

responsve design

Afin de tester rapidement un site en responsive design sur plusieurs terminaux, si l’on n’a pas la chance d’avoir sous la main ces derniers, il existe des émulateurs, petits programmes à installer sur son PC ou intégrés dans les logiciels de développement.

Un autre moyen plus facile, rapide et qui ne nécessite aucune installation, en plus d’être universel : les services web qui intègrent un émulateur en HTML. Digital Inspiration a déniché trois excellents sites qui font parfaitement le job, et qui permettent de voir en un clic à quoi ressemble un site en responsive design sur de nombreux terminaux, qui vont du smartphone Android de base en passant par l’iPhone, différentes tablettes et même des écrans de télévision.

Ma préférence va à Responsinator, simple et rapide, mais si vous voulez plus de choix dans les écrans, jetez donc un oeil à l’outil Screenfly de Quirktools. De son côté, Responsive de Matt Kersley est plus basique, mais permet de voir plusieurs écrans en un seul coup d’œil.

Je pense que la prochaine version de Presse-citron, prévue à la fin du premier semestre 2013, sera responsive, mais je n’en suis pas encore sûr à 100%, car si cette méthode est séduisante et comporte de nombreux avantages, je n’oublie pas aussi qu’elle a aussi des inconvénients, et qu’elle ne constitue pas une panacée universelle.

(source)


Nos dernières vidéos

44 commentaires

  1. J’ai testé aussi avec Responsinator franchement simple d’utilisation et pour le coup on voit directement ce que ça fait graphiquement, je le bookmark on sait jamais 🙂
    Je ne pensais pas que le responsive design pouvait avoir des éléments négatifs, merci à Marie pour les petites précisions

  2. « ne constitue pas une panacée universelle. » Joli pléonasme, Eric 😉

    Merci en tout cas pour le dernier, je ne le connaissais pas. Mais ma préférence va également vers Responsinator.

  3. Sinon, pour les personnes sous Chrome (et probablement Firefox), il existe l’extension Web Developer. D’un simple clic, les différentes versions sont affichées. Bref, un outil indispensable pour tester son site.

  4. Autrement il y a une fonctionnalité directement intégré dans Firefox. Il suffit de faire ectrl + maj + M » sur un onglet. Vous pourrez alors choisir la taille de l’écran ainsi que l’orientation. Très pratique.

  5. Petit inconvénient : il faut que le site testé soit en ligne, et donc accessible, ce qui n’est pas forcément le cas lorsque l’on est en phase de développement.

    Pour ma part, j’utilise la célèbre barre « Web Developper », une indispensable extension de Firefox.

    Il suffit de cliquer sur l’option « Redimmensioner > Voir les modèles adaptatifs », et hop !

    Les dimensions sont personnalisables, donc on peut se créer autant de gabarits que l’on veut…

  6. Ces sites sont pratiques mais ne peuvent remplacer des émulateurs ou des tests sur des machines physiques car ces services ne font peut-être pas la différence entre les pixels physiques et les pixels dits « CSS » (les pixels que pensent avoir le navigateur mobile), sans compter une dernière variable : le viewport !

  7. Pingback: Webdesign | Pearltrees

  8. Pingback: cybercinsommateur | Pearltrees

  9. Pingback: Responsive design : tester facilement votre site sans émulateur | Web Developpement Tool | Scoop.it

  10. Pingback: Responsive design : tester facilement votre site sans émulateur | Veille systo | Scoop.it

  11. J’avoue que je ne connaissais pas responsinator et qu’il est plutôt pas mal pour avoir une ordre de grandeur des différents appareils.
    Un petit dernier qui n’a pas encore été cité : http://responsive.is
    Globalement ce sont tous des bons outils à garder sous le coude lors d’un développement d’un webdesign responsive.

  12. Pingback: Responsive design : tester facilement votre site sans émulateur | Luis Gomes | Scoop.it

  13. Pingback: Responsive design : tester facilement votre site sans émulateur | web2Partner | Scoop.it

  14. Je découvre Responsinator, excellent service. Le design réactif va devenir incontournable avec l’explosion de l’utilisation des téléphones intelligents et des tablettes numériques.

  15. Merci pour cette liste intéressante, car on ne peut plus ignorer aujourd’hui le responsive design tant la multiplication des petits écrans est grande ces derniers temps. Cependant il faut espérer que ce nouveau phénomène ne va pas tirer vers le bas la qualité générale du web design pour s’adapter à ces petits formats. Il aurait été peut-être préférable de la part des constructeurs de smartphones de trouver des astuces pour hisser leurs modèles vers le web design actuel…

  16. Contrairement à un site classique, nous avons une boutique en ligne en responsive design. C’est un peu plus lourd à gérer question développement car les enjeux au niveau de l’utilisateur doivent être bien calculé: affichage des galeries, zoom photo article, présentation du panier.
    Responsinator est en tout cas un très bel outil en tout cas, très complet. Ces types de sites se limitent trop généralement à l’affichage classique Iphone / Ipad sans aller plus loin.

  17. Pingback: Nouvelles du front #3 | Coffee & Cigarettes

  18. Vraiment génial! Cette solution ne remplace pas un simulateur iPhone comme iOS de toute façon, mais elle est vraiment intéressante pour avoir un rapide coup d’œil sur de nombreuses résolutions.

  19. Pingback: Design | Pearltrees

Répondre