Cette conférence très concrète nous permet de comprendre en quoi les standards du web et la qualité ne sont pas (que) des lubies des développeurs-geeks-passionnés-et-intégristes mais bien des actions menées par les entreprises au service du chiffre et de la rentabilité.

Présentation

Une rapide présentation de BNP Paribas Personal Finance nous permet de comprendre qu’il s’agit d’un acteur majeur du crédit (à la consommation, immobilier et rachat de crédits). L’ampleur du business sur Internet est tel (un million de visiteurs uniques par mois, un milliard de chiffre d’affaire en 2007) qu’une équipe est dédiée à l’activité web.

Et les standards du web dans tout ça ?

L’objectif d’une telle entité est clair et identifié : la rentabilité (acquisition, taux de transformation, ROI)

De façon très pragmatique, les choix technologiques sont donc fait aussi en fonction du taux de pénétration. HTML est utilisé à 100% (à la différence de technologies tentantes parce que plus « sexy »).
Si l’on se penche ensuite sur l’équipement des visiteurs de Personal Finance, on constate une forte pénétration de Window et environ 2% de Mac – pour les systèmes d’exploitation – et une forte pénétration de Internet Explorer (75%), Firefox (20%) et environ 2% pour Safari – côté navigateurs.

La conversion est simple : à un million de visiteurs par mois, 2% représentent environ 20 000 visiteurs.
L’entité e-Business d’une entreprise telle que BNP Paribas Personal Finance ne peut donc pas pas se permettre de « laisser de côté » les configurations plus rares. Utiliser les standards est le meilleur garant pour s’affranchir en grande partie des problèmes de configuration.

Cela prend également le relai des exigences en visibilité : référencement naturel, e-mailing et contraintes juridiques (accessibilité).

Bon, les standards du web ok. Mais qui et comment ?

Les équipes concernées sont toutes celles qui interviennent sur la conception et la réalisation de pages et applications web : marketing, commerciale, agence de communication, agence web, DSI et, dans le cas de BNP PF, une équipe dédiée interne de développement web.

Chaque intervenant joue un rôle vis-à-vis des standards en fonction de son périmètre : conception, webmastering, référencement, contraintes juridiques, etc.

Les standards du web sont intégrés au projet via l’intégration, bien-sûr, mais aussi la rédaction de cahiers des charges, l’audit, le suivi de la qualité ou via la formation des différents intervenants.

Au delà des standards : la qualité

Aller plus loin c’est intégrer la qualité au cœur des développements et de la maintenance. Elle va permettre d’assurer la pérennité d’indicateurs, d’élargir au maximum le public touché, de simplifier maintenance et interopérabilité.

Néanmoins, il ne faut pas se laisser égarer par le fait que la qualité est une notion subjective. On doit au contraire se baser sur les règles de développement web :

• standards du web
• accessibilité
• bonnes pratiques de développement

Enfin, il faut s’assurer que ces règles sont suivies.

Pour mettre en place un suivi de la qualité, il va falloir dédier du temps et des ressources  au suivi de la qualité. A travers documentations et formations, sensibiliser les intervenants à l’accessibilité, à l’enrichissement progressif.

Un outil de suivi de la qualité est fait pour accompagner ce chantier itératif.

Enfin, une fois ces leviers mis en place, des pistes sont toujours possibles pour aller plus loin : améliorer sa performance, monter les équipes en compétences, industrialiser les développements…

Une fois qu’on s’est dit tout ça, qu’est-ce qu’il reste ?

Les standards du web mis en place vont donc permettre d’augmenter le chiffre d’affaire potentiel en élargissant la base client. De plus, le fait de garantir l’accessibilité aux applications – et notamment aux formulaires de demande – augmente le taux de transformation.
Des modes de conception et de développement normalisés entre les différents intervenants abaissent les couts. Enfin, cette baisse des couts se ressent également au niveau de la maintenance et de l’interopérabilité.

