MS TechDays 2012

Bon, si vous êtes aux Microsoft TechDays la semaine prochaine, faites-moi signe : j’y serai aussi.

J’ai eu du mal à me faire mon programme : il y avait parfois plusieurs conférences en même temps qui m’intéressait.

Je suis à peu près sûre d’aller voir :

  • Des conférences autour de HTML5 et CSS3 (celle de Raphaël Goetter ? celle de David Rousset ?) parce que depuis que je ne suis plus intégratrice, il faut bien dire ce qui est, je ne suis pas complétement à jour !
  • Au moins une conférence sur « METRO« , l’interface que l’on retrouve sur Windows Mobile mais aussi sur ma Kinect, sur les sites MS, etc.
    Je l’ai découverte sur ma Kinect*, donc, et je l’ai trouvée plutôt agréable, simple et intuitive.
    * Je vous ai dit que j’ai eu une Kinect à Noël ?
  • Une conférence sur l’expérience utilisateur qui a l’air de tout reprendre (en une heure !)
  • Au moins une session où sera présentée une application développée par ma nouvelle boîte avec plein de HTML5 et de CSS3 dedans.
  • Et une conférence sur l’accessibilité de HTML5, par Aurélien Levy + le retour d’expérience de Thibault Lanssade sur la prise de conscience autour de l’accessibilité par une agence web …ben la mienne 🙂

Voilà. Je ne sais pas si j’arriverais à tout voir car, d’expérience, c’est bruyant et épuisant et il y a toujours un moment où on (se) laisse simplement tomber.

Alors ? qui j’y verrai ?

Retour sur le Webperf contest 2010

Avant de commencer, rappel sur l’organisation et les soirées à venir :
Normalement, tous les 2ème lundi du mois.
webperfParis est preneur de vidéos et de compte-rendus.Si vous avez des idées de sujets (à présenter ou à réclamer) faites un mail à Anthony.Prochaine soirée : 13 février – Atelier de mise en place d’un référentiel de bonnes pratiques webperf
Delphine Malassingne (ben moi, quoi !) et Élie Sloïm.

Pour se tenir au courant :
www.webperf-france.net et @webperfParis

Jean-Pierre Vincent : « Merci à Anthony d’avoir repris les soirées ».

Merci 20minutes pour l’accueil (ce n’est pas facile de trouver une salle, si vous avez des options, parlez-en à Anthony il sera content)

Trois parties :

  1. Organisation et présentation du concours par Vincent Voyer
  2. Les techniques des participants à retenir par Jean-Pierre Vincent
  3. Présentation de la participation du gagnant « start render et onload » par le gagnant en question, Cédric Morin

Encore une fois, il s’agit juste de notes. Les trois supports de présentation sont en ligne, le site du concours est disponibles et contient toutes les infos, les vidéos vont arriver.

Merci Vincent, Jean-Pierre et Cédric.

1. Organisation et présentation du concours

Vincent Voyer – @zeroload – http://fasterize.com/
Jean-Pierre Vincent

Le concours : optimiser le site web d’un client et classer les participants (lots grâce aux sponsors).
octobre – novembre 2010
Organisé par Eric Daspet, Jean-Pierre Vincent et Vincent Voyer.
http://webperf-contest.com/

Il fallait un site web représentatif, à fort trafic et d’accord pour donner son site comme exemple de mauvaise optimisation de la perf.
La FNAC a accepté. Le site était intéressant parce qu’un des très gros acteurs français + site avec beaucoup de pages et un historique ; le tout faisait qu’il y avait matière à amélioration.

La page ciblée était la page enfants : www.fnac.com/enfants.asp
(NB : Les optimisations sorties du concours semblent ne pas avoir été implémentées)
4′ avant le début de l’affichage
17′ avant images telles qu’ont peut s’y attendre dans un catalogue
Freeze au démarrage pendant la première seconde

Jury : pas que les chiffres mais également le style, le respect de l’utilisateur, etc.

50 participants qui devaient devaient suivre des règles.
Et comme il n’y a pas que les chiffres dans la vie, le « style » comptait aussi :

  • rendu progressif du site
  • temps avant premier rendu significatif (= disponibilité de l’interface)
  • faisabilité de l’optimisation en environnement de production
  • réalisation des optimisations (lazyload ne se remarquant presque pas, SEO, accessibilité)
  • explications détaillées de la part du participant

