Webinaire W3C sur les bonnes pratiques du Web Mobile

Une expérience très réussie, félicitations à Cédric Kiss pour sa présentation ; et un succès logistique admirable. On pouvait entendre l’animateur sur un flux audio, voir en parallèle les diapos en ligne qu’il déclenchait au fur et à mesure, tout en pouvant poser des questions, et ce avec 32 auditeurs.

Cette conférence - qui sera prochainement mise en ligne -, a permis de cerner réellement les problématiques du web mobile, un des domaines ayant le plus fort potentiel d’expansion de l’Internet actuel, mais bien mal connu et bien mal aimé, de par ses importantes contraintes.

Ce qui ressort, pour moi, de cette heure de séminaire, quand au support :

• Il est très difficile d’établir une "configuration" de base sur laquelle partir pour l’élaboration de sites destinés à des outils mobiles, les différences entre appareils sont illustrées par ce bref récapitulatif des capacités de quelques téléphones.

Cependant, on peut considérer une configuration "moyenne" des appareils actuellement en service, qui est bien sûr destinée à évoluer rapidement : 120px de large, pas de JavaScript, des pages de 20ko maximum, et un support des images JPEG et GIF.

• À l’inverse de l’Internet classique, où la démocratisation de l’ADSL rend la contrainte du poids de plus en plus marginale, elle est très importante pour le média portable, car l’accès est en général facturé au poids,
• Il faut accorder une importance à la différence de finalité : l’utilisateur qui visite un site sur son téléphone portable n’a pas le même objectif qu’un visiteur sur son ordinateur de bureau

Mais ce moyen d’accès au Web est à prendre sérieusement en compte, car l’utilisation d’un portable est plus courante que celle d’un ordinateur et étalée sur la journée entière !

En ce qui concerne le développement de sites pour ce média, ce qui nous intéresse :

• Le support de l’UTF-8 peut-être considéré comme acquis
• Il est compliqué de détecter un media mobile, mais on peut essayer de se baser sur l’Agent-Utilisateur et les entêtes transmis par le navigateur
• On doit penser aux mobiles dès la création du site, par exemple lors de l’élaboration des messages d’erreur : un site qui requiert un "Page précédente" au moindre problème n’est pas efficace, c’est lent pour les utilisateurs de téléphones
• Pour les formulaires, préférer autant que possible les <select> aux <input type="text">, et ranger les choix par pertinence pour faciliter la sélection
• Utiliser des <label> pour mettre en évidence la nature des champs
• Les ancres sont utiles, mais provoquent sur certains médias un rechargement complet de la page !
• Pour les pages longues, les diviser peut être une solution ; mais ça comporte selon moi un inconvénient majeur : si on cherche un passage donné, ce n’est pas pratique de devoir visiter les 10 subdivisions de la page pour la trouver, comme il est nécessaire de le faire avec l’adaptation que fait subir Google aux pages visitées à partir du moteur de recherche mobile, que l’on peut constater sur la page Philosophie de Wikipedia
• Le JavaScript peut-être interprété par certains téléphones, mais pas la majorité : il faut le rendre non indispensable et non obstrusif

Quand à la présentation et à l’apparence des sites mobiles :

• On peut s’appuyer sur les CSS media="handled", même si certains appareils interprètent également les feuilles de style media="screen" : j’imagine qu’il faut penser à surcharger les règles CSS
• Il faut absolument limiter la taille des images, pour réduire temps de chargement et coûts
• Si les tableaux fonctionnent bien sur tous les navigateurs classiques, ils sont à proscrire totalement des pages mobiles ! Ils alourdissent sérieusement la page (risquent de provoquer une erreur mémoire chez les périphériques les moins robustes), et sont très mal rendus, de par l’affichage linéaire des téléphones portables.
• Il faut également utiliser les CSS avec parcimonie : des feuilles de style trop longues sont elles aussi susceptibles de causer des problèmes

Cédric a développé le concept du « One Web », qui est de présenter un seul contenu, une seule page, même si elle peut-être adaptée au média ; c’est à dire de ne pas avoir deux sites redondants, un pour les téléphones portables et un pour les ordinateurs, mais un unique, prenant en compte les spécificités des différents moyens d’accès au site. L’utilisation des CSS media="handled" est la pierre angulaire de cette "philosophie", si j’ose dire, mais ne constitue pas le seul paramètre à prendre en compte : les pages doivent également être pensées pour l’utilisateur mobile. Privilégiez les images miniatures avec un lien vers la version originale, pas de contenu susceptible de faire apparaître un ascenseur horizontal, préférez du texte concis et allant droit au but.

Pour ceux qui s’y intéressent, vous pouvez donner vos avis sur le second brouillon de la spécification mobileOK, visant à déterminer les critères d’accessibilité d’un site aux médias portables, et à terme de faire office de "label qualité" pour les utilisateurs.

Si vous désirez tester le rendu de votre site sur un téléphone, il y a des émulateurs de navigateurs pour mobiles, mais ce sont en général ceux des plateformes avancées (Symbian, Windows Mobile, …). Sans avoir besoin d’aller jusque là, on peut se contenter de l’extension Web Developer pour Firefox (finalement, elle a toujours une utilité !), qui propose deux options intéressantes : "Linéariser la page" et "Rendu sur petits écrans", ce qui donne sur le blog d’Aozeo cette image. En situation réelle, et sur un téléphone Nokia interprétant les CSS media="screen" (merci à celui qui a effectué les photos), le résultat est beaucoup moins réjouissant. Pourquoi ? Car le téléphone interprète comme il peut des instructions qui ne lui sont pas destinées, et ça fâche. Mais bientôt, ce blog sera mobileOK, grâce à la création d’une feuille de style "handled" !

Bref, un webinaire très enrichissant, sur un domaine très prometteur et voué à une grande expansion, comme le prouve la décision récente de l’opérateur Ten de rendre l’Internet mobile gratuit et illimité pour ses abonnés. Je serai au rendez-vous pour le prochain !

Réactions

Ajoutez la votre