Conception générale de sites web

Quand on songe aux différents aspects à prendre en compte lors du développement d’un site web, les contraintes juridiques ne viennent pas immédiatement à l’esprit. Elles sont pourtant primordiales : omettre d’informer l’internaute sur ses droits ou communiquer ses données personnelles à un tiers sans son autorisation expose l’auteur du site à de lourdes sanctions, insoutenables, même, lorsque ce dernier est une petite agence web ou, à plus forte raison, un développeur indépendant.

Un livre expliquant comment protéger un site web et les données personnelles de ses visiteurs était donc indispensable. Cet ouvrage-ci nous apprend en particulier comment renseigner les rubriques de pied de page (mentions légales) et mettre en œuvre la réglementation la plus récente telle que le règlement général sur la protection des données (RGPD) ou celle touchant la gestion des cookies.

Conscient que son lectorat est composé avant tout d’informaticiens et non de juristes, l’auteur apporte un soin particulier à la rédaction de l’ouvrage et y dispense conseils et ressources afin de donner à sa matière l’accès le plus simple et le plus direct possible.

Le Web et le droit

À la lecture des différents chapitres, on découvre que les liens entre le développement web et le droit sont plus nombreux qu’on pourrait le penser de prime abord. Pour le comprendre, il suffit de se souvenir que le Web est avant tout un média et le site une œuvre de l’esprit régis respectivement par la législation sur la liberté d’expression (chapitre 1, paragraphe 3) et le droit d’auteur (chap. 1 §1 et chap. 5 §1).

Non seulement le livre examine ces textes historiques fondamentaux du droit français, mais il a aussi le mérite d’accorder une large place à la nouvelle réglementation en matière de contenu numérique : le RGPD, datant de 2016 (chap. 2) – que l’auteur semble bien connaître pour y avoir consacré un livre entier chez ce même éditeur – et la disposition de 2019 imposant de la part de l’internaute une acceptation expresse des cookies (chap. 4 §2).

Le livre déborde par ailleurs du strict cadre du Web en détaillant les solutions offertes par la loi pour protéger les logiciels et les bases de données, notamment, concernant ces dernières, la protection sui generis (chap. 5 §1).

Afin de souligner à quel point il est important de respecter les obligations légales, l’auteur fait suivre leur description de celle des peines prévues en cas d’infraction.

Exhaustif sur le fond, le livre tire également profit de la rigueur et de la précision que son auteur, juriste de formation, a su lui apporter. Les références aux articles des codes ou des lois sont ainsi systématiquement citées. De plus, l’auteur n’hésite pas à apporter des clarifications lorsqu’il le juge nécessaire, comme en ce qui concerne par exemple la définition des « données personnelles » (chap. 2 §1).

Un plan fortement structuré – chacun des droits issus du RGPD fait ainsi l’objet d’un paragraphe spécifique (chap. 2 §3) – et un style d’une grande clarté participent à la qualité générale de l’ouvrage. Celle-ci se voit confirmée par un remarquable travail éditorial qui n’a laissé passer quasiment aucune faute d’orthographe ou erreur typographique. Les sigles désignant les juridictions (CA, CAA, CE, CJUE, TA, TGI, TI) ou institutions (CNIL), familiers au juriste, mais pas nécessairement au grand public, mériteraient néanmoins, selon moi, d’être explicités.

Protéger son site et ses visiteurs

Ce soin apporté à la rédaction du livre s’explique sans doute autant par le professionnalisme de son auteur que par le souci qu’a ce dernier de tenir un propos compréhensible à un public n’ayant a priori aucune formation juridique.

Un texte de loi étant par nature sujet à interprétation, le livre nous apprend ce qu’en dit la jurisprudence dans les cas concernant notamment l’exploitation d’un nom de domaine comme marque et inversement (chap. 1 §1), le dénigrement (chap. 1 §3) ou les contenus déposés dans les forums (chap. 3 §1 et chap. 5 §1).

La protection des intérêts de l’éditeur de site web autant que ceux d’autrui nécessite donc un examen scrupuleux du droit. Les données personnelles des visiteurs du site sont en outre plus susceptibles d’être menacées lorsque celui-ci recourt aux services d’un prestataire. C’est pourquoi les règles que ce dernier nous impose doivent faire l’objet de la même étude attentive que les textes de loi. À titre d’exemple, le livre reproduit les conditions générales d’utilisation d’un gestionnaire d’événements (Evenium) (chap. 6 §3) et d’un réseau social (Facebook) (chap. 6 §5) que l’auteur analyse pour nous.

Celui-ci n’hésite pas, en effet, à apporter une réponse immédiate au lecteur non-spécialiste qui ne trouverait pas dans les éléments fournis par le droit la solution à ses problèmes concrets. Pour la mise en application du RGPD, il donne quelques conseils et renvoie vers un guide pratique publié par la Commission nationale de l’informatique et des libertés (chap. 2 §2). Répondant à d’autres problématiques, des outils proposés sur le site web de cette dernière ou celui du Socle interministériel de logiciels libres sont également mentionnés : désactivation du traçage publicitaire de Google (chap. 4 §2), services en ligne respectueux des droits des utilisateurs (chap. 6 §1).

Oubliez le titre ! Ce n’est pas le projet de refonte – dont les origines possibles sont énumérées dans le chapitre 2 – mais bien l’architecture de l’information qui est le sujet principal du livre, et ce, quel que soit le site web auquel elle doit s’appliquer, Internet ou Intranet, déjà existant ou totalement nouveau.

Est-ce parce que – comme l’auteur le fait à plusieurs fois remarquer dans l’ouvrage – une réorganisation du contenu sera toujours moins spectaculaire aux yeux du client qu’une maquette graphique ? toujours est-il que l’architecture de l’information est largement délaissée par la littérature, au point que ce livre est, à ma connaissance, le premier écrit en langue française à y être principalement consacré.

C’est sans doute pour faire oublier le caractère austère sous lequel cette discipline est souvent perçue que l’auteur a pris le parti d’adopter un ton détendu et d’encourager le lecteur à la pratique grâce à des grilles à compléter en fin de chapitre ou de paragraphe.

De plus, le livre est court et se lit rapidement. En contrepartie, si ce dernier aborde l’essentiel des étapes définissant l’architecture de l’information et celles qui y sont associées, il n’en approfondit aucune. À charge pour le lecteur de compléter sa lecture par celle d’ouvrages plus spécialisés s’il veut devenir opérationnel dans l’art d’architecturer un site web. D’où le regret que les ressources que constituent les liens et livres cités dans l’ouvrage ici critiqué se réduisent à quelques références essentielles, et le souhait éventuel que la prochaine édition se recentre davantage sur les méthodes spécifiques de l’architecture de l’information.

Dans l’ensemble des étapes de réalisation d’un site web, que l’on classe ces dernières par ordre chronologique ou d’importance décroissante, l’architecture de l’information occupe l’une des premières places. En agençant les éléments de contenu au sein d’un site web, elle contribue en effet à poser les fondations de celui-ci.

Science de l’organisation, c’est fort logiquement sur cette dernière que s’appuient les principales méthodes qu’elle met en œuvre ; les autres, empruntées à diverses disciplines – design d’expérience utilisateur, rédaction web et composition typographique, référencement web – l’aident à acquérir sa pleine efficacité.

Une science de l’organisation…

« L’architecture d’information est à l’intersection du contexte, du contenu et des utilisateurs » (chapitre 1 Introduction). La démarche analytique rend non seulement possible une définition précise de l’architecture de l’information, mais elle est également l’une des clés dans la réussite de cette étape fondamentale d’un projet web. Elle permet de comprendre les intentions de l’utilisateur en distinguant les trois types de recherches que celui-ci peut mener sur un site (chap. 4 §1). Celles-ci justifient par ailleurs la présence sur ce dernier de différents systèmes complémentaires de navigation (chap. 6 §6). Enfin, divers schémas d’organisation doivent être envisagés, car chacun d’eux peut se révéler la meilleure option selon la nature du contenu (chap. 6 §2).

Les éléments qui constituent ce dernier auront, dans le cadre d’un projet de refonte, fait l’objet d’un traitement préalable aboutissant, selon le cas, à leur conservation, leur archivage ou, plus simplement, leur suppression (chap. 10 §1).

Un tel ménage pouvant créer des tensions avec le client, il s’agira de soigner sa communication. De manière générale, celle-ci s’appuie sur différents livrables dont l’ouvrage nous dresse une liste. Parmi ces derniers, on distingue ceux définissant le périmètre du projet : diagramme de Gantt (chap. 3 §1), rapport d’audit (chap. 7 §1) et stratégie (chap. 7 §2) ; ceux remis à la fin de chacune de ses étapes-clés, telles que les maquettes (chap. 6 §10, chap. 7 §4, chap. 9 §5) ; ceux, enfin, préparant la mise en production du site : document de gouvernance (chap. 10 §4).

…au carrefour de diverses disciplines

Issus de la phase de définition de la cible, les personas (chap. 4 §2) sont des documents dont le client peut tirer un grand profit. Ils sont l’une des méthodes du design d’expérience utilisateur. Favorisant la collaboration entre les équipes de développement, les parties prenantes et les utilisateurs, cette discipline est sollicitée à maintes reprises par l’architecture de l’information.

Ainsi, l’analyse de l’existant repose sur un inventaire (chap. 5 §2) et une analyse qualitative (chap. 5 §3), nouvelles occasions d’échanges avec le client.

L’utilisateur, quant à lui, sera mis à contribution pour valider, ou non, l’efficacité de l’architecture. Un tri de cartes (chap. 8 §2) fera porter le test sur la classification du contenu ; un test de l’arbre (chap. 8 §1) et un test utilisateur (chap. 8 §3) sur la facilité à obtenir une information ou à réaliser une tâche.

La hiérarchie de l’information ainsi formalisée lors d’une phase de test avec des cobayes trouvera sur le site sa traduction graphique grâce à la mise en œuvre d’un ensemble de règles de composition typographique (chap. 6 §4). À celui-ci s’ajouteront quelques principes fondamentaux de la rédaction web bénéfiques autant aux articles longs qu’aux intitulés. En structurant les premiers, ils en faciliteront la lecture (chap. 10 §4). Appliqués aux seconds, ils assureront la cohérence et par conséquent une meilleure compréhension, de l’organisation du site (chap. 6 §4), d’où une navigation plus efficace.

Il s’agit là d’un des moyens indirects par lesquels l’architecture de l’information améliore le référencement naturel. Les autres nous sont également présentés dans l’ouvrage (chap. 6 §2). Lorsqu’elle intervient dans le cadre d’une refonte, la réorganisation du site à laquelle elle aboutit peut, au contraire, être néfaste au référencement. Des tactiques exposées dans le livre permettent, heureusement, de contrer ces effets indésirables (chap. 10 §3).

Né de la prise de conscience que la conception et le développement informatiques avaient une part de responsabilité dans l’épuisement des ressources naturelles, le référentiel d’écoconception web initié par GreenIT.fr et enrichi et validé par différents acteurs privés et institutionnels est aujourd’hui constitué de 115 bonnes pratiques qui contribuent à préserver l’environnement autant qu’elles améliorent l’expérience utilisateur.

Leur description occupe la partie centrale du livre dont le format compact en rend la lecture facile et efficace.

Les règles qu’elles énoncent sont cependant généralement trop peu détaillées pour permettre une application immédiate. Le lecteur intéressé devra en conséquence approfondir le thème abordé par la bonne pratique en explorant les liens fournis en complément.

Afin que le lecteur bénéficie du maximum de ressources utiles, ces derniers mériteraient, selon moi, d’être accompagnés, dans une prochaine édition du livre, d’une bibliographie accordant une place aux pendants de celui-ci pour les référentiels s’inscrivant dans le cadre plus général de la « conception responsable de service numérique ».

Un monde virtuel aux effets bien réels

« Chaque octet a un impact dans le monde réel » (chapitre 1 Introduction). Contrairement à une idée généralement répandue – et fausse –, les sites et applications web, bien que considérés comme des créations virtuelles, ont sur l’environnement un effet bien réel (chap. 1 Intro.).

La fabrication du matériel chargé de les héberger (serveurs), les transmettre (câbles) et les restituer (terminaux) participe à « l’épuisement des ressources non renouvelables et [à] l’érosion de la biodiversité » (chap. 1 §1).

Quoique leur effet individuel sur l’environnement soit moins important, les appareils utilisés par les internautes ont une empreinte environnementale globale plus grande que les serveurs dans la mesure où ils sont plus nombreux (dans un rapport de 1 à 300) et ont une durée de vie plus courte (chap. 1 §1).

Cette dernière caractéristique s’explique en partie par l’obsolescence programmée à laquelle conduit « le phénomène d’obésiciel : le poids moyen d’une page web a été multiplié par 115 en 20 ans » ! (Je souligne.) (chap. 1 §1).

Bien qu’elle ait un moindre impact sur l’environnement, l’utilisation des sites et applications web se traduit malgré tout par des émissions de gaz à effet de serre ou bien, dans les pays comme la France où l’électricité est majoritairement produite par des centrales nucléaires, par une consommation d’eau douce et une accumulation de déchets radioactifs (chap. 1 §1).

Convaincu, sur la base d’un tel constat, que la préservation de l’environnement passait aussi par une amélioration des méthodes de conception dans le domaine informatique, « GreenIT.fr a lancé le mouvement de l’écoconception de service numérique en France en 2009 puis de la conception responsable, quelques années plus tard » (chap. 1 Intro.). S’inspirant du standard ISO 14062 portant sur « l’intégration des aspects environnementaux dans la conception d’un produit », « écoconcevoir un site web consiste, à niveau de qualité et de service constant, à réduire la quantité de moyens informatiques et télécoms nécessaires, c’est-à-dire son empreinte matérielle » (chap. 1 §2).

Préserver l’environnement améliore l’expérience utilisateur

Une mission réalisée pour un client et conduite par le cabinet de conseil GreenIT Consulting entre 2011 et 2012 a été l’occasion de mettre sur pied les premières bonnes pratiques d’écoconception web (chap. 2 Intro.). À celles-ci d’autres sont ensuite venues s’ajouter. Émises puis validées tant par des institutions que des entreprises privées (chap. 2 §1) – citées intégralement dans les « remerciements » et brièvement présentées, pour les principales d’entre elles, dans chap. 2 §2 –, elles constituent aujourd’hui, avec les premières, un référentiel de 115 bonnes pratiques (BP) dont la description forme le cœur de l’ouvrage ici critiqué (chap. 3).

Seule une poignée d’entre elles borne ses effets à la stricte préservation de l’environnement. Celle-ci prend la forme d’une réduction des déchets d’équipements électriques et électroniques (DEEE), de la consommation électrique et des émissions de gaz à effet de serre (BP 86, 87, 88, 90).

Toutes les autres améliorent par contrecoup l’expérience utilisateur, à l’instar des efforts fournis en ce qui concerne la qualité, l’accessibilité et la performance. Le référentiel d’écoconception web ne traite cependant pas explicitement de ces derniers (chap. 1 §2). Il préfère en laisser la charge aux référentiels déjà existants consacrés à ces matières dont il se veut le complément plutôt que le concurrent (chap. 2 §1).

Des icônes permettent de visualiser d’un seul coup d’œil les ressources que chaque BP tend à économiser : cycles processeur, mémoire vive, stockage, bande passante, requêtes (chap. 2 §3).

Une note sur 3 résume de façon aussi efficace la difficulté de réalisation d’une BP et sa contribution à la protection de l’environnement (chap. 2 §3).

À défaut d’un « écolabel » sanctionnant la mise en œuvre effective des BP du référentiel, le livre, dans sa troisième édition, explique comment la moyenne des degrés de priorité (évalués, eux aussi, sur une échelle de 1 à 3) qui y sont associés peut être convertie en « niveau de maturité » (chap. 2 §3).

Le caractère synthétique de ces informations est imposé par un livre aux dimensions réduites. Le format de poche offre au lecteur les avantages d’une lecture rapide, d’un maniement aisé et d’un propos centré sur l’essentiel.

En contrepartie, la description d’une BP se résume le plus souvent à un principe général.

Heureusement, sa compréhension en est quelquefois facilitée par une illustration prenant la forme d’un extrait de code (HTML, CSS, JavaScript ou PHP) ou d’une capture d’écran. On regrettera cependant au passage que cette dernière manque systématiquement de lisibilité et d’explication.

Certaines questions restant en suspens, telles que la pertinence de la BP selon le contexte ou les détails techniques de sa mise en œuvre (voir, par exemple, la BP 10 : « Stocker localement les données statiques »), trouveront éventuellement leur réponse dans les liens hypertextes destinés à approfondir le sujet abordé par la BP dont ils complètent la description.

Parfois, un code donné en exemple est suffisant pour appliquer entièrement la BP. C’est en particulier le cas des instructions de paramétrage pour serveur Apache (BP 22, 78, 83, 84, 100, 101, 103). Ceux-ci sont d’autant plus utiles qu’on les trouve avec peine dans la littérature consacrée au développement web.

Les ressources que constituent aussi bien les liens hypertextes évoqués plus haut que ceux donnant accès à des outils permettant de tester la correcte mise en application des BP (chap. 2 §4) mériteraient d’être accompagnés d’une bibliographie. Celle-ci contiendrait notamment les références des livres, cités dans cet ouvrage (chap. 1 §2), décrivant des référentiels complémentaires de celui présenté par ce dernier.

Dissipons sans plus attendre un malentendu qui pourrait naître à la lecture du sous-titre du livre : par « UX design », l’auteur ne désigne pas l’ensemble des méthodes visant à faire participer l’utilisateur au processus de définition de l’application ou du site web. En réalité, l’ouvrage traite exclusivement d’ergonomie. « Les problématiques purement stratégiques, marketing ou techniques » (Avant-propos) sont également hors de son champ d’étude.

Le livre se distingue d’autres ouvrages consacrés à cette étape particulière du projet informatique par le fait qu’il aborde celle-ci dans le cadre exclusif du contexte mobile. Il nous apprend notamment comment gérer au mieux les contraintes de taille et de performance ainsi que les interactions propres aux smartphones et tablettes.

L’accent mis sur la pédagogie constitue la qualité première du livre. Aux longs discours, celui-ci préfère en effet les énumérations réduites à quelques points facilement mémorisables et les courts résumés en fin de chapitre.

Autre particularité du livre, chacun de ses propos est illustré par une ou plusieurs captures d’écran provenant d’authentiques sites web ou applications. Si ces dernières sont les plus largement représentées dans l’ouvrage, les recommandations ou mises en garde dont elles démontrent le bien-fondé s’appliquent aussi, bien entendu, aux premiers (à l’exception évidente des fonctionnalités non transposables, comme celles reposant sur l’utilisation des capteurs) de manière équivalente.

Ce ne sont ainsi pas moins de 600 illustrations qui témoignent de la démarche originale, entreprise par le livre, consistant à « apprendre par l’exemple » !

L’apparition du smartphone en 2007 ne s’est pas résumée à mettre le Web dans notre poche ; elle a radicalement changé le rapport que nous entretenons avec notre appareil ! La « barrière entre l’homme et la machine » qui prévalait au temps des « ordinateurs “classiques” », en s’effondrant a laissé la place à une « manipulation directe » et un « usage intuitif » (Préface).

Contrepartie de la relation intime, voire affective, qu’il a nouée avec son indispensable outil de communication, le mobinaute ne tolère de la part de ce dernier aucune insuffisance en termes de qualité de service. « Les chiffres sont clairs : 20 % des applications téléchargées ne sont finalement plus jamais utilisées par la suite » (Introduction). Beaucoup trop d’applications et sites web pour mobiles sont en effet développés sans la moindre réflexion préalable sur ce que sont les véritables attentes du public cible.

Afin qu’on ne fasse pas d’emblée mauvaise impression, l’ouvrage nous explique comment tenir compte des caractéristiques physiques et techniques propres aux mobiles. D’autre part, il nous enseigne les moyens de guider le visiteur vers les fonctionnalités qui lui seront le plus utiles ou celles que l’on souhaite privilégier.

Faciliter l’usage

La surface limitée de l’écran est la contrainte la plus évidente imposée par le smartphone. Le contenu qu’elle affiche se prêtera ainsi difficilement à la lecture et ce, d’autant plus que cette dernière se fera dans des conditions dégradées (en mobilité, avec une concentration relâchée). Selon le cas, sa réduction ou son extension en amélioreront cependant la visibilité.

Un texte long gagnera ainsi à respirer grâce à un découpage et à l’ajout de marges et interlignes (chapitre 1 §1).

Le livre précise dans quels cas un lien déclenchant une action, telle que l’ouverture d’un menu, pourra au contraire se limiter à un simple pictogramme (chap. 2 §2) et donne en outre quelques conseils pour rendre ce dernier compréhensible (chap. 2 §2 et 3).

Lorsque sa traduction à l’écran est inexistante ou insuffisante, le résultat lui-même de l’opération peut passer inaperçu aux yeux de l’utilisateur. Une confirmation permettra alors d’éviter un tel risque. L’ouvrage nous indique les précautions requises si l’on souhaite que celle-ci prenne la forme d’une virgule sonore (chap. 1 §4) ou d’un retour haptique (chap. 1 §3).

Ce dernier est un mode de communication spécifique au mobile, à l’instar des interactions tactiles. La difficulté qu’ont ces dernières à être effectuées, liée au fait que nos doigts sont déjà occupés à tenir l’appareil, constitue une deuxième contrainte dans l’usage de celui-ci. L’emplacement des commandes à l’écran devra de ce fait être guidé par le type d’appareil, sa taille et la façon dont il est manipulé. Les zones atteignables associées à ces critères sont bien décrites dans le livre qui s’appuie pour cela sur diverses études (chap. 1 §2).

Même lorsque le bouton qu’il actionne est bien positionné, le tap exige un effort non négligeable. Pour cette raison, on tâchera de ne pas le solliciter inutilement. Pour y parvenir, les deux moyens s’offrant à nous consistent, d’une part, à anticiper du mieux que l’on peut les objectifs de l’utilisateur et, d’autre part, à lui permettre de les accomplir le plus directement possible (chap. 3 §1).

Les composants sur lesquels s’exercera le tap devront par ailleurs être adaptés à un instrument de sélection – le doigt – qui ne bénéficie pas d’une précision aussi grande que celle du pointeur d’une souris (chap. 3 §2). Une telle difficulté pourra être contournée dans le cas du développement d’une application web grâce aux capteurs présents sur le smartphone (chap. 2 §1). Ces derniers nous dispensent en effet de toute interaction avec l’écran. Cependant, il n’existe que peu de cas où les manipulations qu’ils nécessitent et les actions que ces dernières réalisent sont naturellement associées dans l’esprit de l’utilisateur (chap. 1 §3).

Les « gestes », utilisés en complément du tap, semblent être une solution plus efficace pour pallier les inconvénients de ce dernier. À moins de faire partie des gestes conventionnels, dont le livre nous donne une liste (chap. 1 §2), différentes méthodes pédagogiques seront nécessaires pour en assurer la découvrabilité.

Guider l’utilisateur

La démarche à privilégier dans ce cadre consiste à s’appuyer sur la culture et l’intelligence de l’utilisateur, plus précisément : les connaissances qu’il a déjà acquises en parcourant notre site ou application ou ceux de nos concurrents (chap. 3 §5), d’une part, et sa capacité à interpréter correctement les indices visuels (chap. 2 §4) et les affordances, d’autre part (chap. 1 §2 et chap. 5 §3). Ces dernières mettront en œuvre le cut-off design (chap. 1 §2, chap. 2 §4 et 5) et les animations (chap. 1 §2) pour lui faire comprendre l’action qu’on attend de lui.

Un tutoriel ne doit, en revanche, être employé qu’en dernier recours. En effet, son apparition inopinée dans un écran dédié en fait un point de fuite important (chap. 5 §1). Pour être accepté par l’utilisateur, le tutoriel devra lui paraître indispensable et intervenir au moment même où le geste qu’il explique lui sera utile. Le choix du geste à enseigner (chap. 5 §1), du moment opportun pour le faire (chap. 5 §2) et de la forme que prendra l’aide (chap. 5 §4) sont décrits en détail dans l’ouvrage.

Indépendamment de son contenu, un tutoriel s’imposera plus facilement s’il n’occupe qu’une partie de l’écran, car ainsi il n’interrompra pas le mobinaute dans la réalisation de ses tâches (chap. 5 §4).

Les techniques évoquées jusqu’ici définissent un « mode passif » (chap. 5 §1) qui ne demande à l’utilisateur qu’un minimum d’attention et de réflexion. Un « mode actif » (chap. 5 §1) requérant davantage la participation de ce dernier au processus d’apprentissage s’avérera souvent plus efficace (chap. 5 §4).

Selon ce même principe de l’engagement par l’action, une configuration utilisateur rencontrera plus de succès si elle est proposée à ce dernier une fois seulement qu’il aura franchi toute une série d’étapes (chap. 3 §4).

Proposer une personnalisation de l’expérience dès la connexion à l’application agit, au contraire, comme un mur cognitif au même titre que l’attente qui a précédé.

Si le temps d’attente réel peut être réduit à néant de manière artificielle (chap. 4 §5), sa diminution effective est de la compétence du développeur. Le designer, quant à lui, peut agir sur le temps d’attente perçu (chap. 4 §1).

Trois techniques sont à sa disposition pour informer l’utilisateur de son entrée progressive dans l’application : une animation (chap. 4 §3), si possible personnalisée (chap. 4 §4), lui faisant comprendre que sa demande fait l’objet d’un traitement ; une description détaillée de ce dernier (chap. 4 §3) ; une simulation du chargement de la page d’accueil (chap. 4 §2).

Le travail du designer ne prend pas fin quand celui-ci a réussi à convaincre l’utilisateur de se servir de l’application ou du site web. L’exiguïté de l’écran d’un smartphone ne permettant pas d’afficher simultanément plusieurs menus ni l’ensemble des commandes disponibles, on devra décider lesquels parmi ceux-ci rendre prioritairement visibles (chap. 2 §1, 2 et 7). Notre choix sera guidé soit par la hiérarchie des besoins de l’utilisateur (chap. 2 §6), soit par la stratégie du client.

Celle-ci se reflètera le plus clairement dans les call-to-action. Comme leur nom l’indique, ces derniers ne joueront pleinement leur rôle que s’ils parviennent à attirer l’attention du visiteur. Pour ce faire, ils devront se distinguer des autres éléments présents à l’écran grâce à leur affordance (chap. 1 §2) et à leurs forme et emplacement (chap. 3 §3 et chap. 5 §5) qui feront de chacun d’eux un point focal (chap. 1 §1).

Si, en rendant ainsi aisée et rapide sa visite, nous faisons en sorte que l’utilisateur quitte notre site web ou application satisfait, seule une expérience inoubliable nous assurera de son retour.

Le moyen le plus infaillible de sortir des sentiers battus consiste à exploiter la spécificité de la marque du client (chap. 4 §4, chap. 6 §3 et 7).

La personnalité du produit dont on fait la promotion pourra également transparaître à travers des choix graphiques (chap. 4 §6, chap. 6 §2 et 4) d’autant plus efficaces qu’ils seront subtils (chap. 6 §6 et 9).

L’émotion que ces derniers créent spontanément, on pourra s’attacher à la faire naître et se développer en nouant avec l’utilisateur une relation privilégiée. Celle-ci prendra la forme de services adaptés (chap. 6 §1), d’un ton familier (chap. 6 §5) et de systèmes de fidélisation basés sur la récompense et la gamification (chap. 6 §8).

Ainsi, nous parviendrons à nous démarquer de la concurrence en offrant à notre visiteur une « expérience utilisateur sur mesure » (Avant-propos).

Si « la maîtrise de la qualité n’est pas une option » (partie I chapitre 11 §11.5), force est de reconnaître que rien en matière de développement web n’oblige, ni n’incite à atteindre un niveau de qualité minimal : aucune norme contraignante, des standards et des conventions découlant d’articles rédigés certes par des professionnels compétents, mais n’ayant nul caractère officiel ; enfin, fruit du travail de normalisation du W3C, des spécifications qui ne sont en réalité que des « recommandations ».

Un tel écosystème a favorisé l’émergence d’un nombre considérable de sites web mal bâtis, satisfaisant à peine les contraintes et attentes de leurs divers utilisateurs. Selon les auteurs, cet état de fait a perduré au moins jusqu’à la date de parution de la première édition du livre, en 2012, en tout cas pour les « petits sites ». Chez les « grands sites », en revanche, « les gros défauts étaient assez rares » (part. I chap. 1 §1.1).

Depuis, la situation se serait inversée. Le recours aux éditeurs de sites et autres systèmes de gestion de contenu a, en grande partie, mis fin à la production de code incorrect ou inadéquat, tandis que les aspects non techniques des sites web se sont trouvés améliorés par une plus grande sensibilisation des développeurs à la « culture web » (part. I chap. 1 §1.1). À l’inverse, les sites à gros budget misent sur des méthodes marketing de plus en plus invasives, perturbant la visite de l’internaute autant qu’elles menacent ses données personnelles (part. I chap. 11 §11.6) ; parallèlement, les questions d’accessibilité sont reléguées au second plan (part. I chap. 1 §1.1).

Les progrès réalisés en termes de qualité depuis les débuts du Web ne rendent donc pas obsolète un projet comme Opquast, loin s’en faut !

Prenant le relais d’un annuaire de sites et d’articles sur la qualité web, le projet Opquast (Open Quality standards) voit le jour en 2004 (Avant-propos). Il consiste en un référentiel de 226 « bonnes pratiques » (BP).

Si leur description constitue l’essentiel du livre, ce dernier explique également dans quels contextes et de quelle façon les mettre en œuvre.

Pour une définition objective de la qualité

En l’absence de référentiel sur lequel fonder une démarche qualité, les exigences en ce domaine trouvent, généralement, dans un cahier des charges, leur traduction sous la forme de formulations creuses donnant au prestataire toute la liberté de les interpréter comme il l’entend (part. I chap. 2 §2.1 et chap. 6 §6.4). Au contraire, les BP permettent aux différents intervenants du projet de s’entendre précisément sur les objectifs à atteindre. En effet, chacune d’elles a un caractère objectif, universel et pérenne (part. I chap. 2 §2.4) garanti par l’ensemble des règles présidant à son élaboration que le livre nous présente en détail (part. I chap. 2 §2.3).

