Catégories
FCS FCS1-cours

Structuration avant stylisation

Pour suivre ce cours, il est nécessaire d’avoir réalisé la dernière activité proposée sur la page Activités sur la structure HTML d’une page Web.

Dans ce cours nous allons apprendre à organiser les contenus d’une page HTML pour préparer leur stylisation. Pour cela nous allons utiliser deux structures rédactionnelles basées les 2 plans indiqués ci-dessous.

  • h1 – p – h2 – p – p – h2 – p – p – h2 – p – ul – p
  • h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p – h2 – p – ul – p

Nous allons utiliser des séparateurs pour isoler certains contenus et intégrer dans la page une citation, une liste de liens et des mots importants, afin d’enrichir le contenu de l’article. Nous verrons pour terminer comment intégrer une image.

Auparavant, nous allons détailler deux points importants :

  • les 4 composants de toute rédaction
  • les similitudes entre design “print” et design “hosted”

Les 4 composants de toute rédaction

Faisons le point sur le rôle central de la rédaction, dans la publication en ligne en particulier, mais aussi dans la publication sur papier.

La rédaction Web (et toute rédaction, en général) est la combinaison de 4 composants : une structure cohérente, un vocabulaire précis, une syntaxe pertinente et une juste orthographe.

Composants de la rédaction : structure, vocabulaire, syntaxe, orthographe.

Sur MapsOfMind, pour ramener la carte à une vue d’ensemble après avoir zoomé sur un des sujets : rafraîchir simplement la page . 😉

Lors de la création d’une page HTML simple, la structure rédactionnelle est mise en place en même temps que les balises de titrage (heading), de paragraphes et de listes. La structure de base sur laquelle vous avez travaillé jusqu’à maintenant était celle-ci :

  • h1 – p – h2 – p – p – h2 – p – p

Concernant le choix du vocabulaire, de la syntaxe et de l’orthographe, vous avez collecté sur le Web des textes que je vous ai invité à simplifier (ou à étayer…) pour coller davantage à la structure ci-dessus.

➜ Je vous recommande cependant de relire vos textes simplifiés et, si nécessaire, de modifier la syntaxe (l’ordre des mots ou des phrases).
➜Ajustez également le vocabulaire pour que les idées à transmettre soit clairement communiquées…
➜ Pour terminer, faites relire vos textes à des personnes compétentes si vous avez du mal à orthographier correctement vos textes.

Similitudes en design “printed” et “hosted”

Avant de vous demander de travailler sur la structuration du texte intégré dans votre page HTML, je voudrais revenir sur les opérations communes à la communication sur papier et la communication sur fenêtre de navigation. Je vais insister sur 3 points :

  • La structuration quelque soit le format
  • la stylisation pour montrer l’important
  • la coloration pour favoriser la lecture

Structurer quel que soit le format

Je mets en relation de similitude la communication imprimée (printed) et la communication hébergée (hosted). La première a pour support de lecture un support analogique de dimensions fixes (le plus souvent une feuille de papier). La seconde a pour support de lecture un support numérique de dimensions variables (la fenêtre d’un navigateur, affichée en plein écran ou non).

La page imprimée est structurée dans un format donné, une fois pour toutes, mais la page hébergée est structurée, une fois pour toutes, pour plusieurs dimensions d’affichage. 😉

Cela nous oblige, en design graphique (quel que soit le mode de publication), à concentrer nos efforts sur la structuration des informations. Nous devons veiller à ce que que la structure logique des contenus soit toujours perceptible, quelque soit le format de présentation au public.

S = DHO
(Structuration = découpage à chaud =
Découpage + Hiérarchisation + Ordonnancement)

La nécessité de structurer les contenus ou blocs d’informations, à l’échelle de la page entière ou des différentes parties de la page n’est pas le seul point commun entre le design pour l’imprimé et le design pour l’hébergé.

Styliser pour montrer l’important

La stylisation est la modification des formes et des couleurs du contenu d’une page pour rendre la communication plus efficace (et non principalement plus belle…). il s’agit de mettre en évidence ce qui est le plus important.

