Comment optimiser la typographie et la présentation de son blog?
Ressources:
Transcription:
L’objectif principal de ton blogue, c’est de faire en sorte que les gens te lisent. Personnellement, je trouve que c’est quand même pas mal évident. Pourtant, rares sont les blogues qui optimisent leur mise en page et leur typographie pour inciter à lire.
Ça t’est sans doute déjà arrivé. Un blogue que tu aimes partage un article sur Facebook, tu trouves ça intéressant et tu cliques dessus. Une fois rendu sur le site, les choses se gâtent — on dirait qu’ils ne veulent pas que tu lises leur texte, mais plutôt que tu cliques sur une de leurs publicités.
Franchement, c’est probablement ça qu’ils veulent. Ils optimisent pour les revenus publicitaires, pas pour le lectorat. Et si tu veux mon avis, c’est une grave erreur.
Je pense qu’ils perdent au change parce que la confiance et l’appréciation de tes lecteurs valent pas mal plus qu’une poignée de clics additionnels sur des bannières publicitaires.
À la place d’optimiser pour les clics sur les annonces, il faut optimiser pour la Cognitive Ease. C’est un terme qui, malheureusement, n’a pas de traduction francophone, mais il réfère à la facilité avec laquelle ton cerveau traite les informations.
Pour faire une histoire courte, lorsqu’on est dans un état de Cognitive Ease, c’est-à-dire que notre cerveau n’éprouve aucune difficulté à décoder ce qu’il voit, on est plus de bonne humeur, le temps de lecture passe plus vite, on fait naturellement confiance à l’auteur et on le trouve plus sympathique.
L’état contraire est ce qu’on appelle le Cognitive Stress. Dans cet état, on est sur nos gardes, on ne fait pas confiance à l’auteur et la lecture semble plus longue.
Comme tu vas l’avoir deviné, plus ton site web facilite le traitement des informations, plus les gens vont rester longtemps sur ton site web et plus ton taux d’abonnement va être élevé.
Non seulement ça, mais tu vas développer un lien de confiance avec tes lecteurs qui va propulser ton blogue vers le sommet parce qu’ils seront plus susceptibles de commenter et partager sur les médias sociaux.
Et on va en reparler plus tard dans le module de monétisation, mais la confiance est vachement importante parce qu’on ne monétise jamais un blogue, on monétise le lien de confiance entre le blogue et son audience.
Plus ce lien-là est fort, plus tu vas faire d’argent pour chaque lecteur.
Bon. Maintenant que tu sais à quel point c’est important de faciliter le traitement des informations sur ton blogue, la question reste : comment. Et dans cette leçon, c’est exactement ce que tu vas apprendre.
Il y a 2 éléments à la base d’une bonne lisibilité : la mise en page et la typographie.
Mise en page & typographie
Ça commence à être à la mode, mais je vais faire mon hipster et dire que je le faisais bien avant que ce soit cool.
Yep, je parle d’enlever la sidebar.
Tu dois sans doute te dire « What!? Enlever la sidebar? Ben voyons, tous les blogues ont une sidebar, c’est quoi cette affaire-là! »
Ça peut paraître étrange, mais rassure-toi, je ne suis pas devenu fou.
En fait, les gens ont commencé à faire ça depuis que Brian Harris, un blogueur américain assez populaire, a fait une étude de cas où il démontre que retirer sa sidebar lui a permis d’augmenter le taux d’inscription à son infolettre de 26 %!
26 %, c’est immense. Alors non seulement ton blogue va être plus clean, mais il va également être plus performant.
Si la première étape est d’enlever la sidebar, alors la deuxième étape est de revoir la largeur de ligne de ton blogue. L’erreur que les gens vont faire à cette étape est de laisser leur texte prendre l’ensemble de la page, ce qui donne de longues lignes de texte.
Le nombre de caractères optimal par ligne se situe entre 50 et 75. Donc soit tu augmentes la taille de ton texte ou tu réduis la largeur de ta ligne.
L’explication compliquée veut que lorsqu’on lit, on ne regarde pas chaque mot individuellement pour essayer de trouver le sens de la phrase. À la place, on balaie la ligne d’un point à l’autre et, sans qu’on le sache, notre cerveau analyse ce qu’il voit dans sa vision périphérique. Comme ça, lorsqu’il arrive à la seconde ligne, il a déjà commencé à interpréter le sens de la phrase sans que tu le saches.
Pour augmenter notre vitesse de lecture, on doit s’entraîner à augmenter la taille de notre vision périphérique en commençant à lire une ligne à partir du deuxième ou du troisième mot au lieu de débuter à partir du premier. Même chose lorsqu’on termine une ligne. On termine quelques mots avant la fin et on force notre cerveau à interpréter la phrase à partir des données qu’il a récoltées dans sa vision périphérique.
Bref, pour revenir à nos moutons, ça veut dire que lorsque la ligne est trop longue, notre « buffer » de vision périphérique se remplit, ce qui fait que lorsqu’on arrive à la seconde ligne on a déjà flushé les mots qu’on avait dans notre « mémoire temporaire » et ça rend le traitement de l’information plus difficile.
Il y a aussi une autre explication plus simple. Lorsqu’une ligne est trop longue, ça fait en sorte qu’on a de la misère à repartir à la bonne place lorsqu’on change de ligne, ce qui brise le flow de lecture.
Peu importe l’explication, ça cause du cognitive stress, exactement ce qu’on veut éviter!
Alors, il va falloir commencer par réduire la largeur de ton texte. Sur mon blogue, ma largeur de ligne est à 600px et la taille de mon texte est de 19 points, ce qui me donne environ 60 caractères par ligne, une valeur dans notre zone optimale de 50 à 75 caractères.
Je te recommande de te tenir dans des valeurs similaires. Tu risques très certainement d’augmenter la taille de ta police et c’est correct comme ça. Un blogue devrait avoir une police d’écriture d’au moins 16 points et ça peut facilement aller jusqu’à 22 points, dépendamment de la largeur du layout.
Ce qui m’amène à parler de deux autres points importants : l’espace entre les lignes et l’espace entre les paragraphes.
L’espace entre les lignes est communément appelé la hauteur de ligne. Si ta police d’écriture est de 12px et que ta hauteur de ligne est de 12px, alors les lignes vont se toucher entre elles.
Ce que tu veux, c’est avoir une hauteur de ligne allant de 1.35 à 1.5 fois la taille de ton texte. Sur le web, c’est assez facile à faire puisqu’on a juste à marquer le ratio et non le nombre de pixels. Je vais bien sûr te montrer comment faire ça dans la leçon sur la mise en page.
Bref, il n’y a pas que l’espace entre les lignes qui est important, il faut également s’intéresser à l’espace entre les paragraphes.
La plupart des gens font un retour de ligne pour délimiter leurs paragraphes, mais ça, c’est vraiment stupide et j’espère que si tu fais ça, tu vas cesser immédiatement.
Lorsque tu es dans Word, par exemple, tu peux soit faire « enter », ce qui va faire un changement de paragraphe, ou encore faire « shift+enter » ce qui va faire un retour de ligne.
Ou, encore pire, les gens confondent les retours de ligne avec les paragraphes, ce qui mène à des erreurs encore plus difficiles à corriger.
Dans Word, il existe une option pour ajouter un espace après les paragraphes, mais ce n’est pas tout le monde qui l’utilise. Alors ce que les gens font, c’est qu’ils insèrent un paragraphe vide entre deux paragraphes pour délimiter leur paragraphe…
Sur le web, c’est particulièrement mauvais puisque si jamais tu veux changer l’espacement entre tes paragraphes et que tu as mis des retours de ligne ou des paragraphes vides, ça va être impossible à faire pour que ce soit constant partout!
Il va falloir que tu édites chacun de tes articles pour le formater comme du monde, ce qui va être long et plate.
Donc pour t’éviter ça, il faut que tu délimites chacun de tes paragraphes avec un espace équivalent à un ratio de 50 à 100 % de la taille de ta police.
Donc, si ton texte est de 24px, ça va te prendre 24px d’espace entre tes paragraphes. Et si jamais tu trouves que c’est trop, eh bien tu n’auras qu’une seule valeur à changer pour que tout ton site s’ajuste automatiquement.
Bref, une fois que tu vas avoir changé ta police de corps, ça va amener un autre problème… La taille de tes titres.
Tes titres doivent suivre un ratio spécifique. Pour t’aider à rebalancer tout ça, je t’invite fortement à aller sur Type-Scale.com. Tu n’auras qu’à y entrer ta police ainsi que la taille de ton texte et il va te sortir tout ce dont tu as besoin pour rebalancer la mise en page de tes titres.
Parlons de police d’écriture maintenant!
On sait tous qu’il existe deux types de polices. Celles avec serif, et celles sans serif.
Pour te rafraîchir la mémoire, les serif représentent les petits empattements aux extrémités des lettres. La plupart des gens vont te dire que c’est mieux d’avoir du serif sur papier et du sans-serif à l’ordinateur. Malheureusement, c’est un mythe!
C’était vrai avant, puisque la densité de pixel était très basse. Mais maintenant, n’importe quel moniteur est capable de présenter une police avec serif comme du monde, donc ce n’est plus un problème.
Le choix de la police revient donc à un choix d’image de marque.
Toutes les polices d’écriture possèdent une personnalité, et cette personnalité est transmise au lecteur et influence ce qu’elle va penser de ton article.
Si j’étais toi, j’éviterais à tout prix les polices comme Impact et Comic Sans qui te donnent l’air d’un pré-ado.
Si tu veux inspirer la confiance et la crédibilité, je t’incite à choisir Garamond ou Baskerville.
Si tu veux un look plus clean, tu peux choisir Roboto (la police des téléphones android), Open Sans (celle que je prends sur mon blogue), ou Droid Sans.
Les trois dernières polices que je viens de nommer sont des polices offertes gratuitement par le service de Google Fonts. Elles s’intègrent super facilement à n’importe quel site web, alors je t’invite à faire le tour de leurs polices pour voir les différentes possibilités! Pour voir différentes combinaisons intéressantes, tu peux aussi consulter cet article du blogue de Canva (un outil vraiment génial, mais ça, ce sera pour un autre article!).
Je peux aussi te recommander un outil qui s’appelle FontFace Ninja. C’est un petit plug-in qui te permet de connaître la police d’écriture, la taille ainsi que la hauteur de ligne de n’importe quel site web!
Juste avant de changer de sujet, il faut que je prenne le temps de mentionner qu’il ne faut JAMAIS, au grand JAMAIS utiliser une police all caps.
Le fait qu’on ait des minuscules et des majuscules fait en sorte qu’on a une coastline, c’est-à-dire que les petits bouts qui dépassent d’un bord et de l’autre nous aident à interpréter les mots. Sans ça, tout l’exercice devient plus difficile!
Bon. On a fait le tour pour ce qui est de la police de texte, maintenant je vais parler de deux autres points importants de tous blogues : les couleurs.
Trop souvent, les gens essaient « d’ajouter de la vie » ou de rendre ça « plus joli » en mettant plein de couleurs niaiseuses un peu partout.
Dans la prochaine leçon, je vais te parler de l’agencement des couleurs de ton site web, mais pour l’instant, on va se concentrer sur la portion texte.
50 % des gens font de l’astigmatisme, ce qui veut dire que tu dois absolument mettre ton texte en foncé sur fond pâle et non l’inverse. Je sais qu’une écriture blanche sur un fond charcoal donne un look futuriste cool, mais c’est très mauvais pour tes lecteurs alors tiens-toi en loin.
La première version de mon blogue était faite comme ça et j’avais plein de monde qui chialait.
Voici ce que je recommande. Prends un fond complètement blanc, ou presque complètement blanc, et utilise une police presque complètement noire.
La raison pourquoi je ne recommande pas d’avoir du texte complètement noir est qu’un trop grand contraste peut donner l’impression que le texte oscille ou vibre chez certains lecteurs, dépendamment du type d’écran qu’ils utilisent. En réduisant le contraste d’un brin, on passe à côté du problème.
Finalement, il me reste un dernier point à aborder : le fond de ton blogue.
La plupart des blogues ont des layouts qu’on appelle « Boxed », c’est-à-dire que le texte est dans une boîte et non en pleine page.
Si ton layout est boxed, alors ça veut dire que tu dois faire quelque chose avec le background derrière cette boîte.
La plupart des gens font l’erreur de vouloir être créatif et de mettre ça bleu, jaune, ou pire, avec une mosaïque d’étoiles.
Je te recommande fortement de garder ça uni et d’une couleur très sobre comme gris foncé. Si jamais tu veux absolument mettre une mosaïque, alors je te recommande le site web subtlepatterns.com. Ça va te donner un bon choix de designs pas trop intrusifs.
Certains sont plus apparents que d’autres, alors tu peux réduire leur opacité en Photoshop ou encore en CSS pour rendre ça encore plus subtil.
Le fond est là pour se faire oublier. L’important, c’est ton texte!
Conclusion
Cette leçon était assez paquetée! J’espère que je ne me suis pas trop emballé, J’ADORE parler de typographie.
Alors que toutes les règles que j’ai mentionnées dans cette leçon sont importantes, je dirais que LA plus importante est celle de la longueur de ligne. Si tous les sites corrigeaient ce petit détail, le web s’en porterait tellement mieux!
Dans une prochaine leçon, je vais te montrer comment mettre tout ça en place sur ton site et je vais même te donner tout le code que tu as besoin de mettre sur ton site pour avoir exactement la même typographie que sur le blogue que je suis en train de construire!
Comme toujours, si tu as des questions, sens-toi libre de me les poser dans la section commentaires ci-dessous.
On se revoit dans une prochaine leçon, et d’ici là, passe une belle journée!