Voir la conférence :

Le compte-rendu si dessous est d’ailleurs très partiel par rapport à la richesse de la conférence. J’ai eu du mal à doser entre le plaisir d’écouter et de me laisser porter et celui de prendre des notes consciencieuses et rigoureuses De toute façon, je vous recommande vivement de vous faire vos propres notes en visionnant la vidéo … dès qu’elle sera sortie !

Quelques rappels :

CSS1 date de 1996 ; CSS2 est sorti en 1998 et CSS3 est en travail depuis … 1998.

Le CSS Working Group a imposé que CSS2.1 devait sortir dans les 2 ans.

CSS2.1?

CSS2.1 parce que CSS2 est à revoir : il faut corriger les erreurs et ambiguïtés, virer ce qui inimplémentable / inimplémenté / inutilisé. Les ajouts y sont minimes.
CSS2.1 devra subir des suites de tests.

Ce qui va être implémenté à CSS :

C’est là que commence le « teasing » avec une liste d’éléments CSS. Certains sont déjà implémentés dans certains navigateurs ; on peut donc commencer à « jouer » avec.

Selectors Level 3

• :nth-child: s’utilise avec un argument. Cela permet de sélectionner un élément dans un groupe : 1 paragraphe sur 2, le 8ème élément … On pense tout de suite à nos tableaux dont on veut modifier la couleur de ligne une ligne sur deux. Finis ma class="lignePaire" !
• selecteur d’attribut [nomdattribut] (implémenté dans tous les navigateurs sauf IE6)
• @namespace : permet de mélanger du style pour HTML et SVG sans soucis.
• :not() : pour nier la valeur booléenne résultante – Si l’élément n’a pas la classe « xxx » alors la règle s’applique. Je trouve ça génial et, maintenant qu’on me le met sous le nez, indispensable.
• ::selection couleur de fond et couleur du texte des éléments sélectionnés. Je suis pressée de l’utiliser également pour me débarrasser du moche « blanc sur fond bleu ». Attention toutefois à ce qu’il n’y ait pas de « dérives » de graphistes ne voulant pas gâcher un design et en profitant pour rompre trop le contraste de la sélection.

marquee

On croyait s’en être débarrassé. On croyait que c’était bien. …Et bien non ! La possibilité de faire défiler un texte est très importante pour sur les marchés asiatiques (Japon, Chine). Cela fait partie de leurs usages.

Sauf que là, ce sera géré par CSS et non plus par HTML.

CSS Media Queries

Sélection des média selon leurs caractéristiques intrinsèques.
Celui-là aussi est génial et très attendu. Il va permettre de sélectionner une feuille de style en fonction, par exemple, de la taille de l’écran :
@media screen and (max-width: 501px) { ... }

Borders and backgrounds

De nombreux éléments arrivent pour les bordures et les images de fond :

• background-size
• background-repeat : space | round
• background-clip : border-box | padding-box | content-box | no-clip
• backgound-break : pour l’impression
• border-radius (Mozilla, WebKit, Safari OK)
• box-shadow

CSS Transformations

Je crois qu’on n’a pas fini de s’amuser quand la propriété transform sera à notre disposition ! A nous, intégrateurs et webdesigners consciencieux, d’en faire du bon et non pas du gadget.

• transform: scale rotate translate skew matrix
• transform-origin

CSS Transitions

Pareil avec celle-ci qui permet des animations de page bien sympatiques si on n’abuse pas de l’effet.

-property, -duration

Valeurs, unités et autres

J’en rêvais, je ne le croyais même pas possible. Depuis le temps que des profs de maths s’évertuent à me faire comprendre qu’on n’additionne pas des torchons et des serviettes … et bien CSS si !
CSS va nous permettre de donner des valeurs additionnant des % et des valeurs fixes ! Waouh !

width: calc(100%/3 - 2*1em - 2*1px)

