Retour sur la conférence Paris Web : la qualité dans le navigateur

par Thomas Fourdin, le 30 octobre 2013, 13:26 - Lien permanent

catégorie : Événements - tags :

L’une des étapes de réalisation d’un site Internet consiste à découper le contenu et l’interactivité d’une page en éléments intelligibles par le navigateur (le fameux HTML vous savez). Cette étape est cruciale pour la qualité du site. Elle n’est pourtant ni réellement comprise ni pilotée par les entreprises clientes. Découvrons les responsabilités de « ceux qui parlent à l’oreille des navigateurs » à l’occasion de la conférence Paris Web.

Paris Web 2013, webdesign, qualité, accessibilté En octobre 2013 se tenait la huitième édition de la conférence Paris Web dont le mot d’ordre est « Webdesign, Qualité et Accessibilité ». Les sujets présentés à cette occasion s’adressent essentiellement à un public de designers et d’intégrateurs HTML. On y croise donc ceux qui font le web avec passion et soucis de la qualité et qui peinent pourtant à être compris et reconnus.

Essayons d’y remédier.

L’intégration, étape obligée de la réalisation Web

Parmi les intervenants clés de la réalisation d’un site Internet, on imagine facilement :

  • Le designer qui conçoit l’aspect visuel et interactif du site, en concertation avec l’ergonomie pour assurer son utilisabilité.
  • Le développeur (implicitement « back-end ») qui configure les traitements du site : traitement des formulaires, interrogation de bases de données, appels à des applications tierces, etc.

3 étapes de réalisation web

Entre ces deux couches d’un site Internet se cache un autre maillon, essentiel mais négligé, de la qualité globale d’une expérience Internet : le développement front ou l’intégration. Cette étape consiste à mettre en place les éléments qui seront interprétés par le navigateur Internet. C’est véritablement là que l’on emploie le langage compris par le navigateur. Les technologies utilisées sont (l’historique mais toujours fondamental) HTML, les feuilles de styles CSS et le JavaScript.

Voyons en quoi cette étape est tout aussi importante que les autres et a largement son rôle à jouer dans la qualité globale de l’expérience Internet.

Le HTML, parent pauvre de la qualité Web

Plaçons-nous dans une démarche de réalisation ou d’achat d’un site Web. Pour assurer une qualité du résultat nous allons naturellement nous intéresser :

  • À la qualité de l’expérience utilisateur en soignant le contenu, le design et l’ergonomie. Éléments que l’on va pouvoir challenger par le biais d’audit, de tests A/B ou de tests utilisateurs.
  • À la fiabilité et à la sécurité de l’architecture technique et des développements lourds dits « back-office » (côté serveur). En faisant appel cette fois à des audits de code, des tests unitaires, une recette fonctionnelle et des tests de performance.
  • La phase d’intégration HTML ou de développement front-end restera donc, dans bien des cas, le parent pauvre de la démarche de qualité.

En effet, ce n’est pas facile pour une organisation d’acheter de la qualité Web dans le navigateur :

  • Les intervenants (agences ou indépendants) déclarent tous faire de la qualité. Le contraire serait tout de même étonnant.
  • Les équipes « métier » (communication, marketing) sont sensibilisées à l’expérience utilisateur mais pas à sa mise en œuvre HTML.
  • Les directions informatiques s’intéresseront plus volontiers à l’infrastructure et au développement back-office, plus proche de leur cœur de métier.

Les bénéfices d’une intégration de qualité

Un développement front bien réalisé cherchera à optimiser :

1. La compatibilité : un site lisible sur toutes les plateformes

Pour que le site s’affiche et s’active convenablement dans la profusion des navigateurs actuels (notamment avec la multiplication des supports du mobile, de la liseuse ou de la télévision). Mais un code correctement construit doit aussi s’adapter pour les navigateurs plus anciens qui peuvent subsister et anticiper les futurs navigateurs.

2. La performance : un temps de chargement et d’affichage maîtrisés

Pour afficher correctement une page Internet le navigateur doit charger tout un ensemble de fichiers (parfois plusieurs centaines dans les pires cas) : Html, images, feuilles de style, scripts. Le téléchargement et le traitement influent directement sur le temps d’affichage des pages et la vitesse perçue du site Internet. Et par là, sur les coûts d’hébergement.

3. L’accessibilité : un service assuré quelque soient les conditions de consultation

On oublie trop souvent que nos sites Internet ne sont pas consultés uniquement par des super-héros sur des écrans 25 pouces branchés en fibre optique. Le choix et la configuration des éléments diffusés au navigateur vont permettre au site Internet d’être consulté et utilisé dans un maximum de conditions d’utilisation. Par exemple par un lecteur d’écran vocal, sur un navigateur classique mais avec un niveau de zoom élevé, sur un mobile avec une connexion réduite qui ne permet pas de charger tous les éléments, etc.

