Suivez-nous

Internet

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.

Il y a

le

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)

44 Commentaires

44 Commentaires

  1. Camille

    6 février 2013 at 11 h 47 min

    J’en profite pour vous montrer le mien : http://tools.camillebaronnet.fr/responsive

  2. William Vercken

    6 février 2013 at 11 h 48 min

    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 !

  3. Citron bleu

    6 février 2013 at 12 h 06 min

    Bonjour, merci pour ces liens. J’ai récemment découvert http://screenqueri.es qui offre aussi un bon service pour tester son site sur l’ensemble des terminaux actuels. C’est une solution très complète et fluide.

  4. Steeve

    6 février 2013 at 12 h 14 min

    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

  5. Hadrien

    6 février 2013 at 12 h 26 min

    Exactement la remarque j’allais faire, avec un lien vers un service similaire : http://lab.maltewassermann.com/viewport-resizer/

    Je trouve le bookmaklet encore plus élégant comme solution. De plus cela a l’avantage de pouvoir refresh/tester de manière plus easy, surtout sur un environnement de test en local !

  6. tatsu

    6 février 2013 at 12 h 29 min

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

  7. Oklic

    6 février 2013 at 12 h 30 min

    + 1 pour Emmanuel. Non conforme à ce qui s’affiche sur mon Ipad, mon Iphone ou mon Galaxy S3.

  8. les options

    6 février 2013 at 12 h 34 min

    Merci, même si cela m’a permis de voir que mon site s’affichait mal sur toutes ces petites machines 🙂

  9. Jean-Marie

    6 février 2013 at 12 h 57 min

    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.

  10. kSaMi

    6 février 2013 at 13 h 23 min

    Pas mal 😉

  11. Billy

    6 février 2013 at 14 h 30 min

    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.

  12. Jp

    6 février 2013 at 15 h 05 min

    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…

  13. annuaire professionnel

    6 février 2013 at 16 h 29 min

    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 !

  14. Khelios

    6 février 2013 at 16 h 57 min

    Hello perso j’utilise : http://lab.maltewassermann.com/viewport-resizer/
    un js qui ce bookmark et aussi customisable

  15. christophe

    6 février 2013 at 17 h 52 min

    Avez-vous testé : http://suisjemobile.com/beta/ ?

  16. 4L Trophy 2013

    6 février 2013 at 18 h 14 min

    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.

  17. Eric

    6 février 2013 at 18 h 30 min

    J’ajouterai vos suggestions dans une mise à jour de l’article, merci !

  18. 4L Trophy 2013

    6 février 2013 at 18 h 45 min

    J’en profite pour ajouter le lien vers le bookmarklet dont je parlais tout à l’heure, c’est celui de Victor Coulon, un français oui môsieur 🙂
    http://responsive.victorcoulon.fr/
    Il a d’ailleurs eu droit à un petit article chez Korben pour la peine 😉

  19. William Vercken

    6 février 2013 at 19 h 56 min

    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.

  20. Steven

    6 février 2013 at 19 h 58 min

    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 !

  21. Tom

    6 février 2013 at 22 h 40 min

    Quelqu’un connait-il un bon tuto pour démarrer avec le responsive design ?

  22. Pingback: Webdesign | Pearltrees

  23. citron mecanic

    7 février 2013 at 8 h 40 min

    @ 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.php?page=shop.product_details&flypage=magazine_flypage.tpl&product_id=4638&category_id=76&option=com_virtuemart&Itemid=2

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

  24. Pingback: cybercinsommateur | Pearltrees

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

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

  27. Tony

    7 février 2013 at 10 h 04 min

    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.

  28. kantthoo

    7 février 2013 at 11 h 15 min

    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.

  29. Tom

    7 février 2013 at 11 h 47 min

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

  30. Masterprems

    7 février 2013 at 14 h 33 min

    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.

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

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

  33. Sublimeo

    9 février 2013 at 20 h 36 min

    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.

  34. Web France Graphisme

    13 février 2013 at 10 h 56 min

    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…

  35. elban44

    13 février 2013 at 19 h 07 min

    Un truc pour gagner du temps et éteindre son Mac sans la pénible confirmation : http://elban.fr/eteindre-mac-sans-confirmation/

  36. LTMN

    19 février 2013 at 10 h 33 min

    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.

  37. Agence immobilière (ALS)

    20 février 2013 at 11 h 56 min

    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 !

  38. Paul

    22 février 2013 at 8 h 17 min

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

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

  40. monique

    5 mars 2013 at 12 h 18 min

    Très bon article, félicitations pour le blog

  41. memoire

    11 mai 2013 at 8 h 36 min

    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.

  42. Social media

    14 mai 2013 at 10 h 49 min

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

  43. Achraf

    14 mai 2013 at 16 h 02 min

    J’ai crée un outil de test pour le responsive ici :

    http://www.expert-cms.com/emulator_responsive/emulator_responsive.html

  44. Pingback: Design | Pearltrees

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Dernières news

Les bons plans

Les tests