Typage de attr() et généralisation de la propriété content ! (attention, si je remplace un paragraphe par l’url d’une image, il faut que le lecteur d’écran se base sur le DOM et non sur la restitution)

Multi-colomn

Le multi-colomn, que certains d’entre-nous exploitent déjà grâce à Firefox…

CSS colors

Idem avec opacity.

A noter à propos des couleurs, la dépréciation des couleurs système CSS2.

CSS 3 Basic UI

Et encore plus d’éléments à découvrir, exploiter et utiliser :

• contrôle des éléments de formulaire : :active, :defaut, :valid, :invalid, …
• ::value, ::choises
• box-sizing
• nav-index…

Brouillons :

Et pour finir de se mettre l’eau à la bouche, voici ce qui est en préparation dans la hotte :

• gradiant,
• grid positioning / CSS templat layout,
• @font-face,
• flexible box model,
• Generated content for page media,
• variables / constantes, CSS positioning (hauteur d’un élément égal à la hauteur d’un autre élément).

En matière de qualité éditoriale, Joël Ronez déconseille la mise en application d’une charte qui est, selon lui, trop difficile à mettre en œuvre et donc très peu suivie.

Il met en avant, à la place de toute charte, 10 grands principes, détaillés ci-dessous :

1. On écrit pour les lecteurs
   Il faut éviter le jargon et les phrases compliquées. Au contraire, il faut faire court et concis. Le texte doit donner de l’information ; attention aux phrases vides de sens ! Et, dans la même idée, éviter de s’auto-centrer.
2. Le texte n’est pas un élément décoratif
   Néanmoins, le texte fait partie de la maquette. La maquette doit donc être préparée, de préférence, avec du vrai texte.
3. Le texte est le véhicule
   Le texte est à la fois le véhicule du sens et celui du parcourt du visiteur ; il fait partie des éléments de guidage.
   Les titres doivent être informatifs et renseigner le visiteur sur ce qu’il trouvera dans le texte en dessous. La logique du teasing ne marche pas dans le domaine de l’éditorial web.
   Penser également à utiliser des textes d’accroche ou chapô.
4. La page est un espace
   Concevoir son texte en fonction de l’espace de la page. La lecture d’un contenu par l’internaute se fait en « F » : l’axe vertical pour rechercher de l’information, l’axe horizontal pour approfondir. Il faut donc que les titres et les informations importantes soit en début de ligne.
5. Le web n’est pas fait de pages
   Les pages web ne sont pas des espaces statiques où l’éditeur à la main sur tout. Les pages sont maintenant de plus en plus collaboratives et il faut prendre en compte la participation de l’internaute.
6. Le CMS m’a tuer
7. Le workflow m’a tuer
8. La DSI m’a tuer
9. Le lien c’est le web
   Proposer des axes d’approfondissement en faisant des liens entre son contenu et les autres contenus. Ne pas appauvrir son message en ne faisant pas de lien sortant.
10. Quelques basiques :
    • Lisibilité par la forme (aération, paragraphe) et par le fond (précis et concis)
    • Structure (Titre, accroche, texte)
    • Principe de la pyramide inversée (les informations importantes en haut) et des 5W (Who, What, Where, When, Why)
    • Indexabilité (titres informatifs et utiles au référencement naturel)
    • Facilité d’accès aux contenus (libellés clairs)
    • Temporalité (citer ces sources)
    • Profondeur (faciliter l’accès à la profondeur)

Si ce rapide survol vous a donné envie d’approfondir, Joël Ronez a écrit un livre sur le sujet : L’écrit web

Les principes techniques à respecter

La séparation du fond et de la forme, en tout premier lieu, est une base indispensable à la qualité. Elle est gérée en mettant d’un côté le contenu dans les fichiers HTML et de l’autre la mise en forme via les fichiers CSS. Le recours au HTML, en autre, va également vous permettre de renseigner la structure sémantique de votre contenu.

