Toute bonne nouvelle ne venant jamais seule et comme je l’ai déjà mentionné, je reprends du service sur Web intention. Mais plusieurs précisions avant tout.

Au cours d’une rencontre avec Delphine Malassingne, nous avons partagé nos différentes visions de nos métiers, responsable qualité web. Nos visions étant complémentaires, l’idée d’un projet commun a rapidement germé.

w3qualité  (tout en minuscule !) est finalement né et les premières pages sont maintenant visibles. Ce projet a pour ambition de fournir des ressources (outils, articles, analyses, etc.) sur la qualité web… vaste sujet.

Les premiers retours que nous avons eu sont plus qu’encourageant et nous confortent dans l’idée que ce portail viendra combler un manque dans le web français. Merci à vous.

Nous avons proposé à plusieurs personnes qui gravitent autour du web et ayant une philosophie et une approche du web qui convergent avec les nôtres, de participer à cette aventure. L’équipe qui s’occupera de ce site est ainsi constituée de :

• Delphine Malassingne, responsable qualité web, secrétaire de Paris Web 2011, qualiticienne de valeurs et pile électrique du web
• Christophe Andrieu, directeur artistique freelance rare et de talent, dessinateur de talent et grand jappeur devant l’Internet
• Vincent Valentin, développeur front-end de génie qu’on ne présente plus
• Stéphane Deschamps, inénarrable expert en accessibilité, gourou 6ème dan et accessoirement un des fondateurs de Paris Web
• Sébastien Delorme, Monsieur WCAG, investi par le monarque de l’accessibilité numérique de la mission d’évangéliser les impurs
• et votre serviteur, modeste responsable qualité web et consultant UX

Belle équipe, n’est-ce pas ? Un peu de modestie ne nuit pas, surtout si elle est sincère

Nous avons, également, eu le plaisir de recevoir le parrainage d’Elie Sloïm, Mr Qualité Web, fondateur de Temesis et du projet Opquast ainsi que Frank Taillandier, maitre es Standards W3C. Qu’ils en soient ici chaudement remerciés.

Vous pouvez suivre l’actualité de w3qualité  sur Twitter.

w3qualité  va prendre son envol dans les prochaines semaines avec les premiers contenus.

En conséquence, la ligne éditoriale de Web intention va évoluer et se recentrer sur une partie du web qui me tient, également, à coeur depuis longtemps : la conception et plus précisément l’ergonomie et l’expérience utilisateur. J’y reviendrai dans un prochain billet.

Dans cette attente, je vous invite à garder un oeil sur les deux Scoopit, outil de veille et de curation, que je maintiens :

• Qualité web et testing
• Ergonomie web, IHM et UX

A ce propos, si vous êtes intéressé par l’utilisation de Scoopit, il me reste quelques invitations que je pourrais partager avec grand plaisir. Faites vos demandes dans le commentaires si vous êtes tenté par l’expérience.

Sinon que pensez-vous de ces annonces ?

Je tiens également à sincèrement remercier toutes les personnes (commentaires, Twitter, mail…) qui m’ont demandé de faire revivre Web intention. Le phoenix renait !

• l’inénarrable et inébranlable (il a été orateur à tous les Paris Web depuis leur création !) Daniel Glazman, co-chairman du Working Group CSS au W3C
• la pétulante Molly E. Holzschlag d’Opera Software et accessoirement éminent membre du Working Group CSS et expert au Working Group HTML
  
• Tristan Nitot, jamais avare de bons mots, président de Mozilla Europe
• le globe-trotter, Karl Dubost, ancien employé du W3C et Directeur technique chez Phéromone
• le réjouissant Charles McCathieNevile, chief Standards Officer chez Opera Software
• la charmante Amélie Boucher, ergonome reconnue pour ses travaux et son très bon livre sur l’ergonomie des sites web
• Eric Daspet, responsable innovation et consultant chez SQLi mais surtout évangéliste d’un web ouvert, expert francophone en PHP et un des pères fondateurs de Paris Web
• et j’en oublie mais la liste complète se trouve sur le site de Paris Web

Finalement, tout le beau monde de l’Open Web était présent. Alors que retenir de ces 2 jours de conférence ?

