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.

Devant la déferlante des détournements de couvertures de Martine – phénomène qui n’a rien de nouveau mais qui semble avoir pris une ampleur particulière depuis quelques semaines – je n’ai pas pu m’empêcher d’accommoder l’héroïne des enfants sages à la sauce des bonnes pratiques du web.

Les standards du web expliqués à ma mère

Ma mère utilise un ordinateur sous Windows Millenium “le seul avec lequel je n’ai jamais eu de problèmes”, appelle une unité centrale un “moteur” car ça fait du bruit et c’est ce qui fait propulse la machine, et a depuis longtemps oublié sa propre adresse courriel peu peu qu’elle l’ait jamais connu. Le jour où elle m’a demandé de lui expliquer ce qu’étaient ces fameux standards du web dont je parlais si régulièrement et qui avaient l’air tellement importants, je savais que la partie était tout sauf gagnée.

– Ces standards du web, c’est quoi ?
– Eh bien, c’est un code de bonne conduite pour créer des sites web qui ont la même apparence sous tous les navigateurs du marché.
– Ah, parce qu’il y a plusieurs navigateurs ? Je ne connais qu’Internet Explorer.
– Oui, il y en a tout un tas : Firefox, Netscape, Flock, Opéra…
– Et ça sert à quoi d’en avoir autant, ce ne serait pas plus simple de n’en avoir qu’un seul ?
– Hmmm… peut-être, si. Au fait, pourquoi roulez-vous dans une Clio verte ?
– Eh bien parce que c’est une bonne voiture, et qu’elle me plaît bien.
– Ce ne serait pas plus simple que tout le monde roule en Golf diesel bleue ? Plus de problèmes de pièces détachées, un seul type d’essence à la pompe… le bonheur quoi.
– Et laisser à une entreprise allemande le monopole de l’automobile en France ?
– Ben voilà, vous avez compris.
– Quel est le navigateur le plus utilisé ?
– Internet Explorer, avec 90% de parts de marché (la conversation est assez ancienne, ndlr).
– Et Internet Explorer suit ce code de bonne conduite ?
– Non, pas vraiment. En fait il ne suit que ce qu’il veut.
– Alors pourquoi parler de “standards”, s’ils ne sont pas suivis pas 90% des utilisateurs ?
– C’est que les standards du web n’ont pas valeur normative.
– On ne peut donc pas parler de norme. Dans ce cas, à quoi servent-ils ?
– Vous connaissez les normes ISO ? La norme ISO9002 par exemple.
– Oui, prend ta vieille mère pour une imbécile, je ne te dirai rien.
– L’institut ISO part d’une implémentation pour définir une norme. Le W3C définit des codes de bonne conduite à priori pour que les navigateurs puissent s’y conformer dans le futur.
– Le W3C ?
– Oui, une organisation indépendante composée de grands noms de l’industrie informatique. Elle élabore les préconisations que l’on appelle les standards du web.
– Et qui les rédige ?
– Des groupes de travail. L’activité du W3C va bien au delà de l’unification du rendu des pages web.
– Et Microsoft en fait partie ?
– Oui.
– Donc, si j’ai bien compris, les standards du web sont directives à valeur non normatives créées par des sociétés qui ne les appliquent pas dans leur propre produit, produit qui se trouve de fait être le navigateur standard sur le web. C’est bien ça ?
– En quelque sorte, oui…
– Eh beh, nous voilà biens…

Note : cette conversation a été à peine déformée, dans un soucis de concision et de clarification.

Histoire de bien commencer le mois d’avril, une liste des prochains événements web auxquels vous pourrez me rencontrer pour échanger des points de vue ou des cartes de visite autour d’un verre, d’un déjeuner ou d’un dîner.

Dès demain, les Mobile Monday France consacreront leur thématique mensuelle au paiement par terminal mobile. J’avais déjà vu quelques exemples de ce qu’il était capable de faire lors du séminaire du W3C consacré à la mobilité, et le M-Paiement risque fort d’être le prochain eldorado financier à ne pas manquer. Cela se passe lundi 2 avril, de 18h45 à minuit chez chez BETC - Euro RSCG, 85-87 rue du Faubourg Saint Martin, 75010 Paris. L’entrée est gratuite mais l’inscription est obligatoire.

Ça, c’était mort vu mon programme de la semaine. Mais c’était certainement très bien.

Jeudi, les Designers Interactifs organisent leur troisième soirée à thème autour des futurs défis à relever par les designers. Celle-ci sera animée par Frédéric Cavazza et Anuhi Lou qui nous parleront de l’ergonomie visuelle du web de demain. Cela se passera jeudi 5 avril, de 19h30 à 22h00 chez Parsons, 14 rue Letellier, 75015 Paris. L’entrée est gratuite mais l’inscription est obligatoire.

Que vous ne supportiez plus de recevoir des mails en HTML illisibles et mal formatés, ou que vous peiniez à créer des mailings visuellement attirant et lisibles par n’importe quel client, l’atelier mail et HTML du W3C est fait pour vous. Les thèmes abordés tourneront autour de la sécurité, l’interopérabilité, et la publication de contenus HTML pour l’emailing. Cela se passera le 24 mai 2007 de 8h30 à 18h00 à l’ENST, 46, rue Barrault, 75013 Paris. Si vous souhaitez intervenir, un call for papers est ouvert jusqu’au 21 avril. L’entrée est gratuite, et l’inscription est facultative bien que fortement recommandée.