Lors des développements, commencer par faire du pluri-média puis du spécifique, on peut ensuite également enrichir les interfaces : les interfaces sont d’abord « pauvres » et sont fonctionnelles, puis on peut rajouter une « surcouche » d’interfaces riches.

Enfin, penser à la délégation et mutualisation technique.

Les principes de management

Les clés du management d’un projet vers l’amélioration de la qualité passe par la séparation des métiers. Le web se professionnalise et chaque aspect de la fabrication et du maintient d’un site web passe maintenant par des spécialistes.

Le média implique aussi de privilégier les méthodes agiles (modèle VMC). Des itérations rapides et fréquentes seront plus efficaces. Dans le même état d’esprit, être à l’écoute des utilisateurs permet de savoir quels points travailler, selon quelle priorité.

Les modèles de qualité, tel que VPTCS (1) et les référentiels sont des éléments qui permettent de cadrer les actions et qui servent de base et d’accompagnement.

Enfin, tout cela ne servirait à rien sans des contenus et services à valeur ajoutée.

Les pièges à éviter

Le plus gros des freins est bien sûr le rejet global. Néanmoins, il faut également se méfier de la surqualité. Voir trop bien faire amène parfois à des excès, des culs-de-sac. Parallèlement, une mauvaise démarche consisterait aussi à faire des rejets technologiques pour aplanir les contraintes de qualité ou encore de déporter les hébergements des éléments « à difficulté » pour ne pas avoir à les régler.

Description de la démarche

La démarche de l’amélioration continue de la qualité passe par cinq étapes itératives :

1. l’inventaire : quel est le parc de site ? qui le gère ?
2. les référentiels : quels sont les critères auxquels je veux que mes sites répondent
3. l’état des lieux : quel est le niveau de mes sites par rapport au niveau de qualité que je souhaite atteindre
4. la planification : quels sont les objectifs de mes sites ? Comment je m’organise afin d’atteindre ces objectifs
5. le déploiement : suivi des améliorations

L’outil Mon Opquast

L’outil Mon Opquast s’inscrit dans la démarche de l’amélioration continue de la qualité. Il permet de traiter les cinq étapes décrites ci-dessus.

Communiquer sur la qualité

Une des erreurs consiste à ne vouloir communiquer sur la qualité qu’une fois un niveau idéal atteint. Ce n’est pas la chose à faire car ce niveau n’est pas toujours (jamais) atteint et l’on se prive, pendant ce temps, d’une communication positive et récurrente sur notre démarche.

L’accessibilité

L’accessibilité est un cas difficile sur lequel il faut se pencher en fonction de ses moyens. La démarche en cinq étapes décrites ci-dessus peut s’appliquer à ce cas là où le référentiel utilisé pourrait être RGAA (déjà implémenté dans Mon Opquast), où l’on prévoirait des formations à l’étape de la planification et où le déploiement serait le moment de la mesure des progrès, de la communication et du retour à la planification.

Les interfaces riches ne changent pas les grands principes de l’ergonomie

Si l’arrivée des interfaces riches – qui se construisent et se déconstruisent en fonction des actions de l’internaute – apporte de gros changements matière d’ergonomie, les principes et les contraintes restent les mêmes. L’interface reste « l’écrin » du service ; elle s’efface à son profit.

Quelques points sont à veiller particulièrement avec les interfaces riches

Les changements ergonomiques qui découlent des interfaces riches portent plus sur la façon dont l’ergonomie va s’adapter aux nouvelles techno pour toujours faciliter la tâche de l’internaute.

Attente et Immédiateté

Si l’attente doit être limitée, elle doit aussi être signalée. L’internaute doit savoir que quelque chose est en train de se produire, il doit aussi savoir quoi. L’attente doit aussi être justifiée : attendre pour un calcul, oui ; attendre pour avoir une police à disposition dans une application d’édition, non.

L’attente peut parfois être « forcée » car parfois, l’immédiateté est déroutante.

Feedback