1. parmi les infos exclusives divulguées, une est particulièrement ressortie et a notamment marqué les esprits : la prédiction de Daniel Glazman ! Selon lui, et je suis tout enclin à le croire, IE 6 sera devenu une part négligeable du marché des navigateurs en mai 2010 et aura complètement disparu en mai 2011. Je ne sais pas sur quels chiffres il s’appuie mais je le crois, la courbe d’utilisation IE6 va dans ce sens. Au final, est-il encore opportun de perdre du temps, de l’énergie et donc de l’argent sur la compatibilité multi-navigateurs en y incluant IE6. Je suis un fervent défenseur de l’arrêt du support d’IE6 (et au moins dans un premier temps du support partiel que j’appelle souvent « dégradation propre ») et ce pour 2 raisons :
   • les utilisateurs d’IE6 le sont sur leur lieu de travail donc pas forcément dans la cible directe d’une application web (sauf cas des intranets antédiluviens ou d’application de type B2B particulière) et finalement, dans notre métier, nous avons une responsabilité importante vis à vis des utilisateurs (je ne parle pas que de nos clients mais bien de l’ensemble des internautes), à savoir, engager un processus pédagogique d’évangélisation et de sensibilisation à la qualité finale de l’expérience utilisateur qu’ils sont en train de vivre. Rendre compatible une application web avec IE6 est une contrainte forte à la créativité et à l’innovation, en plus d’être une aberration commerciale !
   • sinon, il s’agit d’un choix délibéré de leur part et il convient de se poser la question de savoir si ils font vraiment partie de la cible de notre projet et si par conséquent il est opportun de dépenser une fortune pour rendre notre application compatible avec ce navigateur en sachant que le ROI n’est absolument pas assuré. Cette cible et son coût d’acquisition intéresse-t-elle vraiment notre client ? Je ne crois pas tant les coûts de mise en compatibilité deviennent exorbitants avec la complexification des applications web.
2. nous avons un devoir d’éducation, au sens pédagogique, envers les internautes. Il convient de leur fournir un produit de qualité, respectueux des standards (et j’y tiens) et interopérable. En cela les démarches de plusieurs entreprises du web sont assez condamnables. Plusieurs ne se sont d’ailleurs pas privés… non, je ne donnerai pas de nom On pourra citer sans fournir un classement mais juste un pêle-mêle :
   • Apple et l’iphone pour sa fermeture et son contrôle du marché des applications par l’AppStore bridant ainsi l’innovation et la créativité des développeurs
   • Microsoft pour son retard incroyable avec les standards sous IE8 et sa faculté à répondre à un marché plus qu’à une compatibilité… mais ils se soignent… paraît-il
   • Apple qui s’offre une deuxième entrée dans la liste pour son brevet et, donc, sa demande de royalties sur la mise en place des mises à jour sur les widgets et qui bloque la normalisation de « Widgets 1.0: Updates ». Le W3C lance d’ailleurs un appel pour trouver des utilisations antérieures à ce brevet pour l’invalider.

   D’ailleurs, c’était assez comique de voir tous ces évangélisateurs d’un web ouvert avec leur iphone et autre Macbook pro… crédible ?

   Mais avoir une action pédagogique ne signifie pas simplement de fournir un produit aux standards mais également orienter l’utilisateur final vers une interface qui lui offre la bonne (sinon la meilleure) expérience utilisateur. On en revient à l’infatigable débat sur IE6 qui gangrène les développeurs web depuis 11 ans et qui continue à brider l’innovation technologique des applications web :  le lissage par le bas ! Un des leitmotive de ce Paris Web 2009 fût donc l’abandon pur et simple d’IE6. Oui… facile à dire ! Cependant la réalité du marché est celle qui nous fait vivre, on ne peut pas encore dire à nos clients qu’on ne supportera pas ou peu (mode dégradé)  IE6 dans l’application qu’on est en train de lui construire sans qu’il y ait des grincements de dents.

L’avenir des standards nous promet de belles choses. La conférence de Tristan Nitot et de Paul Rouget fût à ce point magistrale que tous les geeks présents en furent bluffés. En effet, hormis le sketch bien huilé de 2 personnes qui se respectent et s’admirent mutuellement, la démonstration technologique HTML5/CSS3 (certes sur un Firefox 3.7 en pré-alpha) a scotché l’ensemble de l’assemblée : détection de l’accéléromètre dans le navigateur, filtres CSS sur des vidéos et sur du canvas 3D… Ces technologies laissent augurer d’un web plus puissant, plus interactif et plus ergonomique… que du bonheur !

