Leçon n°3 : mise en forme de vos contenus pour le web

Vous devez mettre en valeur vos contenus en optant pour une mise en forme adaptée à vos articles. Non seulement la mise en page de votre article est importante, mais également l’insertion de visuels appropriés. Voici les clés de votre futur succès :

La mise en forme

  • Les puces

N’hésitez pas à utiliser des puces (les points ou les numéros) pour apporter de la clarté et de la construction à votre contenu. Cela permet au lecteur de s’y retrouver plus facilement.

  • Aérez les textes

Construisez vos contenus de façon à ce que le lecteur n’ait pas la sensation d’étouffer et que cela soit trop long à lire. Votre texte doit être aéré et clair. Créez des paragraphes, des espaces vides et utilisez des intertitres afin de donner une impression de légèreté dans la lecture de votre article.

  • Organisez votre article

La mise en forme de vos contenus passe par les balises html. Elles sont là pour vous aider à structurer votre texte. N’oubliez pas Écrire pour le web en respectant les règles. dont nous avons récemment parlé. Allez du plus large vers les détails. En utilisant des titres h1, h2, h3, h4 etc., vous organisez votre article et cela devient plus compréhensible pour le lecteur. Voici quelques règles à suivre lors de l’utilisation des balises :

  1. Vous devez toujours commencer par une balise h1 pour aller en descendant jusqu’à h6.
  2. Si vous ne souhaitez pas utilisez de balises, placez au moins la h1, qui est vitale.
  3. Cette balise h1 ne doit être utilisée qu’une seule fois et doit contenir le mot clé.
  4. La balise h2 doit également contenir le mot clé.
  5. Les autres balises ne sont pas nécessaires, mais si vous les utilisez, placez y vos mots clés secondaires.
  6. Lors de l’utilisation des balises, vous ne pouvez pas en sauter. Par exemple, vous utilisez h1, puis h2, puis h3 etc. Vous ne pouvez pas faire h1, h4, h2. Vous devez respecter l’ordre.
  • Évitez de surcharger

Même s’il est essentiel de structurer votre texte en utilisant des puces, du gras ou bien de la couleur afin d’indiquer les éléments importants, n’en abusez pas. Trop de couleurs, de textes en italique etc. empêchent le lecteur d’aller à l’essentiel.

  • Les cadres

Au lieu de mettre votre texte en gras, en italique ou en couleur, faites des encadrés avec les portions de texte qui sont importantes et qui révèlent une information dont vous souhaitez que votre visiteur se souvienne. L’écriture dans ces cadres ne doit pas être trop grosse (même si elle sera plus grande que le reste de votre texte) et vous devrez utiliser une police lisible.

  • Les couleurs et la police d’écriture

En général, sur le web, l’écriture est noire sur fond blanc. Par la suite, dans vos encadrés, vous pouvez utiliser une écriture de couleur différente. Cependant, n’oubliez pas une des premières statistiques dont nous avons parlé : « La lecture sur écran est 25 fois plus lente que la lecture sur papier ». Si vous imposez au lecteur une difficulté supplémentaire, il risque de ne pas prendre la peine de lire votre texte. Évitez donc les fonds noirs avec écriture blanche, jaune ou rouge ou encore, les polices d’écriture trop petites ou difficiles à lire. Pensez avant tout au lecteur.

Les visuels

Une bonne mise en forme, c’est également l’insertion de visuels adaptés à votre contenu.

  • Leur importance

Souvenez-vous des statistiques annoncées dans la première leçon, à savoir : les lecteurs retiennent 80% de ce qu’ils voient, 20% de ce qu’ils lisent et seulement 10% de ce qu’ils entendent. Vous comprenez dorénavant l’importance des visuels dans vos articles. Ajouter une image peut être vital si vous apportez des informations au lecteur qui ont besoin d’être visualisées, comme dans cet exemple :

Mise en forme

Ici, vous constatez que le visuel est important pour bien comprendre comment réaliser des bracelets brésiliens. Des explications ne suffisent pas.

  • Leur contenu

Si votre article ne nécessite pas l’utilisation d’images pour illustrer votre contenu, cela ne doit pas vous empêcher d’en utiliser pour le rendre plus attractif. Vous pouvez créer une infographie en image, une illustration drôle qui reprendrait une phrase clé de votre contenu, une image animée ou encore un encadré avec une phrase cliquable, à partager sur les réseaux sociaux.

L’utilisation de couleurs adéquates, en harmonie avec le reste de votre site sont nécessaires. Un contenu esthétique donnera encore plus envie à un visiteur de le lire.

  • Leurs objectifs

         Premier objectif :

Dans un premier temps, le but d’un visuel est de rendre votre texte plus attrayant, plus léger. De cette façon, le visiteur a envie de le lire, il a envie de scroller et de descendre jusqu’en bas de votre page. Lorsque l’on sait qu’un internaute lit environ le quart d’une page avant d’en changer, vous aurez déjà remporté une belle bataille.

         Deuxième objectif :

Ensuite, le visuel permet de transmettre au lecteur des infos complexes d’une façon ludique. Prenons l’exemple du CNES (centre national d’études spatiales) qui partage en image des informations sur la mission Galileo. Très ludique, cette mise en forme par visuel permet d’assimiler des infos que le lecteur n’aurait probablement pas lu si elles avaient été simplement écrites dans un paragraphe :

Mise en forme

         Troisième objectif :

Enfin, les infographies mettent en valeur votre texte et sont une valeur ajoutée à vos articles. Ils démontrent votre expertise et votre connaissance du domaine. Pour cela, n’hésitez pas à citer toutes les sources qui vous ont permis de mettre en place votre infographie.

  • Les droits d’auteur

N’oubliez pas que la majorité des images comporte des droits d’auteur. Soit vous utilisez des images gratuites et libres de droit, soit vous investissez dans des images payantes. Attention à ne pas abuser des images basiques, qui ne sont que de la « décoration » dans votre article. Si elles n’apportent rien au lecteur, cela ne lui donnera pas envie de scroller. N’hésitez pas à créer vous-même vos visuels.

Il existe plusieurs logiciels gratuits sur le web qui vous permettront de créer vos propres visuels. Cela évitera également de retrouver toujours les mêmes images un peu partout sur le net. Soyez créatifs et imaginatifs. Il suffit simplement de vous lancer et en quelques temps vous pourrez créer vos propres visuels. Comme je vous l’indiquais plus haut, c’est une valeur ajoutée à votre article.

  • Leur format

La dimension de votre image doit être adaptée à la taille de votre article. Si votre image est trop large, vous ne pourrez pas l’insérer entièrement et vous serez obligé de la rogner. N’oubliez pas que votre mise en forme doit être harmonieuse.

  • Leur qualité

En terme d’image, la qualité joue un rôle primordial puisqu’elle représente votre blog. Si les images sont floues et d’une mauvaise qualité, vous renvoyez une image négative. À l’inverse, si les images sont de bonne qualité, vous apportez une valeur ajoutée à votre article. Pour cela, vous devez vous attacher à insérer des images ayant une bonne définition ainsi qu’une bonne résolution. Voici un exemple :

Mise en forme

  1. La définition de votre image. La définition d’une image, c’est le nombre de points (pixels) qui constituent une image. Pour connaître ce nombre, il suffit de multiplier les pixels de sa largeur par ceux de sa longueur. La définition de l’image de gauche est de 50 200 pixels (200 x 251) alors que celle de droite n’est que de 18 120 pixels (120 x 151). Il en résulte que l’image de droite est floue comparée à celle de gauche qui est très nette. Pourquoi ? Tout simplement parce que l’image de droite a été redimensionnée et c’est ce qui vous arrivera si vous travaillez à partir d’images peu pixelisées que vous redimensionnerez à la taille de votre site. Il s’agit là de la résolution…
  2. La résolution de votre image. La résolution d’une image, c’est la densité des pixels par pouce (DPI – dot per inch). Vous constatez ainsi que celle de gauche est plus importante que celle de droite. Ce qui signifie que sur la même largeur d’image, vous avez plus de pixels à gauche qu’à droite et, idem pour la longueur. Voici donc pourquoi l’image de gauche est plus nette que celle de droite. Pour mieux vous expliquer ce qui se passe au-dessus, voici un schéma simplifié :

Mise en forme

  • Leur poids

Le poids des visuels a également toute son importance. Si vous considérez les deux images de biscuits au dessus, vous remarquerez que l’image de gauche pèse 147 Ko contre 53 Ko pour celle de droite. D’une manière générale, il est préférable de ne pas utiliser de visuels de plus de 200 Ko. Idéalement, 50 Ko est une taille très correcte. Surtout si ce sont des visuels que l’internaute peut télécharger. Dans ce cas-là, indiquez le poids du document afin que votre visiteur sache s’il a la possibilité de le télécharger ou pas, selon le type d’appareil qu’il utilise.

  • Que choisir entre jpeg, jpg ou png ?

Chaque format d’image a son lot de qualités et de défauts. Le format PNG sera celui qui vous apportera la meilleure pixellisation. Par contre, son poids sera plus lourd.

L’avantage du jpeg ou jpg est qu’il vous propose de compresser vos images. La solution peut être intéressante si la qualité qui en résulte est à la hauteur de vos attentes.

Certains sites prennent du temps à charger les visuels donc, s’ils sont trop lourds, votre visiteur n’attendra pas et risque de quitter la page avant d’avoir pu les découvrir. À vous de choisir le format correspondant le mieux à vos besoins.

  • La quantité

Enfin, dernier point concernant les visuels et non des moindres : la quantité de visuels proposés. Vous devez trouver un bon équilibre afin que la mise en forme de votre contenu ne soit pas submergée de visuels au point que l’internaute se lasse. Ne pas en mettre assez risque d’ennuyer le lecteur et en mettre trop le lasser. Mettez vous à sa place et tentez d’être pondéré dans vos choix.

Au terme de cette troisième leçon, vous constatez que la liste des techniques à assimiler pour bien écrire pour le web s’allonge. Vous avez toujours la possibilité de faire appel à des rédacteurs professionnels ou bien suivre une formation en ligne pour bien rédiger.

Article suivant : Leçon n°4 : référencement naturel et optimisation de vos contenus

Article précédent : Écrire pour le web en respectant les règles.

 

Formation rédaction web