HTeuMeuLeu

Kevinjohn Gallagher a écrit un chouette article détaillant le débat autour des préfixes -webkit- (rappel) et d’Opera, intitulé « Est-ce que la grosse dame chante pour les préfixes navigateurs ?« . Il a de bonnes propositions pour améliorer la situation :

La première action à prendre est de mettre la pression sur Apple/Google/WebKit pour implémenter les bons standards des propriétés en retirant le support de « -webkit- » lorsque la version non-préfixée est standardisée, et ne pas contourner le processus convenu. Ne vous trompez pas, en favorisant l’utilisation continue de « -webkit- » en dépis de la version non préfixée comme décris dans les spécifications CSS2.1 et CSS3, ce sont ces organisations qui ont donné aux développeurs la permission de ne pas écrire leur code d’une manière standard.

Deuxièmement, nous devons créer un endroit centralisé avec les bonnes informations, avec le bon niveau de détails. Vous et moi savons ce que nous faisons, mais franchement Internet est inondé de désinformation et de personnes contournant les standards dès que ça corresponds à un truc « cool ». Bruce Lawson me rappelait l’existence des Web Standards Curriculum qu’Opera ont ouverts et soumis au W3C; mais ce n’est pas écrit pour un développeur d’aujourd’hui, c’est écrit pour des gens qui sont déjà bien avertis.

Troisièmement, nous avons besoin que les services de validation HTML/CSS marquent le manque de standards comme des erreurs. Si vous avez un préfixe -webkit- et pas la version non préfixée, c’est une erreur. Si vous avez un préfixe -webkit- mais pas la version -moz-, c’est un avertissement (idéallement une erreur). Au fond nous voulons faire du web un meilleur endroit, et ça n’arrivera que si on éduque.

Quatrièmement, arrêtons avec la minification des CSS. Je sais que ça va causer une controverse, mais on ne gagne que quelques Ko et on rends le débuggage de notre code plus difficile pour les gens. Et avant que quelqu’un ne me sorte « l’excuse des données sur mobile », je vous en réfère aux images dans le responsive design, et le fait que des sites mis en avant par des magazines importants atteignent maintenant 5 Mo à télécharger sur un mobile ! Le web a grandit basé sur la capacité des gens à inspecter du code, lire, apprendre et reproduire; revenons en aux bases.

Cinquièmement, nous avons besoin que le CSS Working Group avance plus vite. Foutrement plus vite ! Une partie des cartes de Apple/Google consiste à dire que le CSSWG (et tous les autres groupes de travail impliqués dans CSS et HTML5) sont tellement horriblement lents à standardiser quoi que ce soit que les gens n’ont pas d’orientation claire et unifiée. Cette excuse foireuse ne marchait pas pour Microsoft à l’époque, et elle ne marche pas non plus maintenant; mais ça ne veut pas dire qu’ils ont tort, mais indique juste le niveau de négligence dont ils veulent se décharger.

Enfin, nous devons pointer du doigt et balancer des noms. Aucun d’entre nous n’aiment cette idée, mais il le faut, désolé. C’est la seule façon pour que les gens fassent attention. Prenez le top 10 000 d’Alexa. Prenez le top 500 FTSE. Prendez le top 100 des agences numériques et parcourez les sites qu’elles ont réalisé. Croyez moi, il ne faudra que quelques messages du genre « Les sites réalisés par R/GA ne fonctionnent pas sur 250 millions d’appareils mobiles » et les choses changeront.

Je suis assez d’accord avec l’ensemble de ces points, en particulier le deuxième invitant à éduquer les développeurs web, comme je l’évoquais ici. Le 4ème point me semble assez futile. Et même si le dernier point et l’idée d’une chasse au sorcière (comme l’avais suggéré Daniel Glazman) me dérange profondément, je crains qu’il ne faille en arriver là pour que les choses changent.

Ces dernières semaines ont été particulièrement chargées en révélations dans le monde d’Android. La fin du premier trimestre 2012 a également été l’occasion pour de nombreuses sociétés d’annoncer leurs résultats. Mais surtout, le procès actuellement en cours aux États-Unis opposant Google à Oracle sur l’utilisation de technologies propres à Java. Si vous voulez en savoir plus, CNET a un résumé assez complet.

Voici une sélection personnelle de différents faits et chiffres apparus ces dernières semaines :