Formant le cœur de la partie II, les BP sont décrites chacune sur une, voire deux pages entières avec des explications suffisamment détaillées pour permettre leur mise en œuvre immédiate.

Elles sont complétées par une liste de « recommandations » présentées de manière plus synthétique dans un supplément. Bien que ne satisfaisant pas toutes les conditions d’éligibilité au statut de BP, elles peuvent être mises en place sans risque et avec la garantie de voir la qualité du site web sensiblement améliorée.

Les BP concernent toutes les étapes de la chaîne de réalisation d’un site web, depuis la première ébauche jusqu’à la vie post-mise en production, et leur intitulé est assez précis pour qu’on soit capable de déterminer sans ambiguïté à laquelle de ces dernières chacune d’elles s’applique.

Cette relation a été mise en lumière par Élie Sloïm et Éric Gateau dans le modèle VPTCS dont les lettres qui en composent le nom désignent les domaines « visibilité », « perception », « technique », « contenus » et « services » au sein desquels ces étapes, et donc les BP associées, peuvent être regroupées (part. I chap. 1 §1.4).

Rattachée à la perception (part. I chap. 1 §1.6), l’accessibilité occupe, dans le livre, une place importante, car elle fait déjà l’objet de référentiels dédiés avec lesquels Opquast est supposé cohabiter. Ceux établis par la WAI (Web Accessibility Initiative) (part. I chap. 8 §8.3.3) et prévalant au niveau international sont présentés tour à tour : les WCAG (Web Content Accessibility Guidelines) s’appliquant aux sites web (part. I chap. 8 §8.3.4) ; WAI-ARIA concernant plus spécifiquement les composants d’interface (part. I chap. 8 §8.3.5) ; UAAG et ATAG destinés respectivement aux constructeurs d’agents utilisateurs et aux fabricants d’outils d’édition et d’alimentation de sites web (part. I chap. 8 §8.3.4).

Dans un premier temps, l’ouvrage examine dans quelle mesure les préconisations existantes en matière d’accessibilité sont remplies par les BP. Pour ce faire, il choisit comme étalon le standard international WCAG plutôt que sa traduction française officielle : le RGAA (Référentiel Général d’Accessibilité pour les Administrations) qui fait foi pour juger de la conformité d’un site web au regard de la loi française (part. I chap. 8 §8.3.6 et chap. 9 §9.2).

Certaines BP et recommandations s’adressent spécifiquement aux internautes en situation de handicap (part. I chap. 8 §8.1.2) dont elles cherchent à améliorer l’expérience utilisateur, soit en compensant leurs incapacités (part. I chap. 8 §8.1.1) visuelles (part. II rubrique 15 BP 181, supplément R27|29|53|55) ou auditives (part. II sup. R27|28), soit en rendant possible l’utilisation de technologies d’assistance (part. I chap. 8 §8.2) telles que la navigation au clavier (part. II rub. 13 BP 156, sup. R43) ou le lecteur d’écran (part. II rub. 2 BP 19, rub. 19 BP 222|224, sup. R26), ce dernier par le biais, notamment, de la gestion des alternatives (part. II rub. 1 BP 1 à 10, sup. R1|2|3|25).

Le livre précise, dans trois listes distinctes, les critères WCAG que ces BP et recommandations, avec l’appui de quelques autres moins spécialisées, couvrent respectivement de manière totale, partielle ou d’aucune façon (part. III « Différentiel Opquast qualité web et WCAG »).

Le respect des 130 critères présentés dans deux checklists complémentaires et portant chacun sur le bon usage d’un élément particulier des langages HTML, JavaScript et, dans une moindre mesure, CSS permettra de s’approcher encore un peu plus de la conformité aux WCAG (part. III « Checklists spécialisées »).

Dans un deuxième temps, le livre explique en quoi Opquast se différencie des référentiels d’accessibilité : alors que les seconds s’intéressent à une population spécifique, le premier établit des règles censées profiter à tous, sans distinction (part. I chap. 8 §8.4). Une telle approche se justifie par le fait que les fonctionnalités développées dans l’unique souci d’améliorer l’accessibilité d’un site web trouvent, généralement, des applications originales auprès des personnes valides (part. I chap. 8 §8.1.3). Symétriquement, les internautes en situation de handicap sont souvent les premiers bénéficiaires d’une amélioration générale de la qualité d’un site web, en particulier quand elle porte sur le contenu ou la performance (part. I chap. 8 §8.4).

Cette dernière bénéficie, au même titre que l’accessibilité, d’un traitement privilégié avec une rubrique dédiée (part. II rub. 17 BP 206|211|214|215|216) et une checklist de 41 critères – comprenant, outre les BP constituant ladite rubrique, des règles parfois très pointues – classés selon trois niveaux traduisant le degré de perfection visé (part. III « Checklists spécialisées »).

Le Web mobile fait également l’objet d’une rubrique (part. II rub. 12) et d’une checklist particulières.

Enfin, deux dernières checklists sont consacrées au SEO et à l’OpenData.

Un référentiel flexible

La pertinence des 226 BP et quelques dizaines de critères et recommandations complémentaires n’échappera pas au lecteur studieux qui sera naturellement tenté de les mettre systématiquement en œuvre lors de la réalisation de son prochain site web. Si une telle démarche est louable et dénote un réel intérêt pour la qualité web, elle s’avère, en revanche, peu judicieuse ! L’ouvrage nous rappelle à juste titre, en effet, que la charge de travail augmente avec le nombre de règles à gérer. « La qualité a un prix » (part. I chap. 6 §6.4) que mesurent les « coûts d’obtention de la qualité » (part. I chap. 11 §11.4).

D’un côté, le modèle VPTCS sur lequel Opquast repose a l’immense avantage de couvrir un grand nombre de thématiques et notamment celles qui font véritablement la richesse d’un site web, autrement dit les contenus et les services : « sans contenus ou services de qualité, le site n’est qu’une coquille vide » (part. I chap. 1 §1.8). D’un autre côté, il n’est pas adapté pour traiter les caractéristiques complexes d’un site web comme celles relevant, par exemple, du « design émotionnel » (part. I chap. 1 §1.7). Opquast devra en conséquence obtenir le renfort d’autres référentiels. Afin d’éviter que ce surcroît de nouvelles règles entraîne une dérive budgétaire, on ne retiendra dans cet ensemble que celles qu’on aura jugées essentielles dans le cadre de notre projet (part. I chap. 6 §6.4). On laissera en revanche de côté celles qui ont, certes, l’avantage de démontrer le talent du développeur, mais qui n’apportent au site web en construction aucune valeur ajoutée (part. I chap. 9 §9.3).

Une pareille sélection pourra se fonder sur l’examen des gains et des pertes associés au respect ou non de telle ou telle règle. Les secondes, nommées « coûts de non-qualité » (part. I chap. 11 §11.4), sont la contrepartie financière des risques déduits des « objectifs » énumérés en introduction du contenu de chaque BP dont ils définissent la raison d’être (part. I chap. 10 §10.3 et 10.4).

Les premiers sont, par nature, très difficilement chiffrables sur la base d’un classique retour sur investissement (ROI) (part. I chap. 11 §11.4). En outre, devront être exclus du périmètre de leur calcul les domaines qu’on aura estimés cruciaux et pour lesquels on aura décidé de ne faire aucun arbitrage, comme l’accessibilité (part. I chap. 11 §11.5) ou le référencement, à l’endroit duquel la qualité web joue un rôle prépondérant (part. I chap. 11 §11.3). Dans ce contexte, l’évaluation quantitative devra céder la place à une appréciation qualitative déduite du « retour sur objectifs » (ROO) (part. I chap. 11 §11.5).

Le « référentiel personnalisé » (part. I chap. 9 §9.2) ainsi obtenu sera inséré dans le cahier des charges et guidera les développements futurs (part. I chap. 6 §6.4). Les objectifs de qualité auront d’autant plus de chances d’être atteints qu’ils auront, en effet, été clairement exposés à l’ensemble des parties prenantes, en amont du projet (part. I chap. 6 §6.1).

Une prise de conscience plus tardive de l’importance d’une démarche qualité ne remet toutefois pas en cause la pertinence de cette dernière. Elle prendra la forme d’un audit dont l’objet est de juger a posteriori la qualité d’un site web au regard des BP.

Dans le cas où le site web audité est en construction, on s’appuiera sur les trois checklists qui les regroupent en fonction des phases du cycle de développement – décrites en détail dans le livre (part. I chap. 5) – auxquelles elles s’appliquent (part. III « Checklists en suivi de production »). La vérification de leur correcte mise en œuvre sera, quant à elle, facilitée par les instructions données dans la rubrique « contrôle » des fiches les décrivant.

Une telle évaluation peut également être faite sur la base d’autres critères, plus ou moins subjectifs (part. I chap. 7 §7.1, §7.6 et §7.7.1), sur la connaissance et l’expérience de l’examinateur (part. I chap. 7 §7.2 et §7.4) ou l’« observation des utilisateurs » (part. I chap. 7 §7.3).

Dans le cas d’un site en production, les critères de qualité vus plus haut pourront s’enrichir de ceux dont la valeur est produite par les internautes : statistiques de comportement (part. I chap. 7 §7.3 et §7.7.2) et retours d’expérience (part. I chap. 7 §7.5). Quant aux BP, on notera que la mise en œuvre de 75 d’entre elles suffit à l’attribution du label Opquast website (part. III « Opquast website »).

Pour être efficace, l’audit doit être conduit selon une méthode rigoureuse. Dans sa version audit expert – par opposition à l’audit rapide –, il s’appliquera à un panel de pages soigneusement choisi (part. I chap. 4 §4.1) dont le livre nous donne un exemple type (part. I chap. 4 §4.3). Son déroulement (part. I chap. 4 §4.4) et sa restitution orale (part. I chap. 4 §4.5) suivront un parcours précis dont les étapes sont clairement indiquées dans l’ouvrage.

Comme on vient de le voir, la qualité doit être considérée tout au long de la vie du site web, avant (cahier des charges) et pendant sa réalisation (« audit en cours de production ») et après sa mise en production (« audit qualité d’un site web en ligne »). Il est par conséquent essentiel que ses enjeux et, surtout, les risques liés à sa non-prise en compte soient connus de tous les intervenants du projet (part. I chap. 10 §10.2).

Dans ce contexte, les BP joueront un rôle important (part. I chap. 3 §3.4). Elles serviront, en outre, de référence pour contrôler l’acquisition des connaissances en la matière, sanctionnée par la certification Opquast Certified (part. I chap. 3 §3.5 et chap. 10 §10.5).

Si le passage, pour une entreprise, du premier aux derniers stades de maturité dans la prise en compte de la qualité se caractérise, selon la typologie proposée par Élie Sloïm, par la capacité à fixer un objectif mesurable en termes de qualité (part. I chap. 10 §10.1), nul doute que la présence en son sein de professionnels qualifiés et la désignation, parmi eux, d’un responsable qualité web (part. I chap. 9 §9.6) y contribueront pour beaucoup !

En conclusion

Opquast est un référentiel remarquable à plus d’un titre : non seulement son processus d’élaboration en fait un outil d’une grande fiabilité, mais encore sa transversalité, mise en évidence par le modèle VPTCS, le conduit à compiler des règles auxquelles on n’aurait sans lui jamais eu accès, sauf à explorer toute la documentation existante dans l’ensemble des domaines en lien avec le développement web !

Il est ainsi en mesure de répondre à une grande partie des questions posées par des sujets faisant souvent l’objet d’études à part entière, tels que l’accessibilité, la performance ou le SEO.

Le référentiel Opquast, accessible depuis 2004 au lien : https://www.opquast.com/ étant désormais, grâce à cet ouvrage, disponible en version imprimée, la question se pose de savoir quel intérêt il y a à se procurer un livre pour s’enquérir des BP quand ces dernières sont déjà accessibles en ligne. En réalité, les deux supports sont complémentaires. Les BP au format Excel, accessibles sur le site web, sont facilement manipulables alors qu’elles sont, dans le livre, plus rapidement consultables.

Ce dernier comprend, en outre, des checklists dans lesquelles elles sont regroupées pour une meilleure utilisation, ainsi que divers ensembles de directives permettant d’aller encore plus loin dans la recherche de la qualité.

Quant à leurs applications, l’ouvrage consacre plusieurs chapitres, à la fois clairs, détaillés et pragmatiques, à la façon de les mettre en œuvre dans le cadre de la définition d’un projet (cahier des charges) ou de la validation d’un site web (audit). De son côté, son pendant numérique apporte des informations générales par l’intermédiaire de billets de blog et de nombreuses précisions au sujet de la certification de compétences.

Enfin, il est appréciable d’observer que le site web d’Opquast et le livre qui en est issu sont tous les deux à la hauteur de leur sujet : le premier semble appliquer pour son propre compte les solutions qu’il préconise ; le second bénéficie d’une édition particulièrement soignée, pauvre en erreurs ortho/typographiques et riche à la fois d’un glossaire aux définitions étoffées et d’un design aussi élégant qu’efficace !

Conçu, à l’origine, pour permettre à des scientifiques d’échanger des données brutes, le Web, grâce à l’enrichissement des contenus et à leur habillage à l'aide du langage CSS, se présente aujourd’hui comme la forme moderne de l’édition, ce qu’illustre la réflexion d’Oliver Reichenstein, pour qui « Web Design Is 95% Typography » (« le design web, c’est 95 % de typographie ») (chapitre 1, Introduction). En conséquence, les règles de composition typographique en usage dans l’imprimé devront, sans surprise, être appliquées à l’écran, quitte à leur faire subir quelques ajustements afin de préserver leur efficacité.

Toutefois, les deux médias présentent des différences essentielles : si le premier consiste en un ensemble de feuillets au format parfaitement défini, le second se réduit à une surface unique de taille illimitée, requérant un mode de navigation spécifique. En outre, l’écran offre des possibilités inexistantes dans le domaine de l’imprimé, qu’il s’agit d’exploiter.

Un caractère préservé

La faculté offerte aux concepteurs de sites web d’utiliser, dans leurs designs, la police typographique de leur choix n’a rien d’une innovation récente, puisqu’elle est permise par la directive font-face, qui a fait son apparition dans CSS dès la version 2 du langage. Les téléchargements illégaux qu’elle a, aussi, rendus possibles lui ont valu une période de dix ans de « purgatoire ». Finalement réhabilitée en 2008, elle est cependant encore mal utilisée, en raison de l’ignorance, chez les designers, non plus de la législation, mais des fondamentaux de la typographie (chap. 1 §1). La place importante que l’ouvrage consacre à ces derniers s’en trouve ainsi d’autant plus justifiée.

La variété des créations typographiques a nécessité l’élaboration de classifications – telles que celle proposée dans le livre, qui se résume aux trois catégories suivantes : romaine, linéale, mécane – permettant de faire un premier tri en fonction du message que le caractère est censé véhiculer (chap. 1 §3).

Au sein du sous-groupe retenu, on sélectionnera des polices de qualité. Celles-ci se distinguent, tout d’abord, par la richesse des glyphes qu’elles mettent à notre disposition. En effet, l’emploi, dans un texte, de petites majuscules, chiffres elzéviriens et ligatures ont l’avantage d’en faciliter la lecture (chap. 2 §12). Prenant un temps d’avance sur le module CSS Fonts Module Level 3, non finalisé à la date de publication du livre, les auteurs présentent quelques-unes des propriétés CSS, accompagnées de leurs valeurs, permettant d’invoquer, dans la feuille de styles, les caractères spécifiques vus plus haut.

Les différents styles et graisses, quant à eux, permettent de distinguer efficacement les titres du corps du texte (chap. 1 §4).

De même, certains caractères spéciaux sont nécessaires à la réalisation d’une composition irréprochable. Les auteurs ont la bonne idée de nous en donner, avec l’apostrophe et le tiret, deux exemples emblématiques, complétés par une liste de 44 caractères utiles avec leur entité HTML ou code Unicode correspondant. On y regrettera, au passage, l’absence de certains signes indispensables à la rédaction d’un texte en français et, cependant, trop souvent ignorés, tels que les chevrons « et », que cette édition française n’a, semble-t-il, pas osé ajouter à la liste proposée dans l’édition originale (chap. 2 §12).

Si la disponibilité des glyphes est un prérequis évident, leur lisibilité physique ne doit pas être considérée avec moins d’attention. Elle consiste, d’une part, dans leur capacité à se distinguer les uns des autres, ce en quoi leurs traits caractéristiques – dont le livre nous définit les principaux d’entre eux (chap. 1 §3) – jouent un rôle essentiel ; d’autre part, dans leur polyvalence : l’optimisation de rendu assure une préservation plus ou moins grande du dessin original lors du passage du rectangle de papier à la grille de pixels (chap. 1 §2).

On ne sera pas en mesure de choisir une police adaptée si l’on ne prend pas en considération chacun des critères cités plus haut. Leur respect scrupuleux requérant, néanmoins, un minimum de pratique, le designer novice, en attendant, aura tout intérêt à restreindre son choix à un sous-ensemble de polices reconnues pour leurs qualités. Les 31 polices (dont cinq gratuites distribuées par Google Fonts), commentées et conseillées par trois experts, auxquelles viennent s’ajouter 30 autres suggestions (chap. 1 §5 à 7), constitueront une base de travail d’autant plus précieuse qu'il existe, à ma connaissance, peu de guides équivalents, surtout en ce qui concerne les polices adaptables à l’écran.

Si ces dernières ne peuvent répondre à nos impératifs de design, la solution, dans l’avenir, pourrait consister à bâtir, directement dans le navigateur, une police en CSS, comme ont déjà commencé à s’y intéresser deux designers, proposant chacun un caractère à la forte personnalité (chap. 6 §18).

Un message renforcé

De même que les spécificités de l’écran expliquent les ajustements apportés au dessin des caractères, elles justifient ceux à appliquer à la composition tout entière, pour ce qui regarde la présentation et les tailles, autrement dit l’alignement de colonnes (chap. 2 §7), la force de corps (chap. 2 §5), l’interlignage (chap. 2 §8) et la justification (chap. 2 §6). En accompagnant, dans ces trois derniers cas, ses explications de valeurs directement applicables, ainsi qu’en décrivant des méthodes concrètes pour réaliser en CSS un interlettrage ou un crénage (moyennant, dans ce dernier cas, l’emploi de quelques balises supplémentaires, chap. 2 §9), l’ouvrage démontre sa volonté de pragmatisme.

La mise en forme permet au texte de transmettre efficacement son message. Toutefois, elle peut ne pas suffire ; c’est pourquoi le livre propose trois différents moyens de présenter des informations complexes de manière synthétique.

Les icônes consistent en une représentation symbolique du réel (chap. 5 §1 et 2). Elles pourront soit être prélevées dans une police dédiée (chap. 5 §4), soit être construites de toutes pièces. Le livre nous donne quelques conseils pour y parvenir (chap. 5 §11) et, dans le cas où on souhaiterait y ajouter des couleurs, nous explique comment les choisir en s’appuyant sur les harmonies déduites du cercle chromatique (chap. 5 §13).

Un très bel exemple d’application nous est donné avec le système visuel d’identité créé pour la métropole lilloise, alliant homogénéité et singularité (chap. 5 §19).

Les données chiffrées trouveront refuge au sein de graphiques (chap. 4 §8) et de tableaux (chap. 4 §9) dont le livre nous montre, là encore de manière très concrète, les modes de présentation à privilégier et ceux à proscrire (chap. 4 §8 et 10).

Une surface et des moyens étendus

La nature des différents composants de la page, autant que le support de destination, détermine le mode de publication (chap. 3 §3).

La variété des tailles d’écran ajoute une difficulté supplémentaire. Une solution consiste à aligner les éléments le long des bords d’une grille (chap. 2 §2). En la matière, on préférera la grille modulaire (chap. 2 §3), contribuant à une organisation rationnelle de la page, à celles – grille rigide (chap. 2 §1) ou résultant d’une mise en page adaptative (chap. 2 §4) – basées sur des dimensions fixées a priori, obsolètes depuis l’émergence, quatre ans avant la publication du livre, du Responsive Web Design ou design fluide (chap. 2 §4). Or, c’est ce dernier qui, selon moi, devra principalement guider le design de la page web.

L’accès aux différentes parties du contenu sera facilité par la présence d’éléments d’interaction : des liens d’ancrage si les premières se trouvent sur la même page que les seconds (chap. 4 §4) ; des liens textuels, un fil d’Ariane, des tags (chap. 4 §4) ou un menu (chap. 4 §3), sinon.

Ce dernier, dont le livre nous présente les principaux types existants (chap. 4 §3), se rencontre plus volontiers sur les grands écrans, tandis que, sur les appareils mobiles, la navigation s’effectuera essentiellement à l’aide de gestes tactiles (chap. 4 §5).

L’interaction devra être prise en compte lors de l’élaboration des maquettes (chap. 4 §2), préalable indispensable à la réalisation du design proprement dite. Ces dernières se déclinent en deux versions : la maquette basse-fidélité partitionne la page web en grandes zones dont le détail sémantique est reproduit dans la maquette haute-fidélité (chap. 4 §1).

Ces deux formes de contenu trouveront leur traduction dans le fichier HTML, respectivement sous la forme d’éléments de structure (chap. 2 §10) et de « balises typographiques » (chap. 2 §11). Il est regrettable qu'en distinguant, parmi celles-ci, les « balises logiques » des « balises physiques », les auteurs ignorent que ces dernières, créées à l’origine pour mettre le texte en forme, ont vu leur fonction entièrement redéfinie avec l’arrivée de CSS. Or, seule cette nouvelle fonction doit désormais être considérée lorsqu’on doit décider de les utiliser ou non (chap. 2 §11).

La tâche de création du contenu ne prend pas fin avec la gestion des contraintes physiques ; sa mise en valeur doit, en effet, tirer profit des innovations graphiques permises par l’informatique.

Parmi les domaines réservés à l’écran, l’animation fait, sans doute, partie des plus emblématiques. Neuf superbes cas d’utilisation d’images GIF contribuent à réhabiliter ce très ancien format d’image animé, déconsidéré en raison de son utilisation abusive dans les années 1990 (chap. 6 §2 et 3).

Les animations que permettent de réaliser les technologies actuelles ne se limitent plus à un enchaînement de deux ou trois séquences répété en boucle, mais reproduisent un véritable scénario décrit dans un storyboard (chap. 6 §4).

Au sein d'HTML5, SVG (chap. 5 §17) et Canvas trouvent des applications spectaculaires (chap. 6 §19), et cette dernière, associée à la bibliothèque Paper.js, voit ses possibilités étendues de manière insoupçonnée (chap. 6 §11) !

En conclusion

Sans doute parce qu’il est le fruit du projet de plusieurs étudiants ayant, au sein du MICA (Maryland Institute College of Art’s Center for Design Thinking), suivi des voies de spécialisation différentes, le livre aborde un grand nombre de sujets (près de 80, au total !), dont presque tous sont présentés de manière synthétique sur une seule double page.

L’objet du livre est d’offrir un large panorama des méthodes et techniques de design applicables au Web, et plus généralement à l’écran, actuellement en usage. S’il n’approfondit aucune d’elles – le lecteur intéressé devra, pour cela, se tourner vers des ouvrages spécialisés –, la soixantaine de polices qu’il recommande, ainsi que les données chiffrées dispensées au fil des chapitres, aideront le novice à prendre un bon départ !

À noter, enfin, que le lecteur auquel le livre s’adresse peut n’avoir aucune connaissance des standards du Web, mais devra néanmoins être averti de l’obsolescence de certaines méthodes et techniques qui y sont présentées (grilles de mise en pages, balisage HTML).

Le premier contact établi entre un site web et un utilisateur est l'effet non d'une interaction physique, mais de la transmission d'un message du premier au second à travers le design graphique, en particulier ses deux éléments clés que sont la typographie et la couleur.

Le bref historique présenté en introduction de l'ouvrage nous rappelle que la définition de la couleur et son utilisation, reposent d'abord sur des fondements scientifiques. Le respect des critères objectifs qui en découlent devra néanmoins s'allier à une intuition de la couleur que le designer aura su cultiver s'il veut que le résultat obtenu soit réellement à la hauteur de ses espérances.

La « science » de la couleur suppose un vocabulaire technique. Sa maîtrise étant nécessaire pour éviter les malentendus – l'auteur souligne, à ce propos, le glissement de sens subi, lors du passage du registre technique au langage courant, par les mots « couleur » et « teinte » –, il est, pour l'essentiel, reproduit sous la forme d'un glossaire opportunément placé en début d'ouvrage (chapitre 1).

À l'instar du glossaire, la description synthétique en douze étapes de la méthode de construction d'une palette (chap. 8 §2) proposée par l'auteur est située à un endroit du livre où on ne l'attend pas forcément, à savoir après le cœur même de celui-ci, consacré précisément à l'examen en détail des éléments entrant dans l'élaboration de ladite méthode.

Cette dernière peut finalement se résumer en deux grandes étapes : le choix des couleurs de départ ; la constitution, puis la validation de la palette proprement dite.

Partir sur de bonnes bases

« Les conventions régissent une grande partie du monde du design » (chap. 6 Introduction). Elles permettent à l'internaute, en effet, de trouver ses repères sur la Toile. Selon ce principe, les couleurs habillant un site web d'entreprise seront initialement choisies parmi celles communément utilisées dans le secteur d'activité auquel l'entreprise appartient (chap. 6 §1 et 2). Le livre nous donne, sous la forme d'une représentation graphique, pour chacun des douze secteurs d'activité étudiés, un exemple de palette type (chap. 5 §3), dont on aurait cependant souhaité que les couleurs la constituant – de même que celles composant les autres palettes données en exemple dans le livre – soient accompagnées de leur code hexadécimal (ou de toute autre définition numérique), sans quoi elle est, en pratique, inutilisable.

On pourra approfondir la recherche en allant jusqu'à s'intéresser aux sélections de couleurs faites, pour leur site web, par les entreprises concurrentes. Le livre nous en donne, à nouveau, une illustration à travers celles de 36 entreprises appartenant à différents secteurs (chap. 6 §2).

Si les couleurs ainsi obtenues sont insuffisamment nombreuses, ou si la méthode décrite est inapplicable en raison de la nature spécifique du site web examiné, il existe heureusement d'autres sources dans lesquelles nous pouvons puiser. Nul besoin de chercher très loin : notre propre environnement est un riche pourvoyeur de couleurs diverses ! Il suffit, pour s'en convaincre, de jeter un œil aux quelques photos choisies par l'auteur (chap. 5 §2), dont on extraira les couleurs constitutives à l'aide d'un des outils présentés en annexe (chap. 8 §3).

Notre familiarité de longue date avec les paysages naturels fait que les couleurs qui en sont issues nous paraissent, au premier regard, idéalement assorties (chap. 5 §2). Un tel résultat peut aussi être le produit du travail d'un professionnel ; c'est pourquoi les nuanciers que celui-ci met gracieusement à notre disposition constitueront, là encore, un réservoir de couleurs à privilégier (chap. 7 §3, chap. 8 §3).

Même si, lors du choix initial des couleurs pour un site web d'entreprise, on souhaite faire l'économie des palettes en usage dans le secteur d'activité qui nous intéresse, on doit cependant garder ce dernier en tête afin de prévoir les associations d'idées que la couleur présentée à l'internaute pourra, dans ce contexte, faire naître dans son esprit : sur un site de banque en ligne, le rouge éveillera des souvenirs douloureux (chap. 7 §2), tandis qu'un jaune sombre doré n'aura pas le même effet sur un site web spécialisé dans le jardinage ou dans la vente de prêt-à-porter pour bébés (chap. 7 Introduction) !

Il en va de même pour la zone géographique ciblée. L'auteur montre, en effet, comment la symbolique attachée à chacune des principales couleurs du spectre peut varier selon les cultures, passant parfois d'une signification donnée à son exact opposé (si le jaune peut ainsi, en occident, être associé à la lâcheté, il est, au Japon, synonyme de courage !) (chap. 3 §2).

Équilibre et harmonie

Une fois le ton donné par la ou les premières couleurs sélectionnées, il s'agit de composer un ensemble qui transmette efficacement au public le message souhaité.

Les méthodes objectives, découlant de la théorie des couleurs, sont les premières à considérer pour atteindre un tel but. Elles s'appuient en grande partie sur le cercle chromatique, outil incontournable permettant, à partir d'une couleur de départ, de construire une ébauche de palette qui créera spontanément, aux yeux du lecteur, l'impression d'un mariage de couleurs heureux (chap. 4 §1 à 3). Quitte à la compléter par quelques couleurs neutres (chap. 2 §3), on obtiendra ainsi une palette équilibrée (chap. 5 §5). Une illustration de cette méthode est proposée à travers une authentique étude de cas que l'auteur elle-même, s'est un jour vu confier (chap. 8 §1).

L'importance de la place qu'occupe, dans notre panoplie de coloriste, le cercle chromatique, nous fait d'autant plus regretter que l'auteur se borne à nous en décrire simplement les applications directes. Ses effets, ses possibilités et limites ne peuvent, selon moi, être véritablement compris si l'on n'explique pas également le principe du contraste successif et la méthode de construction du cercle chromatique en douze couleurs, à partir des couleurs primaires, secondaires et tertiaires.

D'autre part, si le Web rend aujourd'hui possible la construction de cercles chromatiques continus, leur utilisation s'avère, en pratique, complexe et peu intuitive et, pour cette raison, la référence à l'un d'eux indiquée en annexe (chap. 8 §3) aurait due, de mon point de vue, être accompagnée d'un vrai guide d'utilisation.

En appliquant la méthode exposée plus haut à une couleur largement employée dans le secteur d'activité de l'entreprise dont on réalise le site web, on court le risque d'aboutir à une palette voisine de celles adoptées par d'autres entreprises du secteur. Une telle situation présente, en effet, plusieurs inconvénients : l'entreprise cliente pourrait être accusée d'avoir délibérément copié le design du site web d'un concurrent. Par un effet de contamination, les produits et services proposés par celle-là pourraient, eux-mêmes, être soupçonnés de n'être que des imitations de moindre qualité que ceux vendus par ce dernier ou, dans le meilleur des cas, de ne s'en distinguer en rien (chap. 6 §3).