Pour conclure : une manifestation excellente en tous points. Par des professionnels, pour des professionnels. Le seul regret que je puisse y voir, c’est qu’il faille attendre une année pour y retourner et recharger les batteries !

En tout cas, une superbe présentation de la boite à outils magnifique que nous avons maintenant entre les mains… à nous de jouer !

Pour finir, quelques bonnes photos http://www.flickr.com/groups/parisweb2009/

D’ailleurs, je lance un appel à tous pour savoir si il y aura des compte rendu des ateliers du samedi. Plusieurs m’intéressent mais je ne pourrais malheureusement pas rester le samedi.

Au plaisir de vous y voir !

Je n’ai visiblement pas été le seul à constater cet état de fait et après une petite discussion sur Twitter (merci à Jérémie Patonnier) , il s’avère que l’insertion de Facebook Connect à un site, fait perdre la validation W3C sans que l’on y puisse grand chose. La seule solution que j’ai pu entrevoir est de redéfinir la DTD du doctype comme mentionné dans cet article d’A List Apart : Validating a custom DTD. Cependant, cette technique ne sera pas intégralement reconnue par le validateur du W3C car s’appuyant sur un doctype non homologué… le serpent se mord la queue !

Finalement, cette méthode qui tente d’imposer sa manière de travailler à une profession et un consortium, ça ne vous rappelle pas quelques grandes sociétés informatiques ? Avez-vous une meilleure méthode pour valider proprement un site avec la fonctionnalité Facebook Connect ?

Edit : J’en parle de manière plus approfondie sur le blog de groupeReflect : Facebook et les standards W3C

Ce constat étant fait, qu’en est-il vraiment ? Selon les dernières statistiques que j’ai pu trouver, celles d’AT Internet (ex Xiti Monitor) de mai 2009 ou celles de Médiamétrie de juin 2009, les parts de marché, en France, se découperaient comme suit (je vous passe le chapitre sur la précision des chiffres, là n’est pas la question, nous n’aurons besoin que de tendance générale) :

• Internet Explorer : environ 65%
  • IE 8 : 15%
  • IE7 : 35%
  • IE 6 : 15%
• Firefox : environ 28%
• Safari : 3.4%
• Google Chrome : 1.7%
• Opera : environ 1.3%
• Autres : environ 0.6%

Bon, nous sommes loin des 10 000 marques et versions mais c’est déjà largement suffisant pour commencer. En matière de qualité web et de conformité de produits, nous sommes également obligé de prendre en compte le système d’exploitation sur lequel tourne le navigateur. Effectivement, des différences, certes parfois infimes, existent selon l’OS. En nous penchant, à nouveau, sur les études de nos fournisseurs de chiffres français, nous remarquons :

• Windows : environ 94%
  • Vista : 31%
  • XP : 61%
  • 2000 : 1.2%
  • Autres : 0.8%
• Mac OS X : environ 4.4%
• Linux : 1%
• Autres : 0.6%

Maintenant, vous prenez ces derniers chiffres auxquels vous incorporez délicatement les premiers. Une fois le mélange homogène , battez fermement le mélange ! Vous obtenez l’incroyable mixture avec laquelle il faut jongler constamment lorsqu’on teste et recette un site.

Cependant, nous ne pouvons pas assurer une conformité totale sur l’ensemble des navigateurs. Il faudrait un budget colossal et plus d’une vie de développeur pour réaliser un tel prodige.

Yahoo! a introduit la notion de grade dans son Graded Browser Support de la Yahoo! UI Library. Cette notion permet finalement de s’orienter vers des niveaux de conformité et de compatibilité. Ainsi, nous pourront limiter et graduer la prise en charge des versions de navigateurs. Yahoo! propose, bien évidemment, son propre tableau de compatibilité pour sa bibliothèque mais on peut s’en inspirer pour offrir une vision correcte des problématiques de garantie de résultats sur un projet.

Au final, il en résulte un autre tableau que je soumets à votre sagacité. Dans cet arrangement, le niveau de garantie prend 2 valeurs :

