Aller directement au contenu

Quels outils pour pré-visualiser votre site responsive ?

10/09/2013
2

Durant la conception d'interface responsive (permettant au site de s'adaper aux différents écrans : tablette, mobile et ordinateur), il est nécessaire de tester le résultat sur les différents terminaux afin d'éviter de mauvaises surprises.
Le Responsive WebDesign connait un fort essor ces derniers temps (Voir notre article sur la conception pour le responsive webdesign), de nombreux outils d'émulation proposent de tester le rendu de ces sites dans un navigateur sur ordinateur. Cela permet d’éviter d’avoir à disposition les multiples appareils à résolutions variables : iPhone et iPad retina, tablette Android, smartphone Windows 8 etc.

Dans cet article, nous testerons ces émulateurs pour vous.

  1. Quels sont les principaux outils gratuits permettant de simuler l’affichage sur tablettes et mobiles ?
  2. Lequel de ces outils convient à votre projet responsive ?

Les plus performants

Viewport resizer

viewport resizer

Fidélité des interactions6/10
Fidélité d'affichage des éléments7/10
Ergonomie8/10
Nombre de terminaux proposés6
Visualisation en mode paysageoui
Note moyenne7/10

Viewport resizer obtient les meilleurs résultats en termes de fidélité d'affichage et d'interaction des différents composants du site. Bien que présentant peu de tablettes et smartphones à simuler, il est l'outil idéal pour une simiulation responsive sur les terminaux les plus répandus. Cet outil permet également de personnaliser la taille de l'écran à afficher et de présenter sous forme d'animation le passage entre les différentes résolutions. Par exemple, le passage de la vue tablette à la vue mobile.

Responsinator

Responsinator

Fidélité des interactions6/10
Fidélité d'affichage des éléments5/10
Ergonomie8/10
Nombre de dterminaux proposés6
Visualisation en mode paysageoui
Note moyenne7/10

Responsinator a la particularité de présenter les différents terminaux simulés sur une seule page. Avec son interface très épurée, Responsinator allie performance et confort visuel. Les différentes résolutions responsive sont facilement comparables.

Ipad Peek

Ipadpeek

Fidélité des interactions6/10
Fidélité d'affichage des éléments5/10
Ergonomie7/10
Nombre de terminaux proposés3
Visualisation en mode paysageoui
Note moyenne6/10

Ipad peek simule peu de terminaux mais obtient une bonne note de fidélité des interactions et d'affichage des éléments. 

Iphone tester

Iphonetester

Fidélité des interactions5/10
Fidélité d'affichage des éléments5/10
Ergonomie7/10
Nombre de terminaux proposés1
Visualisation en mode paysagenon
Note moyenne6/10

Créé en 2007 et inspiré du logiciel libre "Iphoney", Iphone tester a été un des premiers émulateurs à proposer un outil gratuit en ligne permettant la visualisation d'un site avec différents appareils. Il obtient de bonnes performances en ce qui concerne le rendu mais a le défaut de ne pas proposer de terminaux tablette et de vue "paysage".

Les plus faciles à utiliser

Viewport resizer

Déjà cité plus haut pour ses performances de rendu visuel, Viewport possède une autre qualité de taille, c'est un « Bookmarklet ». A ce titre, il se présente sous la forme d'un lien dans la barre de favoris. Durant la navigation sur n'importe quel site web, l'activation de ce lien affiche les différents terminaux qu'il est possible de simuler (tablettes ou mobiles). L'outil est donc directement embarqué dans le navigateur. Cette particularité fait de cet outil celui le plus facile à manier puisque l'utilisateur n'a pas à aller sur un autre site pour simuler un site en responsive.

responsive-outil-emulation

Pi responsive

pi responsive

Fidélité des interactions5/10
Fidélité d'affichage des éléments5/10
Ergonomie8/10
Nombre de terminaux proposés10
Visualisation en mode paysageoui
Note moyenne6/10

Pi responsive présente une interface épurée, minimaliste et claire. Cet outil, bien que peu connu, propose de nombreux terminaux à simuler et obtient de bonnes notes de fidélité d'interaction et d'affichage sur tablette comme sur mobile.

Les plus complets

Screenqueri

screenqueri

Fidélité des interactions4/10
Fidélité d'affichage des éléments5/10
Ergonomie8/10
Nombre de terminaux proposés47
Visualisation en mode paysageoui
Note moyenne6/10

Avec ces 47 appareils simulés, Screenqueri est actuellement celui proposant le plus de terminaux. Quasiment toutes les tablettes et mobiles du marché sont présents.

Screenfly

Screenfly

Fidélité des interactions4/10
Fidélité d'affichage des éléments5/10
Ergonomie8/10
Nombre de terminaux proposés27
Visualisation en mode paysageoui
Note moyenne6/10

Très populaire (15 248ème site le plus visité au monde), cet émulateur fait partie d'une liste de 4 outils proposés par QuirkTools et permet de relativemment bien simuler jusqu'à 27 tablettes ou mobiles.

Mobile phone emulator

mobile phone emulator

Fidélité des interactions6/10
Fidélité d'affichage des éléments4/10
Ergonomie7/10
Nombre de terminaux proposés9
Visualisation en mode paysageoui
Note moyenne6/10

Mobile Phone Emulator offre de nombreux réglages fins pour configurer la simulation d'un site responsive.

Conclusion

Viewport Resizer sort gagnant de ce test grâce à sa simplicité d'utilisation et à la fidélité d'affichage sur les différents terminaux.

Cependant, aucun des outils testés n'a pu représenter fidèlement à 100% les sites responsive sélectionnés pour ce test. Que ce soit par l'interaction ou l'affichage des éléments, ces émulateurs ne peuvent apporter qu'un premier aperçu de ce qui est réellement affiché sur les tablettes et mobiles. 

Au delà de l'aperçu rapide des sites responsive obtenus par les émulateurs, une phase de tests utilisateurs est indispensable pour juger l'utilisabilité des interfaces. Ces tests ne peuvent être réalisés que sur les tablettes et mobiles car les intercations tactiles ne pourront pas être testées avec un émulateur.

Pour aller plus loin

Dans notre formation en Ergonomie mobile et tactile nous abordons largement la conception des sites en responsive webdesign.

Par ailleurs, si vous souhaitez être assisté dans la conception d'interface responsive, n'hesitez pas à nous contacter.

2 Commentaires

Laisser un commentaire