L'étape suivante consistera à corriger notre palette imparfaite en substituant à certaines de celles qui la constituent d'autres couleurs. Le choix, soit d'une nuance ou d'une tonalité (chap. 5 §4), soit d'une couleur de teinte différente de celle à remplacer peut permettre aussi bien de conserver le message véhiculé par cette dernière (chap. 7 §1) que de le modifier (chap. 2 §4).

La mise en œuvre de la seconde option est, des deux, la plus délicate (chap. 7 §2), mais elle sera facilitée si on s'appuie, tout d'abord, sur les règles de classification des couleurs en couleurs chaudes (chap. 2 §1) et couleurs froides (chap. 2 §2), ensuite, sur les significations qui leur sont associées. L'auteur, non seulement nous en donne le détail pour les couleurs primaires, secondaires, neutres et leurs nuances et tonalités, mais nous en révèle également certains des secrets (par exemple, la couleur du ciel crépusculaire et la pourpre tyrienne sont à l'origine de l'association qui est faite entre le violet et, respectivement, le mysticisme et la royauté) (chap. 3 §1).

Si la nouvelle palette gagnera en originalité par rapport à la précédente, elle perdra éventuellement en équilibre. Il s'agit toutefois d'un inconvénient mineur dès lors qu'elle reste harmonieuse ou, dit autrement, que les couleurs qui la composent « font sens » dans l'esprit du public (chap. 4 §4, chap. 5 §5 ,chap. 7 §4).

L'harmonie elle-même pourra être subtilement améliorée grâce au recours éventuel aux couleurs quasi-neutres (chap. 7 §5).

Les couleurs finalement retenues pourront nécessiter un dernier ajustement avant d'être réparties, selon la fonction à laquelle on les destine, en couleurs de fond, dominantes ou toniques (chap. 5 §1).

Le verdict définitif appartiendra à l'utilisateur, auprès de qui on aura évalué, dans les conditions d'utilisation qui sont les siennes (chap. 7 §6), l'effet de la palette obtenue à la fin du processus sur une partie ou la totalité du design, à l'aide, respectivement, d'un test A/B ou d'un test multivarié (chap. 7 §7).

En conclusion

Destiné au plus grand nombre, le livre a le principal mérite d'être compréhensible par une personne qui ne bénéficierait d'aucune connaissance préalable en théorie de la couleur.

De plus, dans un domaine où les principaux ouvrages de référence ont été écrits à l'intention d'apprentis artistes peintres, il est, à ma connaissance, un des rares à s'intéresser à la couleur sous l'angle de la synthèse additive, autrement dit de sa production à l'écran.

Cependant, sans doute en raison de son format réduit, il n'approfondit pas son sujet autant qu'on aurait pu le souhaiter. En effet, si la méthode décrite – dont l'efficacité ne peut être mise en doute, sachant qu'elle est le fruit du travail et de l'expérience d'une graphiste qui a acquis une incontestable expertise dans le domaine de la couleur – est suffisamment claire et pragmatique pour nous guider dans notre choix de couleurs à appliquer au design d'un site web, elle ne dit rien, en revanche, sur la façon de créer celles-ci à l'aide des systèmes colorimétriques en usage sur le Web (code hexadécimal, RGB, HSL) ni, d'ailleurs, sur le fonctionnement de ces derniers ou la relation qui les lie. On aurait aimé savoir, en particulier, comment obtenir les nuances et tonalités dont l'ouvrage nous a si bien démontré l'utilité.

Autre sujet qui, s'il n'est pas propre au Web, y tient néanmoins une place particulièrement importante, l'accessibilité n'est présente dans le livre qu'à travers la mention en annexe de quatre outils en ligne ayant pour finalité commune d'évaluer le contraste entre un premier plan et un arrière-plan (chap. 8 §3).

Hormis ces lacunes, qui viennent s'ajouter à celles signalées précédemment, on pourra regretter l'absence de bibliographie et d'une liste de liens d'informations utiles, incluant notamment les références aux deux études évoquées dans l'ouvrage (Hubspot au chap. 5 §3, Emblemetic au chap. 6 §1).

La lecture des grands principes établis dans ce livre devra donc s'appuyer sur des sources complémentaires si l'on veut faire, de manière assurée, nos premiers pas dans le monde de la couleur. Si l'on veut aller plus loin, cependant, l'étude théorique ne sera plus aussi utile, car dans le domaine de la couleur comme dans toute discipline artistique, l'expertise véritable ne s'acquiert qu'à force de pratique (chap. 7 §8) !

« Quand on parle de créer des produits et des services pour les appareils mobiles, la conversation a tendance à tourner autour des problèmes de design et de développement » (chap. 1 Introduction). À se focaliser sur ces seules questions – certes importantes –, on en vient à oublier l'essentiel : le contenu ! Or, il existe bel et bien, en la matière, une problématique « mobile » : la limitation de la bande passante est un frein au chargement de fichiers volumineux (images, fichiers PDF, etc.) ; les contenus structurés complexes (graphiques, tableaux), en tout état de cause, ne peuvent être affichés sur l'écran d'un appareil mobile comme ils le seraient sur celui d'un ordinateur de bureau.

« Mobile » doit cependant être aussi compris, ici, comme la faculté pour le contenu de passer sans encombre d'un type d'appareil à un autre car, selon l'auteur qui prend ainsi une position non ambiguë sur le « contexte », postulat à la source d'un vif débat dans le monde des web designers, c'est tout le contenu qui doit être migré de l'ordinateur de bureau vers l'appareil mobile.

Produire pour les mobiles

Si la prédominance de l'appareil mobile en tant que moyen d'accès à Internet est désormais une réalité, elle était néanmoins déjà prédite par l'auteur au moment de la rédaction du livre, s'appuyant pour cela sur des chiffres ayant trait au type de connexion (chap. 1 §3), aux requêtes soumises aux moteurs de recherche (chap. 7 §2) ou à la fréquentation des réseaux sociaux (chap. 1 §4).

Il sera moins nécessaire aujourd'hui qu'à l'époque de convaincre son patron ou son client de l'importance d'une prise en compte des plus petits appareils dans le cadre du développement d'un site web ; cependant, les préconisations générales que donne l'auteur pourront être mises à profit dans d'autres contextes (chap. 4 §1).

Sans surprise, peu importe la plate-forme à laquelle le site web est destiné, une stratégie de contenu efficace commencera par un inventaire, autrement dit un recensement objectif et exhaustif des contenus à publier. Toutefois, l'auteur complète un nombre déjà important de caractéristiques servant à décrire le contenu par une liste encore plus détaillée de catégories spécifiques à un usage pour mobiles (chap. 5 §1).

Complément naturel de l'inventaire, l'audit consiste en une évaluation subjective de la qualité du contenu au regard d'un ensemble de critères dont certains d'entre eux sont donnés en exemple dans le livre (chap. 5 §1).

L'analyse qui s'ensuivra permettra notamment de mettre en lumière – surtout dans le cas où le contenu aurait été conçu dans le but d'alimenter les seuls ordinateurs de bureau – une inadéquation des objets inventoriés aux appareils mobiles en raison de la taille réduite ou des performances limitées de ces derniers (chap. 5 §2).

La première de ces deux contraintes s'applique tout particulièrement au texte. Plutôt que d'en afficher une version tronquée (chap. 6 §1 à 3), on s'attachera à en extraire la quintessence, sur la base de laquelle on rédigera différents messages qui apporteront au lecteur plusieurs niveaux de détail, selon le principe du dévoilement progressif (chap. 5 §3).

Lorsque le texte est trop long pour tenir sur une seule hauteur d'écran, on évitera au mobinaute l'effort de faire défiler verticalement ce dernier en mettant à sa disposition ancres et boutons « afficher/masquer » (chap. 6 §4).

Disposition verticale et affichage de colonnes sur demande seront également des solutions à envisager pour les tableaux (chap. 6 §5).

Si, à l'instar du texte long et des tableaux, les graphiques surdimensionnés s'accoutument mal de la largeur réduite des écrans des appareils mobiles (à ce propos, une photo édifiante montre le traitement subi par le texte contenu dans un graphique dont on a diminué la taille !), leur usage doit en outre être évité en raison de la seconde contrainte évoquée plus haut concernant la limitation de la bande passante.

Afin de fournir à chaque appareil une image de taille adaptée à celle de son écran, on pourra, dans l'idéal, recourir à la technique de l'image réactive, dont les ressources en fin d'ouvrage nous aideront dans sa mise en œuvre. Si une telle solution, faisant appel à de la programmation, nous apparaît trop complexe, on pourra lui préférer un système de recadrage qui offre un bon compromis entre la quantité d'images à gérer et la diversité des appareils à servir au mieux (chap. 6 §6).

Produire pour tous les appareils

Les techniques qui viennent d'être décrites, destinées à gérer le contenu pour les plus petits appareils, se révèlent toutefois insuffisantes lorsqu'on a affaire à un objet au format incompatible. Dans ce cas, il est tout à fait envisageable de préférer à ce dernier une alternative pour peu que l'essentiel du contenu soit préservé (chap. 3 §2 et 7). Chaque objet ayant un équivalent pour toute plate-forme, on tend ainsi vers une parité du contenu (chap. 3 §7).

En revanche, la stratégie qui consisterait à ne publier sur la version mobile du site web qu'une partie du contenu disponible sur la version pour ordinateur de bureau est, selon l'auteur, à prohiber absolument ! Et ce, principalement pour deux raisons.

La réalité du mobile pour tous usages (chap. 1 §2) a largement remis en cause le « contexte » mobile, principe selon lequel le mobinaute, nécessairement en déplacement, n'utilise son appareil que pour obtenir des informations ou réaliser des tâches en rapport direct avec sa situation d'utilisateur nomade. Au pire, « nous utilisons le contexte mobile comme excuse pour concevoir une expérience de moins bonne qualité » (chap. 1 §5).

Hormis les informations générales et les liens vers les réseaux sociaux (chap. 1 §4), le livre indique, pour différents acteurs économiques, les services que le mobinaute serait susceptible d'aller rechercher sur leurs sites web (chap. 1 §1).

D'autre part, en réservant une partie du contenu à la seule version de bureau de notre site web, on oublie de prendre en compte une tendance récente : pour certaines catégories d'utilisateurs, le mobile est l'unique moyen d'accès à Internet (chap. 1 §3).

Or, le contenu n'est pas réutilisable sur un appareil mobile s'il a été initialement conçu sous la forme de blocs préformatés pour ordinateur de bureau. À ces derniers, on préférera donc les paquets de contenu (chap. 3 §3) rassemblant, sous différents formats et versions (chap. 3 §2), un même composant élémentaire dont le sens ne sera plus véhiculé par le style (chap. 3 §4) mais par des métadonnées (chap. 3 §5).

Cette stratégie, appelée modélisation du contenu, est au cœur du livre. En associant aux paquets de contenu non seulement des types et attributs, mais encore des contraintes et relations (chap. 3 §3), elle rend possible la construction d'un contenu véritablement tout terrain.

Tout en décrivant l'idéal théorique d'une base d'éléments de contenu indépendants et polyvalents, l'auteur pointe du doigt le fait que l'offre actuelle en matière de systèmes de gestion de contenu (SGC) rend difficile la mise en œuvre d'une stratégie COPE (« Create Once, Publish Everywhere ») (chap. 3 §1). Si, en effet, l'on met de côté les logiciels sophistiqués et coûteux réservés aux plus grosses entreprises, les SGC du marché sont des SGC couplés, mélangeant la forme et le fond, comme en témoigne la présence chez ces derniers d'un bouton « aperçu » (chap. 3 §6) ou d'une barre d'outils WYSIWYG (chap. 3 §4).

Quant à « fourcher » le contenu, c'est-à-dire gérer simultanément plusieurs processus de publication (typiquement un pour l'ordinateur de bureau, l'autre pour le mobile) (chap. 2 §1) afin de créer l'illusion d'un contenu adaptatif, il s'agit d'une fausse bonne idée (chap. 2 §4) en raison de la charge de travail (chap. 2 §2 et 3) et des risques de décalage entre les mises à jour (chap. 2 §3) que cela implique.

Selon le principe de design de « suffisance », une telle solution (ou toute autre non viable à long terme) reste néanmoins acceptable si elle n'a d'autre but que d'assurer provisoirement la transition vers une stratégie de contenu mobile pérenne (chap. 4 §2). Cette dernière, en effet, outre le temps de mettre en place un SGC approprié, nécessite celui de réorganiser la production du contenu au sein des équipes qui en ont la charge (chap. 7 §7) et de définir des indicateurs en vue d'améliorer les prestations offertes pour les appareils mobiles (chap. 7 §2).

En conclusion

Plutôt qu'un ensemble de techniques destinées à contourner les contraintes inhérentes aux appareils mobiles, le livre nous apprend le moyen de traiter tous les appareils sur un pied d'égalité.

Pour atteindre cet objectif, la stratégie choisie est celle du contenu adaptatif. Toutes les étapes nécessaires à sa mise en œuvre – analyse de l'existant, production du contenu, choix des outils, organisation – sont décrites en détail et avec pédagogie : chaque chapitre se conclut par un paragraphe récapitulatif et l'auteur n'hésite pas à insister sur les points les plus importants.

Si celle-ci adopte une position claire concernant la discrimination entre les appareils (contenu contextuel, processus distincts), on souhaiterait cependant qu'une réactualisation prochaine de l'ouvrage permette de mieux comprendre comment le contenu adaptatif s'articule avec les autres solutions possibles pour atteindre le même objectif, telles que le responsive web design (brièvement évoqué dans cette édition) ou l'adaptive web design, plus largement en usage aujourd'hui qu'ils ne l'étaient à la date de publication du livre.

Ces développements pourraient se substituer aux paragraphes consacrés à la construction d'un argumentaire en faveur d'une version mobile du site web, moins nécessaire à l'heure actuelle que celui qui plaiderait, au contraire, pour le maintien de la version de bureau !

L'écran tactile a radicalement changé notre relation avec l'outil informatique. Libérés des « prothèses » qui nous étaient nécessaires pour communiquer avec lui, nous manipulons désormais les éléments d'interface directement avec nos doigts.

Par le nombre – « en 2011, Apple a vendu plus d'iPad en une seule année que de Mac au cours des vingt-huit années précédentes » ! (Introduction) – et la diversité des appareils vendus, l'univers du tactile s'étend de façon inattendue.

Or, le design web, tel qu'il est encore largement pratiqué, continue d'ignorer le doigt en tant que mode d'interaction.

De la même manière que le responsive web design, en s'adressant à l'ensemble des écrans, nous a permis de comprendre que « le Web ne se limite pas à un seul format de sortie » (Introduction), le design tactile, en prenant en compte la diversité des façons de communiquer avec l'objet, doit nous faire prendre conscience que « le Web ne se limite pas à un seul format d'entrée » (Introduction).

Les doigts étant en partie occupés à soutenir l'appareil tactile, ils ne pourront interagir avec celui-ci avec la même précision, ni le même périmètre d'action que le curseur d'une souris sur l'écran d'un ordinateur de bureau.

On gardera cette contrainte à l'esprit lors de la conception des contrôles du site web ou de l'application avant d'envisager, dans un second temps, une alternative à ces derniers, plus adaptée à un écran tactile, sous la forme de gestes : simples pour les fonctions de base, sophistiqués pour les fonctions avancées.

Un design sur le pouce

L'importance du contact physique contraint le design tactile, comme le design industriel, à s'intéresser à la façon dont nous manipulons l'objet que nous avons entre les mains (chap. 1 §1). Or, non seulement celle-ci dépend du type d'appareil, mais peut varier pour un type d'appareil donné, ainsi que le démontrent différentes études dont les conclusions sont résumées par l'auteur sous la forme de schémas à la fois simples et explicites.

On distingue ainsi trois prises en main typiques pour les smartphones (chap. 1 §2), une de plus pour les phablettes (chap. 1 §3) ; des modes d'utilisation fonction de leur taille pour les tablettes (chap. 1 §4), du niveau d'expérience pour les ordinateurs hybrides et portables (chap. 1 §5).

Les études évoquées révèlent en outre que ces façons d'interagir avec les appareils, pour diverses soient-elles, conduisent à une même conclusion : « …ce sont nos pouces qui font le gros du travail. » (chap. 1 §1). Notre design devra naturellement en tenir compte tout en évitant, cependant, deux écueils : masquer le contenu ; entrer en conflit avec les contrôles du système ou du navigateur (chap. 1 §6). Ces différentes contraintes étant, le plus souvent, difficiles, sinon impossibles à satisfaire simultanément, l'auteur nous indique quel est le meilleur choix de design pour une application native, en fonction de son système d'exploitation, ainsi que pour un site web (chap. 1 §7 à 10), tout en nous proposant de privilégier, pour ce dernier, une solution originale inventée par le designer Luke Wroblewski (chap. 1 §7).

Tandis que le positionnement des pouces sur l'appareil déterminera l'emplacement des contrôles sur l'écran, leur taille définira celle de ces derniers : selon une étude de Microsoft, 7 mm est un minimum acceptable (chap. 2 §4), qu'on transposera en pixels (chap. 2 §6), après avoir redéfini la largeur du viewport (chap. 2 §9). Si l'auteur nous invite à convertir, sans hésitation, en em le dernier chiffre obtenu (chap. 2 §7), il convient, selon moi, si l'on ne veut pas avoir de mauvaise surprise, de s'assurer préalablement que la valeur d'em paramétrée dans les navigateurs cibles par le constructeur ou l'utilisateur ne soit pas inférieure à celle définie, en général, par défaut (soit 16 pixels).

Ces chiffres, constituant une base pour notre design, sont complétés par d'autres, tout aussi précis, définissant des tailles d'autant plus grandes que les boutons sont difficilement accessibles (chap. 2 §5) ou des espacements d'autant plus larges que les cibles tactiles sont petites (chap. 2 §8).

Les boutons seront une alternative efficace aux périphériques usuels de l'ordinateur de bureau, tels que le clavier (chap. 3 §5). Ce dernier, dans sa version tactile, sera cependant préférable au champ select dans un formulaire (chap. 3 §7). Dans ce cas, sa personnalisation en fonction du type de donnée à saisir en facilitera l'usage (chap. 3 §6).

De manière générale, la difficulté à renseigner des champs de formulaire sur un écran tactile devra nous inciter à ne conserver, parmi ces derniers, que ceux destinés à collecter des informations à la fois véritablement utiles et non déductibles (chap. 3 §4).

Les contrôles hérités du design pour ordinateur de bureau s'accoutument mal, en effet, à l'univers tactile (chap. 4 §2). Une première solution consistera à limiter autant que possible les interactions : le dévoilement progressif s'acquittera de cette mission lorsqu'il s'agira d'informer l'utilisateur (chap. 3 §1). La seconde solution consistera à substituer aux contrôles des interactions gestuelles (chap. 3 §8).

Tap et balayage en plat principal

Afin de définir un système de communication adapté au type d'appareil considéré, on sera tenté, dans un premier temps, de distinguer les outils dotés d'un écran tactile de ceux qui ne le sont pas. Or, dans cette démarche, la taille de l'appareil ne nous sera d'aucune aide, tandis que la détection des événements gérés par celui-ci ou le recours à la propriété pointer sont des techniques insuffisamment fiables (chap. 2 §1).

Par ailleurs, les propriétés hover et any-hover, qui permettront de conclure quant au support du survol, ne sont, aujourd'hui, pas disponibles (chap. 2 §3).

En conséquence, on fera l'hypothèse que l'appareil est a priori capable de répondre à tout type d'interaction (chap. 2 §2).

Parmi la grande diversité des gestes qu'un outil tactile est en mesure de gérer, l'auteur nous conseille de privilégier le click/tap et le balayage, car c'est à ces derniers qu'il est techniquement le plus facile d'associer une action : par le biais de l'événement générique click pour le premier (chap. 4 §7) ; grâce à un simple code CSS pour le second (chap. 4 §8) !

Ce faisant, l'auteur n'oublie pas les inconvénients que pose, dans le monde tactile, l'utilisation de l'événement click (chap. 4 §9). L'événement de pointeur, introduit par Microsoft, a pour but d'uniformiser ce dernier, quel que soit le type de pointeur utilisé (souris, doigt, stylet, etc.) (chap. 4 §11). En attendant sa standardisation, l'auteur nous propose astuces et bibliothèques JavaScript (JS) permettant de passer outre le délai de 300 ms au bout duquel sont exécutées les actions associées à un événement click sur un site web, rendant ce dernier sensiblement moins réactif que son pendant applicatif (chap. 4 §10).

Le balayage a beau être devenu, au fil du temps, un réflexe dans les doigts des mobinautes, il leur en coûte, cependant, un certain effort, et pour cette raison, on ne doit pas le laisser proliférer inutilement sur l'interface : le design hors canvas permettra de limiter le scrolling (chap. 3 §2), tandis qu'on n'acceptera les carrousels que tant qu'ils offrent à l'internaute une idée de ce qu'ils cachent derrière les premières vignettes qui se présentent à sa vue (chap. 3 §3).

Des gestes à la carte

Si la complexité de notre interface exige une panoplie d'interactions plus étendue qu'un couple tap/balayage, on devra recourir, d'une part, à des gestes sophistiqués pour gérer la navigation et les contrôles élémentaires. En effet, la plupart des gestes de base sont déjà confisqués par les navigateurs (chap. 4 §6) ; l'auteur en dresse la liste et précise même les actions spécifiques que ces derniers associent à certains d'entre eux, tels que la pression longue (chap. 4 §1).

Une telle stratégie présente, cependant, plusieurs difficultés. Sur le plan technique, tout d'abord : le développement de sites web offrant peu de possibilités pour coder pareils gestes (chap. 4 §12), on devra, dans ce contexte, s'appuyer sur une bibliothèque JS telle que celle citée dans le livre (chap. 4 §6).

De plus, le fait de coder des actions spécifiques pour les interactions tactiles et les interactions de souris nécessite de désactiver le comportement par défaut des navigateurs, selon lequel les secondes sont générées en cascade après les premières, d'où une complexité accrue du code, assortie de risques non négligeables de régression (chap. 4 §9).

Enfin, si les lois physiques, les conventions sociales ou les normes peuvent servir de guide à l'internaute dans l'utilisation des fonctions de base de son appareil tactile (chap. 4 §3), il sera plus difficile, en l'absence de règles établies dans ce domaine (chap. 5 §6), de lui faire découvrir des gestes complexes (chap. 4 §4).

Le design skeuomorphique exploite la connaissance déjà acquise par l'internaute du fonctionnement des objets du quotidien (chap. 5 §2 et 3), sans se contenter pour autant d'imiter servilement le monde réel (chap. 5 §4).

L'enseignement des gestes abstraits requiert une pédagogie plus active. Aux manuels et tutoriels du monde physique (chap. 5 §1), on préférera un coaching consistant en un ensemble d'instructions contextuelles (chap. 5 §5).

Il se verra complété d'un mécanisme de bonus destiné à motiver l'utilisateur contraint de reproduire les gestes critiques récemment appris, progressant ainsi dans sa connaissance de l'application selon un système de niveaux (chap. 5 §5).

Offrant l'avantage, à l'instar des gestes complexes, de solliciter la mémoire musculaire, moins faillible que la mémoire visuelle, et celui de ne recourir qu'à deux gestes simples (tap et balayage) ne présentant, a priori, aucun risque de conflit avec les interactions servant à dialoguer avec le navigateur ou le système d'exploitation, le menu circulaire sera, d'autre part, réservé aux actions et outils rapides (chap. 4 §5).

De telles approches, utilisant le geste comme moyen de communication entre l'homme et la machine, devraient apparaître, à un horizon plus ou moins lointain, comme une étape de transition : une exploitation plus systématique des possibilités offertes par les capteurs présents sur les appareils mobiles permettra, en effet, au mobinaute de fournir ou d'obtenir des informations désormais sans la moindre interaction ! (chap. 3 §9).

En conclusion

À une époque où, après avoir accompagné la déferlante du Web mobile, le tactile s'invite sur les grands écrans (Windows 8), un livre consacré au design pour ce type d'interaction était devenu indispensable.

Celui-ci ne déçoit pas nos attentes. Il aborde les principaux aspects qu'il convient de connaître sur le sujet, des plus immédiats (la prise en main des différents appareils et les contraintes que celle-ci impose aux caractéristiques physiques des boutons et autres contrôles) aux plus subtils (la révélation à l'internaute des gestes sophistiqués), selon une construction progressive, riche en transitions, qui n'en rend la lecture que d'autant plus facile et agréable.

Le livre traite également de manière assez complète les spécificités de mise en œuvre d'un design tactile : selon le type d'appareil – l'ouvrage ne fait, d'ailleurs, pas abstraction des appareils non tactiles en proposant des techniques, quoiqu’imparfaites, pour les distinguer des autres –, selon qu'on ait affaire à un site web ou une application native, et dans ce dernier cas, selon le système d'exploitation.

On appréciera également la richesse et la diversité des sources (études statistiques, design industriel, jeux vidéo) utilisées par l'auteur pour construire son analyse, et la façon dont celle-ci est approfondie (jusqu'à l'implémentation front-end, lorsque cela est jugé utile) et illustrée (par de nombreux exemples d'application).

Enfin, les références des études et bibliothèques JS citées tout au long du livre sont reprises ou complétées au sein d'une fort utile bibliographie.

Comme l'écrit Mandy Brown dans son avant-propos, tandis que le précédent livre d'Ethan Marcotte a fait entré l'expression « responsive web design » dans le lexique du designer web, ce livre-ci en a fait sortir le mot « page » !

Le système de pages aux dimensions flexibles ne suffit plus, en effet, à répondre aux attentes d'un nombre toujours plus grand de nouveaux appareils se distinguant par leur nature (objets du quotidien connectés) autant que par leur taille.

C'est pourquoi « nous avons abandonné les pages au profit de composants modulaires » (Mandy Brown, avant-propos) ; la mise en œuvre d'une solution abordable, adaptée à l'ensemble de ces situations inédites, passe par l'adoption d'un changement d'échelle lors de la phase de conception. Les commentaires du développeur Scott Childs à propos du travail réalisé sur le site Capital One suffisent amplement à démontrer l'efficacité d'une telle méthode : « quand vous avez 2 500 pages réparties sur 4 000 configurations différentes, on peut résumer le tout à bien peu de choses. Combien de composants différents avons-nous au total ? Environ vingt. » (chap. 1).

La réalisation de tels modèles de design, ou « design patterns », nécessitera de remettre en cause notre vision et nos pratiques.

Changer notre façon de penser

En nous invitant à raisonner en termes de dimensions flexibles, et non plus fixes, le responsive web design a radicalement changé notre façon de penser et a, du même coup, frappé d'obsolescence les méthodes de conception basées sur les maquettes et autres grilles.

Les premières pourront cependant continuer d'être utilisées lors de la phase de réflexion en amont de la réalisation du design (chap. 2 §6) tandis que les frameworks CSS, dont le fonctionnement s'appuie largement sur les secondes, pourront servir à la production d'un prototype destiné aux tests utilisateur (chap. 5 §1).

Une fois doté de proportions complètement fluides, le design ne sera pour autant pas véritablement responsive s'il ne s'intéresse qu'au contenant et pas au contenu ; cela vaut notamment pour les images dont il devra préserver le point focal (chap. 3 §3).

Mais la largeur n'est pas le seul élément à surveiller (chap. 5 §3).

La hiérarchie pose la question de l'agencement des contenus ne pouvant être placés à un niveau identique dans les écrans de taille réduite (chap. 4 §2).

L'interaction concerne principalement les menus de navigation (chap. 2 §2).

La densité a trait à la quantité de contenu affichée à l'écran ; elle se rencontre en particulier, elle aussi, dans le menu : masqué, celui-ci a une fâcheuse tendance à se remplir de liens inutiles (chap. 2 §5), tandis que réduit à l'essentiel, il aurait le double avantage de simplifier la navigation et de mettre celle-ci au premier plan (chap. 2 §6).

Ces différents critères ont un rapport étroit avec la taille de l'écran. Si le responsive web design nous a appris à considérer cette dernière indépendamment du type d'appareil, il doit en être de même des autres caractéristiques de celui-ci : la possibilité pour un ordinateur portable de se connecter au réseau 3G et l'apparition d'une nouvelle génération d'ordinateurs hybrides offrant plusieurs modes d'interaction remettent en effet en cause l'idée selon laquelle la connexion lente et l'interaction tactile seraient l'apanage de l'appareil mobile (chap. 5 §5).

Face à la multiplicité des facteurs à prendre en compte, il peut être raisonnable de renoncer à vouloir tout contrôler et de déléguer au navigateur, quand cela est possible, le soin de choisir le meilleur contenu (chap. 3 §5).

Changer notre façon de faire

La complexité actuelle du Web nous oblige, en tout cas, à revoir nos habitudes de conception.

La règle simple – et bien connue des praticiens du responsive web design – donnant l'instruction au navigateur de redimensionner les images trop grandes pour les plus petits écrans présente, comme nous l'apprend l'auteur, deux limites : l'une relative à la performance, l'autre à la lisibilité (chap. 3 §3).
Pour cette raison, l'auteur nous invite à ne plus utiliser un fichier unique par image mais, au contraire, plusieurs fichiers, correspondant soit à différentes tailles (chap. 3 §3), soit à différentes images (chap. 3 §4), soumis au navigateur grâce à de nouveaux éléments ou attributs HTML5, dont l'éventuelle absence de prise en charge sera corrigée par le recours à un polyfill (chap. 3 §3).

Un redimensionnement peut également être réalisé pour les images d'arrière-plan à l'aide, cette fois-ci, de CSS, mais devra parfois être accompagné d'un recentrage afin que le sujet principal qu'elles représentent soit préservé (chap. 3 §2).

Les vidéos n'ayant, par nature, pas de dimensions propres, leur taille ne peut être ajustée à l'aide de la méthode utilisée traditionnellement, dans ce but, pour les images de premier plan, mais elles tireront profit d'une technique aussi simple qu'ingénieuse dont le principe et la mise en œuvre nous sont présentés en détail (chap. 3 §1).