Le feedback doit être donné à chaque fois qu’il est nécessaire : au rechargement d’un élément, pendant le traitement d’une action, pour les différents état d’une tâche (« Ajout en cours », « Ajouté »)

Il doit également être correctement placé, c’est-à-dire dans la même zone que celle du changement.

Affordances

Les affordances sont les possibilités d’action que suggère un objet par sa forme. Elles se basent aussi bien sur la métaphore que sur l’expérience.

Les nouvelles possibilités d’interaction suggèrent de nouveaux usages. Cela implique de bien guider l’internaute pour qu’il comprenne les actions attendues. Les mots, sont toujours le moyen le plus efficace pour le guider mais on peut également avoir recours aux symboles, aux icônes, au curseur de la souris…

Comme pour les interfaces « traditionnelles », il s’agit de bien accompagner l’internaute dès sa première utilisation.

Le site de l’édition 2008 :

• Paris Web 2008
• Le billet « Paris-web 2008, c’est fini « 
• Le billet Les vidéos sont là !

Les « twitts » :

• Les « twitts » taggés #pw2008
• Le fil Twitter de Paris Web

Les photos :

• Les photos taggées pw2008
• L’album parisweb2008

Les croquis (et oui !) :

• Croquis Paris web 2008

Les présentations :

• Élie Sloïm
  Qualité et accessibilité web – Vers l’amélioration continue
• Christian Heilmann
  Working in the now (en)
  
• Daniel Glazman
  La mode se démode, le <style> jamais…
  (à regarder avec un navigateur très avancé )
• François Nonnenmacher
  Bonnes pratiques projet web
• David Larlet
  Le Web Sémantique ou l’importance des données liées

Les ateliers

• Thomas Parisot – Développement efficace avec les frameworks CSS
• Pascale Lambert-Charreteur, Vincent Valentin, Stéphane Deschamps – Optimiser ses CSS
• Romy Duhem-Verdière, Marie Destandau, Hugues Moreno – Cascade et héritage : concevoir, organiser, optimiser et maintenir ses feuilles de styles

Les comptes-rendus :

• chez Damien Mathieu
• chez Jean-François
• chez Julie
• chez Julien Dasonval
• chez km
• chez Loïc Mathaud
• chez Monique
• chez Olivier Duval : « Microformats vs. RDFa« 
• chez Romy Duhem-Verdière
  
• chez Sanvin : jeudi et vendredi
• chez Temesis
• chez Thomas Parisot
• chez … moi !
• etc.

Les vidéos :

Les favoris :

• « parisweb2008 » sur Delicious
• « pw2008 » sur Blogmarks

Tout ce billet sera complété au fur et à mesure de la mise à disposition des présentations, des vidéos, etc.

Paris Web 2008,
Les meilleurs biscuits !

Utilisabilité et interfaces riches

Événement français de la Journée Mondiale de l’utilisabilité : Word Usability Day.

Cela se passera à Paris, le 12 Novembre et c’est organisé par Fred Cavazza. Je suis particulièrement intéressée par les conférences abordant le thème des interfaces riches via l’expérience utilisateur ou encore en soulevant le problème de contraintes, des inconvénients à prendre en compte pour de bonnes interfaces riches.

Paris Web 2008

LE cycle de conférences à ne pas rater !

Cette année, les choses se corsent ! Il faut choisir entre des conférences « techniques » et des conférences « décideurs » qui se déroulent en même temps. Mon métier et mes centres d’intérêt m’amène à vouloir les suivre … toutes

Serait-ce pour compenser ce choix difficile ? je me suis inscrite partout : conférences jeudi et vendredi, apéro communautaire vendredi et ateliers du samedi !

Accessibilité

Pourquoi Accessibilité ? Parce que j’ai la chance, dans les jours à venir, d’assister à deux formations sur l’accessibilité : une formation technique et une sensibilisation de l’accessibilité destinée aux décideurs.

Les deux étant assurées par l’équipe de Temesis …et oui !