Tester son site Web sur téléphones mobiles avec ProtoFluid

L'outil en ligne est dessiné pour émuler l'affichage d'un site ou d'une page Web sur divers terminaux mobiles. Il reconnaît les spécifications HTML5 et CSS3.

Du fait de la pluralité des plates-formes et des différences des moteurs de rendus, il n'est pas toujours aisé de tester son site Web sur le média mobile. 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 des constructeurs ou de l'excellente version d'Opera Mobile installable, point de salut pour visualiser ses pages dans un réel environnement de production.

ProtoFluid est une application en ligne permettant véritablement d'émuler l'affichage de votre site Web - ou d'une url locale - sur divers terminaux mobiles et pas uniquement de modifier sa taille.

Simple et efficace

Le principe est simple : il suffit de renseigner l'URL à visionner ainsi que le téléphone mobile désiré, sa résolution si vous souhaitez la modifier. Puis validez. 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 largement customisés pour 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 est tout à fait à la hauteur et parfaitement semblable aux véritables rendus de chaque smartphone testé.

iPhone, iPad, Motorola Droïd et Google Nexus One

Il est possible de définir la résolution du terminal à l'aide du meta tag viewport

La version actuelle de ProtoFluid est capable d'émuler le rendu des téléphones suivants : iPhone3, iPhone4, iPad, Motorola Droïd et Google Nexus One. Tout en proposant des largeurs modifiables dans le cas où vous auriez fixé volontairement la valeur du Viewport.

HTML5 et CSS3

En parfait clone du navigateur, ProtoFluid reconnaît les spécifications HTML5 et CSS3 très récentes, y compris le modèle de boite flexible, les coins arrondis, les préfixes vendeurs (-webkit, -moz, -o), etc. En tout cas, si vous testez sur un navigateur lui-même conforme.

 

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. Comme on peut l'espérer, ProtoFluid prend en compte les informations véhiculées via ce meta tag.

Dans la même veine, ProtoFluid supporte aussi très bien les Media Queries accompagnées des propriétés width, max-width, max-device-width ainsi que orientation (portrait ou landscape).

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 device de taille réduite :

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

 

L'émulateur parfait ?

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 tient ses promesses et ouvre de nouveaux horizons dans ce domaine. Demain, une nouvelle ressource verra peut-être le jour, mais en attendant, ce produit demeure tout à fait judicieux pour vos tests dans la vraie vie.

Notons que l'équipe de développement de ProtoFluid, 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.

Article réalisé par Raphael (Strasbourg) sous licence Creative Commons sur Alsacreations.