3 gagnants :

  • Plus bas nombre de requêtes et poids de la page : Alexandrine Boissière
  • scrore YOTTAA : Gaël Métais
    (score calculé avec www.yottaa.com)
  • Meilleur start render et onload : Cédric Morin

Les 3 gagnants affichent les premiers éléments en dessous de 1,5 secondes et la totalité entre 3,5 et 5 secondes.

2. Les techniques des participants à noter

Jean-Pierre Vincent –

 

LES TECHNIQUES DE BASES

  • Gestion du cache navigateur
  • Compression gzip
  • Cookie (uploadé lors des 115 requêtes)
    • sous-domaine pour statique
    • redéfinir le cookie sur www.*
  • Images :
    • la page avant optimisation contenait 80 images pour 500k. Une optimisation raisonnable (avec une qualité correcte) donnait 250k.
    • png 8bit
    • Introduction du nombres de couleurs
    • Outils tels que jpgtran, pngcrush…
  • Concaténer et minifier

LES TECHNIQUES DE LA MORT

Limiter le nombre de requêtes HTTP

CSS

Difficile (et encore assez nouveau à l’époque)

  • minifié, concaténé / gzipé
  • nettoyage à la main (mais délicat dans un contexte d’industrialisation) : 28 à 12 ko
  • certains ont réussi à charger le CSS après le lancement de la page : star render à 200ms …mais la page s’affiche sans aucun style ! et le CSS était dépendant de JS.
  • CSS inline : 2-3 ko de CSS en inline pour le layout et le reste ensuite via JS (bon 1er rendu, pas de dépendance JS mais pas de cache)
JS

Même gzipé cela faisait 60ko

Utilisation de <script defer> qui permet de charger de manière asynchrone et native le JS mais il y a du coup des corrections à faire à la main.

Paralléliser les téléchargements des JS : 70ms de gain mais il y a un pb de dépendances (souvent un des JS devaient attendre l’autre pour s’exécuter)

Lazy-loading (= télécharger le + tard possible images et JS) :

  • Certains ont fait des téléchargements « onmousemouve » : technique de la mort mais qui donne une expérience utilisateur très mauvaise et il y a une dépendance à JavaScript.
  • Avoir géré l’absence de JS était donc un plus auprès du jury.
  • Le footer était affiché dans une iframe. La contrainte du concours était de garder cette iframe. Certains ont donc utiliser le lazy-load pour l’iframe.
  • Le champ de recherche contenait de l’auto-suggestion. Là aussi, certain ont utiliser lazy-load : le JavaScript n’était appelé qu’au moment où l’internaute cliquait dans le champ.

Encoder les img en base 64 : 0 requête, mais 30% de poids par image (5 à 10% après gzip), pas de cache HTML et CSS spécifique IE

Tout encoder – en une seule requête ! Immédiat en téléchargement mais plusieurs secondes de charge CPU (8 secondes pendant lesquelles on ne peut rien faire).

DERNIÈRE ULTIME TECHNIQUE

…Savoir coder !
Ceux qui ont passé du temps à recoder le site y ont gagné beaucoup :
avant : 2000 nœuds DOM / 213 ko
après :  50% des nœuds / 50% du HTML
> ressenti utilisateur hyper optimisé

Certains ont repris le CSS :

  • Reset CSS
  • Suppression des filter() (dégradation gracieuse acceptée par le jury)
  • Utilisation de :before (même si cible IE7)
  • Dégradé png transparent

CONCLUSION

Le temps d’affichage a été divisé par 10 entre la version initiale et celles des gagnants.
Les techniques de base représentent 70% du gain.

Conclusion personnelle de Jean-Pierre :

  • Les gagnants n’étaient pas des pro de la perf web mais le temps passé a payé
  • Les bonnes pratiques de codage : ça paye aussi (en maintenance mais aussi en perf)
  • L’époque des grandes découvertes est-elle finie ? Jean-Pierre a l’impression que oui.

Enfin :
À quand le prochain concours ?! (sur le mobile ? comme critère du Summer Refresh d’Alsacréations ?)

Voir :  braincracking.org/category/articles/performances/ : articles de JP Vincent suite au concours.

3. Présentation de la participation du gagnant « start render et onload »

Cédric Morin – yterium.net

.htacess

  • forcer la compression gzip (deflate) sur HTML, JS et CSS
  • forcer des expire lointains sur fichiers statiques