• Larry Page a dit : « Je crois qu’Android était important pour Google. Je ne dirais pas que c’était crucial. » (source)
• On a vu a quoi ressemblait le premier prototype de Google Phone en 2006, deux ans avant l’arrivée de l’iPhone.
• Google espérait vendre 10 millions de tablettes et atteindre 33% de parts de marché en 2011 (source)
• La Kindle Fire d’Amazon, une tablette Android dépourvue de tous les services de Google, est la plus populaire des tablettes Android avec plus de 54% de parts de marché (source)
• Six mois après sa sortie, la dernière version d’Android ne représente que 4,9% de tous les téléphones Android. (source)
• C’est la plus lente adoption d’Android, toutes versions confondues. (source)
• L’opérateur Verizon a vendu au cours du premier trimestre 2012 plus d’iPhones que tous les modèles de téléphones Android confondus (source)
• « Apple a capturé 73% des bénéfices de l’industrie téléphonique et Samsung a capturé 26%. HTC a pris 1%. Tous les autres ont perdu de l’argent. » (source)
• En 2010, Google gagnait 2,5x plus d’argent avec iOS qu’avec Android. (source)

« Android vaincra ».

Mais pas cette année. Cette année, c’est Apple.

Ce week-end, j’ai regardé une vidéo de Sequeletis (vue via Twitter) expliquant comment le jeu Mega Man éduque le joueur à travers son design et la conception de ses niveaux, et non par de vulgaires tutoriels. La vidéo dure 20 minutes, mais tout s’enchaîne très vite c’est très rigolo (j’ai ris tout haut à 1min44).

Si ce concept est important dans le jeu vidéo, c’est à mon avis tout aussi valable pour le web. Il y a deux mois je partageais avec vous l’exemple des portes de Norman, en résumant ma pensée :

Si vous devez expliquer à l’internaute comment se servir de votre page, même avec une simple phrase, vous avez raté votre travail.

C’est malheureusement une pratique très courante sur le web, où on va forcer l’internaute à lire une notice. Même un simple « cliquez ici » est une notice. Pourtant, des petits détails parfois anodins peuvent faire la différence.

Par exemple chez Archiduchesse, quand vous ajoutez un produit à votre panier à partir d’une page liste, une petite étoile en pixel art va partir du produit pour de diriger vers le récapitulatif du panier en haut à droite du site.

S’il est assez courant de retrouver un récapitulatif panier sur un site e-commerce à cet endroit, et s’il est déjà ici assez bien mis en avant graphiquement, cette animation fait clairement le lien entre l’action tout juste réalisée et la suite, c’est à dire le passage d’une commande.

Sur la plupart des sites e-commerce, bien qu’ayant des mises en page relativement similaires, l’ajout au panier se suit en général d’une popup indiquant à l’internaute qu’il peut « poursuivre son shopping » ou « finaliser sa commande ».  Si on reprends l’exemple de la vidéo de Mega Man du début, ce genre de popup est complètement l’équivalent des bulles d’aide dans les jeux vidéo vous bloquant dans votre lancée pour vous expliquer des concepts basiques.

Le skeuomorphisme est le principe d’imiter dans un objet un détail de conception qui n’est plus nécessaire, mais qui était indispensable autrefois. On trouve de nombreux exemples dans la vraie vie, comme l’imitation de rainures de bois sur des meubles en plastique, ou l’imitation du son de fermeture de l’obturateur sur un appareil photo numérique compact ou bridge. En informatique, on rencontre chaque jour pleins d’exemples. Le plus classique est l’utilisation d’une disquette comme icône de sauvegarde de documents.

Cet article de aKa chez FramaBlog nous rappelle également de manière amusante pourquoi les touches de nos claviers sont disposées ainsi :

Un beau matin de 1868, alors que les États-Unis résonnent encore des canons de la guerre de sécession, un bricoleur du Wisconsin du nom de Sholes invente la première machine à écrire. Sans se poser trop de question, il place logiquement les touches par ordre alphabétique.

Chaque touche appuyant sur une barre métallique horizontale qui ne peut pas frotter contre ses voisines, Sholes se voit dans l’obligation de décaler les rangées de touches, décalage qui est encore présent, sans aucune raison autre qu’historique, sur votre clavier, voire même sur les claviers virtuels des tablettes et des écrans tactiles !

Les champions du skeuomorphisme ces dernières années, ce sont Apple, qui usent et abusent d’effets skeuomorphiques dans leurs logiciels.

