Ergonomie, Rails et Architecture de l'information web (2.0)

Le groupe de travail sur les terminaux mobiles du W3C vient de mettre en place une série de tests automatisés à la manière des tests ACID.

Les résultats des tests sont plutôt évidents à comprendre : un carré vert et ça passe, un carré rouge, et c’est l’échec.

Si comme moi vous n’êtes pas la personne la mieux organisée du monde, mais que vous vous soignez, les méthodes à la Getting Things Done n’ont plus aucun secret pour vous, et vous êtes forcément à l’affût des dernières nouveautés dans les outils d’aide à la productivité.
Le dernier né se nomme Evernote, vient d’ouvrir en beta privée, et se présente comme le must have du carnet de notes en ligne. On veut bien les croire vues les fonctionnalités proposées, et la possibilité de publier depuis absolument partout : email, client lourd Mac, Windows et Linux, navigateur, iPhone ou Windows Mobile.

Avant de vous offrir 15 invitations, je vous propose un panorama complet de la chose.

Hier s’est tenu au Cirque d’Hiver de Paris le premier Mobile Web Camp, un événement de type Barcamp organisé autour du web sur terminaux mobiles. Un grand succès du point de vue de l’organisation, puisque l’événement a rassemblé près de 150 personnes et une dizaine de gros sponsors. Une journée très intéressante, avec du très bon, et du catastrophique, que l’on pourrait résumer par les technologies sont là, mais ça ne sert à rien de vouloir les vendre des mille et des cent tant que les usages ne sont pas là.

Beaucoup, beaucoup beaucoup trop de bullshit dans cette journée, avec un petit relent de tonight we're gonna party like it's 1997, dont je retiendrai le magistral s’il vous plaît, networkez plus bas, version 2007 du je vous demande de vous arrêter, lui-même remise au goût du jour de l’indémodable vos gueules, on ne s’entend plus. Et comme d’habitude, les conversations en petits groupes furent beaucoup plus intéressantes que les séances officielles.

En prenant un verre réparateur au Frog de la rue Saint Denis, je n’ai pas pu m’empêcher de remarquer l’énigmatique mention “TextoPint” qui barrait la poitrine généreuse de serveuses tout aussi accortes. Micropaiement des boissons par SMS ou commande au bar depuis mon téléphone portable, qu’en était-il vraiment ?

Renseignements pris, TextoPint représente l’exemple parfait d’une alliance entre Internet, téléphonie mobile, et soirées web 2.0, je parle bien sûre de l’User Generated Binouze, ou UGB.

Le principe est on ne peut plus simple. Vous commandez votre boissons en ligne sur le site TextoPint à l’aide du wifi gracieusement mis à votre disposition par le bar, en indiquant le numéro de portable de la personne à qui vous souhaitez l’offrir, au hasard +33662191337. Vous réglez en ligne par paiement sécurisé tout en profitant de la pinte offerte pour chaque boisson achetée. L’heureux destinataire reçoit un SMS au +33662191337 avec un code unique qui lui permet d’aller au bar retirer son dû. Sympa non (surtout la pinte gratuite pour chaque boisson offerte au +33662191337) ?

Évidemment, malgré la pinte gratuite (offerte pour chaque SMS envoyée via TextoPint au +33662191337), le système reste très largement perfectible. Il lui manque notamment cet aspect social sooooo web2.0. Le pub pourrait ainsi proposer à tous ses clients d’afficher leur numéro de portable sur eux afin de pouvoir se faire offrir des verres par de charmants inconnus. La petite brune à la table d’à côté aurait ainsi pu savourer un sex on the beach pendant que je m’enfilais la pinte offerte pour tout râteau acheté.

Ce billet du vendredi soir était sponsorisé par la ligue de tempéHIC… rance

Je rentre à l’instant des onzièmes lundis de la mobilité, organisés conjointement par la FING et Silicon Sentier, un événement toujours intéressant pour échanger autour du web, de la mobilité, et du web mobile, évidemment.

Au programme, du bon, du moins bon, et (malheureusement), du très décevant.