En design graphique, cela se traduit très rapidement par le choix d’un nuancier de couleurs et d’une combinaison typographique, tous deux fonctionnels. Cependant, les concepteurs des navigateurs n’ont pas jugé utile d’aller plus loin que la mise en place de styles graphiques très simples (styles par défaut des navigateurs). Ils laissent aux designers graphiques le soin d’assurer toute la stylisation supplémentaire voulue, en fonction des contextes des projets de publication.

Les styles par défaut des navigateurs

Les navigateurs disposent de styles graphiques par défaut. Ces styles, très simples, permettent de visualiser les choix structurels effectués.

Les deux couleurs utilisées sont le noir et le blanc. Noir pour les textes et blanc pour l’arrière plan. La famille typographique utilisée par défaut est le Times, utilisée en 4 fontes (Regular, Bold, Italic et Bold italic).

Les titres de niveau 1 sont présentés avec une force de corps plus importante que les titres de niveau 2. Il en est de même pour les titres de niveau 2 par rapport aux titres de niveau 3, etc. Tous les titres sont en caractères gras (Bold) et tous les paragraphes sont affichés en caractères normaux (Regular)

Notez qu’en design pour le Web, la graisse d’un caractère est indiquée par un nombre allant de 100 à 900. Un caractère normal (Regular) a une graisse de 400, un caractère gras (Bold) a une graisse de 700.

UTILISER L’EXTENSION WHATFONT

Pour analyser les polices de caractères d’une page Web, je vous recommande l’utilisation de l’extension Whatfont. Même s’il est possible d’inspecter les polices de caractères avec les outils de développement de Chrome (Afficher > Options pour les développeurs > Outils de développement), l’extension WhatFont offre quelques avantages (voir ci-dessous)

Désactiver les CSS dans Chrome

➜ Ayant finalisé la rédaction de vos textes intégrés dans une page HTML, pouvez-vous percevoir la structuration de vos contenus rédactionnels (titres, sous-titres, paragraphes), en l’absence de toute stylisation CSS ?

Pour désactiver l’affichage des styles d’une page Web, dans le navigateur Chrome (recommandé dans le cadre de ce cours), je vous recommande l’installation de l’extension Web Developper.

Capture d'écran du menu CSS de l'extension Web Developer pour Chrome.

En cliquant sur “Disable All Styles”, vous désactivez les CSS de la page consultées. En cliquant également sur “Disable Browser Default Styles”, vous désactivez les feuilles de styles par défaut appliquées par le navigateur.

Évaluer la perception de la structure sans stylisation

Le résultat est un affichage des contenus sous leur forme la moins sophistiquée qui soit. Dans ce cas, pouvez-vous affirmer que le plan rédactionnel est visible et que le message transmis est clairement compréhensible ? Si c’est le cas, c’est que la structuration (DHO) est bonne !

Vous constaterez visuellement qu’il est plus facile de percevoir la structure d’un texte lorsque ce texte est présenté (ou affiché) sur une petite largeur que sur une grande largeur.

Pour vous en rendre compte, quand vous êtes dans Chrome, appuyez sur la touche F12 de votre clavier (ou menu Afficher > Options pour les développeurs > Outils de développement) puis sur le bouton de simulation d’affichage sur mobile (Toggle device toolbar). Veillez à ce que le réglage de votre fenêtre de simulation soit réglée sur “Responsive” et actionnez la poignée de réglage de la largeur de l’affichage.

Capture d'écran de la fenêtre  d'inspection des éléments à l'aide des outils de développement de Chrome.

Coloriser pour favoriser la lecture

Nous avons vu quelle était l’importance du contraste de valeurs en design graphique, en particulier dans la communication imprimée. Voir pour rappel le cours intitulé Les couleurs en design graphique.

Dans la communication hébergée, la question du contraste des couleurs est centrale ! Il existe même des normes d’accessibilité très contraignantes imposant des ratios de contraste très élevés. La norme AAA, par exemple, permet difficilement d’utiliser plus de 2 couleurs pouvant être appliquées à des textes de taille inférieure à 14 pt (19 px environ) sur un fond donné.

Une couleur, en design imprimé ou en design hébergé, doit toujours être envisagée appliquée à une forme disposée sur un fond. Une couleur considérée isolément n’a aucune fonctionnalité en communication visuelle !