4. Le référencement naturel : une meilleure présence dans les moteurs de recherche

Parler aux moteurs de recherche va de pair avec l’accessibilité, les robots des moteurs de recherche n’étant finalement qu’un utilisateur en conditions spécifiques. La bonne construction du code, le balisage sémantique sont les optimisations à mettre en œuvre pendant la phase de réalisation du site.

5. L’interactivité : de l’action dans le navigateur

La puissance accrue des navigateurs Internet et des technologies embarquées permet aujourd’hui de proposer de plus en plus de services et d’interactions directement dans le navigateur (sans avoir besoin de recharger une page ou de réinterroger le serveur). C’est également à la charge du développeur front-end de mener à bien et d’optimiser cette étape.

6. La maintenabilité : un code évolutif

Enfin un site Internet vit. On ne peut imaginer dès son lancement les nouveaux formats de contenu ou services qu’on finira par lui ajouter. Là aussi la conception HTML peut faire la différence sur la facilité du code à s’adapter aux nouveautés.

Autant d’éléments qui vont donc avoir un effet direct sur l’efficacité du site et sa rentabilité. Un code impossible à maintenir ou à faire évoluer à chaque évolution des navigateurs demandera des budgets supplémentaires.

Concrètement, comment acheter et vérifier la qualité de l’intégration ?

Même si tout le monde déclare faire de la qualité, quelques signes peuvent vous permettre d’engager les intervenants adaptés :

  • l’intervenant propose de lui-même un discours argumenté et pédagogique sur les éléments vus plus haut (compatibilité, maintenabilité, accessibilité…)
  • l’intervenant expose sa démarche qualité (normes respectées, référentiels utilisés) . On peut par exemple s’appuyer sur les référentiels d’accessibilité WCAG ou AccessiWeb et le référentiel de bonnes pratiques Opquast.
  • l’intervenant expose sa méthode de travail en la matière (framework utilisés, nomenclature de code).
  • La qualification de l’intervenant est vérifiée par un label ou une certification (ex : le label Accessiweb pour l’accessibilité).
  • L’intervenant se rend chaque année à Paris Web !

En cours de réalisation, vous pouvez également faire intervenir un tiers pour auditer et valider la bonne mise en œuvre.

Les signes qui ne trompent pas

A l’inverse quelques astuces peuvent vous alerter sur les manquements et faire corriger le tir :

  • Tester sur des configurations très diverses (et notamment les équipements « pauvres » tels qu’une liseuse ou un vieux modèle de téléphone qui donneront une meilleure idée du comportement profond).
  • Vérifier le poids de la page (le nombre d’éléments chargé et le poids total). Le nombre d’éléments ne doit pas excéder quelques dizaines et le poids se conter en quelques centaines de Ko grand maximum. Par exemple à l’aide de WebPageTest.
  • Désactiver les feuilles de style et vérifier la hiérarchie des éléments de contenu (la marche à suivre est différente selon les navigateurs)
  • Utiliser un outil automatique d’analyse de la page (valideur w3c , valideur Opquast) mais dont les retours doivent alerter sur des manquements éventuels mais ne peuvent pas conforter sans étude humaine plus poussée.

En quelques mots

Désormais, quand vous devrez faire réaliser un site Web, essayez de ne pas oublier les enjeux de cette étape de réalisation et entourez-vous de professionnels compétents et pédagogiques, le meilleur moyen de faire du web qui dure.

Un affichage parfait sur votre dernier iPhone à son lancement ne suffit pas, il est toujours nécessaire de vérifier sous le capot !

À lire aussi

Crédits

Pas encore de commentaire pour Retour sur la conférence Paris Web : la qualité dans le navigateur : faut s'y mettre !

Étrennez les commentaires

Ça ne devrait prendre que 5 minutes ou pourquoi c'est plus compliqué qu'il n'y parait

par Thomas Fourdin, le 25 mai 2013, 15:25 - Lien permanent

catégorie : Accompagnement (AMOA) - tags :

Votre site web a besoin d’une très légère correction ou évolution. Vous appelez votre agence en titre et explicitez votre demande. Vous pensiez simplicité, sobriété, réactivité, agilité. On vous répond procédure, chiffrage, recette et une évolution visible en ligne sous quelques semaines… et la bonne volonté alors ?

Cette difficulté de communication entre le client et son agence est très fréquente dans un projet. Elle hérite, comme beaucoup des incompréhensions, d’une différence de perspective.

En tant que client, responsable de site web, vous mesurez la complexité de la tâche en fonction de ce qui sera visible en ligne demain. Et effectivement, la modification apportée peut être minime.

Mais en faisant appel à une agence externe, vous avez décidé et payé une délégation de responsabilité. C’est maintenant votre prestataire qui est en charge de la cohérence et de la fiabilité de l’intégralité de votre dispositif en ligne. Votre interlocuteur mesure donc la complexité de la tâche en fonction de ses impacts potentiels sur l’ensemble de l’architecture.

