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 applispro Responsive design : trois services web pour tester facilement un site sans émulateur

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)

44 commentaires

  1. Dommage que tu n’ai pas parlé de mon préféré : http://responsive.victorcoulon.fr/
    Il permet de rajouter un favori qui affiche une interface directement sur ton site.
    C’est classe, c’est fluide (sous chrome en tout cas) et c’est rapide. :)

    Clique sur le lien au centre de la page pour tester, ça t’évitera de devoir ajouter le favori !

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

  3. tatsu

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

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

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

  6. 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…

  7. patrick

    Une liste à retenir dans tous les cas, reste à savoir comment va évoluer le responsive design dans les mois qui viennent c’est un débat intéressant entre partisans et ses détracteurs !

  8. Pas mal du tout. J’utilise, de mon côté, des bookmarklets qui sont faciles à installer dans n’importe quel navigateur et permettent de tester le design d’un site.

  9. Hadrien : ah ben le tien est bien plus sympa ! Gros plus : la possibilité de rajouter des tailles ! :) Merci beaucoup pour ce lien qui me sera très utile.

  10. 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 !

  11. Pingback: Webdesign | Pearltrees

  12. citron mecanic on

    @ Tom : il y a un numéro hors série de webdesignmag spécial responsive design ( je l’ai seulement feuilleté dans une gare) mais il semble pas mal approfondir la question. Vu à l’achat ici :
    http://shop.oracom.fr/index.ph.....8;Itemid=2

    aussi pour débuter voir Responsive Web design, N°4 de Ethan Marcotte

  13. Pingback: cybercinsommateur | Pearltrees

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

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

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

  17. je suis pas convaincu par le responsive il n’est d’ailleurs que très peu utilisé, il est dur à gérer et mettre en place en plus d’être lourd à charger.

  18. hightom

    Merci Citron Mécanique, tu sembles bien plus sympa que l’Orange du même patronyme

  19. Merci pour la découverte de Responsinator. Je n’en avais pas connaissance.

    D’un point de vue SEO c’est essentiel en plus d’être plus efficace en terme graphique.

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

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

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

  23. 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…

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

  25. Bonjour,

    Merci pour ces trois outils, j’espère passer mon site sous responsive design bientôt, mais vu les changements que ça implique, j’attends un peu avant de me lancer à l’eau !

  26. dwizer

    Mon site n’est vraiment pas bon avoir en petit taille. Il va falloir que je m’y met un peu la dessus.

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

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

  29. Intéressant, les sites indiqués dans les commentaires sont aussi très utiles. +1 pour le bookmarklet de Victor Coulon !

  30. Pingback: Design | Pearltrees