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)

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

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

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

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

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

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

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

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

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

  27. Pingback: Design | Pearltrees

Lire les articles précédents :
Quelques applications Ă  voir sur BlackBerry 10

Lors de la conférence BlackBerry Jam Europe qui se déroule actuellement à Amsterdam, la firme canadienne a mis en avant...

Fermer