L'effet domino

Domino’s by David Pacey (on Flickr)

Pour une évolution aussi minime soit-elle, il souhaite garantir qu’elle n’entraînera pas d’effet de bord et cela lui impose :

  • de concevoir cette évolution en cohérence avec l’ensemble de l’existant 
  • de développer cette évolution (la partie visible de la tâche) 
  • de la tester sur l’ensemble des environnements prévus (navigateurs, mobiles, accès, etc.) 
  • de vérifier qu’elle n’entraîne pas de régressions sur d’autres éléments 
  • de livrer cette évolution 
  • de stocker et documenter toute cette action.

Du coup, on comprend mieux (j’espère !) pourquoi une demande simpliste exige une procédure sérieuse. Une seule entorse à la méthodologie met en péril les prochaines actions. Et si l’action simple d’aujourd’hui entraînait des problèmes demain, vous serez donc en droit de demander des comptes à votre agence.

Client de prestations web : un métier ! ou « le client n'est pas roi » mais il tient les comptes

par Thomas Fourdin, le 6 mars 2013, 14:46 - Lien permanent

catégorie : Accompagnement (AMOA) - tags :

Un projet Internet regroupe la plupart du temps un ensemble de prestataires et LE client. Les prestataires sont spécialisés, ils ont été formés pour ce qu’ils vendent, ils ont l’expérience de projets similaires. Le client… non.

On ne trouve pas de formation pour devenir client d’une prestation Internet. Et pourtant… Un « mauvais » client (ou un client non sensibilisé à sa fonction) entraînera toujours un projet mal réalisé.

Être client Internet : des droits et des devoirs

L’adage « le client est roi » est une ineptie. Le client a certes beaucoup de droits : celui de choisir son budget et ses prestataires, celui de la validation finale. Mais il n’impose ses volontés que dans le cadre d’une prestation facturée et encadrée.

Rouget - Saint Louis médiateur entre le roi d'Angleterre et ses barons (23 janvier 1264) / Source : WikiMedia Commons

Comité de pilotage houleux (source : WikiMedia Commons)

Pour le bien de son projet, le client doit également respecter quelques engagements : formaliser ses attentes, engager la disponibilité nécessaire, écouter et respecter les avis externes, ne pas revenir sur les validations, etc. (liste détaillée ci-dessous).

Sans cela, quelques soient le budget et la qualité des agences impliquées, son projet ne pourra être correctement mené. Et, finalement, son budget et son temps auront été mal consommés et non rentabilisés.

Dans les missions que je mène aujourd’hui en tant qu’Assistance à Maîtrise d’Ouvrage, je joue fréquemment ce rôle d’interface ou de facilitateur entre le client et les agences. Cette position me permet de constater fréquemment les difficultés de communication et le manque de sensibilisation et de préparation des acheteurs de prestations web.

Suite à ce constat, j’ai donc ouvert sur ce site une page « ressources » qui recense des contenus disponibles en ligne pour sensibiliser et accompagner les clients de projets web. J’y ajouterai mes trouvailles au fur et à mesure.

Les droits du client

Liste non exhaustive que je compléterai par la suite :

  • définir son besoin, ses attentes et engager les moyens souhaités ;
  • choisir ses prestataires ;
  • mettre en question les propositions qu’il reçoit ;
  • hésiter, tergiverser ;
  • ignorer les recommandations et en assumer les conséquences.

Les devoirs du client

Liste non exhaustive que je compléterai par la suite :

  • formaliser ses attentes, besoins et objectifs clairement et factuellement ;
  • expliciter son mode d’organisation interne et son fonctionnement. En particulier, ne pas faire intervenir de nouveaux acteurs non prévus et ne pas non plus modifier le planning en cours de projet ;
  • ne pas revenir sur des décisions validées (ou alors accepter les impacts du revirement sur le budget et le planning) ;
  • fournir les éléments nécessaires au projet en temps et en heure ;
  • être disponible tout au long du projet pour accomplir les tâches qui sont de son ressort (échanges, validations, recette) ;
  • écouter les avis et conseils des sociétés qu’il a mandatées à cet égard. Assumer les décisions qu’il souhaite prendre malgré les contre-indications ;
  • dans le cadre des appels d’offres : ne pas demander de travail anticipé et non rémunéré (exemple : des maquettes graphiques en amont de tout travail en commun).
  • respecter les droits d’auteur et de propriété intellectuelle ;
  • payer ses fournisseurs dans les temps et comme prévu préalablement.

Si vous êtes client, êtes-vous bien certain de respecter vos engagements ?

Si vous êtes une agence, accompagner vous vos clients dans une démarche de coopération où chacun joue son rôle pour le bien du projet ?