Images

  • optimisation
  • preloading en début de <body>
  • Sprites CSS (images qui ne portent pas d’information, regroupement logique, injectée en image de fond CSS et optimisation du menu)
  • Carrousel et animation : affichage avec une première image statique légère avant déclenchement via JS

Chargement asynchrone des morceaux de page

(paralléliser la construction de la page avec le chargement des ressources pour envoyer le HTML le plus vite possible)

  • L’accessibilité (et référencement !) a été gérée via un hack <noscript> qui redirige le visiteur vers une version assemblée côté serveur.

Lazy-loading

  • en envoyant les images sans attribut src
  • en prévoyant, là aussi, une alternative si n’y a pas de JavaScript

CSS

  • découpage des déclaration en unités logiques fonctionnelles > une feuille de style par unité logique
  • une seule CSS servie générée automatiquement et qui inclue uniquement les feuilles de style nécessaires
  • minification
  • remplacement d’image par du CSS
  • attributs width et height renseignés pour toutes les images

JS

  • uniquement JS externes (un script par fonctionnalité)
  • concaténation des JS en un seul
  • minification
  • appel des JS en pied de page (mais contexte spécifique ici)
  • chargement en parallèle et asynchrone de deux fichiers JS
  • JS de l’auto-complétion n’est chargé qu’au focus sur le champ

Requêtes JSON

  • une seule requête (éléments en argument, tableau de réponse, dispatching à la réception)

HTML

  • minification (espaces redondants et commentaires)
  • suppression de toute mise en page en tableau et utilisation d’un layout
  • reprise du code du menu pour qu’il soit lisible sans les images

Cookies

  • utilisation des sous-domaines au maximum pour images et CSS
  • JS, morceaux de page asynchrone, et JSON servis sur domaine principal

Cédric explique ses choix, donne ses sources et des détails dans son article et dans son diaporama :

Tout a été versionné et est à disposition sur : https://github.com/Cerdic/webperf-contest-2010/

(Certains des ) outils  cités :

Crédit photo et photos de la soirée : Prélude – Webperf janvier 2012

1er jour chez Ekino

We ove developers.

Aujourd’hui était donc mon premier jour chez Ekino, filiale techno de FullSIX en tant que Responsable qualité web !
Une nouvelle aventure pour cette nouvelle année qui promet d’être riche et intéressante : un poste à mettre en place, en fonction des équipes que je dois encore découvrir, des objectifs à identifier, des méthodes à adapter, etc.

Ce recrutement est aussi l’aboutissement d’une recherche de poste non pas par le biais classique (pour un tel poste cela aurait été utopique !) mais via la visibilité que je cherche à donner à mon métier. …Une conférence qualité/accessibilité et une soirée #webperfParis plus tard, me voilà donc dans une société qui souhaitait mettre en place une démarche qualité !

Ma fiche de poste est un bonheur pour moi ! Elle s’articule autour des objectifs de qualité, de l’amélioration continue et de la montée en compétence.

J’ai hâte maintenant de mettre tout cela en place concrètement, d’adapter ce que j’ai déjà fait ailleurs aux réalités de ce « terrain » là, de creuser le poste et les missions de la qualité web à travers ce qui va être ‐ à coup sûr ‐ un énorme enrichissement pour moi !

Le fonctionnement d’un navigateur | Soirée performance web

Bon, ça vaut c’que ça vaut, mais voici mes notes de la soirée webperf de mardi dernier.
Comme pour la dernière fois (Atelier sur la performance web du 21 avril 2011 – Compte-rendu), j’ai noté ce que j’ai pu et ce que j’ai compris.

Un navigateur, comment ça marche ?

> comprendre le navigateur pour aider à faire des choix.
Anthony Ricaud

Introduction

Cette présentation n’a, initialement, pas été faite dans le contexte de la performance web. Elle permet de comprendre ce qu’un navigateur fait lors d’une requête (et cela inclue les temps d’attente et de traitement.)

D’un point de vue optimisation de la performance, les éléments présentés ci-dessous sont souvent minimes.

Voir les liens qui ont permis à Anthony de préparer sa présentation : Blogmarks > Marks de Rik lié au tag « navigateur-marche ».

Le navigateur a énormément de choses à traiter (parser les URL, rendu des polices, s’adapter aux OS, téléchargement, etc.)
Ici, on va voir ce qu’il se passe depuis la requête (clic sur un lien ou barre d’adresse) jusqu’au chargement de la page.

