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)

Invité
Camille
6 février 2013

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

Invité
6 février 2013

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 !

Invité
6 février 2013

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.

Invité
6 février 2013

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

Invité
Hadrien
6 février 2013

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 !

Membre
tatsu
6 février 2013

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

Invité
6 février 2013

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

Invité
6 février 2013

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

Invité
6 février 2013

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.

Invité
6 février 2013

Pas mal ;)

 
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