Quelques recettes pour (tester) sa stratégie mobile [1]

Tout va trop vite : iPhone, tablettes, Android, Kindle, Ebooks, Panda, Html5, Timeline(s), “j’aime” etc.
Difficile d‘être présent sur tous les fronts ? Quitte à choisir je prendrai le tactile (plus ou moins) mobile.
C’est une tendance forte. Les analystes américains, appuyés par quelques chiffres récents démontrent que tout comme les ordinateurs portables ont dépassé les ventes d’ordinateurs de bureau, les écrans tactiles vont monopoliser de plus en plus le temps de navigation sur internet d’ici quelques petites années.

Sur le marché des tablettes et des smartphones à écrans tactiles (multitouch) chacun essayer de se distinguer en incurvant la coque, augmentant l‘écran, multipliant les processeurs, décuplant l’autonomie. Le fait est qu’aujourd’hui ces différences conduisent à une multiplication des problèmes tant du côté de la bonne stratégie à adopter (applications natives VS web applications) que du recettage à opérer pour être livré conformément à la commande.

Tout ce qui est e-promotion, e-information ou e-reservation peut-être proposé à travers une expérience tactile ou non, mobile ou non, en mode portrait ou paysage…
Pour anticiper la nécessaire compatibilité avec l’ensemble de la chaîne, il convient de penser multi-plateforme ou simplement “Responsive Layout” (Web Design Réactif). L’idée est de se baser sur une seule structure de site plutôt que d’une grappe de sites (façon mini-sites). Les développements initiaux prévoient que de manière élastique le contenu et la charte d’un site s’adaptent au type d‘écran / de support de consultation.
On imagine facilement le principe : 3 colonnes en largeur capables de s‘élargir ou de s’empiler en fonction de la taille d‘écran. Regardez ce site pour visualiser ce que ça donne : http://mediaqueri.es/

L’interaction avec le doigt étant différente de celle de la souris (le paradoxe des tablettes : écrans plus petits mais boutons plus gros !) et le mode portrait n’existant pas sur un ordinateur de bureau, à l‘élasticité des pages web, s’ajoute aujourd’hui les “media queries”. Le design réactif prend alors en compte l’orientation et le mode d’interaction autorisé par la machine.
Les medias queries CSS mises au point par le W3C sont disponibles en CSS3 (les fameuses feuilles de styles qui en CSS2 permettaient déjà de distinguer le fond et la forme et faire par exemple du pseudo responsive layout pour les imprimantes ou les petits écrans génériques).

Mais comment vérifier tout ça ? Il existe quelques outils plus où moins compliqués à installer qui évitent de s‘équiper (trop) en nouveaux gadgets :)

- Opéra mini Emulator : C’est un très bon outil qui s’installe sur votre ordinateur. Il faudra faire un profil d’appareil (résolution, orientation etc.) et l‘émulateur lance l’affichage de la page web de votre choix dans le profil d‘écran créé. Attention, comme pour le web normale, le rendu d’Opéra n’est pas celui du navigateur natif.

- Safari possède un mode développeur à activer dans les préférence. Ensuite vous aurez la possibilité de faire passer votre navigateur pour un ipad ou un iphone : c’est l’idéal pour tester les media queries ou les redirections automatiques.

- Firefox mobile (disponible sous windows phone et android) possède une version “ordinateur de bureau” : http://www.mozilla.org/fr/mobile/. Le rendu des pages se fera avec le moteur de firefox mobile.

- Pour aller plus loin avec iOS, il faudra installer les outils pour développeurs (gratuits) qui intègrent un simulateur iPad et iPhone : gestion du multitouch, orientation de l‘écran et simulation du rendu.

- Pour se fabriquer des simulateurs Android, le plus facile sera de passer par Eclipse et le SDK officiel Android. Tout sera réglable, fonctionnalités de l’appareil, mémoire, taille d‘écran etc.

- Enfin, Chrome permet aussi de se rendre compte des sites html5 développés pour mobiles car il a une intégration très poussée du html5 (notamment la géolocalisation).

Pour tester les applications, sans appareils ça sera bien plus difficile…

Je pense que le “Responsive Layout” est avant tout une stratégie à imaginer pour un site portail de destination : un site, une stratégie SEO, un seul support à promouvoir etc. Les grands du web s’y sont déjà mis (Amazon, Google…).

Les sites dédiés mobiles ne sont pas à l’opposé, ils entrent dans une autre stratégie, celle de la mobilité et des thématiques.

tags : html 5, ipad, mtourisme, tactile