Afin d'obtenir du contenu adaptatif, l'auteur préconise l'utilisation d'une bibliothèque JavaScript développée par Filament Group, en remplacement de solutions rudimentaires encore largement en usage aujourd'hui : celle consistant à fournir simultanément au navigateur plusieurs contenus différents, affichés ou masqués selon le point de rupture, pour d'évidentes raisons de performance (chap. 2 §3, chap. 4 §1) ; celle s'appuyant sur la méthode JavaScript write, pour des raisons analogues et pour son manque de souplesse (chap. 4 §2).

Si les tableaux HTML ont heureusement fait place à l'imbrication d'éléments div lorsqu'il s'agit de créer une mise en page de type tableau, cette dernière méthode présente, comme celle qui l'a précédée, l'inconvénient de générer du balisage superflu. Une alternative CSS existe, pourtant. Ne nécessitant rien de plus que le support de la pseudo-classe :nth-child, elle est largement détaillée dans un paragraphe qui lui est presque entièrement consacré, au côté du module Flexbox. Ce dernier n'est, en revanche, que brièvement évoqué ; il est vrai qu'il pâtit d'une prise en charge limitée et qu'il est, de plus, peu adapté à la réalisation de mises en page à grande échelle (chap. 5 §4).

Vers de nouveaux standards

L'adoption de méthodes de conception pérennes a été à l'origine de modèles de design qui sont aujourd'hui sur le point de devenir des standards. C'est en particulier le cas des menus de navigation qui s'adaptent à l'espace réduit des petits écrans en affichant les liens uniquement sur demande, par le biais d'un bouton (chap. 2 §1, 4) ou d'une interaction (chap. 2 §2).

La construction d'un bouton afficher/masquer est particulièrement bien décrite dans le livre qui nous détaille les codes HTML, CSS et JavaScript correspondants, tenant notamment compte du cas où ce dernier langage ne serait pas interprété par le navigateur (chap. 2 §1).

En revanche, le « menu hors canvas », consistant en l'affichage du menu via une interaction, ne se voit accorder qu'un bref paragraphe en exposant simplement le principe (chap. 2 §2).

Bien que largement diffusés, ces modèles ne sont pas encore familiers à tous les internautes et il n'est pas toujours évident pour eux de deviner ce qui se cache derrière l'icône d'un bouton, comme le révèlent certaines études portant sur le « hamburger » (chap. 2 §4). C'est d'autant plus vrai pour le menu hors canvas dont rien – ou presque – n'indique sur l'écran l'existence. D'où l'émergence de menus innovants conciliant taille réduite et visibilité (chap. 2 §6).

Alors que plusieurs stratégies s'offrent ainsi à nous pour rendre la navigation responsive, la publicité est en revanche soumise à des normes lui réservant des espaces aux dimensions désespérément rigides (chap. 4, introduction). Face à une telle situation,trois organisations ont pris les devants en mettant au point leur propre système de publicité adaptative (chap. 4 §3).

Si les différents composants décrits dans l'ouvrage sont d'une parfaite souplesse, leur fonctionnement est généralement lié à des points de rupture représentatifs de l'état actuel du marché des ordinateurs et appareils mobiles, comme l'est celui des frameworks CSS s'appuyant sur une grille. Cette dernière ne doit pas s'imposer comme une façon arbitraire de ranger le contenu (« canvas in ») mais doit, au contraire, répondre aux contraintes posées par celui-ci (« content out ») (chap. 5 §2) ou découler de l'effet recherché. C'est l'option qu'a choisie le musée Whitney avec une mise en page originale s'adaptant aussi bien aux appareils existants qu'à ceux à venir (chap. 5 §1).

En conclusion

Les quelques composants décrits dans le livre ne sauraient répondre aux problèmes de mise en page responsive posés par l'ensemble des éléments constitutifs de la page web.

De plus, tous ne sont pas ici fournis avec le code permettant de les faire fonctionner ; certains (notamment le menu hors canvas) bénéficient d'une présentation plus détaillée dans d'autres ouvrages traitant du responsive web design.

Enfin, si pour certains des problèmes abordés (navigation), l'ouvrage propose plusieurs solutions, il ne dit rien, en revanche, des circonstances dans lesquelles l'une d'elles est à privilégier par rapport aux autres.

Le livre souligne cependant les avantages (performance) de ces nouveaux modules sur les méthodes historiques, tout en mettant en garde contre les risques (manque de visibilité) que présentent certains d'entre eux.

Ainsi, plutôt que de fournir un kit complet de construction d'un site responsive, le livre, qui s'adresse à un lecteur ayant déjà de bonnes bases en responsive web design, s'attache, à travers la présentation d'une sélection de composants modulaires, à enseigner quelles sont, dans ce domaine, les bonnes pratiques de conception, et c'est peut-être là, finalement, le plus important !

La gestion de projet web a aujourd'hui atteint l'âge de la maturité : au développement à la va-vite, sur la base d'une maquette dessinée sur un coin de table, d'un site web voué à être alimenté au fil de l'eau s'est substitué le déploiement d'un authentique projet informatique, défini par une succession d'étapes clairement identifiées, et requérant des compétences spécifiques.

La gestion de contenu est l'une de celles-là, et son efficacité à long terme ne peut être garantie à moins de mettre sur pied une véritable stratégie.

Plutôt que d'entrer dans le détail des techniques mises en œuvre – ce que son format réduit n'aurait de toute façon pas permis – le livre nous montre comment celle-ci se concrétise dans chacune des phases de l'étape de gestion de contenu, les connexions qu'elle entretient avec les autres étapes du projet, et le gain qu'elle peut retirer des compétences développées dans d'autres disciplines, tout en nous renvoyant vers d'autres livres et liens pour plus d'information.

Ces phases sont principalement au nombre de trois : la collecte d'information, la conception puis la production de contenu.

Phase préliminaire : connaître l'existant

Le contenu d'un site web ne jaillit pas du cerveau inspiré d'un rédacteur devant sa page blanche ! Il est le résultat d'un classement méthodique d'informations collectées auprès de trois principaux contributeurs : le client, l'utilisateur, la concurrence.

Les étapes préalables au démarrage du projet – appel d'offres, proposition de projet, réunion de lancement – constituent les premières sources d'alimentation de notre contenu (chap. 3 §2). Elles seront complétées par un inventaire, ou audit quantitatif de l'existant (chap. 3 §3).

L'auteur insiste en particulier sur l'importance des informations issues des entretiens réalisés avec les parties prenantes, autrement dit les collaborateurs de l'entreprise cliente concernés par le projet (chap. 3 §2).

Si ces dernières, fortes de leur expérience, peuvent ainsi nous renseigner sur les besoins de la clientèle de l'entreprise, on ne peut cependant pas se reposer sur ce seul témoignage ni, a fortiori, sur notre intuition : seule la mise en œuvre de méthodes rigoureuses nous permettra d'acquérir une connaissance approfondie de l'utilisateur. Celles-ci, parmi lesquelles les personas, les scénarios utilisateurs, les cas d'utilisation et les flux d'activité, seront puisées dans l'arsenal de l'ergonome ou de l'architecte d'information, ou leur réalisation confiée à ces derniers (chap. 3 §3).

Les sites web de la concurrence – mais aussi ceux des entreprises ciblant un public similaire à celui de l'entreprise cliente, ou encore les pages web des autres services, dans le cas où cette dernière serait une grande entreprise – seront une importante source d'inspiration (chap. 3 §3).

Les données recueillies auprès du client pourront être classées selon la typologie proposée par la spécialiste en contenu web Kristina Halvorson, décrite en détail dans un livre cité en annexe comme la référence principale, et dont les grandes lignes nous sont ici présentées (chap. 3 §2).

Les éléments inventoriés seront enrichis d'un ensemble de données descriptives afin d'être le plus parfaitement exploitables (chap. 3 §3). La liste de questions que l'auteur nous invite à nous poser nous permettra d'étendre cet ensemble au-delà du périmètre des caractéristiques les plus évidentes. Dans le cadre d'une telle démarche, le conservateur de musée recensant les pièces d'une collection nous servira de modèle (chap. 2 §2).

S'appuyant sur l'étude utilisateur réalisée précédemment, l'audit qualitatif établira un classement des éléments inventoriés selon leur pertinence (chap. 3 §3).

La conception : une affaire de coopération

Le fruit de la collecte dont la procédure vient d'être décrite servira de matière première à notre contenu qui sera construit sur la base d'un message (chap. 2 §3 et chap. 3 §4). Ce dernier est un concept clé du marketing, faisant référence à la fois à l'idée générale à transmettre à l'internaute et à la façon de l'exprimer. Celle-ci pourra mettre en œuvre un ou plusieurs des trois types d'arguments – logos, pathos, ethos – définis en rhétorique, comme l'illustrent trois exemples concrets proposés par l'auteur (chap. 2 §3).

En répondant véritablement à ses besoins (chap. 1 §1) et, avec l'aide de chartes éditoriales, en parlant son langage (chap. 1 §3 à 5), le contenu accrochera l'attention du lecteur, avant de le captiver tout à fait au moyen du storytelling dont l'auteur nous rappelle brièvement quelques règles de base : pyramide inversée, règle des 5W+1H, privilégier les données objectives (chap. 2 §1).

Sur un projet de grande taille où les rôles de rédacteur et de stratège en contenu web sont distincts, le second doit néanmoins connaître suffisamment le métier du premier et les contraintes auxquelles celui-ci est confronté afin que, à l'instar de l'éditeur face à un auteur, il sache le motiver sans prendre le risque de freiner son inspiration (chap. 2 §1).

Domaine réservé de l'architecture de l'information, le positionnement des éléments de contenu sur la page web sollicite aussi parfois les compétences du stratège en contenu web lorsqu'il est question, par exemple, des items de navigation ou de la taxonomie (chap. 2 §4).

Même lorsqu'il n'est pas amené à collaborer directement avec l'architecte de l'information, le stratège en contenu web récupère le produit du travail de ce dernier sous la forme d'une maquette appelée wireframe qu'il complète avec des directives afin d'en tirer une description détaillée : le modèle de contenu. Celui-ci se voit accorder, dans le livre, une place privilégiée puisqu'il est accompagné d'un modèle de document détaillé (chap. 3 §4).

Modèle de contenu, wireframe et autres chartes ne sont pas les seuls livrables produits par l'étape de gestion de contenu. En effet, une liste non exhaustive établie par l'auteur en dénombre pas moins de trente-quatre ! S'il peut être difficile pour le stratège en contenu web de s'y retrouver, que dire alors du client à qui ces documents sont destinés, et dont il ne comprend pas toujours la finalité ! Pour résoudre cette difficulté, l'auteur nous propose de regrouper les livrables selon un des quatre classements proposés : par phase, fonction, méthode ou public (chap. 3 §1).

La production : tenir son budget et ses objectifs

À moins de recourir à l'édition de contenu, qui consiste à collecter celui-ci au cœur des différents sites web présents sur la Toile, la rédaction du contenu sera confiée soit à des créateurs dédiés, soit à des experts internes à l'entreprise cliente. L'auteur nous explique comment faire collaborer ces deux types d'acteurs afin de tirer profit de leurs atouts respectifs (chap. 3 §5).

La démultiplication des ressources coûte cher, cependant (chap. 2 §1), d'où l'importance de ne pas gaspiller celles-ci dans la production de contenus inutiles, tels que ceux énumérés dans le livre (chap. 1 §2 et 6), et de confier leur encadrement à un responsable éditorial qui sera garant de l'efficacité de leur travail (chap. 3 §5).

Ne pas se donner les moyens de ses ambitions conduit tout autant à une désorganisation du processus de production du contenu (chap. 1 §1 et 7). Pour cette raison, il est indispensable de définir un workflow éditorial (chap. 1 §7) – implémenté à l'aide d'un système de gestion de contenu, dont l'auteur nous rappelle à juste titre qu'il s'agit là de sa finalité originelle, avant que celui-ci ne devienne un logiciel d'aide à la création de sites web (chap. 2 §4) –, un calendrier éditorial, un plan média (chap. 2 §1) attribuant à chaque élément de contenu le canal (site web, blog, newsletter, réseau social, etc.) approprié (chap. 2 §3).

Enfin, l'efficacité de la stratégie de contenu déployée sera évaluée à l'aune des indicateurs de succès (ou « conditions de victoire ») qu'on aura préalablement définis (chap. 3 §2). Si l'on s'intéresse en particulier aux statistiques de visites du site, deux livres (téléchargeables sur le Web) nous aideront à en faire une analyse intelligente (chap. 2 §3 et chap. 3 §6).

En conclusion

Le livre d'Erin Kissane comble un vide : parmi les quelques livres approfondissant les méthodes et techniques de création de contenu web, il est, d'après l'auteur, le seul à traiter véritablement de stratégie, c'est-à-dire de la façon d'orchestrer celles-ci dans le cadre d'un projet web (chap. 4).

Le stratège en contenu web a, par conséquent, de ce dernier, une vision globale, et pour cette raison, doit posséder suffisamment de connaissances dans les domaines où les acteurs du projet avec lesquels il est amené à travailler sont des experts (chap. 2 §4). Le professionnel ayant pour ambition de se spécialiser en stratégie de contenu web pourra ainsi tirer profit des compétences acquises dans son métier d'origine (chap. 5).

Le lecteur, quant à lui, devra posséder au moins des notions des principaux domaines de compétence (architecture de l'information), techniques (système de gestion de contenu) et livrables (wireframe, taxonomie) rencontrés dans le cadre d'un projet web, car ces derniers sont, le plus souvent, évoqués dans l'ouvrage sans être véritablement explicités.

La lecture du livre requiert, en outre, un bon esprit de synthèse, car, à l'exception de celles présentées selon un ordre chronologique dans les derniers paragraphes du chapitre 3, les fonctions que doit assurer le stratège en contenu web, si elles sont bien mentionnées dans l'ouvrage, n'y sont, en revanche, pas rattachées à une phase particulière du projet.

Enfin, en ce qui concerne les livrables, on regrettera d'une part qu'à l'exception du modèle de contenu, les principaux d'entre eux (considérés, par exemple, parmi les seize que dans chap. 3 §1, l'auteur cite comme ceux qu'elle « utilise le plus souvent ») ne soient pas détaillés, et d'autre part que si les références bibliographiques sont nombreuses, l'auteur ne dit pas toujours où trouver, parmi celles-ci, les informations attendues : « Ces portraits robots comprennent les personas, les scénarios utilisateurs, les cas d'utilisation et les flux d'activité, qui ont tous été décrits en détail dans d'autres ouvrages. » (chap. 3 §3). Oui, mais lesquels ?…

En s’inspirant de la pyramide de Maslow qui établit une hiérarchie des besoins humains (chap. 1 §3), on peut définir pour un site web, dans cet ordre, les quatre contraintes que celui-ci doit satisfaire : fonctionnalité, fiabilité, utilisabilité, plaisir (chap. 1 §4). Si les trois premières sont à la charge du développement et de l’ergonomie web, la dernière relève du design émotionnel.

Pour réaliser sa mission, le design émotionnel s’intéresse au comportement des visiteurs du site web à la fois en tant qu’êtres humains et en tant qu’utilisateurs cible, et d’autre part, s’emploie à créer un lien privilégié entre eux et le site web en donnant à son tour à ce dernier un visage humain.

L’internaute : un humain avant tout

Afin de toucher le plus large auditoire, le design émotionnel exploite avant toute chose la caractéristique la mieux partagée par les internautes : ce sont tous des êtres humains ! Partant de ce constat évident, le design émotionnel s’appuie sur les travaux de la psychologie évolutionniste. Cette dernière nous apprend ainsi que chacun de nous est attiré par ce qui lui ressemble, résultat à la source de nombreux designs anthropomorphes (chap. 3 §2 et 4), imitant nos activités (chap. 2 §7 et chap. 3 §2) ou évoquant notre silhouette (chap. 2 §3).

Une forme humaine particulière a cependant notre préférence : celle des visages de bébés. Le livre nous montre à ce sujet, à partir d’un exemple, comment cette inclination trouve son application dans un site web (chap. 2 §2).

Si l’instinct de survie – car c’est bien lui qui est en cause – nous rend dociles lorsque nous sommes en présence de notre progéniture, afin de nous inciter à mieux en prendre soin, il nous aide dans un autre contexte à nous protéger nous-mêmes en faisant de nous des experts en détection de rupture de motifs, ou contraste. Celui-ci se décline en contraste visuel et contraste cognitif. Ces deux modalités ont des applications dans le monde du Web : le premier incitera, par exemple, à passer à l’action lors de l’utilisation d’un formulaire (chap. 2 §4) ; le second permettra à un site web de se distinguer de ses concurrents (chap. 2 §6). Le contraste n’apporte cependant le résultat attendu que tant qu’il est employé avec mesure : la loi de Hick indique ainsi que la multiplication des effets de contraste présente le risque d’égarer le visiteur (chap. 2 §5).

Comme le montre l’auteur à partir de deux exemples concrets, la surprise peut se révéler un moyen efficace de créer du contraste, et par l’effet qu’elle provoque, rendre inoubliable l’expérience utilisateur (chap. 4 §1). En effet, les émotions, qui sont une autre caractéristique commune à l’espèce humaine (chap. 2 §1), ont ce pouvoir de faciliter l’imprégnation des événements dans la mémoire (chap. 1 §6).

Contrairement à la surprise, l’anticipation ne surprend pas l’internaute par la nature de l’événement qui l’attend mais par la forme que celui-ci prendra. Le cas du redesign de Twitter en 2010, dont l’auteur nous détaille les étapes, illustre parfaitement la façon dont les internautes prennent spontanément à leur charge une partie de la communication, surtout lorsque l’octroi d’une information privilégiée fait prendre du galon à leur statut, entraînant ainsi un effet cordon de velours (chap. 4 §2).

Le public de notre site n’est cependant pas composé d’humains lambda ; il constitue une cible précise dont il faudra satisfaire les besoins propres. Cette dernière sera définie à l’aide de la méthode des personas dont l’auteur nous expose très brièvement le principe et nous présente un exemple de livrable (chap. 3 §3).

Le site web : ...un humain avant tout !

À l’instar de l’artisanat (chap. 1 §1), le design émotionnel, en donnant un visage humain à ses réalisations (chap. 3 §1), séduit un public las des sites web sans âme produits à la chaîne (chap. 1 §2).

De même qu’elles nous ont permis d’identifier la personnalité de notre public, les personas nous aideront à définir celle de notre site web. Après avoir énuméré les différents composants d’une persona du design d’un site web, l’auteur, en guise d’exemple, nous en donne les valeurs pour le site MailChimp dont il a été le designer principal (chap. 3 §4).

La mise en page véhiculera la personnalité du design ainsi définie, et que le ton soit à l’humour ou à l’empathie, derrière l’interface, on reconnaîtra un être humain (chap. 3 §4).

En apportant une sensation de confort quand il s’agit d’effectuer des tâches techniques (chap. 1 §5) ou en inspirant confiance lors de la réalisation d’opérations sensibles (chap. 5 §1), la mise en page lève par la même occasion, chez l’utilisateur, les freins à l’action.

Plus généralement, un design doté d’une vraie personnalité peut, comme nous le montre l’auteur, preuves à l’appui, aider un site web à faire la différence face à ses concurrents (chap. 7 §1).

L’aspect humain du site web ne se traduit pas seulement dans son apparence mais également dans sa façon de se comporter avec l’utilisateur. Un humour savamment distillé à travers les pages d’un site web peut ainsi mettre l’utilisateur dans de bonnes dispositions et par voie de conséquence, l’aider à accomplir des tâches difficiles, selon le principe de l’amorçage (chap. 4 §3).

Une démarche active telle que la mise en place de gains peut contribuer à fidéliser un client, surtout lorsque ceux-ci prennent la forme de récompenses variables (chap. 7 §1). Ils peuvent également remotiver un utilisateur réalisant une tâche longue et rébarbative (chap. 5 §2). Et si les internautes continuent, malgré la qualité de notre design, à faire montre d’une insolente indifférence, la cause sera sans doute à rechercher sur un autre plan : celui du contenu (chap. 5 §3). Enfin, l’humour et le jeu peuvent aider un site web à se sortir de situations délicates (chap. 5 §5), qu’il s’agisse d’une réclamation (chap. 1 §7) ou d’un incident technique (chap. 6 §1).

Le design émotionnel ne doit pas être envisagé uniquement pendant la phase de développement. En amont, on sera sans doute amené à justifier le bien-fondé d’une telle démarche (chap. 7 §2) ; en aval, le cas échéant, on essaiera de comprendre, à l’aide de tests, pourquoi notre design n’apporte pas les résultats escomptés (chap. 5 §4). Dans ces deux situations, ce n’est plus le site web mais l’informaticien qui devra afficher un visage humain !

En conclusion

Le design émotionnel donne un visage humain à notre site web. S’il repose sur quelques grands principes traités dans les différents chapitres du livre, le plus souvent synthétisés dans un paragraphe conclusif, il ne délivre en revanche aucune méthode universelle, la forme définitive d’un site web étant intimement liée à la personnalité que l’on souhaite attribuer à ce dernier. Pour cette raison, on ne trouvera dans le livre aucune recette mais un grand nombre d’exemples extraits du Web qu’il ne s’agira évidemment pas d’imiter servilement mais qui pourront aider à nourrir notre réflexion. En cela, le livre nous engage davantage sur la voie de l’innovation que sur celle de l’acquisition d’une expertise sur une technique précise.

Le livre constitue une bonne entrée en matière pour ce qui regarde le troisième étage de la conception d’un site web, qui devra certes passer après les aspects de fiabilité et de performance mais qui permettra finalement de faire la différence face aux sites concurrents.

Sa lecture pourra être complétée par celle d’un des livres cités en annexe.

Avant de tirer profit des possibilités offertes par le multimédia, le Web a d'abord été conçu pour le texte, jouant pour ce dernier, à notre époque moderne, le même rôle que le livre au temps de Gutenberg. Élément clé dans la réussite du document imprimé, la typographie tient par conséquent une place tout aussi primordiale pour celui édité à l'écran.

Les règles éprouvées de la typographie nous aideront à choisir un caractère lisible. Celui-ci constituant la première information reçue par l'internaute, la police retenue aura en outre la tâche de communiquer à ce dernier une partie du message contenu dans la page. Une association judicieuse de polices et de styles permettra de hiérarchiser les différents éléments qui la constituent pour mieux faire apparaître les fonctions qui leur sont attachées. Enfin, un ensemble de techniques permettra de concrétiser à l'écran les choix de conception ainsi élaborés.

Une police pour être lue

Le mécanisme de lecture se décomposant en saccades et brèves fixations, le lecteur perçoit davantage la forme générale des caractères qu'il ne reconnaît chacun d'eux par ses traits distinctifs (chap. 1 §2). Par conséquent, la police choisie devra être composée de caractères facilement identifiables. C'est ici qu'intervient l'anatomie du caractère (chap. 3 §3) : ainsi, avant même de régler la force de corps, la taille du caractère dépend de l'espace que ce dernier occupe à l'intérieur du cadratin (chap. 3 §4) ; de même, la hauteur d'œil a une incidence sur la lisibilité (chap. 3 §7).

La plus ou moins grande facilité de lecture dépend en second lieu de la nature du texte mis en forme. Si un titre, pour peu qu'il soit court, offre suffisamment de liberté dans le choix de la police à lui appliquer, un texte nécessitant une lecture au long cours est au contraire soumis à plusieurs contraintes (chap. 4 §1). On évitera notamment pour ce dernier les détails esthétiques qui pourraient distraire le lecteur dans son activité : la différence d'épaisseur entre les traits d'un caractère, mesurée par le contraste, sans être inexistante, devra ainsi rester modérée (chap. 3 §5). On évitera également que la lecture ne soit gênée par la présence de caractères entrant en conflit en recourant aux ligatures (chap. 3 §9). Enfin, on maintiendra la fluidité de la lecture en substituant aux caractères dépassant par leur hauteur le reste du texte, à savoir les capitales et chiffres Didot, leurs équivalents de taille ordinaire : petites capitales (chap. 3 §9) et chiffres elzéviriens (chap. 3 §8).

On voit ainsi que pour être parfaitement lisible, le texte long nécessitera une police au jeu de caractères étendu. Cela doit nous mettre suffisamment en garde contre les polices gratuites qui, entre autres inconvénients, n'ont pas les moyens de proposer un ensemble de caractères aussi complet (chap. 4 §2), carence qui peut être aggravée par l'absence de caractères spécifiques à certaines langues étrangères (chap. 3 §10), ce qui est évidemment problématique lorsqu'on développe un site web au périmètre international.

Une police pour communiquer

Choisir une police aux caractères aisément déchiffrables est une première étape importante mais ce n'est pas la seule. La police doit également retenir l'attention du lecteur (chap. 2 §1) afin que le terme de lisibilité prenne tout son sens (chap. 1 §1).

Devoir faire un choix parmi les « plus de cinquante mille familles de polices commerciales » recensées (chap. 2 §2) a de quoi donner le vertige ! Pour arriver à nos fins, l'auteur nous suggère de segmenter notre travail en nous appuyant sur les classifications. Rappelant qu'il n'y a pas aujourd'hui de consensus sur la manière de classer les polices existantes ou à venir, l'auteur se garde de nous détailler les classifications officielles, et en ce qui le concerne, ne travaille qu'avec une poignée de catégories différentes comprenant notamment les fameuses serif et sans serif (chap. 3 §2).

Cette stratégie peut être complémentaire de celle consistant à réduire le champ d'investigation. Pour constituer notre panier de polices dans lequel piocher, l'auteur nous invite à ne pas considérer la typographie comme un simple outil mais, au contraire, à nous y intéresser vraiment. Cela passe d'abord par un apprentissage du vocabulaire technique (chap. 2 §4) puis par une collecte de différentes sources susceptibles de nous faire découvrir de nouvelles polices ou de nous renseigner sur elles (chap. 4 §4). Dans ce cadre, quelques applications web nous seront d'une aide précieuse (chap. 4 §2).

Durant tout le processus de sélection de la police, on doit garder à l'esprit que « les polices typographiques s'inscrivent dans une époque, un lieu, une culture » (chap. 2 §2). Une police est ainsi le reflet de la période où elle a été créée. Les époques, même les plus anciennes, pourront revivre grâce aux refontes de polices tombées dans le domaine public. Le livre nous en donne un exemple avec la célèbre Garamond, inspirée des dessins de l'imprimeur éponyme du seizième siècle, qui a donné naissance à un grand nombre de versions pour l'écran, dont l'auteur nous en présente et commente trois afin de nous montrer comment faire un tri au sein de polices partageant un même patrimoine génétique (chap. 3 §12).

De même, on retrouvera dans la police choisie une évocation du lieu où elle a été créée, et pour cette raison, Gotham s'avérera un choix plus judicieux qu'Helvetica pour les inscriptions sur les lieux publics de New York ! (chap. 4 §2)

Faire abstraction du contexte culturel dans lequel une police a été conçue peut conduire à des aberrations esthétiques. En tenir compte, à l'inverse, nous aidera à véhiculer à travers la police une partie du message ; par exemple, « on évoque facilement la Rome antique en employant Trajan » (chap. 4 §2).

Beaucoup d'autres idées pourront être transmises par la police. Une méthode pratique nous aidera à cerner les caractéristiques de celle-ci (chap. 4 §2) tandis que la comparaison de polices ayant ces dernières en commun nous évitera de faire un choix trop prévisible qui anéantirait la personnalité de notre design (chap. 3 §13).

Une police pour hiérarchiser

La police doit servir de guide de lecture à l'internaute et lui indiquer le rôle et l'importance relative des différents éléments constitutifs de la page web (chap. 5 §1). Pour ce faire, on commencera par généraliser le travail de sélection vu jusqu'ici à plusieurs polices typographiques qu'on associera en réservant chacune d'elles à une catégorie spécifique d'éléments. La tâche est délicate car pour qu'elle ait une chance de réussir, « il faut que les polices soient différentes et complémentaires ». Aussi, l'auteur n'hésite pas à nous donner des exemples concrets d'application en complément de quelques conseils (chap. 4 §3).

La difficulté s'accroît avec le nombre de catégories d'éléments à distinguer, d'autant plus qu'il est déconseillé d'utiliser plus de deux polices différentes dans un même design, sous peine de l'affaiblir. Une première solution réside dans l'utilisation de polices étendues. Une seule police choisie au sein de cette famille nous offre, en effet, avec ses différentes variantes, toute une palette de styles pour hiérarchiser notre contenu, que celles-ci se distinguent par le type d'éléments auquel elles se destinent (chap. 3 §11), la largeur des caractères et/ou l'interlettrage (chap. 4 §3 ; chap. 3 §6). On se gardera bien, au contraire, de recourir à des polices-gadgets décidant du design à notre place (chap. 4 §2).

Si on souhaite se limiter à des polices classiques, il est possible de créer ses propres variantes à partir des quatre styles de base : romain, gras, italique, italique gras, disponibles chez la plupart d'entre elles. Certaines proposent même différents niveaux de gras. On prendra garde cependant à ce que la police choisie offre effectivement les styles que l'on souhaite appliquer au texte. Dans le cas contraire, le navigateur créerait ces derniers de toutes pièces sous la forme d'un faux italique ou d'un faux gras particulièrement inélégants (chap. 3 §6).

Les styles évoqués ci-dessus s'associeront à d'autres propriétés du caractère tels que la taille ou la couleur pour conférer un rang spécifique aux différents titres, éléments clés de la hiérarchisation au sein de la page de texte (chap. 5 §2).

Une stratégie identique permettra de mettre en avant des liens d'interface importants et de rendre en revanche plus discrets les liens secondaires (chap. 5 §4), ou de faire ressortir des citations au sein du texte courant (chap. 5 §3), lui-même structuré en paragraphes (chap. 5 §2).

La lisibilité de l'ensemble tirera profit du blanc, celui séparant les paragraphes ou définissant les marges (chap. 6 §6), et d'un choix pertinent de force de corps, interlignage et justification. Pour atteindre cet objectif, quelques règles en usage (chap. 5 §2) et des critères de proportionnalité jugés esthétiques (chap. 6 §7) constitueront une première piste, mais ne devront en aucun cas, l'auteur insiste bien sur ce point, l'emporter sur notre jugement subjectif, notamment lorsqu'il s'agira de définir la composition constituant le gris typographique (chap. 6 §5).

Enfin, la mise en œuvre combinée des différentes règles de composition est illustrée à partir de l'exemple de la page d'accueil du site web du New York Times (chap. 5 §5).

La police à l'écran

L'adaptation à l'écran des choix de conception établis jusqu'ici commence par l'implémentation des polices. Après avoir brièvement évoqué les techniques utilisées dans le passé et leurs limites (chap. 2 §3), le livre décrit la méthode ayant aujourd'hui cours : une police est définie dans une fonte (chap. 3 §1), dont on rappelle les principaux formats (chap. 3 §14), et son chargement est réalisé à l'aide de la règle CSS @font-face (chap. 2 §3). Ce dernier n'étant pas instantané, le navigateur, dans l'intervalle, et dans le meilleur des cas, affiche la page web dans une police par défaut, provoquant à la fin du processus un brusque changement d'apparence du texte, appelé « FOUT ». Ce problème peut heureusement être fort bien géré par un framework tel que Web Font Loader (chap. 3 §14).

La police une fois affichée à l'écran peut cependant ne pas donner exactement le résultat souhaité, en particulier en raison des spécificités propres à chaque moteur de rendu (chap. 3 §14). La comparaison des polices sur papier devra donc être complétée par un travail identique réalisé sur écran à l'aide de gabarits (chap. 4 §2).

La problématique du rendu observée pour le caractère se généralise à l'ensemble du texte. En effet, si le texte imprimé repose sur un support – le livre – identique pour tous les lecteurs, il en va autrement du texte affiché à l'écran dont la lisibilité dépendra de l'appareil utilisé (chap. 1 §3 ; chap. 6 §1).

L'adaptation à la taille de l'écran sera rendue possible, en ce qui concerne la mise en page, grâce à la stratégie du responsive web design, dont le livre nous rappelle succinctement les principes essentiels (chap. 6 §2) ; pour ce qui est de la force de corps et du style du caractère, grâce à deux outils complémentaires (chap. 5 §2).

Enfin, les techniques traditionnelles de l'imprimé pourront, dans une certaine mesure, être profitables à la page web : la grille de mise en page s'avérera plus utile que la grille de lignes de base pour aligner les différents éléments la composant (chap. 6 §3), tandis que pour la gestion des césures, les résultats aléatoires générés par CSS pourront être compensés par l'utilisation de quelques scripts (chap. 6 §4).

En conclusion

Le livre, remarquable par sa densité, fait le tour de la typographie adaptée au support Web, rapidement mais avec efficacité, en traitant aussi bien des aspects théoriques (mécanisme de lecture, classification), pratiques (choix d'une police) que techniques (outils de composition) dont les points essentiels nous sont d'ailleurs opportunément rappelés en annexe.

Mais le livre ne se borne pas à prodiguer quelques bonnes pratiques ; il a également le grand mérite de nous enseigner une certaine philosophie de la typographie. L'auteur insiste en effet sur le fait que, d'une part, le choix d'une police n'a pas de sens en dehors d'un contexte donné et que, d'autre part, la typographie est une discipline éminemment subjective. Pour ces différentes raisons, la composition d'un texte ne consiste pas à appliquer aveuglément des règles préétablies mais à faire au contraire preuve d'intuition, d'audace et de curiosité. On pourra ainsi tirer profit des sites web et fonderies figurant parmi les ressources du livre.

Avant d'entamer la lecture de l'ouvrage, qui pourra par ailleurs être complétée par celle d'un des livres proposés en annexe, le lecteur aura sans doute intérêt à prendre connaissance des principaux termes techniques employés en typographie, ne serait-ce que pour déjouer les pièges que constituent quelques erreurs de traduction présentes dans cette version française (« mesure » pour justification, « rivière » pour lézarde). L'auteur ne dit d'ailleurs pas autre chose : « Pour développer votre intuition typographique, commencez par apprendre son vocabulaire » (chap. 2 §4).

S'appuyant sur diverses données chiffrées retraçant l'évolution de l'usage des appareils mobiles, l'auteur prédisait déjà en 2011 « qu'il y aura bientôt plus de gens qui accèderont au Web depuis leur portable que sur un ordinateur. » (chap. 1, Introduction). C'est ce constat en partie qui l'amène à sa « petite idée » : « Les sites Web et les applications doivent être conçus d'abord pour les mobiles. » (Introduction.) « Mobile first », autrement dit. Mais qu'entend-on précisément par « mobile » ?

Si les feature phones offrent depuis dix ans un accès à Internet, le trafic de données mobiles a explosé à partir de 2007 avec l'apparition des iPhones (chap. 1 §1). Ces derniers voient aujourd'hui leur suprématie de plus en plus contestée par leurs équivalents des autres marques (Android, Blackberry, etc.) ; néanmoins, les smartphones tous modèles confondus continuent de dominer nettement les feature phones dans le domaine de l'Internet mobile, ce qui fait dire à l'auteur qu'il « n'est donc pas complètement insensé de penser que les smartphones d'aujourd'hui seront tout simplement les “téléphones” de demain. » Les smartphones seront par conséquent les mobiles considérés dans ce livre (chap. 1 §2).

La sophistication des smartphones permet d'offrir à l'utilisateur une alternative aux solutions web mobiles sous la forme d'applications mobiles natives. Le développement de ces dernières nécessite cependant le recours à un langage de programmation, de surcroît différent selon la marque du smartphone. Entre autres avantages, la solution web mobile fait au contraire appel à des langages que le designer web maîtrise déjà, d'où l'intérêt de se pencher prioritairement sur celle-ci (chap. 1 §3).

La conception pour mobiles doit tenir compte de contraintes particulières, à la fois techniques et relatives à la façon d'utiliser ces derniers, autant que de modes d'interaction spécifiques.

Concevoir pour un utilisateur aux capacités réduites

Contrairement à ce qu'on pourrait penser de prime abord, l'appareil mobile ne se distingue pas principalement de l'ordinateur de bureau par son utilisation nomade – plus de 80% des gens l'utilisent à domicile ! – mais par le fait que le mobinaute en action est au plus à 50% de ses capacités, qu'elles soient intellectuelles, l'attention de ce dernier se partageant généralement entre l'utilisation du portable et une autre activité, ou physiques, le mobile se manipulant d'une seule main. Pour reprendre l'expression utilisée par l'auteur, cela doit nous amener à voir le mobinaute comme « un œil et un pouce » (chap. 2 §3).

L'attention réduite de l'utilisateur d'appareil mobile nous impose de répondre immédiatement à ses objectifs (chap. 4 §1) sous la forme d'un contenu directement accessible (chap. 4 §2). Pour autant, le mobinaute ne doit pas être cantonné à cette seule expérience et l'auteur nous montre, à partir de plusieurs exemples, comment, à l'aide de liens judicieusement positionnés, lui offrir la possibilité d'approfondir tel sujet ou de découvrir les autres expériences proposées par le site (chap. 4 §3).

S'adapter à de nouveaux modes d'interaction

Les contraintes pesant sur la manipulation des appareils mobiles seront, quant à elles, mieux prises en compte grâce à la mise en application de nouveaux modes d'interaction.

Les interactions tactiles facilitent et accélèrent la saisie. Si le « tap » et le « balayement » sont les deux gestes tactiles les plus connus, ce ne sont pas les seuls et l'auteur nous dresse de ceux-ci une liste exhaustive (chap. 5 §3).

Leur association aux différentes actions possibles peut s'appuyer soit sur des conventions, que l'auteur a répertoriées dans un document qu'il met gracieusement à notre disposition (chap. 5 §3), soit sur des associations intuitives (NUI) (chap. 5 §4).

Les doigts n'étant pas aussi précis que le pointeur d'une souris, on évitera les fausses manipulations lors d'une interaction via un toucher ponctuel tel qu'un tap en appliquant des spécifications précises en matière de taille des boutons (chap. 5 §1) et en répartissant ces derniers de façon stratégique sur l'écran en fonction de leur criticité (chap. 5 §2).

On retrouvera les boutons en particulier dans les formulaires où ils remplaceront avantageusement les listes de sélection, lesquelles, bien que les navigateurs nous en proposent des versions spécialement adaptées pour les mobiles, ne sont plus aussi aisément manipulables lorsque le nombre ou la longueur des items qu'elles contiennent devient trop grand (chap. 6 §3).

Les zones de texte, quant à elles, tirent profit de claviers virtuels adaptés (chap. 6 §3) et de masques aidant tous deux l'utilisateur dans sa saisie (chap. 6 §4).

Les formulaires, même optimisés, restent décriés dans le monde du Web mobile car ils obligent l'utilisateur à effectuer d'une seule main toute une série de sélections et saisies. Celle-ci peut heureusement être considérablement simplifiée, voire réduite à un seul geste tactile, grâce aux nouvelles fonctionnalités des appareils mobiles (chap. 6 §1). L'auteur s'attarde sur celles qui sont les mieux supportées par les navigateurs (en 2011, date de rédaction du livre), à savoir la géolocalisation, l'orientation de l'appareil et le toucher, avec pour chacune d'elles un exemple concret d'application (chap. 3 §2). Deux exemples faisant en outre appel à des fonctionnalités avancées telles que la caméra et la boussole numérique (chap. 3 §1) ou les communications en champ proche (NFC) (chap. 6 §6) sont également détaillés, en attendant les nouvelles fonctionnalités à venir (chap. 3 §3).

Si les appareils mobiles offrent ainsi des possibilités d'interaction étendues par rapport aux ordinateurs de bureau, les interactions de survol sont au contraire largement exploitées chez les seconds mais totalement inopérantes chez les premiers, d'où la mise en œuvre de solutions de remplacement chez ces derniers dans un contexte tactile (chap. 5 §5) ou non (chap. 5 §6).

Tenir compte de contraintes techniques spécifiques

Les contraintes techniques des mobiles ne se limitent pas à l'absence de certains modes d'interaction. Une des principales concerne la performance (vitesse et stabilité de la connexion) pour laquelle le livre énumère quelques solutions à explorer afin de réduire le nombre de requêtes HTTP et la taille des fichiers envoyés (chap. 2 §2).

L'autre contrainte est celle qui vient immédiatement à l'esprit quand on parle de mobiles. La taille réduite de ces derniers nous oblige à être très sélectifs en ce qui concerne aussi bien le contenu proprement dit (chap. 2 §1) que les champs de formulaire à propos desquels l'auteur affirme sans hésitation : « soyez brutalement efficace et coupez, coupez, coupez », conseil qu'il met en pratique dans un exemple particulièrement édifiant (chap. 6 §5).

Une fois les champs soigneusement sélectionnés, leurs libellés seront positionnés intelligemment afin d'éviter toute perte de place (chap. 6 §2).

Un autre problème concerne plus spécifiquement les images, dont la taille est définie en pixels. Le livre apporte plusieurs solutions permettant d'éviter que celle-ci ne soit modifiée par les différences de résolution entre appareils (chap. 7 §2).

Les menus de navigation seront simplifiés (chap. 2 §1) sous peine de masquer le contenu (chap. 4 §6) ou de semer la confusion dans l'esprit du mobinaute qui doit par ailleurs gérer le menu du navigateur et celui de l'appareil (chap. 4 §4 et 5).

Une fois la contrainte de taille prise en compte, il ne reste plus qu'à assurer la transition vers les ordinateurs de bureau en tirant parti du nouvel espace mis à notre disposition. Selon le cas de figure, la stratégie à mettre en œuvre consistera à ajuster notre page web à la nouvelle largeur d'écran (chap. 7 §3 et 4) ou bien à repenser complètement le design pour notre nouvelle cible d'appareils (chap. 7 §5).

En conclusion

Un tour d'horizon de la conception prioritaire pour mobiles est ici exposé par l'initiateur même de cette stratégie, connue aujourd'hui sous le nom de « Mobile first », qu'il nous propose d'aborder en répondant aux deux questions suivantes : pourquoi, et comment ? avant de conclure son ouvrage par une ouverture sur la seconde étape : la transition vers les ordinateurs de bureau.

L'absence de code, les paragraphes récapitulatifs à la fin de la plupart des chapitres et les nombreux exemples tirés du Web rendent le livre particulièrement abordable à un designer débutant. Le développeur expérimenté y trouvera des principes essentiels à mettre dès à présent en application mais souhaitera sans doute approfondir la réflexion, ce que lui permettront le blog de l'auteur et les ressources dispensées en fin d'ouvrage.

À l'intention du designer web qui croirait encore qu'une page web rigide conçue pour un ordinateur de bureau standard suffit à satisfaire l'ensemble des internautes, deux graphiques présentés en introduction rappellent opportunément que le nombre de dimensions différentes d'appareils ne cesse de croître avec l'apparition de nouveaux modèles, et qu'en combinant celles-ci avec les tailles possibles de fenêtre de navigateur (qui représentent la taille effective dans laquelle la page web sera vue par l'internaute), on atteint un nombre de combinaisons proche de l'infini ! Notre page web donc doit être capable de s'ajuster à n'importe quelle fenêtre, d'où la nécessité de rendre notre design responsive.

Comme le dit cependant l'auteur avec insistance, « la mise en page n'est que le départ ». Un design web pensé à l'origine pour grand écran, même responsive, ne répondra pas nécessairement aux contraintes particulières et aux spécificités d'utilisation d'un appareil mobile. Pour qu'il soit responsable, le design doit respecter les quatre critères suivants : utilisabilité, accès, durabilité, performances.

La quête du Graal du design à la fois responsive et responsable passe tout d'abord par une remise à plat de nos méthodes de conception, et dans un deuxième temps par le recours à de nouveaux standards et outils développés sur mesure.

Révisons nos habitudes ! Depuis la mise en page et l'accessibilité...

L'auteur l'annonce d'emblée dès l'introduction du chapitre 3 : « Nous ne faisons pas du bon travail » ! Alors qu'on pourrait penser que la conception responsive fait partie des réflexes du designer web moderne, l'auteur nous apprend en réalité que dans une étude d'avril 2014, « la plupart des sites examinés [...] se focalisent sur un cas d'utilisation spécifique : le classique ordinateur de bureau avec un grand écran. » (chap. 3 §1). Quelques rappels sur les fondements du responsive web design (unités proportionnelles, media queries) et la façon dont il peut être associé à l'approche mobile first ont donc toute leur pertinence dans un livre qui nous les expose avec beaucoup de clarté, mais sans trop de détails, ces méthodes ayant déjà fait l'objet d'un autre ouvrage, publié dans la même collection et signé par le premier de leurs promoteurs (chap. 2 §2). Des informations complémentaires sont cependant apportées au sujet de l'autre notion-clé du responsive design que sont les points de rupture (chap. 1 §1).

L'accessibilité est un autre composant du design responsive et responsable insuffisamment pris en compte. Comme le souligne l'auteur, alors que les écrans tactiles se répandent aujourd'hui même parmi les ordinateurs de bureau, des interactions de survol de souris sont souvent implémentées sans autre alternative, ce qui les rend inopérantes dans un contexte tactile. Après avoir énuméré les gestes tactiles reconnus par les navigateurs, le livre nous apprend comment leur attacher des fonctions en toute sécurité (chap. 1 §2).

Afin de réaliser, de manière plus générale, un design véritablement tout terrain, l'auteur préconise ce que ses collègues et lui appellent la « perspective aux rayons X », laquelle consiste dans un premier temps à distinguer, dans un composant donné d'une page web, le contenu substantiel de l'habillage puis, dans un deuxième temps, à adopter une démarche comparable à celle de l'amélioration progressive (« progressive enhancement »). L'auteur en donne une illustration, code et détail des étapes inclus, à partir de trois exemples (un contrôle, un graphique, la visualisation d'informations complémentaires) (chap. 1 §3).

... jusqu'à la performance

Last but not least, la performance, dernier composant cité du design responsable, se voit accorder par l'auteur rien moins que l'intégralité des deux derniers chapitres, soit la moitié de l'ouvrage !

Les ressources externes d'une page web (feuilles de style, polices de caractères, scripts) sont par défaut des ressources bloquantes, c'est-à-dire que le fichier HTML d'une page web ne sera pas chargé avant que celles-ci le soient (chap. 3 §3). Il en découle une première stratégie évidente pour améliorer les performances consistant à réduire le nombre de requêtes bloquantes (chap. 3 §6). L'application d'une telle stratégie nous amène à remettre en question des principes jusque-là parfaitement établis. Alors qu'on avait appris à définir nos styles dans un fichier CSS séparé auquel le fichier HTML faisait référence dans son élément <head>, l'auteur nous conseille une solution située à l'intersection des trois différentes méthodes de référencement de styles existantes (chap. 4 §2).

En ce qui concerne les fichiers image, le moyen le plus sûr d'éviter les requêtes trop nombreuses consiste à supprimer purement et simplement les références externes et à coder les images directement dans le fichier HTML grâce aux URI de données (chap. 4 §3).

Cette dernière technique peut également être mise à profit pour accélérer le chargement des fichiers de polices de caractères, ce afin d'éviter le masquage du texte que certains navigateurs préfèrent au rendu de texte non stylé (FOIT vs FOUT) (chap. 4 §5).

Quant au code JavaScript (JS), l'auteur nous invite sans détours, avant même d'envisager une quelconque optimisation, à nous demander si sa présence dans notre page web est vraiment indispensable ! Et si tel est le cas, alors même qu'on ne trouve aujourd'hui pratiquement plus aucun site web qui n'exploite les multiples possibilités offertes par des frameworks JS tels que jQuery, l'auteur nous met en garde contre un recours systématique à ces derniers, en nous expliquant en quoi ils sont moins nécessaires aujourd'hui que par le passé, et pourquoi ils sont particulièrement gourmands en ressources (chap. 4 §6).

Une fois que nous avons ainsi optimisé ses différents composants, il ne nous reste plus qu'à nous intéresser à la performance globale du site. Des objectifs chiffrés serviront à l'élaboration d'un budget de performance (chap. 3 §5) tandis que l'évaluation du site ne s'appuiera pas uniquement sur des fenêtres redimensionnables et autres émulateurs mais comportera une phase de test sur d'authentiques appareils, étape à propos de laquelle l'auteur nous renvoie vers quelques ressources pour nous aider à l'accomplir brillamment sans pour autant y laisser sa chemise ! (chap. 2 §4.)

De nouveaux standards à notre service

Dans notre projet de réalisation d'un design responsive et responsable, nos premiers alliés seront à rechercher parmi les nouveaux standards.

Afin qu'elle puisse être accueillie sans encombre par l'agent utilisateur, notre page web devra avant toute chose employer un langage compris de son hôte. Contribuant à cet objectif, la règle CSS @support et son API JS associée CSS.supports permettent de vérifier le support par le navigateur de n'importe quelle déclaration CSS (chap. 2 §3).

L'amélioration des performances par une limitation du nombre de requêtes est, quant à elle, facilitée par l'utilisation du cache dont l'auteur nous présente brièvement deux des modalités : le cache classique et le cache hors connexion, introduit par HTML5 (chap. 3 §7).

Si le chargement d'une ressource JS est inévitable, il est cependant possible aujourd'hui de passer outre le comportement par défaut des navigateurs : les nouveaux attributs de l'élément HTML <script>, async et defer, provoquent respectivement un chargement des scripts réalisé en parallèle de celui du fichier HTML et une exécution des premiers avant le chargement complet du second (chap. 4 §6).

Contrairement aux fichiers JS, les images sont par défaut chargées de manière asynchrone par les navigateurs et de ce fait, n'entraînent aucun délai de chargement (chap. 3 §3). Elles posent en revanche un autre type de problème : selon l'étude de 2014 déjà citée, les images ne représentent pas moins de 61% du poids total moyen d'une page web ! Les méthodes traditionnelles d'insertion d'images dans des designs responsive n'arrangent rien à la situation puisqu'elles requièrent des images plus grandes que les contenants censés les accueillir. L'introduction récente du nouveau concept d'image responsive permet de contourner ce problème en autorisant le chargement de versions d'images différentes en fonction des dimensions d'appareils cible. L'auteur décrit très précisément l'élément HTML <picture> à la base de cette nouvelle technique et consacre un paragraphe entier à chacun de ses attributs (chap. 4 §3).

L'image responsive ne permet cependant de gérer qu'un nombre limité de dimensions d'image différentes. Si l'on veut recourir à une image véritablement redimensionnable, on doit « abandonner le pixel » au profit des graphiques vectoriels. Les polices d'icônes en sont une des premières applications historiques dont l'auteur nous montre une mise en œuvre concrète (chap. 4 §4).

Le langage Scalable Vector Graphics (SVG), supporté par HTML depuis sa version 5, offre cependant beaucoup plus de possibilités (chap. 4 §4).

L'appui de solutions sur mesure

Si les nouveaux standards présentés ci-dessus offrent des perspectives alléchantes, le fait qu'ils ne bénéficient pas aujourd'hui d'un support étendu constitue un de leurs principaux handicaps, que viennent heureusement pallier polyfills et scripts alternatifs. Les media queries, introduites seulement avec CSS3, trouvent ainsi le soutien de deux polyfills : l'un développé par l'auteur lui-même et qui a pour fonction d'activer celles dont les requêtes portent sur les propriétés min-width et max-width ; l'autre qui permet de faire fonctionner, le cas échéant, leur équivalent JS, à savoir la fonction MatchMedia (chap. 2 §3).

La règle CSS de détection des fonctionnalités évoquée plus haut présente en outre le défaut de valider le support d'une fonctionnalité même lorsque celle-ci a été incorrectement implémentée par le navigateur. La détection d'appareils, alliée à quelques fonctions JS, peut ici nous venir en aide, alors même qu'utilisée seule, elle ne permet pas de préjuger des capacités d'un agent utilisateur (chap. 2 §1). C'est précisément la stratégie qui a été adoptée par l'auteur et ses collègues de Filament Group dans l'élaboration de deux polyfills de détection des propriétés CSS overflow et position, respectivement (chap. 2 §3).

Les scripts peuvent également enrichir notre palette de fonctionnalités, notamment dans l'approche responsive : l'auteur nous en présente deux permettant de créer des tableaux responsive (chap. 1 §1), et un facilitant la réorganisation de la page (chap. 4 §1).

Dans une perspective d'amélioration des performances, scripts et applications nous aident à réduire le poids des fichiers. Ils interviennent notamment dans le processus préalable en quatre étapes comprenant : optimisation, concaténation, minification et compression des fichiers (chap. 3 §7).

La taille généralement imposante des bibliothèques JS et notamment de la première d'entre elles, jQuery, peut être réduite soit en utilisant des compilations personnalisées de celle-ci, soit en lui préférant la bibliothèque « light » que préconise l'auteur. On pourra cependant répliquer à celui-ci qu'elle n'est plus – si je comprends bien – maintenue que par une seule personne ! Au cas où un retour à jQuery s'imposerait, la rétrocompatibilité semble toutefois assurée (chap. 4 §6).

L'amélioration des performances peut également être obtenue par une atténuation du blocage du rendu. Agissant de concert sur les fichiers HTML, CSS et JS, plusieurs scripts rendent possible l'affichage de la portion prioritaire d'une page web, avec laquelle pourra interagir l'internaute, réduisant ainsi le temps de chargement perçu (chap. 3 §4), tandis que le reste de la page se chargera de manière asynchrone. L'auteur présente ainsi en détail le modèle mis au point par sa société pour gérer le chargement différé du contenu HTML (chap. 4 §1), des outils permettant d'extraire le code CSS critique (chap. 4 §2) et une fonction JS permettant de charger des scripts dynamiquement (chap. 4 §6). Ces différentes méthodes sont regroupées dans un modèle prêt à l'emploi exposé dans un paragraphe de synthèse (chap. 4 §7).

En conclusion

Alors que le livre d'Ethan Marcotte, publié dans la même collection, pose les fondements du responsive web design, ce livre-ci nous apprend comment rendre cette démarche compatible avec les contraintes d'accessibilité et de performance. En se présentant comme le complément indispensable du premier, cet ouvrage nous enseigne enfin à réaliser des sites responsive absolument irréprochables !

La réalisation d'un tel projet a cependant un coût : la construction d'un design responsive et accessible nous oblige à tenir compte de nouvelles contraintes et l'amélioration des performances à renoncer à un code parfaitement segmenté (où l'on retrouverait les codes CSS et JS bien isolés dans des fichiers externes).

Le livre s'adresse à un lecteur pourvu de solides bases dans les standards du Web (HTML, CSS, JS) et de premières connaissances dans les techniques de conception de sites responsive. Il sera comblé par l'impressionnante quantité d'informations que contient cet ouvrage au format de poche, dont un grand nombre de scripts explicités par la personne la mieux placée pour en parler puisqu'elle est également l'auteur, seule ou avec ses collègues de Filament Group, de la plupart d'entre eux.

Ce livre, qui est la suite de High Performance Web Sites, est plus technique.

Seulement certains chapitres m'ont été utiles : la partie sur le chargement des scripts et les différentes techniques proposées, la partie sur l'optimisation des images et celle sur l'envoi d'un document en plusieurs morceaux (flush) qui est d'ailleurs très compliqué à réaliser en pratique suivant le serveur Web et le langage serveur utilisé. Entre le buffer Apache, mod deflate et PHP, ce n'est pas facile !

En tout cas ce livre est évidemment à lire pour tous les développeurs Front-End.

Un livre de référence pour les développeurs Front-End

Pourquoi parler d'un livre sorti en 2007 ? Parce qu'à mon avis, il fait partie des livres de référence pour tous les développeurs Front-End ou qui veulent se spécialiser dans ce domaine.

Écrit par Steve Souders (https://stevesouders.com/), qui a fait partie de l'équipe Yahoo Performance puis qui est parti chez Google, il pose les bases de ce métier qui n'existait pas à l'époque. C'est d'ailleurs dans ce livre que Steve Souders démontre et évangélise le constat suivant : « Seulement 10 à 20 % du temps de chargement d'une page est dû au téléchargement du document HTML ».

Partant de ce constat, il explique pas à pas les étapes de chargement d'une page, les points bloquants, les améliorations à apporter.

Aujourd'hui, on entend de plus en plus ce discours, mais il a été l'un des premiers à le tenir et à soutenir que les publicités et scripts externes étaient trop lourds à charger (parfois plus que le contenu lui-même !) et que les requêtes les plus rapides étaient celles qui avaient été supprimées.

Même si depuis des optimisations ont été apportées côté navigateur, même si HTTP 2.0 pointe le bout de son nez, beaucoup de ses conseils restent toujours d'actualité et poussent le lecteur à réfléchir et remettre en question chaque élément d'une page (images, scripts, CSS).

Le livre critiqué traitant de bonne rédaction, je vais tâcher d'en appliquer les principes fondamentaux à ma propre critique : riche en mots-clés, dans un français correct (du moins, j'espère ; à ce propos, dans ce qui suit, j'emploierai "auteur", comme nom épicène, plutôt qu' "autrice", trop peu usité quoique sans doute grammaticalement plus correct qu' "auteure"...), et structurée, en six parties que voici.

La rédaction web et au-delà

On ne saurait s'arrêter au titre du livre. Si la rédaction web constitue une partie importante de l'ouvrage, celui-ci va plus loin et "aborde le contenu dans l'optique d'un référencement naturel", selon les mots de l'auteur. La prise en compte des critères de référencement "on page" (c'est-à-dire liés au contenu) complète et renforce une stratégie de contenu primitivement tournée vers l'utilisateur ; celle des critères "off page" (extérieurs au contenu), traitée également dans ce livre, frôle au contraire, selon moi, le hors sujet, ce que je détaille plus bas.

Une démarche méthodique

Pour l'élaboration du contenu proprement dit, l'auteur s'appuie sur une méthode dont chaque étape fait l'objet d'un des chapitres constituant la première partie du livre.

Cette méthode présente le grand intérêt de démarrer bien en amont de la rédaction. Le contenu diffère en effet selon les objectifs assignés au site qu'il conviendra d'identifier dans un premier temps (chap. 2 §1).

Le contenu devant s'adresser de manière primordiale - et c'est là le leitmotiv du livre - à l'utilisateur, une deuxième étape essentielle est la définition de la cible (chap. 2 §2 à 5).

Les besoins et attentes de celle-ci étant connus, on est alors en mesure de définir la teneur du message (chap. 5) puis de traduire ce dernier en texte dont on travaillera le style (chap. 7), les mots (chap. 9), la forme (chap. 10), tout en respectant les contraintes liées à l'accessibilité (chap. 3 §5).

L'analyse d'indicateurs de performance (KPI) nous permet d'évaluer si les objectifs fixés au départ sont ou non atteints ; dans ce dernier cas, on retournera aux étapes précédentes dans le cadre d'un processus d'amélioration continu du site web (chap. 4).

Pour certaines de ces étapes, les différents points examinés sont soit rappelés en fin de chapitre sous la forme d'une check-list (qualité, texte, mise en forme), soit complétés (accessibilité).

Le chapitre conclusif fournit des modèles de document qui nous permettent de répondre aux questions qu'il est nécessaire de se poser pour mener à bien la gestion de notre projet.

Outre une méthode générale, le livre nous apporte des outils méthodologiques destinés à identifier les besoins de l'utilisateur (Kano) et à y répondre (5W2H, pyramide inversée, décrits dans chap. 7).

Une approche pragmatique

La méthode évoquée plus haut trouve l'appui de techniques et outils dans sa mise en application. Ainsi, pour calculer les KPI, l'auteur utilise Google Analytics dont elle nous présente en détail le paramétrage et les fonctionnalités mais aussi, à l'aide d'exemples précis, la façon d'exploiter les résultats obtenus (chap. 4).

En outre, une liste impressionnante d'utilitaires (la plupart gratuits) accompagne chacun des chapitres.

Le contenu devant être bon pour les utilisateurs, ce sont ces derniers qui nous le fourniront grâce à des techniques exposées dans ce livre : lors de l'étape essentielle de recherche des mots-clés (décrite en détail dans chap. 6) à travers les UGC ou les recherches effectuées dans les moteurs de recherche, ici en l'occurrence Google ; lors de la phase de conception (card sorting) ou de test (A/B testing).

Enfin, les bonnes pratiques en matière de contenu sont systématiquement illustrées d'exemples tirés de sites authentiques (où l'on peut d'ailleurs observer que ce ne sont pas nécessairement ceux des institutions les plus reconnues qui sont les plus irréprochables en la matière !). L'édition du livre en noir et blanc rend cependant imparfaitement compte de l'ensemble de la stratégie visuelle déployée dans le site donné en exemple (où sont les "couleurs survitaminées" utilisées dans sa page web par telle grande marque automobile ?!).

Le contenu sous tous ses aspects

Le périmètre du contenu textuel que le livre nous invite à optimiser n'est pas circonscrit au cœur de la page web ; il s'étend à la frontière du site, à savoir les éléments suivants : newsletter, PDF, blog, FAQ, messages d'erreur, e-mail (chap. 14) et au-delà : communication (chap. 14 §14), campagne publicitaire ( chap. 14 §15, chap. 15 §2), communiqué de presse (chap. 14 §11).

Le contenu étudié ne se limite pas non plus au texte : les vidéos sont également traitées (chap. 14 §3) et l'on apprend comment on peut utiliser les images pour guider la lecture de l'internaute (chap. 8).

Comme dit précédemment, le contenu doit non seulement satisfaire l'utilisateur mais il doit aussi être bon pour les moteurs. Ceci justifie la présence d'un chapitre dédié au référencement où l'on appréciera en particulier les solutions apportées à l'épineuse question du contenu dupliqué (chap. 15 §4).

Ailleurs dans le livre, une section entière fait le tour des bonnes pratiques à mettre en oeuvre pour maximiser ses chances de voir ses articles paraître dans Google Actualités (chap. 14 §1).

Enfin, les préconisations de Google sont présentes tout au long de l'ouvrage sous la forme de liens ou retranscrites en détail à travers une succession de questions et réponses avec le support de Google.

Les règles d'une bonne rédaction tiennent aussi compte des contraintes physiques et technologiques (accessibilité et responsive design) de l'utilisateur.

Les aspects techniques sont poussés jusqu'à l'implémentation du contenu dans le fichier HTML (chap. 13, en particulier). Des précisions utiles sont apportées concernant le nombre de mots/caractères optimal pour les différentes parties d'un article (titre, accroche, chapeau).

Certaines considérations sur les éléments HTML sont en revanche moins justifiables. Ainsi, contrairement à ce qu'écrit l'auteur, les balises HTML n'ont pas pour but "d'indiquer la façon dont le document doit être présenté". L'élément font, dont l'usage est préconisé à un certain endroit du livre, est en réalité - et à juste titre - déprécié dès HTML4, et définitivement obsolète en HTML5. Et si les éléments b et strong ont un poids identique pour les moteurs et se traduisent tous deux dans le navigateur par une mise en forme en gras par défaut, ils n'ont pas la même valeur sémantique.

Ces quelques points techniques sujets à discussion ne constituent certes qu'une petite partie du livre mais les différents aspects relatifs à HTML mériteraient néanmoins d'être mis à jour et rassemblés dans une annexe dans laquelle viendrait s'insérer le schéma associant les éléments HTML à leur restitution dans la page web et la page de résultats des moteurs de recherche (SERP), actuellement représenté en troisième de couverture.

Un risque de dispersion

On vient de le voir, la rédaction web est ici traitée de manière très complète. Trop, peut-être...

L'auteur applique les règles de bonne rédaction à la création des libellés du menu de navigation (chap. 3 §3) ; dans la foulée, cependant, elle déborde sur la conception de l'architecture du site (chap. 3 §1 et 2) et sa communication aux moteurs via un plan du site (Sitemap) (chap. 15 §5). Ces deux derniers points semblent relever moins du contenu que de l'ergonomie, sujet à part entière auquel un livre, d'ailleurs cité dans cet ouvrage, est consacré.

Si l'on ne peut nier le fait qu'un contenu riche et utile draine des visiteurs et qu'ainsi, le référencement on page influe indirectement sur le référencement off page, l'amélioration spécifique de ce dernier est toutefois largement indépendante de la gestion du contenu. Aussi, les passages concernant la création de liens entrants par des annuaires (chap. 15 §1) ou des sites tiers (chap. 15 §2) et les instructions aux moteurs et à leurs robots destinées à se préserver de la fuite de jus de lien ou des liens frauduleux (chap. 11 §3) me semblent déborder du cadre du livre.

C'est d'autant plus le cas des moyens destinés à générer indirectement du trafic, auxquels l'ouvrage fait également une place : opérations de communication (chap. 15 §2) et réseaux sociaux (chap. 14 §2). Ces derniers auraient pu selon moi être traités davantage du point de vue du contenu : l'ouvrage présente ainsi les règles spécifiques à la rédaction des tweets mais pas celles relatives à la création de sa page professionnelle dans Facebook ou Pinterest.

Enfin, une fois optimisés les éléments title et meta description, qui sont les seuls à apparaître sur la SERP, les habitudes de lecture de cette dernière par l'internaute, abordées dans un chapitre plus général sur l'eyetracking (chap. 8 §3) ne nous apprennent rien de plus sur la façon d'améliorer le contenu.

En conclusion

Contribuant autant à la fidélisation du visiteur qu'au référencement, le contenu est un élément clé du site web.

Dans un des trop rares livres consacrés à ce sujet, l'auteur, spécialiste en stratégie de contenu web, nous fait profiter de son expérience de professionnelle en nous proposant méthodes et outils.

Par son approche exhaustive, elle met entre nos mains tous les éléments nécessaires à une bonne rédaction, au risque de déborder parfois du strict cadre de son sujet. Les paragraphes traitant d'ergonomie et de référencement off page tendent ainsi à alourdir le livre. Ils constitueront néanmoins pour le lecteur non spécialiste une porte d'entrée vers des ouvrages approfondissant ces questions.

Afin de tirer le meilleur profit du livre, le lecteur devra avoir été initié aux techniques du référencement naturel (via la lecture d'un tutoriel, par exemple), plusieurs termes y ayant trait étant introduits dans l'ouvrage sans avoir été préalablement définis, ainsi qu'à HTML, certains passages du livre s'y rapportant devant être considérés avec circonspection.

Ce livre est une véritable documentation pour les débutants. L'auteur a pris la peine de parcourir tous les points à connaître dans la création d'un site web en HTML5/JavaScript et CSS3. Pour quelqu'un qui veut s'initier au développement web, ce cours est très bien pour lui dans le sens où une explication est donnée à chaque balise utilisée, suivie quelquefois des avantages et inconvénients. Le livre est bien structuré et bien illustré avec des exemples courts, précis et compréhensifs par le débutant. Pour un confirmé en développement web, ce livre peut lui servir de mémento. Il est adapté au web moderne, et ce grâce aux parties dédiées aux méthodes de dessin, dont Canvas et SVG, l’interaction avec du JavaScript, l'utilisation d'une base de données SQLite du côté du client, les transformations 3D, les transitions, les animations et autres. En bref, le livre en lui-même représente un professeur et vous le constaterez dans la façon dont l'auteur s'exprime dans les écrits.

Un des points négatifs que j'ai pu noter en ce qui me concerne, c'est le manque d'une partie détaillée sur le responsive design et les média queries. L'auteur a juste fait un briefing sur cette notion. Or de nos jours, on ne saurait concevoir un site web qui ne soit pas adaptatif, le designer doit pouvoir penser aux différents dispositifs qui vont visiter son site. Et l'absence d'une section détaillée sur le responsive design constitue un véritable manque pour le livre. Je me suis rendu compte que ENI a édité un livre sur le responsive design, il vient certainement en complément à celui-ci. Peut-être que l'auteur, pour les prochaines éditions, pourrait envisager ouvrir un chapitre sur le responsive design.

D'autre part, j'aurais aimé avoir dans ce livre une partie, dans le chapitre JavaScript, qui explique et illustre comment on peut, par exemple, modifier le style CSS de la page sans recharger la page ou comment modifier le contenu de la page avec du innerHTML. Beaucoup de concepteurs web sont amenés à modifier la présentation de leur page suite à certains événements et l'idéal dans bien des cas est de le faire sans pour autant aller vers le serveur. Un autre manque dans ce livre qui aurait pu être une plus-value pour le lecteur.

Somme toute, je conseille vraiment ce livre à toute personne désirant se lancer dans le web, la base y est et l'essentiel de ce qu'il faut savoir s'y trouve. Toutefois, l'auteur aurait pu se distinguer de la panoplie de livres déjà existants sur le HTML5/CSS3/JavaScript avec de nouvelles idées qu'on ne trouve pas ailleurs.

Dans les premiers chapitres, le livre aborde les contraintes dues aux vieux navigateurs, et les solutions pour y remédier.

Ensuite, les nouveautés du CSS3 sont intégrées progressivement, comme la balise @media.

La suite, la grosse partie du livre, nous explique comment intégrer la « Responsive Web Design » dans un site, en nous sensibilisant sur la notion de grille pour la mise en page, et en nous donnant différentes grilles avec leur fonctionnement.

Puis l’auteur aborde les frameworks qui existent en « Responsive Web Design ».

La lecture de l’ouvrage est agréable. Les explications sont claires et bien documentées, il est possible de télécharger sur le site, les exemples cités tout au long.

Pour ma part, je recommande ce livre à toute personne qui voudrait commencer un site multiplateforme.

Présenter les éléments nécessaires pour garantir une compatibilité optimale de votre site Web sur tous les écrans sans devoir concevoir plusieurs versions de votre code. Voilà l'objectif de ce livre. Un objectif réussi !

De manière générale, l'auteur rappelle ce qui se faisait dans le domaine du Web et pourquoi nous en sommes arrivés là. Il plante ainsi le décor de son livre qui résulte en une suite d'explications pointues des technologies et de leur évolution. Il n'hésite d'ailleurs pas à nous mettre en garde sur les choses à ne pas (plus) faire en citant les problèmes rencontrés par le passé (tantôt venus des navigateurs, tantôt des développeurs), en décrivant les solutions alors apportées par l'un ou par l'autre et pourquoi elles ne sont peut-être plus adéquates aujourd'hui.

Pour quasi chaque technique citée, Sylvain nous présente succinctement un ou plusieurs outils permettant de les implémenter. Il explique ses choix selon le contexte du site exemple. De plus, il parle des API, existantes ou en devenir, gérant la géolocalisation, le niveau de la batterie, l'état du réseau, tout ce qui concerne le CSS ou bien le JavaScript, etc. Des API qui suivent de près les recommandations du W3C. Sa recherche sur le sujet semble poussée et réfléchie.

Sans s'attarder plus sur l'une ou l'autre technologie, on découvre ce que sont, par exemple, les polyfills, les shims, la priorité des instructions, une description des unités CSS, la gestion des tableaux inversés, les media queries et bien d'autres. C'est une mise à plat de ce que l'on utilise tous les jours sans parfois s'en rendre compte. Ensuite, l'auteur différencie le "responsive" de l'"adaptive", nous évitant ainsi de faire des confusions hâtives.

Grâce à cette lecture, on appréhende mieux le fait que nos habitudes de développeur Web doivent évoluer constamment et en fonction du contexte actuel, mais surtout qu'il faut laisser une porte ouverte aux nouveautés aussi bien matérielles que technologiques. Un pari compliqué.

En conclusion, j'ai trouvé ce livre très intéressant et riche au niveau des explications du "le pourquoi du comment". Je vous conseille d'essayer par vous-même les exemples de codes si vous en avez la possibilité. N'oubliez pas non plus de profiter des délicieuses recettes publiées sur le site exemple !

Ce livre est destiné aux webdesigners, intégrateurs, développeurs web, chargés de marketing et responsables de communication. Il faut avoir au moins participé à l'élaboration d'un site afin de bien comprendre le livre. Il n'est donc pas adressé à un public débutant.

Il tente de répondre à une problématique : face à la recrudescence des objets connectés, comment faire en sorte que son site soit compatible avec tous les appareils sans avoir besoin de maintenir plusieurs versions ? (Il ne traite néanmoins pas des objets connectés, tels les montres, lunettes ou smart TV, jugés trop instables pour le moment). La réponse à cette problématique est accompagnée d'un site compagnon qui permet de mettre en pratique la théorie parfaitement maîtrisée par l'auteur.

Il y a quatre grosses parties dans ce livre :

• normalisation / contextualisation : pour poser les bases et comprendre le reste du livre, uniformisation des styles, les préfixes vendeurs, événements souris/tactiles, les polyfills/shims/fallbacks, le contexte dans lequel le site est lancé (récupération des éléments essentiels tels que la hauteur de la fenêtre, l'orientation, la connexion, etc.) ;
• approche Responsive : pourquoi on en a eu besoin, les unités CSS à utiliser, le viewport, les media queries ;
• approche Adaptive : histoire et différences avec le responsive, la relation avec les URL/REST/HTTP, AJAX à la rescousse pour servir des ressources adaptées ;
• outils du dév front d'aujourd'hui : préprocesseurs CSS, outils de build Grunt/Gulp, debugging (console), tests, etc.
  

Chacune des ces parties est très complète, la précédente amène toujours la suivante et c'est donc très fluide à lire. Il y a même une partie qui explique comment concilier l'approche responsive avec l'approche adaptive afin d'offrir une expérience optimale à l'utilisateur.

Ce que j'ai aimé dans ce livre :

• chaque partie commence par une phrase d'introduction décrivant parfaitement ce que l'on va lire ;
• les encarts “Pour aller plus loin”, “Remarques” qui proposent au lecteur d'approfondir le sujet ;
• le site web compagnon ;
• le côté technique omniprésent mais accompagné d'exemples concrets ;
• le dernier chapitre qui liste les outils d'aujourd'hui qui nous permettent de gagner du temps (préprocesseurs CSS, outils de build Grunt/Gulp, debugging, tests, etc.) ;
• ... et plus particulièrement la partie sur les tests.
  

Sylvain nous offre là un livre très clair et concis (120 pages) dans l'air du temps, bourré de bonnes pratiques pour réaliser un site adapté à plusieurs appareils et donc plusieurs écrans. A la fin de ce livre, vous serez en mesure d'avoir les meilleures bases pour créer un site “responsive/adaptive”.

Nous sommes à une ère où le responsive design bat son plein. Les développeurs, lors de la conception d'un site (ou application) web, doivent tenir compte des différentes plate-formes existantes : PC, tablettes, smartphones et téléviseurs. Mais qu'est-ce-que le responsive design ? Comment est-il né ? Quelles sont les bonnes pratiques de cette approche ?

Sylvain Pollet-Villard répond à toutes ces questions dans ce beau livre. D'abord, il nous explique ce qu'est l'approche One Web, un ensemble de méthodes qui évitent aux concepteurs d'avoir à développer autant de versions d'un site pour chaque plate-forme ciblée puis nous bonifie de quelques règles à adopter pour une bonne approche One Web.

Ensuite, il aborde la façon dont on peut écrire des feuilles de style uniformes et donnant le même rendu sur tous les navigateurs avant d'entrer dans l'approche responsive elle-même. Dans cette partie, on sent qu'il maitrise très bien ce dont il parle et l'a prouvé à travers ses exemples très explicites présents dans chaque partie du livre. Il aborde les viewport, le dimensionnement, le positionnement, les média queries et le plus intéressant de tout, ce sont ses exemples de composants flexibles qu'il donne à la fin de la partie consacrée au responsive design.

Au delà de l'approche responsive, il existe l'approche adaptive qui est beaucoup plus poussée que la première. Avec la première, en fonction de la plateforme sur laquelle le site est affiché, les dimensions, la disposition et le positionnement des contenus (div, section, acticle, h1…) peuvent changer. Mais avec l'approche adaptive, les valeurs (textes, images, sources, …) des contenus peuvent changer. Sylvain nous explique comment cela peut se faire avec des exemples. Il nous parle ici des injections de script, injection de styles et l'utilisation d'Ajax.

Enfin, l'auteur montre comment combiner les différentes approches pour répondre aux besoins de chaque plate-forme suivi de quelques outils qu'un développeur/concepteur peut utiliser pour faciliter et accélérer la conception.

Pour conclure, il s'agit là d'un excellent livre très orienté débutant et qu'un confirmé ou expert devrait avoir sous la main. On comprend mieux les écrits de l'auteur en exécutant ou en regardant de près ses exemples. D'ailleurs, les exemples étant bien clairs, bien commentés et explicites peuvent servir de point de départ lors de la conception d'un site.

Les statistiques sont trompeuses ! Comme l'auteur nous l'apprend dans son avant-propos, la forte progression, observée ces dernières années, des connexions à Internet à partir d'appareils mobiles et le recul symétrique en ce qui concerne les ordinateurs de bureau ne traduit pas une substitution des premiers aux seconds dans l'équipement des ménages, mais un renforcement et une diversification accrue de celui-ci, ainsi que l'illustre le chiffre – davantage significatif – du nombre moyen d'écrans par foyer français : 6,5 !

Cette tendance est appelée à s'accélérer avec la mise sur le marché d'appareils hybrides, en attendant la banalisation des objets du quotidien connectés, dont les lunettes Google Glass et la montre Samsung Galaxy Gear, aujourd'hui précurseurs.

Si l'application native pouvait apparaître comme la solution idéale pour servir les smartphones à l'époque où ces derniers étaient semblables et fonctionnaient sous le même système d'exploitation – en l'occurrence iOS –, une telle stratégie ne permet plus aujourd'hui de satisfaire un internaute qui s'attend à retrouver le même site web à travers la multitude d'appareils différents en sa possession (chap. 1 §1).

L'approche One Web, à laquelle le livre est entièrement consacré, permet de concevoir un site unique adapté à tous les appareils (chap. 1 §3) tenant compte, d'une part de leurs contraintes, d'autre part de leur contexte d'utilisation.

Gestion des contraintes

À bien y regarder, la formulation « approche One Web […] est en soi un pléonasme » (chap. 1 §3). Les normes produites par le W3C n'ont, en effet, d'autre rôle que d'édifier un langage commun partagé à la fois par les développeurs de sites web et les agents utilisateurs chargés de restituer ces derniers. Cependant, on observe souvent un écart entre la spécification des standards et leur implémentation. Celui-ci peut s'expliquer par la volonté des éditeurs de navigateurs de s'écarter des paramétrages préconisés, à l'instar de la feuille de styles de recommandation pour ce qui concerne les styles par défaut. Ces derniers peuvent heureusement être uniformisés après coup, à travers les navigateurs, en recourant soit à une feuille de styles de réinitialisation (reset), soit, de manière plus ciblée, à une feuille de styles de normalisation (chap. 2 §1).

L'absence totale ou partielle de prise en charge d'une nouvelle fonctionnalité résulte généralement d'un délai entre la publication récente de la spécification de cette dernière et son implémentation. L'auteur nous offre, sous la forme d'extraits de code JavaScript (JS), une panoplie complète de tests de prise en charge, correspondant aux différents cas de figure, et nous montre, à l'aide d'un exemple simple, comment se construit un polyfill, dont le but est précisément de combler ce type de lacune (chap. 2 §2). Il enrichit son exposé d'une présentation, d'une part de quelques polyfills prêts à l'emploi (chap. 2 §2), d'autre part du projet WebShims, qui a pour ambition d'intégrer à la fois polyfills et tests de prise en charge (chap. 7 §3).

Dans le cas inverse où un navigateur devancerait la publication de la spécification définitive d'une propriété CSS, le nom de cette dernière se verrait attribuer un préfixe vendeur. La création d'une règle faisant référence à une telle propriété et sa déclinaison en règles équivalentes à l'intention des autres navigateurs sera grandement simplifiée par le recours à des outils de préfixage automatique (chap. 2 §1) ou à un préprocesseur CSS (chap. 7 §1).

Si les divergences entre spécifications et implémentations ont pour corollaire une différence de fonctionnement des agents utilisateurs, cette dernière s'observe également, et a fortiori, en ce qui concerne les comportements non explicitement spécifiés. C'est notamment le cas de celui des événements tactiles, qu'il est cependant possible d'unifier à travers les navigateurs à l'aide de scripts JS (chap. 2 §3).

Une fois contournées les difficultés techniques imputables aux agents utilisateurs, nous pouvons nous attaquer aux contraintes imposées par le design des appareils. La diversité des tailles d'écrans sera ainsi prise en charge par la stratégie du responsive web design (RWD) (chap. 4 §1).

Cette dernière, appliquée après qu'on a redéfini le viewport (chap. 4 §2) afin, d'une part de désactiver le redimensionnement de la page web effectué par défaut par le navigateur, d'autre part de ne plus être tributaire des différences de densités de pixels entre les écrans (chap. 3 §2), repose sur deux piliers, les unités relatives et les media queries.

Concernant les premières, l'auteur les identifie précisément après avoir passé en revue et défini l'ensemble des unités existantes (chap. 4 §3) ; pour ce qui est des secondes, le livre présente l'intérêt de distinguer trois manières différentes de les définir : par composant, par points de rupture, par surcharges successives (chap. 4 §4).

Enfin, ces techniques sont remarquablement bien illustrées à travers leur mise application dans la réalisation de quatre composants standard des sites web (chap. 4 §5).

Contextualisation sans discrimination

Rendre disponible un même contenu à l'ensemble des appareils, c'est bien, mais ne peut-on faire mieux ?

Alors que le RWD permet déjà de réorganiser graphiquement les éléments de la page web en réponse aux contraintes de design des appareils, il est, en fait, possible d'aller jusqu'à en adapter le contenu afin de tenir compte du contexte.

Une telle démarche ne saurait cependant être confondue avec celle consistant à rediriger l'internaute vers une version différente du site selon le type d'appareil (mobile ou non) (chap. 1 §2) ou le navigateur (user-agent sniffing) (chap. 1 §4) utilisés. Cette dernière est à prohiber, non seulement parce qu'elle viole le principe essentiel de l'architecture REST selon lequel une URL est associée à une ressource unique (chap. 5 §2), et parce qu'en se fondant sur des critères de différenciation non pertinents, elle risque de contrarier les attentes de l'internaute.

Les contraintes techniques – coexistence de protocoles distincts pour téléphones et ordinateurs de bureau – qui ont, jadis, encouragé ces pratiques, n'ayant aujourd'hui plus cours, ces dernières tendent heureusement à être abandonnées. Il ne faudrait pas, cependant, que l'on voit s'y substituer une approche mobile first qui ne prendrait pas en considération les ordinateurs de bureau et portables (chap. 1 §3).

L'adaptive web design (AWD) se distingue à la fois des techniques de fractionnement évoquées ci-dessus, car elle repose sur un code HTML unique, et du RWD dans la mesure où elle autorise, cependant, le chargement de ressources différentes selon le client (chap. 5 §1). Cette faculté sera rendue possible par l'utilisation de fonctions JS dont l'auteur nous dévoile le détail pour chaque type de ressource concerné : code HTML, styles, scripts (chap. 5 §3).

L'AWD nous sera d'une aide précieuse pour gérer les contraintes inhérentes aux appareils mobiles. Tout d'abord, il viendra en appui du RWD afin de détecter les modifications de taille de fenêtre en cours d'utilisation de l'appareil (consécutives, notamment, au changement d'orientation de ce dernier) (chap. 5 §4).

Il apportera ensuite une solution au problème de limitation de bande passante. Si une compression des fichiers de ressources (chap. 3 §4), facilitée par l'utilisation d'un script d'automatisation des tâches (chap. 7 §2), sera profitable à tous les appareils, l'examen de la bande passante pourra nous conduire à mettre en œuvre, par exemple, certaines des nouvelles technologies HTML5 de stockage côté client pour les moins bien dotés d'entre eux (chap. 3 §4) ou à fournir en images de qualité supérieure les appareils bénéficiant, au contraire, d'une connexion à haut débit (chap. 5 §3).

Caractéristique spécifique, jusqu'à une date récente, des appareils mobiles, l'interaction tactile peut également être détectée dans le cadre d'une approche AWD qui apportera, dans ce cas, des solutions adaptées (chap. 3 §3) : boutons de taille adéquate ; alternative à l'affichage d'informations au survol (chap. 6 §1).

Les outils de développement intégrés des appareils mobiles étant limités et le comportement de ces derniers très imparfaitement simulé par les émulateurs présents sur le marché, on aura recours, pour la phase de test, à des outils de débogage à distance (chap. 7 §4).

Si l'AWD permet ainsi de compenser les limites techniques des appareils, son principal atout est néanmoins d'améliorer l'expérience utilisateur. La géolocalisation ou l'heure de consultation du site web seront autant d'informations exploitables pour fournir à l'internaute des services ou des thèmes supplémentaires (chap. 3 §5).

En prenant garde de ne pas faire d'extrapolations trop hardies qui conduiraient au résultat inverse de celui escompté (chap. 3 §1), la déduction des attentes de l'internaute du contexte d'utilisation permettra de satisfaire celles-ci à l'aide d'un contenu adapté, comme l'illustrent deux exemples d'usage spécifique d'un appareil mobile (chap. 6 §2 et 3).

La diversité des contenus et des comportements de la page web induite par la mise en œuvre de l'AWD rend d'autant plus nombreux les tests préalables à l'étape de mise en production, d'où la nécessité de s'appuyer sur un ensemble d'outils pour automatiser, au-delà des tests unitaires, les tests comportementaux, voire les tests de non-régression visuelle (chap. 7 §5).

En conclusion

Alors que le RWD permet à un même contenu d'entrer dans n'importe quelle largeur d'écran, l'AWD tire parti de l'ensemble des autres caractéristiques de l'appareil afin d'améliorer véritablement l'expérience utilisateur.

En abordant cette deuxième méthode, l'ouvrage se distingue de la plupart des autres livres consacrés à la conception d'un site web multiplateforme qui se bornent, eux, à décrire la première.

Pour autant, ce livre ne néglige pas le RWD ; non seulement il en explique les points essentiels, mais encore nous montre, à l'aide d'exemples concrets, comment les deux méthodes se complètent.

En raison de son format réduit, le livre ne détaille pas certains exemples et ne prétend explorer en profondeur aucune des deux méthodes évoquées. On pourra toutefois retrouver tous les exemples d'application du livre, dans leur format intégral et opérationnel, au cœur du site web accompagnant l'ouvrage dont ils sont les composants.

En revanche, concernant le second point, on n'en regrettera que d'autant plus l'absence d'une bibliographie où auraient pu figurer les références des livres fondateurs d'Ethan Marcotte, pour le RWD, et d'Aaron Gustafson, pour l'AWD, bien que ces derniers soient mentionnés au sein de l'ouvrage. Il manque surtout les références de livres approfondissant ces deux sujets, mais aussi des compléments sur certains des concepts abordés, notamment le mobile first, dont la présentation qu'en fait l'auteur ne me semble pas complètement en accord avec la définition que le créateur de cette méthode, Luke Wroblewski, en donne dans son livre de référence.

Je ne suis pas, non plus, l'auteur lorsqu'il autorise la désactivation ou le détournement de la fonction de zoom (chap. 4 §2).

Il s'agit là, néanmoins, de passages isolés qui n'enlèvent rien à la qualité de l'ouvrage, lequel est toutefois destiné à un lecteur ayant de bonnes bases en JS et Ajax.

Ces livres s'adressent aussi bien aux développeurs qu'aux personnes qui veulent faire concevoir un site Web. La lecture des ouvrages est fluide et elle est régulièrement imagée.
À aucun moment ces livres n'abordent le code, ils se basent tous sur les principes et les outils disponibles.
Le premier livre « Stratégie de contenu et conception Web » nous sensibilise sur le travail en amont, afin de faciliter les étapes suivantes. Il nous présente une méthodologie, avec tous les éléments nécessaires pour concevoir un site Web. Tous les domaines sont abordés : la cible, le contenu, l'architecture... tout en s'appuyant sur des exemples réels.
Le deuxième livre « Créer votre premier site Web » aborde plus la partie technique d'un site Web. Nous y trouvons des informations pour la création d'un site, que ce soit sur la façon de le créer de A à Z ou en utilisant un CMS. Il y a aussi des chapitres sur la façon de gérer le contenu, sur la navigation, sur la rédaction du contenu, sur les images, sur l'administration, etc.
Je regrette que tout au long de l'ouvrage les outils Adobe soient cités en exemple, et que les autres outils soient jugés trop complexes, quand on connaît le prix des produits Adobe.
Le dernier livre « Référencement de votre site Web » ne donne pas la « formule magique », mais il fournit beaucoup d'éléments pour qu'un site soit bien référencé, que ce soit sur les moteurs de recherche ou sur les nouveaux supports comme les réseaux sociaux.
Comme je l'ai dit au début, ces livres s'adressent à tous. Les développeurs y trouveront des techniques et des outils, et les autres y trouveront des informations qui leur permettront de mieux cerner les besoins nécessaires au développement de leur site.

J'ai lu la traduction française du livre « Responsive Web Design avec HTML 5 et CSS 3 » de Bain Frain.

Ce petit livre est une introduction au Responsive Web Design. Il explique les objectifs de cette conception et les notions sous-jacentes : grille d'affichage flexible qui ne dépend pas d'une définition donnée, médias flexibles qui ne débordent pas de leur conteneur et ensemble de règles CSS basées sur Media Queries pour appliquer des règles CSS suivant certaines conditions.

Le point fort du livre, c'est l'exemple de site qui sert de fil conducteur tout au long des différents chapitres. J'ai particulièrement aimé la transformation d'un design fixe en design proportionnel.

Le point faible, ce sont quelques erreurs au niveau de certaines propriétés CSS et certains choix de l'auteur qui sont discutables, mais rien de rédhibitoire pour le lecteur qui sait prendre un peu de recul.

En conclusion, si vous souhaitez découvrir l'adaptation d'un site concret en Responsive Web Design, ce livre devrait vous intéresser.

Depuis la mise sur le marché de l'iPhone d'Apple, le développement croissant de la navigation mobile est allé de pair avec une sophistication accrue des appareils, de sorte qu'il est aujourd'hui naturel de consulter n'importe quel site web indifféremment depuis son ordinateur de bureau à écran large ou son téléphone portable.

Les fabricants de navigateurs mobiles ont pris cette réalité en compte en faisant en sorte que ces derniers réduisent proportionnellement aux dimensions de l'appareil une page web supposée conçue pour un grand écran. Cependant, une telle fonctionnalité n'est qu'un pis-aller qui ne permet pas d'offrir à l'utilisateur une expérience satisfaisante (chap. 1 §1).

La solution idéale, au dire de l'auteur, réside dans le développement d'un « site web mobile » tirant profit de toutes les possibilités techniques de l'appareil (chap. 1 §2). Celle-ci présente néanmoins l'inconvénient majeur d'être complexe et coûteuse à mettre en œuvre.

Si le budget est limité, le meilleur compromis consistera à réaliser un site au design fluide s'adaptant à toutes les largeurs d'écran (chap. 1 §5 et 10). En outre, le recours aux dernières versions des standards du Web, autrement dit HTML5 et CSS3, permettra de réduire le nombre et la taille des ressources à charger pour les appareils mobiles, dont la bande passante est limitée (chap. 1 §4).

La description de cette stratégie en deux parties constitue le cœur du livre qui s'attache également à nous montrer comment tirer profit des autres fonctionnalités introduites par HTML5 et CSS3.

Construire pour tous les écrans

L'article fondateur d'Ethan Marcotte, publié en 2010, sur lequel le livre s'appuie, combine trois techniques pour rendre un design fluide (chap. 1 §3).

Partant du principe qu'un dessin vaut mieux qu'un long discours, l'auteur a choisi de nous montrer comment fonctionnent ces dernières en les appliquant directement à un exemple en vraie grandeur, celui d'une authentique page d'accueil (d'un site humoristiquement oscaro-sceptique !) (chap. 2 §4).

Abordant le problème de manière volontairement empirique, l'auteur part d'une maquette réalisée pour un grand écran à l'aide d'une grille CSS (chap. 3 §8) qu'il désire, avant toute chose, adapter à une tablette (chap. 2 §6 et 7) en recourant aux media queries (chap. 2 §1).

À cette occasion, il n'oublie pas de nous avertir de désactiver l'auto-redimensionnement des pages web effectué par défaut par les navigateurs mobiles. La déclaration à insérer dans le fichier HTML est particulièrement bien décrite. En revanche, son équivalent CSS n'est que rapidement évoqué dans une note, celui-ci ne bénéficiant, à la date de rédaction du livre, que d'un support limité (chap. 2 §5).

Mais les media queries utilisées seules ne permettent de définir un design que pour un nombre limité d'appareils (chap. 2 §8).

La conversion, dans un deuxième temps, des unités fixes en unités proportionnelles, grâce à une formule simple que l'auteur applique aux dimensions des différentes zones constitutives de la page d'accueil (chap. 3 §3), nous permet d'obtenir un design véritablement universel, s'ajustant à merveille à l'ensemble des écrans dont la largeur est située entre deux points de rupture (chap. 3 §1 et 2).

La méthode d'explication par l'exemple adoptée par l'auteur se révèle particulièrement efficace lorsqu'il s'agit de nous montrer les résultats que permettent d'obtenir les unités proportionnelles appliquées aux tailles des caractères (chap. 3 §4).

Troisième pilier du responsive web design, les images fluides sont particulièrement bien traitées dans l'ouvrage. Celui-ci démontre, en effet, que dans certains cas, il est pertinent d'affecter une valeur (en pourcentage, voire en pixels) différente de celle de 100% que l'on attribue usuellement à la propriété max-width pour que l'image recouvre toute la largeur de son contenant (chap. 3 §5).

De plus, l'ouvrage ne s'arrête pas aux images puisqu'il nous montre comment appliquer la même règle afin de redimensionner les vidéos hébergées localement (élément video) ou le plugin jQuery FitVids à l'intention de celles hébergées à distance (élément iframe) (chap. 4 §9).

Enfin, en allant un peu plus avant dans l'exploration des media queries, on découvrira que la souplesse de ces dernières rend possibles les ajustements les plus subtils (chap. 3 §7) ou la prise en compte d'autres caractéristiques des appareils telles que la résolution de l'écran (chap. 2 §2 et 3, chap. 9 §5).

Tenir compte des capacités limitées des appareils

Si la réalisation d'un design fluide constitue une étape essentielle dans l'adaptation d'un site web aux appareils mobiles, elle ne répond cependant pas à l'ensemble des contraintes imposées par ces derniers. En effet, la taille réduite de l'écran n'est pas la seule limitation inhérente à ces appareils : la bande passante nettement inférieure à celle des ordinateurs de bureau nécessite de diminuer autant que possible le nombre et le poids des ressources externes.

En contradiction avec ce dernier principe, la technique des images fluides, cependant essentielle, comme on vient de le voir, à l'échafaudage d'un design fluide : celle-ci impose, en effet, aux appareils mobiles de charger des images plus grandes que nécessaire sous peine de voir celles-ci agrandies dans les écrans plus larges avec, pour conséquence, une netteté amoindrie. Un script comme Adaptive images, dont l'auteur nous détaille, étape par étape, l'installation et le paramétrage, contourne cette difficulté en permettant le chargement automatisé d'images à la taille adéquate pour les différentes dimensions d'écran (chap. 3 §6).

Quant aux images d'arrière-plan, on peut dorénavant s'en passer, purement et simplement : les valeurs-fonctions linear-gradient et radial-gradient, dont l'auteur nous livre les clés, exemples et illustrations à l'appui, pour réaliser des motifs simples (chap. 6 §6, 7 et 9) ont été adoptées par des designers professionnels qui ont su en exploiter toutes les ressources pour produire des motifs aussi sophistiqués qu'élégants à partir de quelques lignes de code (moins d'1 Ko pour la plupart d'entre eux !) disponibles sur la Toile (chap. 6 §8).

Les nouvelles propriétés CSS3 peuvent de même suppléer les images pour apporter une touche esthétique aux différents éléments d'une page web : l'auteur nous dévoile son propre paramétrage pour, avec text-shadow, obtenir un efficace effet relief (chap. 6 §1 à 4) ; la propriété box-shadow permettra de créer une ombre ou un effet vignette (chap. 6 §5) ; enfin, usant de ces deux propriétés à la fois, alliées à des propriétés CSS plus classiques, l'auteur nous montre, dans le détail, comment habiller un bouton de formulaire (chap. 6 §10).

Une dernière application des images, celle dédiée à la création de polices typographiques personnalisées, est aujourd'hui supplantée par la technique consistant à télécharger celles-ci via la règle @font-face (chap. 5 §8) qui peut aussi être utilisée, selon le même principe, pour importer des icônes (chap. 6 §13). Cependant, dans le premier cas, le résultat obtenu ne correspond pas toujours à celui attendu, mais l'auteur, qui a lui-même été confronté à cette difficulté, nous explique comment la surmonter en une ligne de code (chap. 5 §9).

Certains contenus ou effets requérant jusqu'à présent l'emploi de code JavaScript ou de technologies tierces sont si naturellement présents dans les pages web qu'ils ont depuis été pris en compte par HTML ou CSS et sont aujourd'hui gérés par ces derniers de manière native. Il s'agit en particulier du multimédia (chap. 4 §7 et 8), des interfaces de saisie et mécanismes de validation des champs de formulaire (chap. 8 §1, 2, 3 et 5), et des animations : si l'auteur présente quelques transformations et animations 2D (chap. 7 §1, 2 et 4), il n'aborde, en revanche, les transformations 3D que sous la forme d'un exemple, celui de l'affichage du verso d'une image au survol de souris (chap. 7 §3).

Les économies rendues possibles par les dernières évolutions des standards du Web portent non seulement sur les ressources externes mais également sur le code HTML lui-même.

Ainsi, certains effets esthétiques ne pouvaient jusqu'alors être obtenus sans l'insertion, à cette seule fin, dans le fichier HTML, d'éléments dépourvus de valeur sémantique. Reposant sur ce principe, la technique des « portes coulissantes », servant à créer des coins arrondis (chap. 1 §7), ou celle utilisant des containers pour insérer plusieurs images d'arrière-plan peuvent dorénavant être avantageusement remplacées par une simple mise en application des propriétés CSS respectives border-radius (chap. 1 §8 et chap. 5 §3) et background dans sa version améliorée (chap. 6 §11).

De même, les propriétés CSS3 de multicolonnage permettent de créer un design qui ne pouvait naguère être obtenu sans le recours à des balises HTML superflues (chap. 5 §4) ; les nouveaux sélecteurs CSS3 de sélectionner plus finement les composants de la page web que l'on souhaite styler, sans qu'il soit besoin d'y faire référence à l'aide de classes, voire de balises créées dans cet unique but (chap. 5 §5 à 7).

Ces économies de code sont sans doute plus significatives et pertinentes que celles que procure la syntaxe allégée autorisée par HTML5 (chap. 1 §6), laquelle a en outre pour inconvénient de pécher par manque de lisibilité (chap. 4 §2).

Tirer profit de fonctionnalités nouvelles

L'introduction par HTML5 de nouveaux éléments de structure rend à présent inutile le code boursouflé servant à restituer la même sémantique que ces derniers à l'aide de balises div génériques, classes et commentaires associés. Il s'agit, là encore, d'une appréciable économie de lignes de code, mais plus important est le gain réalisé en termes de lisibilité au profit aussi bien des développeurs que des navigateurs, lesquels seront ainsi capables de reproduire, à partir de ces éléments, un plan de la page web (chap. 4 §3 et 4).

En outre, ceux-ci pourront, à l'intention des lecteurs d'écran, être complétés par des attributs WAI-ARIA dont l'auteur ne nous montre cependant qu'un seul exemple d'application (chap. 4 §6).

L'enrichissement sémantique d'HTML s'étend aux éléments en ligne, dont la fonction de ceux utilisés à l'origine pour appliquer des styles a été redéfinie (chap. 4 §5).

La distinction entre le fond et la forme est ainsi renforcée, et cette dernière plus que jamais dévolue à CSS (chap. 5 §2) qui, outre les propriétés évoquées plus haut, acquiert dans sa dernière version des fonctionnalités supplémentaires (chap. 6 §12) telles que de nouvelles méthodes pour définir les couleurs (chap. 5 §10).

Enfin, la gestion elle-même des ressources est optimisée grâce à la mise en cache de ces dernières – pilotée par un fichier de paramétrage (manifest), dont le contenu est particulièrement bien détaillé dans l'ouvrage – pour une mise à disposition hors connexion (chap. 4 §10).

Ces différents apports d'HTML5 et CSS3, pour enthousiasmants qu'ils soient, souffrent d'un manque de support par les navigateurs les plus anciens. Pour pallier cet inconvénient, on peut envisager dans un premier temps la mise en place d'une alternative simple lorsque cela est possible (chap. 4 §8, chap. 5 §10), ou le recours à la stratégie de dégradation gracieuse (chap. 9 §1), à condition toutefois que les fonctionnalités non prises en charge ne constituent pas des composantes essentielles de la page web (chap. 5 §1).

Ces solutions se traduisant généralement par un rendu de la page web légèrement différent d'un navigateur à l'autre, il sera peut-être nécessaire, avant de les mettre en œuvre, de convaincre le client que cette imperfection est plus que compensée par le gain en temps de développement qu'elles procurent (chap. 1 §1 et 11). Si, en dépit des efforts déployés pour obtenir l'assentiment du client, ce dernier reste attaché à l'idée d'un design parfaitement identique pour tous les navigateurs, ou si la fonctionnalité en cause a sur le comportement de la page web un impact trop important, l'utilisation de polyfills (chap. 1 §9) deviendra incontournable (chap. 9 §2). L'un d'eux, nommé Webshims Lib, corrige la non prise en charge du contrôle des valeurs saisies dans les champs de formulaire en s'appuyant, pour cela, sur le script Modernizr (chap. 8 §4). Utilisé seul, ce dernier, dont la finalité est de détecter le support des différentes fonctionnalités par les navigateurs, assure en outre celui des éléments de structure HTML5 avec le concours d'un autre script, HTML5 shim, qu'il embarque sur demande (chap. 4 §1).

Les polyfills sont nombreux et, associés à Modernizr, c'est autant de fonctionnalités défaillantes que ces derniers peuvent restaurer, les media queries étant l'exemple le plus notable.

Un script représente cependant une ressource supplémentaire, et son chargement un gaspillage de la bande passante pour les navigateurs bien dotés auxquels il est inutile. Ce dernier problème est heureusement résolu grâce à un autre script, YepNope.js (chap. 9 §3), qui permet de charger les solutions correctives de manière conditionnelle, et dont l'auteur nous montre un exemple d'application détaillé (chap. 9 §4).

En conclusion

Parti pris plutôt original et grande force du livre, les principes du responsive web design et les nouveautés introduites par HTML5 et CSS3 nous sont présentés et expliqués directement à travers leur mise en application dans une page web dont on suit la construction tout au long de l'ouvrage. Les erreurs volontairement commises par l'auteur qui se met dans la peau du développeur novice permettent de mieux mettre en lumière l'importance de certaines règles : la réalisation hâtive de designs aux dimensions figées destinés à deux seuls types d'appareils sera corrigée dans un second temps par l'introduction d'unités proportionnelles.

En passant, l'auteur nous fait part de ses choix ou paramétrages personnels (nombres non arrondis, effet relief) afin de nous aider à tirer des fonctionnalités présentées le plus grand profit.

Un autre mérite important du livre est de ne pas réduire la problématique de la conception d'un design multi-appareils à une simple question de largeurs d'écrans : l'auteur exploite au mieux les capacités d'HTML5 et CSS3, tout en s'aidant de quelques scripts, afin de limiter la quantité de ressources à charger.

On appréciera tout autant le fait que l'auteur, d'une part ne perde pas de vue les contraintes du monde réel – budget et délais serrés, client n'ayant qu'une maquette en tête – qui font qu'une stratégie de responsive web design s'avère plus délicate à mettre en œuvre en pratique qu'en théorie, et que, d'autre part, il nous invite à y répondre avec pragmatisme (grilles CSS, dégradation gracieuse) et pédagogie.

Les « rustines » présentées dans l'ouvrage s'adressant plus précisément à Internet Explorer, elles sont, compte tenu de l'actuelle quasi-disparition de ce dernier du monde des navigateurs, moins indispensables aujourd'hui. L'exposé a néanmoins le mérite de nous inciter à rester vigilants quant à la possible diversité de prise en charge par les navigateurs des fonctionnalités à venir, dans un univers du Web où les spécifications évoluent constamment.

En revanche, les paragraphes traitant des nouveaux éléments HTML5 et propriétés CSS3 sans rapport direct avec le responsive web design, sujet central du livre, devraient, selon moi, être retirés de ce dernier au profit de références à des ouvrages qui leur sont entièrement consacrés, rassemblées dans une rubrique « Bibliographie » dont on regrette l'actuelle totale absence.

On déplorera plus encore le manque de soin apporté à cette édition française : espaces intempestives au sein du code et des URL, traductions françaises indésirables de contenus textuels dans le code et de morceaux d'URL (!), variation dans les commentaires HTML entre deux extraits d'un même code, citations et expressions encadrées par des guillemets droits au lieu de chevrons, etc.

De plus, l'impression en noir et blanc ne permet pas d'apprécier correctement les effets d'opacité et d'ombre illustrés dans le livre.

Ces défauts quant à la forme ne sont cependant pas rédhibitoires – les erreurs d'impression et de traduction sont aisément corrigeables par le lecteur – et compensés autant par le style, qui mettra en confiance le lecteur intimidé par cette méthode nouvelle de conception d'un site web, que par le contenu, où le développeur ayant déjà de bonnes notions du responsive web design trouvera, avec les fonctionnalités CSS3 avancées et certains scripts, de quoi enrichir ses connaissances.

Qualité Web se veut un référentiel de bonnes pratiques, superbement présenté et accompagné de quelques recommandations d'application selon les contextes (audit de site en production, intégration du référentiel en cours de réalisation d'un projet…).

Cet ouvrage est réellement un must have pour tout professionnel du Web : le chef de projet y trouvera des informations très utiles pour mener des recettes efficaces et surtout constituer un référentiel des exigences complet et réutilisable, l'expert pourra l'espace d'un moment se recentrer au milieu des exigences de tous les corps de métiers qui l'entourent, et les membres plus juniors y trouveront une mine d'or pour travailler plus proprement.

Au rang des critiques, on pourra reprocher que l'aspect pratique de l'application du référentiel n'ait pas été plus poussé, notamment en ce qui concerne l'industrialisation. Et même, pourquoi pas, un indicateur vague des coûts que représente chaque bonne pratique, chaque thématique et chaque « niveau » de qualité aurait été une information particulièrement utile.

J'ai également ressenti un léger manque sur la question du protocole HTTP : aller plus loin sur la question des codes de retour (seuls 404 et 403 sont abordés), du cache et des verbes HTTP (GET, POST, PUT, DELETE…) aurait été intéressant. D'autant plus que l'utilisation du GET à des fins de modification ou, pire, de suppression est une mauvaise pratique courante et pas que chez les débutants.

En résumé, ce livre est un condensé de bonnes pratiques immédiatement applicables, agrémenté d'une édition impeccable (papier d'excellente qualité, fiches très facilement lisibles…) dont le principal reproche est peut être de n'avoir pas su s'éloigner des bonnes pratiques en elles-même pour creuser davantage leur application dans le contexte d'un projet. Mais cela ne m'empêchera pas d'en recommander l'achat à tous les professionnels du Web.

Ce livre recèle d'une multitude de conseils avisés pour tout qui aimerait parfaire son intégration web. Mais il plaira également à ceux qui veulent simplement comprendre ce que représente réellement la mise en place d'un site la plus optimale possible.

Mélangeant des explications intéressantes et des avertissements pertinents, cet ouvrage constitue un guide des bonnes manières de faire et met l'accent sur l'esprit critique qu'il faut avoir sur l'évolution permanente des technologies.

Malgré une faible présence du JavaScript, l'auteur s'en excuse, et une trop volumineuse part de CSS (sans doute nécessaire), les étapes de l'intégration sont correctement divisées et ordonnancées. On y parle de tout : la structure, les check listes, les sites pour non voyants, les images, une introduction au HTML5, l'utilisation optimisée du trio HTML - CSS - JavaScript, un brin de référencement, des astuces pour mobiles, etc.

On ne le répètera jamais assez : apprendre et comprendre les bases avant d'utiliser tel ou tel outils / frameworks est indispensable ! Car l'auteur nous présente une panoplie d'outils pour chaque étape de l'intégration (éditeurs, débogueur, préprocesseurs, imagerie, frameworks HTML et CSS et bien d'autres). Pour chacun, une présentation est faite, un choix est conseillé, et ce parfois en désaccord avec la tendance générale, mais les raisons en sont données.

Le tout est accompagné de références multiples, exprimant ainsi une recherche minutieuse de l'auteur. Vous y trouverez également des captures d'écran comparatives avec çà et là des exemples de codes que les adeptes des langages apprécieront.

Après cette lecture, on se rend compte que l'intégration web n'est pas un métier, mais un ensemble de métiers qui s'entremêlent et où la rigueur facilite la vie, notamment la maintenance. Je vous conseille donc ce livre qui représente une ligne de conduite et des bonnes pratiques à adopter.

Alors que l'accessibilité est une préoccupation apparue dès le début du Web (Web Accessibility Initiative), il est étonnant de constater 15 ans plus tard qu'il n'existe pas d'ouvrage de référence en français sur ce sujet. Heureusement pour nous, Armony Altinier vient de combler cette lacune en publiant aux éditions Eyrolles le livre Accessibilité Web.

Ce livre se divise en trois parties :

une première partie qui explique très simplement ce qu'est l'accessibilité du Web, les situations handicapantes, le cadre juridique, les technologies d'assistance, etc. ;

une seconde partie plus technique qui parcourt le référentiel Accessiweb. Toutes les thématiques sont abordées (formulaires, liens, images, multimédia, etc.) ainsi qu'HTML5 et ARIA. Cette partie est la plus longue, mais les nombreux exemples de ce qu'il faut et ne faut pas faire en font un recueil complet et agréable à lire ;

une troisième partie qui parle de l'accessibilité au-delà des normes, notamment des méthodes pour commencer une démarche vers l'accessibilité, la conduite du changement, etc.

À plus d'un titre, cet ouvrage est remarquable, mais je retiens principalement son accessibilité. Il existe une version audio pour les malvoyants et l'auteure a négocié avec l'éditeur que son contenu soit diffusé librement sous licence Creative Commons une fois 1200 exemplaires vendus. Je tenais à souligner cette initiative pour finir de vous convaincre d'acquérir ce livre.

« Le Web pour tous ! » Ces quelques mots résument parfaitement le projet humaniste qui a servi de guide à l'édification du World Wide Web : donner à tout un chacun, à travers la Toile, accès aux mêmes ressources et services, quels que soient son environnement technique ou ses « aptitudes physiques ou mentales » (chap. 1 §2).

Concrètement, cela signifie que les personnes aveugles, sourdes, handicapées moteurs ou mentales doivent être prises en compte dans la cible potentielle d'un site web, lors de sa conception.

En outre, la population concernée par l'accessibilité ne se résume pas aux seules personnes handicapées au regard de la loi ; elle s'étend à toutes celles qui ressentent une limitation dans leur utilisation du Web. Cette mise en contexte du handicap aboutit à la définition de personnes « en situation de handicap » (chap. 1 §1), lesquelles représentent en France, selon l'INSEE (Institut National de la Statistique et des Études Économiques), un internaute sur cinq (chap. 2 §1). Ce chiffre, déjà élevé, est vraisemblablement appelé à augmenter avec le vieillissement observé de la population dans les pays développés (chap. 2 §2).

Si les concepteurs de sites web ne sont sans doute pas insensibles aux considérations éthiques évoquées plus haut, les risques liés à la perte d'une part significative de l'audience des sites dont ils ont la charge auront achevé de les convaincre de l'importance de la mise en œuvre d'une démarche d'accessibilité web.

L'auteur nous explique, dans un premier temps, pourquoi le référentiel AccessiWeb s'impose comme l'outil à privilégier dans une telle entreprise. Elle nous en détaille ensuite les règles, qu'on pourra distinguer selon qu'elles consistent en un respect des standards du Web ou qu'elles ont recours à des techniques ou méthodes spécifiques. Enfin, on verra qu'AccessiWeb présente aussi des limites et ne suffit pas, à lui seul, à assurer le succès d'une démarche d'accessibilité.

AccessiWeb, un référentiel à privilégier

Si l'accessibilité est toujours absente d'un grand nombre de sites web (chap. 3 §2), le terme, lui, semble être entré dans le vocabulaire de l'informaticien, au point d'être employé de manière abusive pour désigner tout ce qui fait l'universalité d'un site web. Or, l'accessibilité web, à proprement parler, ne s'intéresse aux problèmes que pose l'accès à un site web que pour la seule catégorie des personnes en situation de handicap (chap. 1 §3).

Les différents types de handicaps – qu'ils soient sensoriels, moteurs ou mentaux – rendant difficile l'utilisation du Web sont clairement présentés dans le livre (chap. 2 §1). La perception d'un même site web étant cependant très différente selon les personnes en situation de handicap, on ne saurait se reposer sur cette seule typologie pour, à l'instar de ce qui est fait en ergonomie, évaluer l'accessibilité d'un site web à partir d'une série de tests utilisateur (chap. 2 §4).

On s'appuiera plutôt sur un ensemble de règles internationales : les Web Content Accessibility Guidelines (WCAG), établies par le Web Accessibility Initiative (WAI), groupe de travail fondé en 1997 au sein du W3C (chap. 1 §3). Le livre nous en présente la structure et le principe ; il nous en explique aussi les évolutions : techniquement neutres depuis leur deuxième version afin de rattraper le retard pris par la version précédente sur les évolutions technologiques, les WCAG ont pour contrepartie d'être désormais trop théoriques pour être directement applicables (chap. 4 §1).

D'où la nécessité pour chaque État d'établir une transcription de ces règles qui fera office de référentiel pour la mise en accessibilité des sites web de ses services et établissements publics. En France, c'est le Référentiel Général d'Accessibilité des Administrations (RGAA) qui joue ce rôle. Le livre nous en détaille à la fois les sources juridiques (depuis la loi « Handicap » de 2005 jusqu'à l'arrêté ministériel) et l'échafaudage complexe en trois composants. Le RGAA a cependant deux principaux inconvénients : peu évolutif, il est de plus restreint à un usage non commercial (chap. 3 §2).

Le référentiel AccessiWeb, mis au point par un groupe d'experts en accessibilité réunis au sein de l'association BrailleNet, est non seulement compatible à la fois avec les WCAG et le RGAA mais encore, ainsi que le démontre l'auteur, suffisamment simple d'utilisation et pragmatique pour corriger les insuffisances de ces derniers. Ces différentes raisons ont conduit l'auteur à fonder sur ce référentiel-ci la démarche d'accessibilité qu'elle détaille dans son livre (chap. 5).

Les 133 critères qui constituent les règles d'accessibilité préconisées par le référentiel se déclinent en trois niveaux : bronze, argent et or (correspondant respectivement aux niveaux A, AA et AAA des WCAG). Ceux associés aux deux premiers niveaux doivent impérativement être respectés pour que notre page web soit réputée accessible ; ceux associés au niveau or ne sont, en revanche, ni obligatoires, ni toujours pertinents (chap. 4 §2). C'est pourquoi, dans la partie centrale et principale du livre qui leur est consacrée, les critères sont systématiquement commentés quand ils sont de niveau bronze ou argent, tandis que pour les critères or, l'auteur, tout en donnant les raisons qui ont guidé son choix, ne les explicite que s'ils sont faciles à mettre en œuvre et s'ils apportent, selon elle, une véritable amélioration (chap. 5).

L'accessibilité : d'abord un respect des standards…

Afin de nous faire mieux comprendre les contraintes auxquelles les personnes en situation de handicap sont soumises lorsqu'elles naviguent sur le Web, le livre nous présente, photos à l'appui, les principales technologies d'assistance (que nous désignerons dans la suite par « A.T. », pour « assistive technology ») que ces personnes utilisent (chap. 2 §3).

Les techniques à mettre en œuvre dans le cadre d'une mise en accessibilité n'auront pas pour objet de se substituer aux A.T. mais d'en permettre l'utilisation. Pour ce faire, il convient, dans un premier temps, d'employer à bon escient les éléments des langages HTML et CSS.

L'auteur commence ainsi par nous rappeler quelques fondamentaux : séparer la forme du fond (chap. 3 §1) ; faire obligatoirement figurer dans l'en-tête du fichier HTML le type de document (doctype), la langue et le titre (élément title) ; s'interdire l'usage des éléments obsolètes ; éviter celui des éléments dépréciés (chap. 10 §1).

L'ajout de sémantique à la page web trouvera une application concrète auprès des A.T. qui exploiteront cette information ou la restitueront à l'utilisateur. On peut citer, par exemple, l'attribut universel de langue ajouté aux mots étrangers (chap. 10 §1), les listes (chap. 10 §2) et, dans les formulaires, les étiquettes de champs et le regroupement des items au sein d'une zone de liste (chap. 11 §1).

Si la piètre qualité des sites web rencontrés par l'auteur, sans doute à l'occasion d'audits (voir à ce propos l'exemple particulièrement édifiant du chap. 10 §2), motive sans doute son souhait de faire ces quelques rappels, le lecteur averti pourra cependant considérer qu'ils trouveraient davantage leur place dans un livre consacré aux fondamentaux d'HTML.

D'autres bonnes pratiques, plus instructives et en rapport avec l'accessibilité rejoignent certaines recommandations que l'on peut rencontrer en stratégie de contenu ou en référencement web. Le livre nous invite ainsi à expliciter les liens (chap. 9 §1) et les médias (chap. 7 §4) et à détailler les caractéristiques des documents en téléchargement (chap. 11 §3) ; à l'aide d'exemples, il nous montre comment regrouper intelligemment les champs de formulaire (élément fieldset) en évitant d'imposer un modèle mental au visiteur (chap. 11 §1) ; enfin, il nous explique précisément comment combiner différents modes de navigation afin de faciliter celle-ci (chap. 11 §2).

Si la mise en œuvre de scripts n'est a priori pas incompatible avec l'utilisation d'A.T., leur désactivation pourra rendre difficile l'accès au contenu d'une page web si celui-ci n'a pas été conçu pour être accessible, en particulier lorsque ces scripts ont pour but de gérer les menus de navigation. Afin d'éviter cet écueil, l'auteur a recours aux stratégies éprouvées d'amélioration progressive et de dégradation élégante qui permettront à l'internaute d'accéder à l'ensemble du contenu de la page web en toutes circonstances (chap. 9 §2).

S'il est ainsi nécessaire d'évaluer les effets d'une désactivation des scripts sur la lisibilité de la page web, AccessiWeb nous recommande de faire de même avec les images puis les feuilles de styles (chap. 10 §3).

Ces quelques règles, fondées sur une utilisation correcte des standards du Web, pourront être complétées par la checklist, libre d'utilisation, servant de support à la méthodologie Accessibility First Step (chap. 13 §1), avant le recours à des techniques et méthodes plus spécifiques à l'accessibilité.

…avant la mise en œuvre de techniques et méthodes spécifiques

Lorsqu'on s'intéresse aux éléments des langages du Web plus spécifiquement dédiés à l'accessibilité, le premier venant à l'esprit est sans doute l'alternative des images, le fameux attribut alt de l'élément img. L'auteur ne se contente pas de traiter les deux cas classiques de l'image porteuse d'information et de l'image de décoration ; elle introduit celui plus ambigu de l'image d'illustration, que l'on rencontre le plus souvent dans les articles de presse, et nous apprend précisément, à l'aide de deux exemples extraits de la Toile, comment traiter son alternative selon les différents cas de figure (chap. 6 §1).

Le problème délicat posé par les captchas et autres images dont l'utilisateur doit deviner ce qu'elles représentent est également abordé (chap. 6 §1).

Équivalent de l'attribut alt des images, l'attribut title apportera une description des cadres (chap. 6 §2), tandis que pour les médias, l'alternative pourra prendre différentes formes (chap. 7 §4).

Contrairement à une image, un tableau est composé de texte ; il est, de ce fait, parfaitement déchiffrable par les A.T. Cependant, les lecteurs d'écran ne peuvent faire mieux que de le lire de manière linéaire (chap. 8 §1), quand un humain pouvant le parcourir avec ses yeux en fera une lecture globale en associant à tout instant chaque donnée à ses caractéristiques, indiquées par les en-têtes de lignes et/ou de colonnes. Heureusement, les attributs HTML scope, headers et abbr apportent une solution aux internautes lisant un tableau à l'aide d'un lecteur d'écran. Leur fonctionnement est particulièrement bien illustré dans le livre à travers trois longs extraits de code correspondant respectivement aux différents types de tableau possibles : tableau à une entrée, à double entrée, tableau complexe comportant plus de deux niveaux d'en-têtes (chap. 8 §2).

Ces éléments et attributs HTML, pour utiles qu'ils soient, ne suffisent cependant pas à donner aux internautes aveugles accès à l'ensemble du contenu d'une page web. Ainsi, un média, dès l'instant qu'il est porteur d'information (chap. 7 §5), doit être accompagné, pour cette catégorie d'utilisateurs, d'une audiodescription (chap. 7 §3). Celle-ci trouvera son pendant, pour les internautes sourds, sous la forme d'une transcription décrivant l'ensemble des éléments véhiculés par défaut par une bande sonore, ou d'un sous-titrage, présentant l'avantage d'associer la traduction des sons aux éléments visuels (chap. 7 §2) dans le cas d'un média synchronisé (chap. 7 §1).

Si un lecteur d'écran ne peut, sans ressource complémentaire, retranscrire parfaitement le contenu de certains médias, il n'est pas non plus capable de détecter les changements de configuration d'une page web. Dans un paragraphe dédié, l'auteur nous en donne trois exemples tout en nous expliquant quelles solutions auraient pu être envisagées pour les rendre gérables par les A.T. Celui-ci aurait cependant, selon moi, mérité d'être étoffé avec quelques autres exemples permettant à la fois de cerner davantage la notion « complexe » – selon les propres mots de l'auteur – de changement de contexte et de voir à l'œuvre différentes techniques permettant de rendre ce dernier accessible (chap. 9 §2).

Les techniques et méthodes évoquées plus haut s'adressent, pour la plupart, aux personnes aveugles ; d'autres peuvent être mises en application à destination des autres catégories d'internautes ne parvenant qu'avec difficulté à accéder aux éléments visuels d'une page. On s'assurera en particulier que le texte est « zoomable » (chap. 10 §3) et le contraste des couleurs employées sur le site suffisant. Ce dernier critère est un des rares objectivement mesurables à l'aide d'une formule implémentée dans différentes applications en ligne dont trois nous sont succinctement présentées par l'auteur. Celle-ci nous met cependant en garde contre les potentiels effets collatéraux que pourrait entraîner une course au score le plus élevé tout en nous apprenant à obtenir le « juste » rapport de contraste (chap. 6 §3).

Les limites d'AccessiWeb

Nombre des critères commentés plus haut font référence à des éléments du langage HTML, conformément à l'objectif de pragmatisme poursuivi par AccessiWeb. La contrepartie, cependant, est que les évolutions des standards du Web ne seront prises en compte qu'avec retard par le référentiel. Ainsi, AccessiWeb, à la date de rédaction du livre, en tout cas, ne reconnaît qu'HTML 4. Dans certains cas (rares, semble-t-il, et heureusement), ce décalage met le référentiel en contradiction avec la dernière version à jour des spécifications d'HTML (chap. 12 §5).

Cependant, le plus souvent, on peut recourir aux nouveaux éléments introduits par HTML5 tout en respectant AccessiWeb. L'auteur nous montre même en quoi ces derniers seront profitables à l'accessibilité. Bien qu'ils soient relativement courts, les paragraphes que le livre y consacre me paraissent l'alourdir quelque peu : ces sujets sont déjà bien traités par les ouvrages consacrés à HTML5 ; de plus, les A.T., d'après ce que semble indiquer le livre, ne tirent de ces nouveaux éléments pas de profit particulier (chap. 12 §1 à 3).

Les attributs introduits par la spécification WAI-ARIA, à l'instar de ceux évoqués plus haut, enrichissent la sémantique de la page web, mais présentent l'avantage d'être souvent mieux pris en compte par les agents utilisateurs. L'auteur nous en donne, pour chacun d'eux, une définition précise dans un tableau indiquant, en outre, pour les attributs rôle, les éléments HTML auxquels ils sont associés ; pour les attributs propriété ou état, les valeurs possibles. On reste cependant sur notre faim : certes, l'auteur nous explique dans quelles circonstances employer certains de ces rôles (landmarks), mais des exemples plus détaillés nous auraient permis de mieux comprendre comment mettre concrètement en œuvre les principaux attributs WAI-ARIA (chap. 12 §4).

AccessiWeb, même à jour des dernières évolutions des standards du Web, ne suffit pas à mettre en place une démarche d'accessibilité. L'ordre de priorité des corrections à apporter à une page web pour rendre celle-ci accessible sera établi à l'aide d'une méthodologie complémentaire : si la méthode WCAG-EM, proposée par le W3C, n'apporte rien de plus par rapport à AccessiWeb, le projet en cours d'élaboration MIPAW, initié par BrailleNet et la société Qelios, semble plus prometteur. Enfin, la répartition des tâches au sein de l'équipe projet pourra être réalisée à l'aide d'une méthodologie telle que AcceDe Web, de la société Atalan (chap. 13 §1), accompagnée, le cas échéant, d'une formation (chap. 8 §3).

Mais la réussite de cette dernière étape présuppose que l'on aura convaincu de l'importance de l'accessibilité web l'ensemble de nos collaborateurs, au premier rang desquels intégrateurs et contributeurs (chap. 13 §3). Or, pour atteindre un tel objectif, aucun référentiel ou méthodologie ne nous sera autant utile que de solides talents de pédagogue associés à une indéfectible bonne humeur ! (chap. 13 §2)

En conclusion

« L'accessibilité au profit de tous ! » est une formule qui pourrait servir de conclusion à la première partie du livre. Celle-ci, en effet, démontre de façon convaincante que les personnes subissant une « limitation d'activité » dans leur usage quotidien du Web représentent une cible plus large que la seule catégorie des personnes handicapées au sens de la loi ; que les aménagements réalisés pour ces dernières profitent, en fin de compte, à tous les internautes ; enfin, que le site, lui-même, en répondant ainsi au principe d'universalité du Web, améliore sa réputation et son référencement.

Indispensable, le livre l'est donc par la pertinence de son sujet ; il l'est aussi par le fait qu'il n'a, semble-t-il, pas ou peu de concurrents en France – comme l'évoque, d'ailleurs, l'auteur, dans son avant-propos – ni d'équivalent à l'étranger puisque le référentiel sur lequel il s'appuie, AccessiWeb, a été élaboré par une association française en vue de permettre le respect à la fois des exigences internationales et de celles édictées, pour les administrations, sur le plan national. On s'expliquera sans doute ainsi l'absence de références bibliographiques en fin d'ouvrage.

L'utile exégèse du référentiel AccessiWeb qui forme la deuxième partie du livre permettra d'engager efficacement une démarche d'accessibilité.

Des explications précises sur le fonctionnement et le paramétrage des A.T. nous auraient cependant aidés à améliorer l'accessibilité d'un site en allant au-delà du simple respect des critères du référentiel : par exemple, concernant les lecteurs d'écran, l'attribut title est-il lu systématiquement par défaut ? la présence d'un élément abbr suffit-elle à distinguer un sigle (lu caractère par caractère) d'un acronyme (lu comme un mot ordinaire) ? la prononciation d'un mot est-elle recherchée dans un dictionnaire avant d'être restituée phonétiquement ?

On aurait également souhaité que l'auteur nous explique en détail comment rédiger une page accessibilité rendant compte du travail effectué sur le site dans ce domaine.

Ces éléments viendraient opportunément enrichir une prochaine édition actualisée avec les dernières versions d'AccessiWeb et RGAA qui ont, respectivement depuis 2013 et 2015, intégré les évolutions technologiques apportées par HTML5.

De toute évidence, « Ergonomie des interfaces » constitue une référence dans son domaine. Il sera utile lors de toutes les phases d'un projet.

Tout d'abord, l'écriture est simple et claire, l'argumentation est précise et de nombreux exemples et références étayent les points abordés. Tout cela contribue à rendre la lecture agréable.

Le livre couvre tous les types d'interfaces : qu'il s'agisse d'applications Web ou de bureau, mais surtout, cette nouvelle édition prend en considération les applications tactiles (smartphones ou tablettes) rendant ainsi l'ouvrage particulièrement complet.

Découpé de façon intelligente (voir la table des matières), le livre mérite bien son sous-titre : « Guide pratique ». En effet, loin de se vouloir uniquement théorique, vous pourrez aller y chercher facilement toutes les informations utiles à chaque étape du développement. Dans le même esprit, les points abordés (parfois nombreux sur un même thème) sont parfaitement mis en valeur et donc aisément visualisables. Enfin, différentes « check-lists » vous seront très utiles dans vos projets.

Bien entendu, une bonne partie (si ce n'est la plupart) des conseils donnés pourront vous sembler évidents. Effectivement, même si certains points abordés reposent sur des études menées auprès d'utilisateurs, l'essentiel relève d'une certaine forme de bon sens. Néanmoins, lorsque l'on est plongé dans son projet (« la tête dans le guidon »), le fonctionnement de l'application nous semble tellement familière qu'il devient difficile de s'en détacher pour se mettre à la place d'un utilisateur découvrant le système. Dans ce cas, il est important de pouvoir s'appuyer sur ce livre pour prendre un peu de recul et voir les erreurs que l'on peut commettre.

Enfin, notez bien qu'il s'agit d'un livre sur l'ergonomie. C'est-à-dire l'utilisabilité d'une application : faire en sorte que n'importe quel utilisateur parvienne facilement à son but sans se perdre dans l'interface. En aucun cas, ne sont abordées les notions de design ou de graphisme. Vous apprendrez comment rendre votre application facile à utiliser, pas comment la rendre visuellement aboutie, ce qui est un tout autre sujet.

Pour conclure, ce livre est selon moi incontournable et à conseiller à tous les intervenants d'un projet. Il sera utile lors de toutes les phases du développement.

Ce livre est la version française du grand classique de Steve Krug sur l'utilisabilité des sites web : « Don'k make me think ». L'éditeur a choisi d'ajouter un « .fr » sur la couverture pour le signaler. Par la même occasion, le sous-titre devient « Optimisez la navigation sur vos sites » et c'est regrettable. Car le sous titre original « A Common Sense Approach to Web Usability » est davantage révélateur de l'esprit de l'ouvrage. Partant du principe que les experts en utilisabilité ne sont pas les seuls à pouvoir réfléchir à l'ergonomie du web, Steve Krug a écrit un livre pour les non-spécialistes.
Le livre est court, simple et explique avec humour comment faire des sites web utilisables. Les 12 chapitres qui peuvent être lus indépendamment les uns des autres traitent d'un aspect particulier de l'utilisabilité du Web et des façons de l'aborder. Ayant déjà lu d'autres ouvrages sur le sujet, je n'ai pas vraiment appris de nouvelles choses si ce n'est comment réaliser des tests utilisateur à moindres frais. J'ai trouvé les exemples avant/après un peu vieillot graphiquement parlant mais sur le fond, ils illustrent des problèmes qui demeurent présents sur le web actuel.
Je recommande la lecture de ce livre à tous, aux novices et aux experts. Les premiers y trouveront une agréable introduction pour découvrir l'ergonomie du web. Les seconds apprécieront un auteur qui traduit en termes simples et en images concrètes ce qu'ils ont parfois du mal à expliquer.

Encore un très bon ouvrage dans l'excellente collection A book Apart, dans lequel Ethan Marcotte aborde, de manière très claire et argumentée, les différents aspects qui mènent à la création d'une mise en page fluide et responsive.

Les exemples présentés s'appuient sur le principe des grilles de mise en page fluide (la largeur est donc exprimée en pourcentage).
L'adaptation de ces grilles en fonction du terminal est pilotée par les CSS3 Media Queries. Pour présenter ce module, l'auteur a analysé plusieurs cas de figures nécessitant une adaptation des CSS selon la largeur du viewport : annulation des flottants, modifications des largeurs etc.

L'auteur n'omet pas de souligner le fait que le responsive design fourni une meilleure expérience utilisateur et encourage les auteurs de pages Web à définir les objectifs des utilisateurs avant de démarrer un projet responsive.

Cet ouvrage constitue une excellente introduction au responsive Web design et s'adresse principalement aux Webdesigners et intégrateurs HTML.

Contrairement à l'approche reposant sur l'idée qu'il conviendrait de fournir des contenus différents selon les types (et donc les dimensions) d'appareils, le responsive web design part du principe que le mobinaute a le droit d'accéder aux mêmes informations que l'internaute confortablement installé devant l'écran de son ordinateur de bureau.

Pour atteindre cet objectif, le responsive web design propose un ensemble de stratégies visant à faire entrer tout le contenu informationnel d'une page web conçue au départ pour un écran de taille donnée dans celui de n'importe quel appareil, quelle que soit sa taille, sans porter atteinte à la lisibilité et en tenant compte des contraintes techniques spécifiques de ce dernier.

Pour répondre à ce souci d'universalité, le responsive web design s'appuie sur des règles CSS comprises de l'ensemble des navigateurs, y compris les plus anciens. Les techniques mises en œuvre présentent cependant des limites, d'où le recours le cas échéant à des scripts JavaScript (JS). Le fait que ce dernier langage ne soit en revanche pas interprété par tous les agents utilisateurs nous rappelle, enfin, que méthode et pragmatisme sont nécessaires pour répondre aux différents cas de figure.

Le responsive web design : avant tout de bonnes bases en CSS...

Un design responsive est d'abord un design flexible : les éléments constitutifs d'une page web conçue pour une taille d'écran donnée doivent d'eux-mêmes se redimensionner proportionnellement à celle de l'appareil cible.

Une telle méthode est élémentaire ; mais parce qu'elle ne dépend pas des tailles fixes d'appareils ciblés a priori, elle présente l'avantage d'être valable pour tout appareil existant ou à venir.

Les corps de caractères et largeurs de colonnes tirent ainsi profit d'unités de mesure proportionnelles plutôt que fixes (em pour les premiers, % pour les secondes).

L'auteur accorde à cette technique suffisamment d'importance pour, à l'aide d'exemples, expliquer pas à pas sa mise en œuvre, tout en détaillant les calculs et en enseignant de bons réflexes (chap. 2).

Mais le redimensionnement à lui seul ne fait pas tout. Il existe généralement quelques dimensions critiques, appelées points de rupture, à partir desquelles le contenu de la page web requiert une réorganisation sous peine de perdre de son attractivité, voire de sa lisibilité. Succédant aux types de médias (introduits avec CSS2), dont l'auteur nous expose les insuffisances, les media queries ont été spécifiquement conçues pour résoudre cette difficulté (chap. 4 §3).

...qui présentent cependant quelques limites

Contrairement à la technique de composition flexible présentée plus haut, reposant sur l'utilisation des unités em et % et offrant, de ce fait, en outre l'avantage d'être opérante sur l'ensemble des navigateurs sans exception, les media queries, introduites seulement avec CSS3, ne bénéficient pas d'un support universel. Conscient du problème, l'auteur présente deux polyfills destinés aux navigateurs non compatibles (chap. 4 §6).

Le même problème de compatibilité se pose avec les images, dont l'auteur nous propose de permettre la réduction à l'aide de la propriété max-width (chap. 3 §2). En effet, celle-ci n'est pas supportée ou est mal prise en charge par les anciennes versions d'Internet Explorer. Pour surmonter ce nouvel écueil, l'auteur propose, selon le cas, l'usage d'une propriété CSS alternative mais imparfaite ou le recours, là encore, à des solutions à base de JS qui ont notamment pour inconvénient de ralentir le chargement de la page (chap. 3 §3).

La dégradation des performances est un problème qui touche de manière générale les méthodes visant à rendre nos images flexibles. La technique basée sur max-width fait appel à une image unique de taille supérieure ou égale à celle des contenants qui doivent l'accueillir. Il en est de même de l'image d'arrière-plan, traitée à l'aide d'une méthode astucieuse, très bien détaillée dans le livre, consistant à créer l'illusion d'un redimensionnement à l'aide d'un simple repositionnement avec la propriété background (chap. 3 §4). On gaspille ainsi de la bande passante en obligeant les navigateurs à charger des images plus grandes que nécessaire.

L'auteur ne résout pas véritablement ce problème, mais en nous renvoyant vers un article du blog d'un de ses confrères, expliquant comment gérer plusieurs versions d'une même image, optimisées chacune pour un type d'appareil en particulier, il nous indique une piste à explorer (chap. 3 §6).

Le responsive web design en ordre de bataille

Si au fil de la lecture, on a ainsi appris à utiliser les outils du responsive web design, on n'a pas dit pour autant dans quelle mesure celui-ci s'avère être une meilleure stratégie que celle consistant à fournir un contenu différencié selon le type d'appareil. L'auteur n'esquive pas la question ; au contraire, avec objectivité et intelligence, il démontre que la seconde stratégie pose les bonnes questions mais y apporte les mauvaises réponses : selon lui, l'expérience utilisateur ne doit pas dépendre d'un comportement présupposé de celui-ci mais du contexte d'utilisation, proposition qu'il illustre à l'aide de l'exemple tiré d'un site web qu'il a lui-même développé (chap. 5 §1).

L'auteur, en revanche, adopte sans réserve la démarche mobile first consistant à définir en priorité les règles de style pour les plus petites dimensions (chap. 5 §2). Elle est d'ailleurs tout à fait compatible avec celle du responsive web design, et il le prouve en prenant pour exemple son propre site portfolio (chap. 5 §4).

Cet exemple montre par ailleurs qu'une telle stratégie a également le mérite de résoudre les problèmes d'incompatibilité des media queries sans le moindre recours à JS. Cette dernière solution doit en effet être d'autant moins considérée comme la panacée que JS est parfois désactivé dans les navigateurs, surtout ceux des petits appareils. C'est pourquoi l'auteur montre, étape par étape, comment un composant requérant JS peut être inséré dans une page web et apporter ainsi une expérience enrichie aux heureux possesseurs d'un navigateur parmi les mieux dotés sans pour autant pénaliser les autres (chap. 5 §5). Plus précisément, il s'intéresse à l'insertion d'un carrousel dans la page web spécialement construite pour illustrer la plupart des méthodes décrites dans le livre.

L'auteur a en particulier recours à cette page-exemple pour montrer une utilisation concrète des media queries. Il identifie ainsi les différents problèmes de rendu qu'entraîne le redimensionnement du contenu (chap. 4 §1) et pour chacun d'eux, apporte la solution avec une règle CSS spécifique introduite par une media query (chap. 4 §5). Il détaille ainsi une véritable étude de cas à l'image de celles auxquelles peut être confronté un designer web.

Un projet de taille importante est néanmoins conduit selon un modèle de gestion impliquant plusieurs intervenants. L'auteur nous en dévoile les grandes phases et parvient à nous convaincre, arguments et exemple à l'appui, que la réussite d'un projet web passe avant tout par un dialogue permanent et une vraie collaboration entre designers et développeurs ! (chap. 5 §3)

En conclusion

Les bases de la construction d'une page web étant acquises, Ethan Marcotte, avec la stratégie du responsive web design, à qui elle doit son nom, nous invite à passer à la vitesse supérieure en apprenant à adapter notre page au panel d'appareils le plus large possible.

Dans ce livre, qui s'adresse par conséquent à un lecteur possédant de premières connaissances en HTML et CSS, l'auteur pose les fondements du responsive web design. Il y enseigne les techniques de base avec pédagogie, décontraction et humour (sans compter un très petit nombre de coquilles dans cette version française), pour le plus grand bonheur du lecteur encore peu expérimenté dans les langages du Web.

Ne se contentant pas d'admirer avec satisfaction le résultat produit dans des conditions idéales par ces techniques, l'auteur confronte celles-ci à des situations réelles plus difficiles, et pour chaque problème ainsi mis en lumière (incompatibilité des navigateurs, notamment), propose une solution adaptée, généralement sous la forme d'un script JS.

Ce faisant, il suscite l'intérêt même des designers chevronnés pour qui les méthodes évoquées plus haut n'auraient déjà plus aucun secret, tout en nous encourageant à poursuivre la réflexion sur certains aspects peu développés dans cet ouvrage, tels que l'amélioration des performances.

On ne présente plus le livre "Ergonomie Web" d'Amélie Boucher. Il est devenu un ouvrage de référence du domaine en France. Pour ne pas redire ce qui a déjà été dit dans les critiques des précédentes éditions et parce que le contenu reste globalement le même, je vais plutôt m'attarder sur les différences avec la seconde édition.

Premier changement, cette troisième édition passe à la couleur et pour un ouvrage qui utilise abondamment les captures d'écrans, c'est une amélioration bienvenue. L'exemple sur la loi de similarité par la couleur en tire également profit, ça change du noir et blanc !

Deuxième changement : les exemples. La pastille de couverture indique " + de 300 nouveaux exemples" mais les anciens ont été enlevés. Ce ne sont donc pas des exemples supplémentaires mais des exemples actualisés. Ceci est plutôt une bonne chose dans la mesure où le lecteur est tenté d'aller sur le site pour vérifier ce qu'il en est réellement.

Troisième changement, le livre a perdu une centaine de pages ! Au début, j'étais intrigué mais cela s'explique rapidement. D'une part, les nouveaux exemples ont modifié la mise en page. D'autre part, des passages ont été retravaillés en enlevant des redites. Après tout, ne dit-on pas qu'il faut simplifier au lieu de complexifier ? De plus et à mon grand regret, la partie "Suggestion de lecture" qui référençait des sites Web et des livres anglophones de ses confrères ergonomes a purement et simplement disparue !

Avec cette nouvelle édition, on aurait également pu souhaiter qu'il aborde les spécificités du Web mobile (téléphones, tablettes) mais ce n'est pas le cas.

En conclusion, si vous ne l'avez pas lu, sa lecture vous sera toujours aussi profitable. Si vous l'avez déjà lu, j'espère vous avoir donné des éléments complémentaires pour décider de vous procurer ou non cette nouvelle édition.

Architecture de l'information, maquettes des interfaces graphiques, accessibilité, micro-utilités sont quelques-unes des applications de l'ergonomie web. Plus généralement, l'ergonomie web a pour objet la réalisation d'un site web permettant à l'utilisateur d'atteindre un objectif ("utilité" de manière effective, efficace et satisfaisante ("utilisabilité".

Le livre : clarté et précision

"Le site est bien rangé" et "les mots et symboles sont choisis minutieusement" sont deux des règles de l'ergonomie web auxquelles le livre lui-même qui nous les enseigne ne fait fort heureusement pas défaut !

La qualité rédactionnelle de ce dernier saute en effet immédiatement aux yeux ; elle se caractérise par un soin particulier apporté au style ainsi qu'au choix des mots, à quoi il convient d'ajouter un nombre peu important de coquilles.

Le plan de l'ouvrage est tout aussi séduisant. L'ergonomie étant sans doute pour le néophyte auquel le livre s'adresse un concept vague, sinon obscur, l'auteur choisit de la définir dans un chapitre introductif en la présentant dans un premier temps dans son acception la plus générale avant de préciser les contours de l'ergonomie web proprement dite.

Cette approche consistant à aller du général au particulier, offrant le double avantage de présenter chaque aspect de manière à la fois claire et exhaustive, est présente tout au long du livre : un site ergonomique doit s'adapter aux comportements des internautes en tant qu'êtres humains (chap. 3) puis en tant que cible (chap. 4) ; le site dans son ensemble doit être bien rangé (chap. 5 §1) de même que chaque page au sein de celui-ci (chap. 5 §2) ; le maquettage doit d'abord spécifier la page dans son aspect global (chap. 9 §1) avant de s'intéresser à chacune des zones la définissant (chap. 9 §2).

Le recours aux typologies contribue tout autant à la clarté de la présentation : un site capitalisant sur l'apprentissage interne (chap. 5 §3) autant qu'externe (chap. 5 §4) ; la visite d'un site fondée sur la recherche par mots-clés, la navigation ciblée ou la navigation libre (chap. 8 §2) ; les critères d'organisation "exacts" et "ambigus" (chap. 8 §4).

Le livre se distingue également par sa densité. L'auteur a ainsi fait le choix d'en consacrer toutes les pages à l'exposé proprement dit, au détriment de compléments d'information qui seraient venus s'insérer en annexe ou au cœur du livre : seuls quelques outils sont rapidement évoqués au fil des pages ; de plus, en lieu et place d'une bibliographie (seuls deux autres livres du même auteur dans la même édition sont présentés en fin d'ouvrage), on ne trouvera que les livres jugés essentiels (une dizaine en tout) mentionnés en marge des chapitres traitant les sujets qu'ils sont censés approfondir.

L'ergonomie web : une démarche reposant sur des fondamentaux théoriques, nourrie des pratiques du web

Faisant suite à la première partie introductive, les deuxième et troisième parties s'intéressent à la théorie de l'ergonomie web.

Les internautes étant des humains avant tout, leur comportement répond aux règles établies par les théories de la psychologie cognitive : lois de proximité et de similarité de la Gestalt, loi de Fitts, affordance, loi de Hick. Pas de panique ! Rien d'abscons ici : le livre présente ces résultats de façon compréhensible et montre, exemples à l'appui, comment les mettre en application dans le strict cadre de l'ergonomie web.

Cette dernière, de son côté, réalise son propre travail de réflexion, aboutissant à un ensemble de normes et critères. Plutôt que de nous en livrer le détail, l'auteur se contente d'en dresser une liste sélective (chap. 6 §1). S'appuyant sur sa parfaite connaissance des normes et son expérience de professionnelle, l'auteur préfère en effet réaliser sa propre compilation, donnant lieu à douze règles. Ces dernières ont le grand avantage d'être faciles à la fois à comprendre et à mémoriser. Elles sont présentées dans le chapitre 5 qui forme le cœur de l'ouvrage. Chacune d'elles fait l'objet d'un paragraphe spécifique où elle est expliquée avec force détails et de nombreux exemples (de ce qu'il faut faire ou ne pas faire !) extraits d'authentiques sites web (présentés en couleurs !).

Une des règles exposées dans le chapitre 5 rappelle que l'internaute arrivant sur notre site a l'esprit déjà formaté par son expérience personnelle du Web. En conséquence, afin de ne pas prendre le risque de le dérouter, on appliquera à la lettre les pratiques les plus usuelles du Web, devenues de ce fait des "conventions" ou des "standards", selon la terminologie introduite par le gourou de l'ergonomie web, Jakob Nielsen. Quant aux autres, pour peu qu'elles soient pertinentes, il peut être judicieux de s'en inspirer. C'est ce que propose l'analyse concurrentielle, dont la mise en œuvre est détaillée dans chap. 7 §2.

Au cœur de la démarche, une méthodologie rigoureuse par et pour l'utilisateur

"Si ça marche pour ma grand-mère, ça marchera pour tout le monde." C'est là une des dix idées reçues battues en brèche dès l'introduction du livre (chap. 2 §2). En effet, "votre grand-mère n'est pas votre internaute" ; un site web ne s'adresse pas à tout un chacun, mais est conçu au contraire pour une cible bien précise. On identifiera celle-ci grâce à la méthode des "personas". L'intérêt de la méthode ainsi que la typologie des personas et les critères les définissant sont exposés dans le chapitre 4 dont on regrettera cependant qu'il s'attache à présenter le résultat attendu plutôt que les moyens d'y parvenir, ce d'autant plus que la mise en œuvre des méthodes de l'ergonomie web, à laquelle sont consacrées les quatrième et cinquième parties du livre, repose en grande partie sur le concept des personas.

La place centrale faite à l'utilisateur est d'ailleurs un des grands intérêts de la démarche exposée dans ce livre. Il est ainsi souligné que dans le cadre d'un audit ergonomique, la satisfaction de notre internaute pourra justifier que soient remises en cause certaines règles plus générales, aussi consensuelles soient-elles (chap. 6 §2). Ce sont également les personas qui dicteront le choix des micro-utilités qui permettront à notre site de se distinguer des sites concurrents (chap. 7 §1).

Décrivant jusqu'au bout la mise en oeuvre concrète de la démarche ergonomique, le livre accorde une place significative aux livrables. On regrettera cependant que les maquettes d'interface générale (zoning) et détaillée (wireframe) ne soient illustrées chacune que d'un seul exemple (chap. 9).

La même remarque s'applique au plan de site auquel doit aboutir la réflexion menée sur l'architecture de l'information. Cette phase essentielle, décrite dans le chapitre 8, fait largement appel aux utilisateurs à travers le tri de cartes. Cette méthode participative nous est présentée avec suffisamment de détails pour qu'on soit directement en mesure de la mettre en pratique après avoir lu le chapitre 10 qui lui est entièrement dédié.

S'il vient ainsi à notre rescousse dès l'amont, l'utilisateur doit également intervenir en aval et durant toute la vie de notre projet. En effet, ce n'est qu'en confrontant l'utilisateur à notre site que la qualité d'utilisation de ce dernier pourra être correctement évaluée. Les tests utilisateurs sont une autre méthode participative qui permet précisément d'atteindre cet objectif. Toutes les étapes : sélection des participants, préparation du support, rédaction du plan de test, déroulement du test et analyse des résultats nous sont, là aussi, décrites dans les moindres détails, dans le chapitre 11 et dernier, dont la longueur – c'est le chapitre le plus imposant du livre, après celui consacré aux règles ergonomiques – traduit également toute l'importance que l'auteur accorde à cette méthode.

L'eyetracking, au contraire, n'est vu par l'auteur que comme une méthode complémentaire, à utiliser avec prudence et absolument pas indispensable. Pour ces différentes raisons, elle n'en présente que les grandes lignes dans un article inséré au coeur du chapitre 11.

En conclusion

"L'ergonomie, c'est juste du bon sens" est une autre des idées reçues pourfendues dans la partie introductive de l'ouvrage. Comme le dit d'ailleurs l'auteur dans son avant-propos, "la plupart des sites actuels manquent encore de l'essentiel : un vrai souci des internautes, de qui ils sont et de leurs besoins." Un livre sur l'ergonomie web a donc toute sa raison d'être et l'on en est d'autant plus convaincu après avoir lu celui-ci, dont on appréciera la rigueur et la précision dans l'écriture et le parfait équilibre entre les fondements théoriques et leur application concrète.

On aurait cependant souhaité plus d'explications sur quelques points précis abordés dans l'ouvrage, mais celles-ci pourront être apportées par certains des ouvrages plus spécialisés cités en référence.

Si le livre ne prétend pas, en 350 pages, faire le tour de l'ergonomie web, il nous apporte néanmoins des éléments suffisamment solides pour nous permettre de créer des sites véritablement ergonomiques.