La palme de la soirée revient au champagne de la RATP, aussi bien par la quantité que par la qualité, puisqu’il en restait encore largement assez pour tout le monde à 22 heures.

Une fois de plus, on s’aperçoit que le principal domaine d’intérêt en ce qui concerne les application des téléphones mobiles revient au domaine de la santé. Hippocad est une société proposant une combinaison des cartes RFID et des téléphones mobiles dans le but de garantir un suivi qualité des hospitalisations à domicile. L’idée de base est tout sauf mauvaise, et ce domaine d’applications me ferait presque regretter mes réserves sur le sujet du RFID.

Orange nous a présenté Pikeo, une plate-forme de publication de photos à partir de téléphones mobiles proposant le geotagging des images. Je n’ai pas vraiment compris l’innovation proposée par rapport à un Flickr, qui offre les mêmes fonctionnalités, mais comme c’est français, ça doit forcément être bien…

Enfin, Xavier Dalloz a tenté de nous montrer les grandes tendances du dernier CES de Las Vegas. Au risque de me faire traiter de mauvaise langue, je n’ai retenu que 3 choses de ses 8 minutes d’exposé :

1. L’essentiel du speech a consisté en des annonces de résumés.
2. Les chinois sont partout.
3. L’exposition prenait la superficie de 10 terrains de football.

Sinon, oui, le champagne était bon, la vue excellente pour prendre quelques photos, et les gens avec qui j’ai discuté sympathiques et intéressants.

• Samedi, atelier Google Map.
• Jeudi, séminaire sur le Web Mobile
• Vendredi, conférence Paris on Rails

Le week-end commençant, ne vous étonnez donc pas de me voir arriver lundi avec une killer app en Rails utilisant la Google Map API à destination des PDA et téléphones mobiles.

L’initiative WMI W3C organisait aujourd’hui un séminaire d’une demi journée consacré au web sur les appareils mobiles, PDA et téléphone portables. Au programme, état des lieux, bonnes pratiques de création de sites à destination de ces outils, problèmes à résoudre à perspectives.

Quelques chiffres sur le web mobile.

• 28% des téléphones mobiles ont accès à Internet.
• 10% d’entre eux l’utilisent vraiment régulièrement.
• 41% des utilisateurs se déclarent insatisfaits par les sites à leur disposition.
• 3,2 millions de personnes ont utilisé leur téléphone mobile ou leur PDA afin d’accéder au web lors du mois de juillet 2006.
• Plus de 80% de la population mondiale est sous couverture GSM.
• 2 milliards d’êtres humains disposent aujourd’hui d’un téléphone mobile, ce nombre aura doublé dans 4 ans.

Selon Bango, durant les 18 derniers mois :

• Le nombre d’utilisateurs identifiables a été multiplié par 2,6.
• La durée moyenne des visites sur le web a été multiplié par 1.38.
• Le nombre d’utilisateurs redirigés d’un site web “normal” vers un site web pour mobile a été multiplié par 45.
• Le nombre d’utilisateurs étant arrivé sur un site mobile par SMS a crû de 140%. Ceci est du au fait que les claviers des appareils existants se prêtent mal à la saisie d’une URL.
• Le nombre de terminaux différents a décru de 58%.

De bonnes pratiques de développement sur mobiles.

• Concevez vos sites pour une résolution de 120*120 pixels.
• Limitez vos pages à 20ko, images comprises.
• Utilisez de préférence des images au format .gif et .jpg.
• Préférez un encodage en UTF-8.
• Utilisez du XHTML basic.

Et retenez ces 10 principes de développement, qui résument les 60 points des “best practices” émises par le W3C :

1. Faites vos sites pour un web unique (mobile et non mobile).
2. Conformez-vous aux standards du web.
3. Banissez les frames, les layouts basés sur les tables et les gifs transparents.
4. Optimisez la navigation.
5. Pensez aux utilisateurs en déplacement.
6. Faites attention aux éléments graphiques et aux couleurs utilisées. Préférez un contraste important entre le fond et les couleurs.
7. Faites de petites pages, utilisez de petites images.
8. Aidez les input utilisateurs.
9. Économisez la bande passante.
10. Ne vous reposez pas sur le javascript et les cookies.

