Simulez votre site sur téléphones mobiles avec ProtoFluid

News internet du 20 juil 2010

Du fait de la pluralité des plateformes et des différences des moteurs de rendus, il n’est pas toujours aisé de tester son site web sur le media mobile. Sans compter le coût d’acquisition du matériel. La plupart des émulateurs en ligne se contentent malheureusement de redimensionner la page sans tenir compte des spécificités inhérentes à chaque terminal : iphonetester.com, l’extension Webdeveloper, viewlike.us,…

En dehors de l’installation des divers SDK officiels des constructeurs ou de l’excellente version d’Opera Mobile installable sur un système d’exploitation classique (Windows, Mac OS X…), point de salut pour visualiser ses pages dans un environnement proche des conditions réelles.

ProtoFluid est une application en ligne permettant de simuler au mieux l’affichage de votre site web ou d’une url locale sur divers terminaux mobiles :

Motorola Droid
iPhone/iPod
iPad
Google Nexus One

Simple et efficace pour un test rapide

Il suffit de renseigner l’URL à visionner ainsi que la plate-forme désirée, et sa résolution si vous souhaitez la modifier. Le résultat apparaît dans une fenêtre modale (lightbox). Il vous est ensuite possible de modifier l’orientation (portrait ou paysage) puis de rafraîchir votre résultat.

Pour l’avoir testé sur quelques uns de nos sites web dont les feuilles de styles prennent en charge le média mobile (meta tag “viewport”, CSS media queries), tels que alsacreations.fr et ie7nomore.com, je ne peux qu’en conclure que l’outil se rapproche beaucoup plus du résultat escompté que ses congénères, même si le rendu reste tributaire du navigateur utilisé pour consulter le site ProtoFluid car la simulation ne se fait qu’au travers d’un élément iframe et de JavaScript. Il faudra donc éviter d’y accéder avec Internet Explorer.

Alsacreations sur iPhone

Viewport et Media Queries CSS3

Il est possible de définir la résolution du terminal à l’aide du meta tag viewport reconnu par Safari, Webkit et Opera à l’heure actuelle. Ce meta tag est généralement un bon point de départ pour adapter harmonieusement un design sur le média mobile. ProtoFluid prend en compte les informations véhiculées via ce meta tag.

Les Media Queries sont interprétées sur les navigateurs les connaissant, accompagnées des propriétés width, max-width, max-device-width ainsi que orientation (portrait ou landscape).

Votre attention : Par contre, dans le cas ou vous testeriez sur un écran d’ordinateur classique, vous devrez accompagner votre règle media query max-device-width par un complément max-width sous peine de ne pas être pris en compte puisque votre écran de bureau ne peut pas être considéré comme un périphérique d’affichage de taille réduite :

@media only screen and (max-device-width:640px), only screen and (max-width:640px) {
   body  {width: auto}
}

Le marché du téléphone intelligent est en plein boom et chaque jour naissent de nouvelles ressources et outils pratiques pour faciliter le développement ou les tests sur le média mobile. ProtoFluid n’est pas parfait mais une nouvelle ressource verra peut-être le jour pour des simulations encore plus pratiques et fidèles.

Voir : L’équipe de développement, Optic Swerve, est en train de plancher sur une nouvelle version (1.1) de leur outil, vous pouvez suivre l’évolution du projet sur leur compte Twitter.