• totalement compatible (Support Total – ST) : cas des dernières version stables des navigateurs. On assurera une correction complète des bugs
• partiellement compatible (Support Partiel – SP) : on pourra parler de dégradation propre (essentiellement visuelles), sur lesquelles on s’efforcera de corriger les bugs (il s’agit essentiellement de versions anciennes et plus développées de navigateurs)

J’ai opté pour le choix de ne plus ne plus assurer le support total d’IE 6 dans la mesure où il n’est plus développé et suivi par Microsoft. A ce propos, la fronde anti-IE6 se fait de plus en plus virulente. En témoignent les différentes actions menées de part la toile : IE 6 no more relayé par Mashable, le collectif SaveTheDevelopers dont je parlais justement ici ou l’analyse de CNN, Web citizens trying to kill Internet Explorer 6 d’aujourd’hui.

J’ai également opté pour le support de Safari 4 (pas de safari 3.x qui ne représente qu’une portion congrue), Firefox 3.x (pas de Firefox 2.x qui ne représente qu’environ 1.5%). Pas plus de support pour le moment d’Opera 9.x (moins de 1.5%) ni de Google Chrome 2.x qui peine à percer (avec moins de 2 % de part de marché en disposant d’un colossal vecteur de propagation). Nous verrons bien si la version 3 de Google Chrome et le support du HTML 5 viendra inverser cette tendance.

Avec cette adaptation, on arrive à couvrir plus de 96% de la population des internautes, pas 96% de la cible de votre projet.

Il est bien évident que ce genre de tableau n’est qu’une base de travail et qu’il conviendra de le modifier selon la typologie de votre projet. En effet, nous n’aurons pas le même tableau pour l’intranet d’une société dont la DSI pré-colombienne ne veut pas changer les navigateurs de ses 2500 postes et le site e-commerce de vente de gadgets pour geeks ou encore un site avec une problématique de mobilité importante.

Je n’ai pas fait mention des navigateurs mobile mais cela dépend toujours de la typologie de votre projet. Nous retiendrons quand même 3 navigateurs parmi les plus importants sur le marché mobile actuellement : Iphone Safari, Nokia Web et Opera mini.

Ps : Je me suis également appuyé sur un sondage que j’ai lancé sur Twitter avec moults RT (merci à tous) et même un billet de Fred de Villamil « Quels sont les navigateur sur lesquels vous garantissez une conformité totale ?« , qui je le rappelle est toujours à la recherche d’un appartement sur Paris ou RP. La demande devient urgentissime !

Google Page Speed

Google Page Speed est, d’après l’Official Google Webmaster Central Blog, un outil qu’ils utilisaient à l’interne et que Google offre gentiment au monde. Bien ! Les règles sont basées sur les bonnes pratiques de la web performance édictées par Google.
On pourra notamment :

• optimiser le javascript (GPS propose une version minifiée de tout le js)
• optimiser à la volée des images (GPS propose également une version optimisée de ces images)
• identifier les sélecteurs CSS inéfficaces (un peu radical)
• connaitre les règles CSS inutilisées
• etc.

On ne s’étonnera pas de la similarité entre YSlow et Google Page Speed : Steve Souders, créateur de YSlow et co-fondateur du Firebug working group, travaille désormais chez Google sur la web performance.

A tester en parallèle de YSlow. Si vous avez un avis, n’hésitez pas, les commentaires sont là pour ça !

On en parle ailleurs :

• Google Webmaster Central Blog: Introducing Page Speed
• TechCrunch : Google Opens Up Internal Speed Tool To Developers
• Performance web : Google Page Speed
• Korben : Google Page Speed – Benchmarkez vos pages web

Cette vidéo laisse présager une série présentant l’ensemble des bonnes pratiques Opquast.

A voir absolument !

Cliquer ici pour voir la vidéo.

Les possibilités semblent impressionnantes, on peut ajouter toutes sortes de média :

• contenu de référence (Wikipédia, CrunchBase, IMDB, Amazon…)
• vidéo (YouTube, Vimeo, Metacafe, Veoh…)
• images (Flickr, Wikipédia, Yahoo search, ainsi que le vôtres)
• audio (imeem)
• news (Washington Post, BBC…)
• cartes (Google Map)
• documents (grâce à Scribd)

La vidéo est éloquente et démontre la simplicité d’utilisation d’Apture.

Cliquer ici pour voir la vidéo.

