Les bonnes pratiques graphiques pour votre blog

Bon, avant de commencer, je ne vais pas me faire passer pour ce que je ne suis pas: je ne suis ni graphiste ni expert. Ok, je sais : je ne suis pas à la mode. Mais les modes passent et moi j’ai l’intention de rester.

Je suis blogueur intermittent depuis 6 ans et blogueur assidu depuis 1 an et demi. Je suis avant tout un internaute furieux, consommateur de sites et de blogs divers. Je voudrais vous livrer quelques réflexions pour rendre votre blog plus agréable.

L’espacement des lignes

Je ne comprends pas que certains publient sur leur blog comme on publie dans le journal du lycée. Il n’y a rien de plus fatigant que de lire sur un écran LCD, c’est-à-dire rétro-éclairé, c’est à dire encore, 99,9% des écrans que nous utilisons aujourd’hui. En conséquence de quoi, si les lignes du texte jouent à touche-touche, on se fatigue et on plisse des yeux pour les suivre. Que celui qui n’a jamais commencé une ligne et décroché à la moitié de la largeur sur la ligne suivante me jette la première pierre…

L’espacement que j’utilise sur mon blog (propriété CSS line-height) est de 1.625 em, comme dans le dernier thème WordPress par défaut, Twenty Eleven. Cela permet de laisser entre chaque ligne un intervalle supérieur à la hauteur d’une lettre, ce qui a pour conséquence de bien détacher les lignes et de ne pas vous obliger à les suivre du bout de la souris (comme chez Maïa Mazaurette et tant d’autres).

En plus, aérer son texte lui donne un côté précieux et luxueux : regardez les livres d’art, les lignes ne sont jamais toutes serrées.

La largeur des paragraphes

Désolé, mais je ne suis pas convaincu par les thèmes à largeur variable, qui vous produisent du texte en pleine largeur façon Wikipédia. Suivre une ligne sur 1440 voire 1600 pixels de long, il faut tenir la distance…

À l’inverse, écrire des paragraphes de 300 pixels de large, en prenant vos yeux pour la touche « retour chariot », il ne faut pas abuser non plus. Personnellement, mes colonnes de texte font 595 pixels de large, et je trouve ça très bien.

Le blanc comme arrière-plan

Ok, le blanc c’est sobre, passe-partout, c’est LA solution pour les allergiques aux codes couleurs hexadécimaux (ça existe ?). Mais le blanc, en fond de page, sur un écran LCD, ça me fait bronzer la rétine ! Par petites touches, ok, mais sur toute une page, ça émet beaucoup trop de lumière.

Utilisez des gris pâles, ou une couleur dominante de votre charte graphique très éclaircie, mais de grâce, renoncez au blanc !

L’effet arc-en-ciel

Le blanc c’est mal, mais les couleurs aussi ! Entendons-nous : 3 couleurs, c’est bien pour une charte graphique. Plus, c’est trop. Et si possible, évitez les couleurs vives.

Pourquoi ? Parce que l’effet bariolé, ça fait amateur, sauf si c’est vraiment maîtrisé. Et surtout parce qu’une charte graphique bien faite est censée mettre en avant le contenu, c’est à dire le texte, et que si vous attirez l’oeil partout (sur les bannières, sur les colonnes latérales, etc.) vous déconcentrez le lecteur.

On est déjà bien assez agressé par des pop-ups, des pubs, des bannières et j’en passe, alors faites sobre et reposant. À vouloir attirer l’attention partout, finalement, tout se retrouve mêlé dans une bouillie colorée infâme. C’est une erreur de débutant.

Les blocs non délimités

Sous couvert de minimalisme, certains thèmes font dans le monochrome avec juste du texte. Visuellement, rien ne distingue l’article, l’en-tête, les colonnes latérales, et le pied de page. Ni bloc de couleur différente, ni bordures : tout est lié dans un bel aplat. C’est nul parce qu’on n’est pas sensé deviner quoi est quoi, et on manque de repères visuels. Exemple chez un blogueur soit disant « professionnel », mais c’est loin d’être le pire.

Ça, c’est une considération personnelle qui n’est peut-être pas à prendre pour argent comptant. Mais je pense que c’est beaucoup mieux de séparer les zones de façon explicite.

Les polices à la con

Ok, votre super police trouvée sur Google Font est super hype, sexy, design… Mais non, elle n’est pas lisible, et encore moins avec des lunettes. Vous faites un blog ou un magazine de mode ? Bon, et bien si vous voulez être lu, vous savez qu’il vous reste à faire.

De façon générale, vous devez aussi pensez aux gens qui ont des problèmes de vision plus ou moins graves : certains ont juste besoin de lunettes et de gros caractères, d’autres, d’un logiciel de synthèse vocale. Mais pourquoi le web devrait-il leur être interdit ? Les handicapés s’approprient internet, et on ne peut que s’en réjouir.

Les textes soulignés

En quelle langue il faut répéter que le soulignement est réservé exclusivement aux liens ?!

Pour mettre des mots en valeur, on dispose du gras et de l’italique, voire d’une taille de texte plus imposante, d’effets d’ombrage ou de changement de couleur. Mais on ne souligne jamais rien d’autre que des liens !

Les objets non alignés

Combien de fois on peut voir des photos ou des vidéos non justifiées ? Aujourd’hui, toutes les images ou presque font plus de 500 pixels de large, et les players divers permettant d’intégrer une vidéo acceptent tous des paramètres de largeur. Ce n’est quand même pas difficile de se débrouiller pour que les bords des objets coïncident avec les bords du texte où ils sont intégrés.

Si vous regardez bien, sur mon blog, toutes les vidéos et les photos en pleine largeur font 595 pixels de large, c’est-à-dire la largeur de ma colonne de texte. C’est quand même plus propre, comme rendu, non ?

Les billets-fleuve sans intertitres

Vous avez le droit d’écrire des articles (très) longs, mais personne ne les lira jusqu’au bout si on ne sait pas où vous nous emmenez. Pour ce faire, ce n’est pas très compliqué : il suffit d’insérer des titres entre les paragraphes, de façon à :

• dégager la structure du texte,
• faire ressortir les idées clé,
• relancer l’attention du lecteur.

En plus, écrire ces intertitres en H3/H4/Hn, c’est bon pour votre référencement dans les moteurs de recherche. L’idéal étant d’inclure une table des matières (Table of Content) en début d’article, comme dans Wikipédia. Sous WordPress, ça se fait facilement avec les plugins qui vont bien. En voyant le sommaire, le lecteur sait où il va.

Et puis, tant qu’à faire, limitez aussi la taille de vos paragraphes, ça ne fera pas de mal.

Conclusion

Je pense avoir fait le tour de la question dans ce mini tuto en forme de coup de gueule. Certains de mes points de vue se discutent mais j’espère vous avoir convaincu de leur bien fondé. À mon sens, le maître-mot d’un blog est sobriété : peu de couleurs, peu de distractions, juste l’essentiel. Plus c’est simple, plus le lecteur s’y retrouve. Et plus c’est frustrant pour vous parce qu’il y a tellement de choses intéressantes que vous auriez voulu intégrer à votre page…

Mais le roi, c’est le lecteur !

Vous aimerez ces articles :

Outils pour blogueurs

Je vous propose de découvrir une sélection d'outil que j'utilise au quotidien sur ma tablette pour bloguer.

Ces applications, photos, statistique, blogging, ou autres, vous rendront service dans votre activité de blogueur.