La couleur noire utilisée par défaut par les navigateurs pour afficher les textes codés en HTML ne présente de lisibilité maximale que sur fond blanc.

Que penseriez-vous d’un navigateur qui afficherait les textes de cette manière ? Pourtant le texte est bien noir !

Compléter la structure de la page HTML

Ce qui a été produit

Lors des activités proposées à la fin du cours précédent, vous avez mis en place une page html en vous appuyant sur des gabarits simples mis à votre disposition. Ces gabarits présentaient 2 structures rédactionnelles schématisées ainsi :

  • h1 – p – h2 – p – p – h2 – p – p
  • h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p

Je vous ai laissé libres de choisir la structure qui vous semblait la mieux correspondre à vos besoins en matière de rédaction. La seconde structure nécessite en effet la mise en place d’un texte plus long (et demande donc plus de travail) !

J’ai insisté sur le découpage des textes collectés pour qu’il corresponde à ces plans. Je vous ai demandé de bien équilibrer la longueur de vos paragraphes (en simplifiant le texte si nécessaire).

Je vous ai également demandé de bien aérer la présentation de votre code source pour faciliter la vision de votre structure dans votre éditeur de code (et aussi dans Slack, quand vous publiez votre fichier html en pièce jointe).

➜ Avant d’aller plus loin, veillez à ce que vos titres permettent immédiatement de comprendre de quoi il est question. Il s’agit de faire en sorte que le message essentiel du texte soit perceptible au premier coup d’œil, à la lecture des titres et des sous-titres.

Le premier paragraphe est un paragraphe d’introduction nommé chapô. Il résume tout ce dont il va être question dans le suite du texte. Sa lecture doit donner envie de lire l’article, en informant déjà très clairement l’internaute sur l’essentiel !

Ce que nous allons ajouter

1 – Ajouter des filets séparateurs

Comme vous avez pu le voir sur la précédente image, quand tous les styles sont désactivés, les séparateurs revêtent une importance particulière. Dans l’exemple qui nous intéresse, ils permettent de mettre en valeur le chapô.

➜ Je vous invite donc à placer un filet séparateur avant et après le premier paragraphe qui suit le titre de niveau 1. Cela se code à l’aide de la balise autofermante <hr> (à ne pas confondre avec <br>).

Nous verrons plus tard comment les styliser et les personnaliser pour leur donner une couleur, une épaisseur ou une longueur différente.

➜ Vous allez également ajouter un filet séparateur à la fin de votre texte avant d’insérer un nouveau paragraphe d’une seule ligne de texte mentionnant votre nom dans une phrase comme celle-ci “Exercice réalisé par Prénom Nom”.

Cela va me permettre de ne pas trop me mélanger les pinceaux en prenant connaissance de vos publications 😉

2 – Ajouter une citation

➜ À l’endroit que vous jugerez le plus approprié, je souhaiterais que vous intégriez une citation. Inutile d’ajouter les guillemets, ceux-ci seront affichés (ou non…) lors de la stylisation CSS. Inutile, non plus, de mettre le texte en italique. Cela se fera (ou non…) avec l’application des styles.

Il est intéressant de savoir comment les navigateurs gèrent l’affichage de ce type de contenu (généralement en décalant la citation par rapport à l’alignement à gauche des paragraphes de texte courant)

Une citation s’intègre dans le code source entre les balises <blockquote> et </blocquote>.

3 – Ajouter une liste de liens

Votre texte traite d’un sujet dont il a sûrement été question dans d’autres articles en ligne, sur d’autres sites ou même, dans des livres publiés chez tel ou tel éditeur. Communiquez ces références à vos lecteurs.

➜ Commencez par élargir le champ de votre recherche et faites une sélections des meilleurs articles et des meilleurs références en ligne concernant le sujet de votre texte. Vous intègrerez les liens menant aux sites sélectionnés dans une liste non ordonnée que vous allez créer, dans un chapitre intitulé “En savoir plus”. Ce chapitre et la liste de liens seront placés entre le dernier chapitre de votre texte actuel et le dernier séparateur mis en place précédemment.

Une liste non ordonnée est aussi nommée “liste à puces” du fait que les navigateurs affichent chaque item d’une telle liste précédé d’une puce.