Notez que ces recommandations se basent sur les critères d’accessibilité du WAI. Cela ne garantit pas pour autant que les contenus produits sur les mobiles seront 100% accessibles aux déficients visuels ou aux aveugles.

Le navigateur mobile idéal

Michael Smith nous présente la vision d’un navigateur mobile idéal selon Opéra.

Un bon navigateur mobile devrait pouvoir :

• Reformater un texte (même disposé sur plusieurs colonnes) en une seule afin d’éviter le scrolling horizontal.
• Redimensionner une image à la taille de l’écran utilisé, pour les mêmes raisons qu’évoquées ci-dessous.
• Proposer un mode “desktop”, c’est à afficher le site tel qu’il apparaîtrait sur un navigateur traditionnel.

Michael considère ces critères comme minimaux et souhaiterait aussi voir les navigateurs mobiles pouvoir :

• Réduire, ou faire disparaître (expand / collapse) les longues listes de liens généralement utilisées pour la navigation, et qui empêchent un accès rapide au contenu.
• Découper les grosses pages en pages de taille plus raisonnable (autour de 10ko) en suivant leur sémantique structurelle afin de s’adapter à la fois aux écrans et aux limitations de mémoire de ces outils.

Et là encore, il considère que c’est le minimum.

Je rejoins tout à fait la position de Mike. La très grande majorité des sites web n’offriront jamais de version dédiée aux mobiles. L’adaptation des contenus doit donc se faire coté navigateurs quand la feuille de style “handhelds” n’est pas disponible. En supprimant la feuille de style normale et appliquant une découpe aux pages trop longues, on obtient des sites utilisables.

Et Michael d’en rajouter une couche à propos du navigateur idéal qu’il verrait bien :

• Avoir une API de scripting permettant de détecter et utiliser les fonctionnalités des appareils (comme le GPS).
• Ce qui permettrait de créer des applications web pour les services géo localisés.

Problèmes à résoudre

• Il existe plus de 200 outils mobiles différents.
• Certains utilisent du XHTML 1.1, d’autres du XHTML basique, d’autres du xHTML…
• Aucun n’a le même support de CSS que le voisin.
• Certains supportent le javascript et les cookies, d’autres non.

Aujourd’hui, la solution utilisée est de formater la page en fonction du device utilisé : menu déroulant ou cases à cocher ? Puis d’envoyer des pages générées dans le bon langage. Autant dire que seuls les plus gros peuvent se l’offrir, et le contenu créé par les utilisateurs est fort peu disponible sur le web mobile.

On voit pourtant apparaître des outils de blogging, de partage de photos… les réseaux sociaux sont très actifs dans la téléphonie mobile, et on les comprends. Quoi de plus communiquant qu’un téléphone ou un PDA ?

Perspectives

Le web mobile est probablement l’avenir des pays en voie de développement, principalement pour les services comme :

• Les services gouvernementaux.
• L’éducation.
• La santé.
• La banque.
• Les affaires.

Quelques chiffres :

• Inde : taux de pénétration des PC : 2%, stable, contre 11% pour les téléphones mobiles, avec une croissance de 47% par an.
• Chine : taux de pénétration des PC : 8%, contre 30% pour les téléphones mobiles.
• Maroc : 4 lignes fixes pour 100 habitants (chiffre inchangé depuis 1995), contre 24 téléphones mobiles.

L’utilisation des SMS pour accéder à tous ces services explose dans les pays en développement.

Conclusion

Les présentations des intervenants sont accesibles sur le site du séminaire.

La pente est forte, mais la route est longue, alors au travail !

Je vous parlais ce matin de développement web à destination des terminaux mobiles, et cela tombe bien, puisque le W3C Mobile Web Seminar se tiendra à Paris le 16 novembre prochain, de 9 heures à 13h30 à l’Entrepôt, 7-9 rue Francis de Pressensé 75014 Paris.

Cameron Moll qui publie le blog Authentic Boredom vient d’annoncer la sortie de Mobile Web Design, un ouvrage sur le développement de sites web pour terminaux mobiles, c’est à dire principalement pour PDA et téléphones portables.

Le site officiel dit :