anthony

La requête et la réponse

La requête est envoyée. Nous sommes ici dans le cas où tout se passe bien. Le navigateur lit alors les premières lignes du html pour choisir le mode qu’il va appliquer pour interpréter la page.
Il y a trois modes possibles : xml, quirks et standard.

Avec « Content-Type: application/xhtml+xml » > Mode XML

Il est très peu utilisé parce que IE ne le supportait pas jusqu’à la version 9 et parce qu’en cas d’erreur : ça se voit
Pas de pb de performance par contre.
=> Tous les navigateurs sauf IE 7 et 8

Avec « Content-Type: text/html » > Mode Quirks

Modifie le box model (celui du W3C ou celui d’IE)
=> Tous les navigateurs

Avec un doctype > Mode Standard

Considère le doctype comme un indice, au moment où ça a été créé, de la qualité du code.
=> Tous les navigateurs

Les navigateurs se fichent des versions de spécifications (HTML5, HTML4, XHTML1.0, CSS3, etc.)

Conseil aux intégrateurs : d’un point de vue pragmatique, il vaut mieux se référer à ce qui est implémenté et fonctionne plutôt qu’aux specifications qui ne sont pas toujours à jour.

Le DOM

= la compréhension qu’a le navigateur du HTML qu’il stocke en mémoire
C’est le DOM qui est manipulé par JS.
Il est composé de nœuds éléments et de nœuds texte.

NB :
Même si espaces et retours à la ligne créent des nœuds texte vides, il n’est pas préconisé de minifier le HTML : le gain serait négligeable alors que parallèlement, il y aurait des problèmes de rendu à gérer.

Le HTML sera identique dans tous les navigateurs à partir de IE9/10. C’est-à-dire, par exemple que l’erreur <p><strong></p></strong> sera interprétée de la même manière par tous les navigateurs.

Les sous-ressources

Pendant que le navigateur récupère le HTML, il va chercher les sous-ressources (images, les CSS, JS).

Les images

C’est non-bloquant, le téléchargement continue.
Le décodeur (le machin qui traite les images) n’a pas non plus d’impact sur le temps de traitement car il compose l’image de son côté et l’envoie quand elle est prête.

Le CSS

C’est non-bloquant, le téléchargement continue.

CSS Buckets

Le navigateur ne prend que les sélecteurs et les place dans des « seaux » (hashtable) :

  • id : #sidebar ; div#sidebar pour une raison de spécificité
  • class : .item
  • tagname : div
  • autres : :visited

cssbuckets

Dès qu’il y a un combinateur de sélecteurs( espace , « ~ », « > » et « + »), c’est celui qui est le + à droite qui l’emporte

Les sélecteurs dans Autres vont ralentir la performance.

CSS maching

Les navigateurs prennent tous les nœuds et vont chercher les règles CSS qui leurs correspondent.

div#sidebar et #sidebar sont dans le même seau mais div#sidebar oblige à une vérification de plus.
Dragonfly sort un profiler de CSS qui va permettre de voir les performances de chaque sélecteur (beta). En effet, sur la performance de sélecteur, il y a beaucoup de  cas particulier. (un outil du même type est en préparation chez Webkit)

  • div p : on ira pas chercher « div »
  • ul p : il faudra vérifier tous les parents avant de passer à la suite
  • ul > p : il n’y a qu’un parent à remonter
  • body > div p : il a dû monter et descendre beaucoup de fois pour établir la règle

Là encore, à moins d’avoir un très grand DOM ET un très grand nombre de sélecteurs, tout ça est négligeable en matière d’optimisation de la performance. S’il n’y avait que deux choses à avoir en tête :

  • Plus un sélecteur est court, plus il est rapide à analyser.
  • Essayer d’avoir le moins possible de sélecteur dans « Autres »

(webkit stocke + d’informations sur le DOM pour pouvoir descendre et remonter dans les noeuds plus vite ensuite)

Render Tree

Les images et le CSS ayant été traités, le « render tree » peut être fabriqué.

Reflow ou layout (selon les navigateurs)

A moins d’un timeout ou d’un JS qui demande une position, le reflow n’est lancé qu’une fois que toutes les CSS ont été chargées.

Chaque bloc est placé dans la page selon sa position et sa taille.

reflow

> Voir la vidéo sur Wikipédia Japon qui montre le reflow
On voit dans la vidéo qu’il commence par le centre, fait le côté et, à la fin …recommence : car il se rend compte en bas de colonne de gauche qu’il n’a pas assez de place en hauteur et qu’il doit donc ajouter un ascenseur à droite. Il recalcule alors les largeurs en fonction.

NB : Sur IE, la scrollbar est mise d’office.

A ce propos, Vincent Voyer
propose une astuce : « Forcer la barre de défilement et empêcher un reflow au chargement : body{overflow-y: scroll;} »

NB : Chrome et Safari ont des outils géniaux pour se faire une idée également de ce qui se passe pour l’affichage de la page. Voir aussi Firefox Affiliates.

Le reflow est donc une étape relativement longue (compte-tenu de notre échelle). On peut donc garder en tête de veiller à ne pas générer de reflow inutiles.

Les 2 cas fréquents qui déclenchent le reflow alors que cela pourrait être facilement évité :

  • images dans le code HTML sans width / height
  • l’insertion des Flash avec des librairies JS comme swfobject
Painting

= la vue de ce qui est affiché à l’écran

Avant, c’était le processeur qui dessinait tout. De ++ c’est le GPU (Processeur Graphique) (+ puissant pour ces tâches (dont les transformations pour certains navigateurs)

Le JS

Rappel : c’est bloquant (= le parseur s’arrête et télécharge, interprète et exécute le JS avant de continuer)
Depuis deux, trois ans, un parseur secondaire va chercher en parallèle les URL (pour gagner un peu de temps) mais pas plus

Il  y a des opérations JS hyper rapide. par contre, les éléments entres JS et DOM prennent forcément du temps.
Le DOM c’est lent.
Si on demande des dimensions, on déclenche le reflow : faire toutes les demandes de lecture au début et ensuite seulement toutes les écritures.

EX : si on change couleur ou opacité, par exemple, pas de reflow déclenché

Display none libère de la mémoire mais est plus long à remettre en place.
Visibilty hidden : ne libère pas de mémoire mais est ré-affiché plus vite.

Les soirées webperfParis se réorganisent …Lorgnez du côté de https://sites.google.com/a/survol.fr/webperf-user-group/ pour être tenu au courant.
Photo : Prélude

Résumé de mon atelier sur l’argumentation de la gestion de la qualité web

Le résumé de mon atelier « Argumenter en faveur du Responsable qualité web », fait le 15 octobre à Paris Web 2011, est en ligne …mais pas ici !

Ben oui, avec le lancement de w3qualité (voir w3qualité, un portail pour parler de qualité web), je vais essayer de mettre là-bas tout ce qui concerne la qualité web.

C’est donc là que ça se passe :

Pour ceux qui me suivent pour la qualité web, je vous conseille donc le flux RSS de w3qualité.

Référentiel de bonnes pratiques en référencement naturel

Après les « Bonnes pratiques du web », Opquast a lancé cette année un atelier pour constituer les « Bonnes pratiques SEO ».

Le résultat de cet atelier participatif et communautaire a donné une liste de 80 critères.
Tout comme les Bonnes Pratiques du web, c’est classé sur 3 niveaux et par catégorie.

– Tout comme pour les Bonnes Pratiques du web, c’était un plaisir d’accéder à un tel projet en ligne, en échangeant avec tous, en argumentant, en apprenant –

La liste est d’ores-et-déjà disponible et utilisable dans Opquast Reporting.

Trois questions sur le métier de gestionnaire de la qualité

Apreçu

Vous vous demandez quel est mon parcours, mon métier ? Qu’est-ce que la qualité dans ma démarche au quotidien ? Est-ce que conformité et normalisation permettent réellement de voir évoluer la qualité ? Ce sont des questions que Trois Questions* aussi s’est posé.  …Et du coup, on me les a posé !

Voir mon interview chez Trois Questions.

* Trois Questions est une initiative de Christophe Andrieu, Stéphane Deschamps et Vincent Valentin. Ils ont pris le parti d’interviewer les techniciens du web.

w3qualité, un portail pour parler de qualité web

logoQuelques tweets commencent à circuler pour vous annoncer la naissance de w3qualité.

w3qualité c’est un projet que nous avons monté, Christophe, David, Sébastien, Stéphane, Vincent et moi, autour de la qualité web.

Nous avions envie de créer un espace dédié pour mieux faire connaître cette discipline, l’expliquer et fournir des ressources.

On en est à nos tous premiers pas. Je vous laisse jeter un œil à notre premier contenu :
une (des !) définition de la qualité web.

Pour en savoir plus : w3qualité – A propos.

Bon, là, je vous l’ai fait très soft, mais en fait, je suis à la fois fière, angoissée, excitée et impatiente ! 😀

Paris Web – Atelier « Argumenter en faveur du poste de Responsable qualité web »

Pour ceux qui viennent à Paris Web (conférence, apéro et/ou ateliers) : rendez-vous tout bientôt ! 😀

Et pour rappel, j’animerai un atelier « Comment argumenter en faveur du poste de Responsable qualité web« , aux ateliers, le samedi.

Mise à jour – 14/12/2011 :
Le résumé de l’atelier est disponible sur w3qualité :Argumenter en faveur du poste de responsable qualité web

Les présidents de Paris-Web

Billet édité initialement le 24 juin 2011 puis mis à jour le 21 octobre 2013.

Sauras-tu retrouver quel président de Paris-Web se cache derrière ces bulles ?

Voir la transcription 1

Transcription 1 :

(…) alors là, tu vois, j’étais en train de parler à cette fille trop absolument CANON et je lui racontais comment, en tant qu’expert, j’avais été LE SEUL gars capable de résoudre le problème de toute l’équipe alors que 25 mecs avant avaient essayé, quand la fille que j’avais vu le matin arrive (…)


Voir la transcription 2

Transcription 2 :

(…) « not with his brief hours and weeks, But bears it out ev’n to the edge of doom«  et à chaque fois que j’y pense j’ai les larmes aux yeux. Et j’en parlais l’autre jour à André. Tu vois qui c’est ? André, tu devrais aller voir son blog, il a une plume admirable ! L’autre jour, il racontait sa rencontre avec un caillou et comment ces petites choses du quotidien, si on n’y fait pas attention (…)


Voir la transcription 3

Transcription 3 :

Toi ça va ?


Voir la transcription 4

Transcription 4 :

— JC, tu pourras faire un mail au type de la captation ? — Non, demain je ne pourrais pas m’occuper des pass : je serai en séminaire toute la journée. …Bon, je le ferai à la pause. — C’est bon, j’enverrai un mail sponsors pendant ma pause clope. — Il faudra penser à lui prendre des chocolats. Je pourrai aller lui porter. — T’as besoin d’aide pour la compta ? Demain, j’aurai 5 minutes, je pourrai faire le bilan. — JC ? C’est bon pour la captation. J’ai fais le mail pendant qu’on parlait, là.

Intervention à la formation Expert Accessibilité

Dans la catégorie « Mon nombril », je vais intervenir lors de la formation Expert accessibilité de Temesis (oui, oui, c’est la classe, je sais).

Cette formation au programme alléchant propose en effet des « mini-conférences » qui permettent de couvrir un périmètre large, l’expert en accessibilité n’étant pas un robot appliquant un référentiel droit dans ses bottes et les œillères bien fixées.

Je succède à Denis Boudreau, Stéphane Deschamps, Nicolas Hoizey, Xavier Borderie, Christophe Porteneuve, etc (1). C’est vous dire ma fierté !

J’y serai en tant que Responsable qualité web, le but étant de présenter mon poste, comment ça se passe au quotidien, comme j’en suis arrivée là, etc.
Je suis impatiente de partager avec les stagiaires, mon poste arrivant, je trouve, à un tournant ou des questions concrètes et pragmatiques me font considérablement avancer.

J’aurai aussi l’honneur de faire partie du jury validant les mémoires des stagiaires. (pour tout versement de pots-de-vin, passer par le formulaire de contact de mon site)

Je remercie d’ores-et-déjà Temesis de me donner l’opportunité de partager mon expérience et mon enthousiasme pour mon poste, ainsi que l’opportunité d’assister aux présentations.

(1) Voir « Formation expert Accessibilité : bilan séminaire 2 » et « bilan séminaire 3« 

Poste de responsable qualité web

Le responsable qualité web (ou « gestionnaire de la qualité web » ou « manager de la qualité web ») a pour mission d’identifier et d’assurer le suivi qualité via des objectifs fixés en veillant à l’industrialisation, à l’innovation et à l’amélioration continue.
En plus des objectifs propres à chaque projet, il veille aux critères spécifiques au support web : interopérabilité, accessibilité, performance, etc. et vise une expérience utilisateur globale positive.
conformite4
Ses responsabilités :

  • s’assurer de la conformité par rapport aux attentes de qualité :
    • établir indicateurs et critères en fonction des objectifs (du projet / de la société)
    • rédiger et mettre à jour les spécifications techniques ou les spécifications autour des valeurs/niveaux de qualité souhaités
    • mettre en place les moyens d’atteindre les objectifs (outils, processus, accompagnement des équipes)
  • assurer l’amélioration continue :
    • des processus
    • des outils
    • via des itérations audit > analyse > plan d’action > audit
    • via une veille dense et restitution (veille en ligne, conférence, formation)
    • via l’identification de besoin en formation / en compétence et mise en place
  • animer la qualité et la montée en compétence
    • vulgarisation, évangélisation
    • animation autour de la qualité, dialogue entre les métiers, partage de connaissances
  • Participer à la visibilité de la société auprès de clients et collaborateurs potentiels
    • prises de paroles sur les sujets de la qualité en tant que Responsable qualité web de la société
    • organisations d’événements au nom de sa société
    • rédaction d’articles sur un blog de société

Son périmètre :

Le responsable qualité web intervient de bout en bout des projets : de la conception à la maintenance en passant par le développement.
Il dialogue avec les différents métiers pour prendre en compte les contraintes et les objectifs propres : graphisme, ergonomie, référencement, intégration, développement, e-marketing, rédaction, …
Il ne se substitue pas à l’expert mais doit pouvoir comprendre et dialoguer avec chacun.

Ses besoins :

  • Travailler en parallèle des projets et de la production
  • Amélioration continue via la veille et la formation permanente (veille, conférences, formation) pour être à jour et participer à l’innovation
  • Interactions permanentes et échanges avec les métiers
  • Outils de tests, d’automatisation, de reporting, d’alerte…

Son rattachement doit lui permettre d’avoir la légitimité à intervenir auprès des équipes.

amelioration3

Pourquoi / comment le poste de Responsable qualité web – Présentation à Sud Web 2011

(voir vidéo ci-dessous)

Pourquoi / comment un poste de Responsable qualité web [Retour d’expérience]

Le but est de vous raconter comment la création d’un poste de Responsable qualité web a répondu a un certain nombre de besoins.Pour donner rapidement le contexte : nous sommes une sorte de petite agence web au sein d’une grosse société financière.

Constats

Nous sommes partis de plusieurs constats.

Ambitions – Suivi ?

L’équipe travaille avec des ambitions, comme par exemple le respect des standards du web, l’accessibilité, etc.Mais aucun suivi n’est effectuer pour évaluer et mesurer ces ambitions

Motivation – Flux de la prod ?

L’équipe est motivée et intéressée par son travail et souhaiterait monter en compétence, faire de la veille, etc.Mais le flux de la production ne permet pas de faire de la veille en continu et d’utiliser cette veille.

Expertise – Cas par cas

L’équipe est une équipe d’experts.Mais chacun utilise son expertise sur le projet sur lequel il ou elle est en train de travailler sans que cette expertise soit capitalisée ou diffusée.

Réponses

Les réponses que l’on a pu apporter à ces constats au travers du poste de Responsable qualité web.

Objectifs, critères et suivi

Par rapport à la problématique du suivi :le Responsable qualité web doit avoir en tête les objectifs (du projet, de l’équipe, de l’entreprise) et identifie les critères qui leurs correspondent. Il les suit, les analyse en tire des conclusions pour la production, la qualité et l’efficacité.

Exemples

Quelques exemples concrets :

  • Plusieurs itérations ont été faites autour des Bonnes Pratiques du web Opquast à travers un audit, une analyse des résultats – dont comparaison avec l’audit précédent – et un plan d’action qui en découle.
  • Tests de performance avant et après la refonte d’un projet. Mise en place du suivi de la performance. Bien sûr, là aussi, les tests sont analysés et des améliorations sont proposées.

Montée en compétence au quotidien et ponctuellement

Par rapport à la problématique du flux de la production gênant la veille :le Responsable qualité web est en parallèle de la production. Il fait une veille suivie, partagée que ce soit à travers une veille technologique en ligne, des conférences, de la formation, etc.

Il est également à l’écoute des besoins des équipes en formation et en information sur des sujets précis.

Exemples

En guise d’exemple concrets :

  • Veille sur le référencement naturel « à la commande » faite en continue pour l’équipe de Référencement qui ne peut pas s’en occuper
  • Vulgarisation pour les équipes non-technique : initiation au HTML et aux spécificité du média web
  • Document à destination des demandeurs sur pourquoi et dans quel mesure le support d’Internet Explorer 6 n’est plus que partiellement assuré

Diffusion de l’expertise

Par rapport à la problématique sur l’expertise :le Responsable qualité web la diffuse au travers de spécifications, de documentations pour capitaliser les savoir-faire, les méthodes, les bonnes pratiques. Elle est diffusée à toute personne intervenant sur les projets (interne, externe) ainsi qu’aux équipes non-techniques, voir non-web.

Exemples

Comme exemple concrets :

  • Rédaction et mise à jour en continu de la Charte technique (diffusée aux intervenants techniques internes et externes)
  • Rédaction d’un document d’aide pour décliner une charte graphique au média web

Pour résumer

Le Responsable qualité web a une mission de support en transverse des métiers et des équipes.
Il identifie les objectifs de qualité (du projet, des équipes, de l’entreprise).
Il fait un suivi de ces objectifs avec des critères concrets qu’il identifie et des plans d’action.
Il est vecteur de montée en compétence à travers la veille, la formation et la diffusion des informations qu’il récolte.
Il capitalise l’expertise en pérennisant les bonnes pratiques, en les transmettant, en les industrialisant.
Enfin, il assure la communication, la vulgarisation et l’animation autour de la qualité web, de l’expertise de chacun et du rôle de tous.Voilà la vision du poste de Responsable qualité web tel que nous l’avons mis en place. C’est un poste qui est amené à se consolide en échangeant en IRL (« In Real Life ») …

… ou via différent moyens.Je serais ravie d’en discuter avec vous ; n’hésitez pas à me contacter.

Le diaporama est disponible sur SlideShare.

Vidéo

Mise à jour ‐ 17/12/2012 ‐ SudWeb a mis la vidéo en ligne :

Comment et pourquoi un poste de Responsable qualité web (Delphine Mallassingne) – Sud Web 2011 from Sud Web on Vimeo.

Merci à Sud Web de m’avoir donné la possibilité de vous présenter le métier de Responsable qualité web.

« Maman j’ai peur » : atelier Paris-Web pour aider les orateurs (potentiels)

Compte-rendu

Un compte-rendu est disponible sur le site de Paris Web.

Enregistrement sonore

Un enregistrement sonore est disponible sur SoundCloud (merci Yves !) :
Formation orateurs Paris-Web à Cifacom by yvg

Diaporama – 1re partie : « Vos slides »

Diaporama de Virginie : Vos slides

Diaporama – 2e partie : « La prise de parole »

Diaporama sur la prise de parole ; les vues ont été annotées.

Je ne fais pas de résumé de la présentation. S’il ne fallait en retenir que quelques points :

  • Préparez !
  • Soyez conscient de vos points forts, des points positifs (dès maintenant et au moment de passer sur scène)
    • Je me suis préparé
    • Mon sujet intéresse (l’équipe de sélection qui l’a choisi et le public qui est venu)
    • le public est toujours plus bienveillant qu’on peut l’être avec soi-même
    • Toute l’équipe d’organisation est là pour m’aider
    • Telle ou telle personne est dans la salle (et ça m’aide)
    • J’ai vu / écouté / assisté à la préparation Paris-Web « Maman j’ai peur ! »
    • Je connais mes points forts
    • J’ai mis des habits dans lesquels je me sens à l’aise
  • Ayez votre message en tête en permanence et faites-le passer
  • Pensez à la respiration qui peut vous aider à tout moment (face au track, au stress, pour reprendre souffle et rester concentré…)

Un peu plus ?

J’avais fait quelques articles sur la prestation orale. Vous trouverez également plein d’autres liens sur Internet ou encore le même atelier, en 2010, tenu par Stéphane Deschamps (là aussi, l’enregistrement sonore est disponible).

Convaincu(e) ?

Vous avez jusqu’au 18 juin pour répondre à l’appel à orateur de Paris Web ! En plus des thématiques chères à Paris Web, un angle d’attaque (totalement facultatif par ailleurs) est proposé : K.I.S.S. ; Keep It Simple …and Smart.