L’année dernière, James Higgs exprimait son mépris pour cette nouvelle tendance :

Il va sans dire que ma préférence va pour le design sans décoration, certainement sans un soupçon de sentimentalisme, et que je déteste ces nouvelles applications. Pourquoi ?

Pour faire simple : parce que ce sont des mensonges. Elles tentent de nous réconforter en essayant de nous montrer comment elles sont liées aux objets physiques du monde réel alors qu’il n’y en a pas besoin. En quoi sommes nous aidés à comprendre ce que fait l’application Localiser mes amis en y ajoutant des décorations en cuir ? Et à quel point ça peut être difficile pour quelqu’un, même un nouveau venu dans le numérique, de comprendre une liste de livres ? Est-ce que c’est si difficile, que la seule façon de le faire comprendre est de les présenter sous forme d’une bibliothèque en bois ?

Sur Snow Leopard, Photo Booth ressemblait à ça :

Puis est arrivé Lion, et son mode plein écran. Et voici venir le train du skeumorphisme :

Boom ! Des rideaux. Des panneaux en bois. Des boutons en métal. Vraiment, Apple ?

Encore une fois, regardons l’utilité de Photo Booth : prendre des photos, enregistrer des vidéos, et leur appliquer des filtres. La première version de Photo Booth rendait tout cela très facile et accessible. Par contre, elle ne communiquait pas le but de Photo Booth : faire l’idiot et s’amuser. Laissez-moi vous présenter un exemple :

http://www.youtube.com/watch?v=Re_IiPmGjWg

Photo Booth est un jouet numérique. La première version de Photo Booth, bien que très propre et fonctionnelle, ne ressemblait pas à un jouet. Ce n’était pas amusant, et ça ne vous encourageait pas à jouer avec. Avec le nouveau mode plein écran, Apple utilise le skeuomorphisme pour inviter ses utilisateurs à s’amuser.

Le skeuomorphisme sert à communiquer et à renforcer des sentiments, à aider une application à devenir une expérience mémorable, et pas juste un outil. Ça aide à communiquer sur le but d’une Interface Utilisateur, et pas seulement sur les fonctionnalités qu’elle propose.

En février dernier, les différents fabricants de navigateurs (Mozilla, Opera et Microsoft) ont exprimé leur souhait d’interpréter certaines propriétés CSS3 avec le préfixe -webkit-. Le lendemain, Daniel Glazman (co-président du groupe de travail CSS du W3C) lançait un appel à tous les développeurs web pour éviter que cette situation ne se produise. Le message a été plutôt bien relayé par la communauté du développement web et du design web. Malheureusement hier, le magazine .NET rapportait qu’Opera s’apprêtait de manière imminente à implémenter et interpréter certaines propriétés avec le préfixe -webkit- :

Opera, aux côtés de Microsoft et Mozilla, ont annoncé lors d’une réunion du CSS Working Group qu’ils supporteraient certaines propriétés avec le préfixe WebKit. C’est parce que trop d’auteurs de sites mobile utilisent uniquement les propriétés avec un préfixe -webkit-, et même pas la version standard, sans préfixe, lorsqu’elle est disponible. Cela mène à une expérience utilisateur réduite sur Opera, Firefox Mobile et IE Mobile, qui n’affichent pas les mêmes effets à la mode, comme des transitions, des dégradés, même s’ils supportent ces effets.

Il y a trois mois, je résumais le ridicule de la situation, auquel j’ajoute aujourd’hui cette représentation Tarantino-esque de l’état du web.

Les acteurs du web ont fait quelque chose de stupide en utilisant uniquement des préfixes -webkit-. Les fabricants de navigateurs vont faire quelque chose de stupide en implémentant les propriétés avec le préfixe -webkit-. Le W3C propose une réponse stupide visant à pénaliser les auteurs du web ignorants ou peu consciencieux.

Je l’ai dit hier et je le redis aujourd’hui : c’est une honte. En choisissant d’interpréter les propriétés avec le préfixe -webkit-, les navigateurs favorisent leurs propres intérêts personnels au détriment du Web Ouvert. C’est particulièrement honteux de la part d’Opera et surtout Mozilla qui se vantent sans cesse de défendre le Web Ouvert.

Qu’on soit bien clair : l’origine de tout ce débat, l’origine du problème, ce n’est pas le W3C, ce ne sont pas les navigateurs. Ce sont nous, petits intégrateurs, qui sommes la cause de ce problème. Ou plutôt, les intégrateurs peu consciencieux ou peu avertis, qui utilisent uniquement des préfixes -webkit- sans se préoccuper des autres navigateurs.

Je me considère comme un intégrateur un minimum averti. Je travaille en agence depuis 6 ans, et je fait de la veille que je partage quotidiennement sur Twitter ou sur ce blog. J’estime être relativement au courant des nouveautés du web et en particulier en intégration. Au fil des années, de ma part mon travail et également via Twitter, j’ai rencontré et discuté avec des dizaines voire une centaine d’intégrateurs. Des intégrateurs freelance, des intégrateurs en agence, des intégrateurs chez l’annonceur pour de plus ou moins grands comptes. En dehors de la sphère Twitter et de la petite famille francophone de développeurs web, j’ai très souvent constaté qu’une bonne partie d’intégrateurs sont souvent mal renseignés sur leur métier. Dans certains cas, c’est parce qu’ils considèrent l’intégration comme un simple métier, et qu’ils n’éprouvent pas l’intérêt de faire une veille quotidienne. Dans d’autres cas, c’est par manque de temps et par épuisement. Par exemple, j’ai rencontré un jour une intégratrice qui travaillait dans une agence où elle devait intégrer chaque jour un site complet (de 10 à 20 pages). Difficile de trouver le temps de faire de la veille dans de telles agences.

L’origine du problème, c’est donc le manque de formation et de connaissances détaillées dans le web pour une grosse partie des intégrateurs, développeurs web ou webdesigners. En choisissant d’interpréter les propriétés avec le préfixe -webkit-, les navigateurs ne vont pas résoudre l’origine du problème. Ils vont l’aggraver. Ces intégrateurs vont continuer à utiliser des propriétés avec le préfixe -webkit- uniquement, en se satisfaisant que ça fonctionne désormais partout. Mais ils ne se remettront pas en question, et ils n’aideront pas à rendre le web meilleur.

Alors quelle est la solution ?

Beaucoup d’intégrateurs souhaiteraient tout simplement l’abandon des préfixes navigateurs. Mais ces préfixes sont utiles et nécessaires. Ils permettent aux navigateurs d’implémenter des fonctionnalités en cours de définition par le W3C, et aux développeurs de les tester. Mais à tout moment, ces propriétés sont susceptibles de changer, pour être améliorées voire supprimer. C’est ce qui est arrivé avec les définitions des dégradés en background. La première syntaxe proposée par le W3C a été revue et adoptée par les autres navigateurs suite à la proposition d’une meilleure syntaxe par Mozilla.

Alors quelle est la solution ?

Je n’ai pas la prétention d’avoir une solution miracle. Mais par expérience, je sais une chose : si à un moment donné, un navigateur affiche un message alarmant à l’internaute sur un site donné, alors toute la hiérarchie d’une boîte va se réveiller pour que ce soit corrigé au plus vite. J’ai souvent rencontré le cas sur IE6. Sur IE6, quand vous êtes sur une page en HTTPS et que vous appelez une ressource en HTTP, le navigateur affichera une alerte à l’internaute lui demandant s’il souhaite afficher ou pas les contenus non sécurisés. A chaque fois que j’ai aidé des clients à résoudre ce problème sur leurs sites, croyez moi, toute la hiérarchie était sur le coup : des remontées du service téléphonique client au département marketing jusqu’à la direction générale. L’origine du problème vient également d’une mauvaise pratique de la part du développeur web, qui n’a pas pris le soin d’appeler des contenus sécurisés partout. Mais en corrigeant ce problème, le développeur web apprends quelque chose. Et s’il tient à sa survie, il y a de grandes chances qu’il retienne la leçon.

On pourrait alors imaginer un message d’alerte similaire, laissant entendre que le site a été mal conçu, et lui proposant d’améliorer le rendu du site. Si l’internaute accepte, le navigateur pourra interpréter les préfixes -webkit-. Sinon, la page s’affichera normalement.

Avec une telle solution, tout le monde est gagnant. L’internaute peut afficher une version optimale du site. Le navigateur peut démontrer ses capacités. Et le développeur web et les concepteurs du sites seront invités à revoir leurs pratiques.

J’espère vraiment que la décision d’Opera et de Mozilla n’est pas figée, et qu’ils essaieront de travailler avec des développeurs web pour trouver la meilleure solution, plutôt que d’imposer au monde entier leurs mauvaises décisions.