On peut mettre un contenu non invasif, « à la Snapshot », par le biais d’une bulle apparaisant avec le contenu choisi ou directement dans le contenu en insérant et, éventuellement en redimensionnant, l’élément multimédia inséré.

Le rendu est du plus bel effet et l’ergonomie est bien pensée. Sans tomber dans l’overdose de contenu riche à tout va, on peut largement s’appuyer sur ce plugin pour enrichir subtilement un article ou un dossier.

via Techcrunch fr

Dans la chasse aux codes non-standards, voici un petit script CSS à placer en fin de feuille de style. Il offre l’avantage de trouver les éléments et attributs dépréciés en utilisant les CSS, mettant en évidence le mauvais code. Il existe 2 versions :

• une version évoluée pour les navigateurs respectueux : diagnostic.css
• une version allégée pour IE7 (no comment) : diagnostic-ie7.css

via Eric Meyer : le grand maître du CSS et auteur notamment de :

• CSS: The Definitive Guide
• Conception de sites Web avec les CSS

De manière générale, et concernant l’interface, un réel effort d’ergonomie a été accompli avec succès. L’interface est devenu fluide et facile d’utilisation. Un recours aux fenêtres DOM et à l’Ajax permet d’évaluer un projet avec beaucoup d’aisance.
On notera également la nouvelle possibilité de faire appel à une procédure automatisée de tests concernant certains critères. Cette évaluation auto tourne toute seule en arrière plan et permet donc de continuer l’évaluation du projet.
La version pro donne notamment accès à un validateur automatique par lot (multicritères, multipages) et à un module complet de statistiques, sans parler de la possibilité de créer une équipe de collaborateurs de la société qui bénéficient des avantages de l’abonnement de la société.

A chaque projet est associé une ou plusieurs checklists en fonction des fonctionnalités attendues :

• Tous services en ligne : 104 critères de base, communs à tous les projets (conformité W3C, sécurité, internationalisation…)
• Service e-commerce : 36 critères spécifiques au site de commerce en ligne (indication du prix HT, SAV…)
• Service syndication : 5 critères sur le respect des formats et les liens des flux
• Service newsletter : 8 critères pour la mise en place d’une ou plusieurs lettres d’information et/ou de discussion (processus d’inscription, de désinscription, fréquence d’envoi…)
• RGAA : 204 critères liés à l’accessibilité

Les plus assidus auront remarqué l’apparition d’une nouvelle checklist : le RGAA ( dont Elie Sloïm, avec Temesis, est un des ardents contributeurs). Ici, 204 critères (obligatoires ou simplement recommandés) à respecter dans la cadre d’un projet à fort besoin d’accessibilité (administrations publiques…). Conformément aux directives du RGAA, il n’y a pas de niveau mais une ventilation sur 3 années, permettant une montée en puissance plus acceptable.

Elie nous offre quelques évolutions à venir :

• Mise à disposition prochaine d’un annuaire des professionnels Opquast
• Mise en place d’un système de programmation du validateur
• Possibilité d’importer et d’exporter ses résultats et ses checklists dans d’autres outils, notamment dans celui qui sera mis en place pour la DGME (j’aurai très prochainement des annonces très importantes à faire dans ce domaine)
• Possibilité de définir des rôles et des fonctions pour les collaborateurs projets et les collaborateurs société
• Automatisation de bonnes pratiques et critères RGAA supplémentaires

Personnellement, j’aimerai bien une checklist spécifique aux bonnes pratiques du référencement (et de la SEO). Soit, respecter les bonnes pratiques d’Opquast, permet d’améliorer considérablement sa reconnaissance et son positionnement dans les moteurs. Mais quelques critères supplémentaires (comme la structure et l’ordre du contenu, la présence de mots-clef dans la balise title, la présence de mots-clé dans le nom de domaine…) permettrait d’enrichir un peu plus ce bien bel outil.

Opquast a réalisé une réelle évolution grâce à un travail sur l’ergonomie. L’évaluation d’un projet, tâche jadis fastidieuse, est devenue plus facile et rapide à appréhender. L’interface générale est plus simple et dépouillée.
Cet outil est un appui indispensable pour développer des sites ou des applications métiers de qualité et doit servir de référentiel de bonnes pratiques à adopter systématiquement durant les réalisations.