Paris Web c’est reparti ! La seconde édition de cette conférence à laquelle je n’avais malheureusement pas pu me rendre l’année dernière aura pour thématique Accessibilité, qualité et design : comment concilier ces trois approches dans une optique de production de sites web, avec les contraintes et les exigences liées à des processus « industriels » ?. Si vous souhaitez intervenir, vous pouvez soumettre vos propositions jusqu’au 27 avril prochain. L’événement se déroulera du 15 au 17 novembre 2007, lieu non précisé avec deux jours consacrés aux conférences et une journée d’ateliers. L’inscription est payante et obligatoire.

Certains jours, je regrette un peu que ne pas parler Hollandais me prive de la lecture de leur nouvelle loi sur l’accessibilité des sites web gouvernementaux. Je me contenterai donc de reprendre les principaux points de ce billet de Quircksmode qui en recense les principaux points :

• Uniquement du XHTML 1.0 ou du HTML 4.01 valide.
• HTML sémantique, CSS et séparation claire entre présentation et structure.
• Amélioration progressive (on commence par un truc qui marche partout, et ensuite on rajoute des trucs cliqua convi).
• Utilisation du DOM W3C en lieu et place du DOM Microsoft.
• Les class et id doivent avoir une signification appropriée.
• Les descriptions alternatives des images doivent toutes avoir du sens

Mais aussi :

• Les scripts appliqués à des liens doivent étendre leurs fonctionnalités (à quand des pop-ups accessibles ?)
• L’utilisation de scripts comme seule manière de récupérer une information est interdite.
• Supprimer le rectangle de focus des liens est interdit.
• Toute information offerte dans un format fermé doit aussi être proposée dans un format ouvert (j’en connais un à qui ça va faire plaisir).
• La loi définit la valeur sémantique de certains éléments HTML !!!

Ce qui serait intéressant, c’est de voir cette loi appliquée dans notre beau pays non plus pour les sites gouvernementaux, mais pour l’ensemble des sites d’entreprise, amendes à la clé puisqu’il semblerait que seule la répression fasse avancer les choses. Ces guides ne sont en effet pas particulièrement contraignantes, et auraient au moins pour mérite d’harmoniser un peu le web français. Je crois cependant que je vais m’en inspirer pour la ligne de conduite technique de l’ensemble des projet que je vais conduire chez Actualys, tant cela me semble une bonne base de travail.

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 !

Le mois de novembre va être particulièrement chargé en termes de rencontres consacrées au web et aux nouvelles technologies, principalement durant les quinze prochains jours. Si vous vous trouvez à Paris, je serai ravi de vous rencontrer à l’occasion des événements suivants :

• À l’apéro organisé en marge du forum PHP, le 9 novembre à partir de 20 heures au pub Kitty O’Sheas, 10 rue des Capucines, 75002 Paris.
• Au septième BarCamp Paris, le 11 novembre de 14 heures à 20 heures, 38 avenue de l’Opéra 75002 Paris, dans les locaux de Google. J’y présenterai les Microformats à travers un cas d’usage précis, bien que n’ayant pas encore décidé lequel.
• Au séminaire du W3C sur le web mobile, le 16 novembre de 9 heures à 13 heures 30 à l’Entrepot, 7-9 rue Francis de Pressensé, 75014 Paris.
• Aux rencontres Paris on Rails le 17 novembre de 9 heures à 18 heures à la Tour Descartes à la Défense.

Si avec tout ça, vous parvenez encore à m’éviter, c’est clairement que vous ne voulez pas me voir.

[edit]
À l’occasion du BarCamp 7, je parlerai à priori de l’utilisation des Microformats et de la publication des données personnelles dans le cadre de l’optimisation de l’efficacité des réseaux sociaux. On dirait un sujet de thèse, ça pète hein ?

Plus sérieusement, pour ceux que ça intéresse et qui ne pourraient pas venir, je mettrai la présentation en ligne… si je trouve le temps de la faire.

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.

Si vous utilisez un navigateur moderne, par exemple Mozilla Firefox ou même Flock, vous lisez actuellement un site en XHTML 1.1 servi avec le bon type mime, soit application/xhtml+xml. Les utilisateurs de navigateurs archaïques se voient servir du XHTML 1.0 strict, tout de même, avec le type mime text/html.

Je voulais vous parler de cet excellent article de Tantek Celik depuis plusieurs jours, mais entre la refonte organisationnelle et graphique de ce site – la seconde ne me satisfaisant pas encore pleinement – et un week-end en province particulièrement chargé, j’ai du délaisser quelque peu l’écriture.

De nombreux articles exposent les mille et une bonnes raisons de passer ses sites en XHTML, que ce soit en s’appuyant sur l’esprit – respect des standards, accessibilité – ou sur la lettre – à travers les outils de validation mis en place par différents organismes. La plupart d’entre eux sont excellents, mais si la réponse au “pourquoi ?”