La création d’une liste non ordonnée se code entre les balises <ul> et </ul>, chaque item de liste (chaque lien dans notre cas…) étant positionné entre les balises <li> et </li>.

Une liste ordonnée serait codée entre les balises <ol> et </ol>.

Comment coder un lien hypertexte ?

Un lien hypertexte est codé entre les balises <a> et </a>. Le texte placé entre ces balises est nommé “intitulé du lien”. Les navigateurs affichent les intitulés de lien en bleu et soulignent cet intitulé. Cependant, ce simple codage ne suffit pas pour atteindre la page cible en cliquant sur le lien.

Pour rendre le lien efficace, il est nécessaire d’encoder l’adresse URL de la page cible dans la balise d’ouverture. On insère donc cette adresse de la manière suivante :

<a href="https://domaine-site-cible.xxx" target="_blank">

Dans cette ligne de code, https://domaine-site-cible.xxx est l’URL fictive du site cible et le code qui suit est une instruction spéciale. Elle ordonne au navigateur d’ouvrir la page Web ciblée dans une nouvelle fenêtre ou un nouvel onglet. Cette dernière instruction permet à l’internaute de ne pas perdre la page où il se trouvait avant de cliquer sur l’intitulé du lien, au cas où il rebondirait de lien en lien bien loin de votre page. 😉

Examinez ci-dessous un exemple de liste de liens encodés en HTML, précédée d’un paragraphe d’introduction et du titre de niveau 2 “En savoir plus”.

Capture d'écran de l'encodage d'une liste non ordonnée de liens paramétrés pour s'ouvrir dans une nouvelle fenêtre ou un nouvel onglet.

Vous repèrerez également sur cette capture d’écran le codage d’une citation, entre balises <blockquote> et </blockquote>. Dans cette citation, les mentions oranges (&nbsp;) sont le codage de caractères insécables. Vous constaterez aussi que le Prénom et le Nom écrits dans la dernière ligne sont placés entre les balises <strong> et </strong>, ce qui les affiche par défaut en gras dans une fenêtre de navigateur.

4 – Mettre en valeur les mots importants

Votre article commence à prendre tournure ! Il est cependant entendu que dans le cadre de ce cours, je ne vous parle pas de référencement naturel ni d’expressions ou de mots clés pouvant optimiser le référencement de votre article par les moteurs de recherche. Cela vous obligerait à remanier bien davantage vos textes. Si le sujet vous intéresse, vous pouvez toujours vous référer aux cours Rédaction Web et Référencement Naturel.

Il existe cependant une technique simple pour optimiser le contenu d’une page Web en vue d’une meilleure indexation sur les pages de résultats des moteurs de recherche. Il s’agit tout simplement de mettre en valeur les mots importants du texte, tous axés sur le sujet principal de l’article. Pour cela il convient de les encoder entres les balises <strong> et </strong>.

Mettez entre balises <strong> et </strong> les expressions ou mots importants de votre texte.

Le navigateur, comme nous venons de le voir, affiche en gras les mots “forts”. L’affichage en gras attire l’attention sur ces mots (comme pourrait aussi le faire un affichage en italique…). Mais c’est la rôle sémantique de la balise <strong> qui importe le plus ! La balise <strong> permet en effet aux algorithmes des moteurs de recherche de mieux analyser le sujet de votre article en sachant ce que vous jugez importants dans votre texte.

➜ Je vous propose un test imparable pour savoir si vous avez mis en évidence les bonnes expressions ou les bons mots. Vous affichez votre texte dans le navigateur et vous lisez seulement les mots et expresions en gras. Si vous parvenez à saisir le message essentiel de votre article, alors vous avez fait du bon travail… Sinon, vous devinerez sans peine ce qu’il faut améliorer 😉

L’alternative <b>

Il existe une autre balise permettant d’afficher un texte en gras, sans pour autant que ces mots en gras soient jugés “forts” ou importants. Il s’agir de la balise <b>, qui n’a pas de fonction sémantique particulière.

➜ Je vous invite, pour tester l’usage de la balise <b>, de mettre entre <b> et </b> tout le premier paragraphe, le fameux chapô (ou chapeau, selon les orthographes…).

Si des mots ont été placés entre <strong> et </strong> dans le chapô, ils ne seront pas affichés “deux fois plus gras”. Ils seront cependant pris en compte comme mots importants par les moteurs de recherche.

Fin de la structuration et préparation de la stylisation

Si vous examinez maintenant votre texte dans la fenêtre de votre navigateur, même en désactivant les styles par défaut du navigateur, vous devriez vous rendre compte des avancées réalisées.

Votre texte est prêt à être stylisé ! Je ne vous ai pas fait intégrer d’image pour le moment. L’affichage des images sans application de style CSS détruirait l’ordonnancement visuel sur lequel nous avons travaillé jusqu’à maintenant, en particulier si ces images sont de grande taille.

Nous aurons l’occasion d’insérer plus tard une illustration dans notre page Web. Je vais vous montrer dès maintenant comment nous procèderons.

Collecter des illustrations

La première étape consiste à se mettre en quête d’une illustration pertinente pour votre article. J’utilise ici le terme “illustration” pour désigner une image servant à “illustrer” un texte. Il peut s’agir d’une photographie, d’un dessin, d’une infographie, d’un pictogramme, etc.

Pas question de choisir une image qui ne soit pas libre de droits ! Vous irez donc faire des recherches thématiques sur le site pexels.com (qui effectue ses sélections sur plusieurs sites d’images en même temps). Vous pourrez aussi choisir une illustration dessinée sur la banque d’images Ouch.

Si vous êtes inspirés, vous pourrez prendre en main de formidables outils de de photomontage et d’assemblage de dessins tels que Photo Creator et Vector Creator. Vous produirez alors sans difficulté des illustrations personnalisées correspondant parfaitement à nos sujets… et cela sans débourser un centime ni même devoir vous inscrire sur une plateforme Web.

Si vous souhaitez illustrer votre texte avec des icônes, vous en trouverez un grand nombre sur icones8.fr ou flaticon.com. Vous n’avez que l’embarras du choix (gratuit et payant…) !

Collectez ou produisez des images susceptibles d’illustrer votre texte avec pertinence. Partez du principe que pour une image publiée il faut en collecter 4, afin de faire le meilleur choix possible ! Placez le fruit de votre collecte dans un dossier que vous nommerez « img ».

Il n’est pas défendu d’utiliser Photoshop ou Illustrator. Souvenez-vous cependant que les images matricielles destinées à la publication en ligne sont en RVB et que leur formats d’enregistrement sont le JPG (ou JPEG), le PNG ou le GIF (pas de PSD, de TIF ou TIFF !). Pour les images vectorielles, leur format d’enregistrement est uniquement le SVG (pas de AI ou d’EPS !)

Intégrer une image

L’intégration d’une image s’effectue en paramétrant correctement la balise autofermante <img>. Il est nécessaire d’une part de préciser dans la balise <img> quelle est la source de l’image (indiquer au navigateur où se trouve l’image à afficher). D’autre part, il est obligatoire de formuler un texte alternatif (toujours dans la balise <img>).

Le texte alternatif sert à trois choses :

  • décrire l’image aux moteurs de recherche
  • offrir une alternative d’affichage si le navigateur ne parvient pas à afficher l’image
  • permettre aux robots lecteurs utilisés par les personnes malvoyantes de leur décrire l’image

Ce rouage essentiel du référencement des images est donc un exercice supplémentaire de rédaction. Vous en saurez davantage en consultant le dernier chapitre du cours RWRN.

Examinez ci-dessous le code d’intégration de l’image “woman-typing-writing-1800×1200.jpg”. Dans quel dossier est-elle placée ? Où se trouve ce dossier ?

Capture d'écran montrant le code d'intégration d'une image placée dans un dossier nommé "img".

Vous noterez que l’image est nommée sans utilisation de lettre majuscule ni de chiffre en début d’intitulé, sans utilisation de point ailleurs que devant l’extension, sans lettre accentuée ni espace.

Par ailleurs, les dimensions de l’image, en pixels, sont indiquées en fin d’intitulé de l’image. Cela s’avère très utile en design pour le Web, vous le découvrirez très vite 😉

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne