7 principes d’ergonomie et de lisibilité à suivre pour que votre blog soit plus lu

Quand on tient un blog, la mise en forme de l’ensemble est largement aussi importante que ce qu’on y raconte.

On le dit depuis longtemps, mais quand je regarde les blogs de beaucoup de mes confrères, je me dis qu’on n’en parle pas assez souvent.

A l’initiative de mon défi du mois de décembre (qui va s’achever samedi), j’ai décidé aujourd’hui de poursuivre l’excellent article de Julie Fortin (de l’Académie du livre) sur le calendrier de Noël du Marketing, qui vous parle de typographie et de mise en page.

Parlons donc de typo et de mise en forme pour un blog.

Et si on reculait ?

Il y a quelques années, plusieurs personnes ont décidé qu’il fallait essayer de standardiser “l’écriture web” afin de rendre le tout plus ergonomique.

Like - Thumb Up

Un certain nombre de règles d’ergonomie ont donc vu le jour dans le but que les webmasters les suivent le plus possible lors de la création des sites web.

Quand les blogs sont apparus, comme par magie, une bonne partie de ces règles ont été oubliées. Ce qui donne parfois (souvent), des blogs lourds et mal agencés, et surtout fouillis à souhait.

Il est incroyable d’assister encore à ça à l’aube de 2012, alors qu’on devrait plutôt AVANCER au lieu de reculer.

Par exemple, la bonne vieille page “tunnel” refait surface. C’est à dire la page d’accueil qui ne donne aucun contenu, mais juste des liens (voire un seul lien) vers du contenu profond.

On voit aussi réapparaitre les pop-ups. Ces fenêtres qui s’ouvrent de manière intempestive alors qu’on est en train de lire une page.

On assiste à une mise en page en 3 voire 4 colonnes, où le texte central (le plus important) en est réduit à tout juste 25% de la page, alors qu’il devait représenter au moins 66% (les 2/3).

Quand on ne se retrouve pas devant un endroit qui clignote de partout, avec des bannières, des pubs et des encarts qui défilent à raison d’une image toutes les 10 secondes, quand ce ne sont pas des messages qui défilent toutes les 3 secondes.

Plus de fil d’Ariane. Plus de clic sur la bannière du haut qui ramène à l’accueil. Plus de plan de site accessible en un clic. Plus de bouton de remontée en haut de la page.

Bref, l’ergonomie régresse. Au profit de quelque chose d’autre. Mais quoi ?

Dans plusieurs articles, je vous disais que l’une des premières sources de trafic restaient les gens qui revenaient sur votre blog après l’avoir visité une fois.

Mais pour que les gens reviennent, ils doivent se sentir bien. Ils ne doivent pas galérer pour naviguer sur un blog. Et ils doivent pouvoir avoir accès à tout sans avoir à s’exploser les yeux face à des trucs qui clignotent dans tous les sens.

Bref. Un blog qui réussit n’agresse pas ses lecteurs. Il leur rend la vie un peu plus facile.

Les 7 principes à suivre

Voici 7 principes à respecter quand on a un blog.

Je pourrais vous dire que c’est un minimum et que c’est obligatoire, mais il y a tellement de blogs qui ne respectent pas ça que je vais encore passer pour un illuminé.

Alors je vous dirai seulement d’en suivre un maximum. Sur certains principes, vous verrez, je radote un peu. Mais c’est pas grave.

1. Un seul menu à droite ou à gauche

Une page web qui présente 2 menus en a un de trop. Pourquoi ne pas tout mettre dans un seul ? Ca permet de réduire les choix, et surtout ça renforce les clics sur les choses les plus importantes.

Mais surtout, ça ne fait pas passer le texte principal au second rang. Avec deux menus, la largeur du texte principal est obligatoirement inférieure ou égale à la somme des largeurs des menus. Et ce n’est pas bon.

Le texte principal doit au moins faire les 2/3 de la largeur total du contenu.

Sur ce blog, il n’y a qu’un seul menu, et il est DERRIERE le texte. Le texte principal est en avant. C’est le seul truc important à mes yeux sur un blog. Donc ce qui est important est devant.

Les menus, qui distribuent les autres rubriques, sont moins importants que le texte. Donc ils sont derrière.

2. Une police foncée sur fond clair

Ha ! Le gris sur fond blanc est toujours aussi illisible. Ca l’était il y a 10 ans, c’est encore pire maintenant que les supports varient et évoluent.

Ce qui est lisible, c’est le foncé sur le clair. Bleu foncé, gris foncé, vert foncé, marron foncé. Mais le plus lisible reste le noir sur blanc. Même si ça défrise les passionnés de design.

Moi, je ne lis plus les blogs en gris sur blanc. Je me désabonne, et quand j’en vois un, je zappe direct sans lire une seule ligne du contenu. Un blog est un distributeur de contenu. Comme un journal. Un journal écrit en noir sur blanc. Les blogs devraient faire pareil. Même si ça fait moins “joli” que du gris souris (grosse mode en ce moment).

3. Une seule chose qui bouge voire rien du tout

Quand on fait bouger quelque chose sur une page web, c’est pour attirer l’attention dessus. Quand on en fait bouger plus d’une, c’est pour déconcentrer les lecteurs.

Parce qu’il ne sait plus où regarder. Son regard passe du truc 1 au truc 2, et il est perdu. Hypnotisé qu’il est par ce mouvement incessant.

Donc, si vous avez un blog, et que vous avez la grande idée de mettre (au choix ou tout ensemble) :

  • Un slide avec les résumés des articles qui défilent en header
  • Un compte Twitter en live
  • Un trombinoscope Facebook qui défile
  • Une bannière de pub qui s’agite
  • Un texte quelconque qui clignote
  • Une vidéo qui se déclenche toute seule (même sans son)
  • Un gif animé qui bouge

…choisissez-en un (le plus important pour vous), et virez les autres. Mais au mieux, ne mettez rien qui bouge, car votre texte principal sera 3 à 4 fois moins lu

4. Pas d’objet qui apparait intempestivement

Allez, j’en remets une petite couche : Si votre idée est de faire apparaître une pop-up à l’ouverture de la page, histoire de récupérer l’adresse mail de vos visiteurs, comment dire ?

Ha oui… ARRÊTEZ !!!

Parce que ça gonfle. Parce que ça demande de cliquer pour fermer. Et parce que ça me donne envie de vous mettre une grande claque sur la courge.

Relisez cet article : La méthode infaillible pour mettre vos lecteurs en colère en moins d’une minute. Faites-en votre principe number one.

Et si vous avez décidé de ne pas mettre de pop-up sur votre blog, alors je vous embrasse.

5. Du texte de contenu en drapeau aligné à gauche

Le texte aligné à gauche (appelé aussi texte en drapeau), est celui qui est le plus lisible sur Internet.

Ce n’est pas forcément le plus joli. Mais d’un point de vue lecture, c’est de loin le plus facile, car mine de rien, les lignes différentes en longueur nous donnent un repère visuel supplémentaire, ce qui nous évite de sauter des lignes.

Un texte justifié, sur Internet, est bien plus difficile à lire, car il n’y a pas de point d’accroche pendant la lecture. En effet, toutes les lignes faisant la même largeur, le texte perd alors sa forme naturelle, et il est bien plus facile ainsi de sauter des lignes.

Donc ça nous bloque dans notre lecture, on doit remonter pour essayer de retrouver le fil de l’histoire, et on perd du temps.

Un article de blog, c’est quelque chose qui devrait être facile à lire. On ne devrait pas forcer pour le lire. Donc si possible, même si ça fait moins joli, mettez votre texte en drapeau. C’est plus lisible.

6. Des paragraphes courts

Encore ?? Hé oui. Encore. Les blogueurs n’écoutent pas ce qu’on leur dit. ils vous disent “oui oui”, mais ils continuent à vous présenter des paragraphes de 6 ou 7 lignes, qui ne sont jamais lus.

Un paragraphe idéal fait 3 lignes maxi. Et il aborde une seule idée force.

Les longs paragraphes ne servent qu’à présenter à vos lecteurs un truc qui leur rappelle les longues heures infernales qu’ils devaient consacrer à lire des gros pavés indigestes à l’école.

Donc si vous voulez que vos articles soient lus, aérez-les. C’est facile, il suffit de couper vos paragraphes après chaque phrase. Et de s’en tenir aux 3 lignes maxi.

Et de respecter le point 7 ;)

7. Une largeur de texte inférieure à 600 pixels

Quand c’est plus large, ça fatigue les yeux. Et la tête doit se déplacer. Un œil peut balayer maximum 600 pixels de large sans bouger. C’est ce qu’on appelle la vision périphérique globale.

Si le texte fait entre 600 et 800 px de large, alors les yeux doivent bouger, et c’est fatigant. Très très fatigant. Ca réduit notre capacité de lecture d’au moins 50%.

Et ça réduit aussi notre compréhension du texte car cela demande un effort trop grand qui fatigue notre cerveau.

L’idéal, pour un texte, c’est 450 px de large. C’est vraiment l’idéal. Pour les lecteurs rapides dont je fais partie, c’est fantastique car on peut englober le texte en se concentrant uniquement sur sa ligne centrale.

J’ai fait des essais. Je lis à 610 mots minute en moyenne sur un texte de 450 px de large, alors que ma vitesse tombe à 530 pour un texte de 600 px.

Un texte de 800 px de large me colle un mal de crâne dans les 5 minutes, et pour les textes plus larges, je ne les lis plus.

Bref, vérifiez la largeur de votre texte. S’il dépasse les 600 px, vos articles ne sont pas lu. Votre taux de rebond doit être pharaonique.

A vous de jouer

Que dire… A part qu’il est urgent que vous vous mettiez à suivre ce genre de conseils si vous avez un blog.

Pas parce que c’est moi qui vous le dis. Et pas parce que j’en ai décidé ainsi.

Mais parce que c’est ce que vos lecteurs veulent.

Ils veulent un endroit agréable. Un endroit où l’on se sent bien, et où on n’est pas obligé de forcer pour lire et naviguer dessus.

Bref, ils veulent juste pouvoir vous lire facilement.

Vous pouvez bien leur donner ça oui ?

Merci pour eux :)

Précédent

2 tactiques pour élaborer un mot de passe introuvable mais dont vous vous souviendrez toujours

Suivant

Vos emails sont-ils trop longs ? Faites ce test pour voir…

  1. Salut Yvon

    Je pense qu’il est inutile de le dire mais bon « Super article »

    Malgré les améliorations, je vois que certains points sont encore à travailler. Notamment sur la longueur des paragraphes où j’arrive encore à 5-6 lignes selon les articles.

    Ensuite pour reprendre ta phrase

    Dans plusieurs articles, je vous disais que l’une des premières sources de trafic restaient les gens qui revenaient sur votre blog après l’avoir visité une fois.

    Je viens de la lire dans ton ebook sur le trafic que je t’ai acheté ce matin et je suis tout à fait d’accord avec toi lorsque tu dis que tout faire pour apporter du trafic vers son blog et une bonne chose mais garder ce qui viennent est plus compliqué et pourtant primordial.

    Je souhaiterais au passage te féliciter pour cet ebook. Je ne l’ai pas encore fini mais les quelques pages que j’ai lu sont une vraie mine d’informations.

    Amicalement,
    Nicolas

    • Bonsoir Nicolas

      Et merci pour ton commentaire très sympa :)

      Les paragraphes trop long, c’est un peu comme se préparer pour une course de 1000 mètres, et au final courir 2500 mètres.

      On s’essouffle, et on a du mal à arriver au bout,

      Alors dans le cas du texte on saute.

      Pour t’en convaincre, tente une expérience. Ecrit des paragraphes de 7 ou 8 lignes de long, et à la 6ème ligne, dit que tu donnes 10 € au premier qui écrit « gagné » dans la case au bas de l’article (rajoute une case de formulaire vide et un bouton)

      Je te parie une pomme contre un bateau que pas 1% des gens ne vont demander le billet :)

      Parce qu’ils auront sauté au paragraphe suivant.

      Bonne nuit

      Yvon

      • J’aime bien cette idée de test :)
        Je vais très certainement tester un jour dans un article qui pourquoi pas traitera de la longueur des paragraphes.

        Pour ce qui est de ton exemple de course à pied c’est tout à fait ça. La comparaison est bien trouvé. C’est vrai que moi même je saute les paragraphes trop longs.

        Bonne nuit à toi aussi

  2. Bonjour Yvon,

    Je suis d’accord avec toi sur ces points concernant l’ergonomie.
    On a l’habitude de dire que le contenu est roi. Mais il faut que ce roi soit mis en valeur. Sinon, quand on le voit pas ou voit mal, qu’on n’ait même pas une seule envie de traîner près de lui. Et ben, on ferme la page et on dit Adieu.

    Pour dire que le contenu est roi si et seulement s’il est mis en valeur avec une bonne ergonomie.

    Amicalement,
    Sié Issa

    • Salut Yvon sympa l’article ! Il faut aussi se poser la question de la police, laquelle utiliser ? avec ou sans serif ? Helvetica, georgia, tahoma ?

      La taille de la police également, 15px parait bien ;-)

      Mais ce qui est vraiment intéressant effectivement c’est de ne pas surcharger le blog d’informations et surtout de liens pour ne pas diluer les cliques sur ce qui compte réellement. Enfin sinon ça montre simplement qu’il n’y a pas de véritable stratégie mise en place sur le blog. (cf: CTA bien identifiés)

      Le titre aussi mérite d’être bien lisible ;-)

      A bientôt !

      • Bonjour Benjamin

        Franchement va lire l’article de Julie sur le calendrier. Elle donne d’excellentes infos à ce propos.
        15px c’est beaucoup trop gros. Bien trop fatigant.
        Ensuite, cela dépend de la police. Sur le web, les polices avec Serif sont beaucoup trop lourdes (mais Julie en parle très bien dans son article).
        en outre, elles ne sont appropriées que pour les personnes plus agées, car plus habituées à ce style de police.

        Bonne journée

        Yvon

    • Bonjour Yvon,

      Ton article me fait penser que souvent les personnes n’arrivent pas à ce voir ce qui cloche sur leurs sites.

      Un petit sondage au passage peut être très précieux (en plus de respecter les principes que tu cites).

      Ce qui est intéressant également c’est de voir l’impact de ces changements (en analysant le taux de rebond, le retour des visiteurs…etc).

      Bonne journée ;)

      Nassim

  3. Bonjour Yvon,

    tu parles de largeur en pixel mais tu n’as pas parlé de la taille des caractères.

    Car une police plus grande pourrait être aussi bien en largeur de 600 px (ou peut-être plus) qu’une police plus petite en 450 px de large.

    As-tu fait des tests sur ce point-là ?

    J’ai personnellement un blog avec une police plus grande que la tienne mais la largeur dépasse légèrement les 600 px.

    Sur ton blog, tu en es à 540 px chez moi mais bon maintenant, avec les nouveaux pc, on peut agrandir ou rétrécir la taille de l’écran comme on veut.

    Donc la largeur est peut-être à définir en fonction de la taille des caractères.

    Pour le reste, je suis d’accord avec toi mais je dois encore tester le popup.

    En tout cas, je retiens cet article dans ma liste tellement il me semble indispensable.

    Geoffroy

    • BK

      Salut Yvon,

      Je reviens avant tout sur le point de la police et de son corps, soulevé par Benjamin et Geoffroy.

      Godefroy conseille grandement les polices à empâtement, genre Garamont ; recommandation à laquelle j’obéis sans discuter (pour une fois !).

      Reste le problème de la taille. J’ai personnellement opté pour un corps 12, mais j’ai récemment découvert, non sans agacement, que ce corps variait en fonction du navigateur. Sur Chrome, ça va, mais sur IE ou Firefox ça rétrécit au lavage (d’où mon changement de râlerie : je ne dis plus « yen a mare de la technique », je dis « yen a mare du bidouillage »).

      Alors évidemment, la largeur des lignes varie, ainsi que le nombre de lignes dans les paragraphes, etc. Bref, on est infoutu de maîtriser quoi que ce soit !

      Mis à part ça, j’ai cru comprendre que tu déconseillais de mettre un menu à droite et à gauche. Ce qui me semble tout à fait judicieux. Mais ôtes-moi d’un doute : tu n’as rien contre le menu horizontal, sous le header ? Je n’en vois pas sur ton blog ; je me pose donc la question. En tout cas, je ne saurais personnellement m’en passer, ne serait-ce que pour le retour à l’accueil (vu que tout le monde ne sait pas qu’on peut y revenir en cliquant sur le header ou le logo).

      Enfin, concernant les petites choses qui bougent, je me suis juste autorisé un gros émoticon animé à la toute fin d’un de mes articles. Est-ce encore trop ? Je n’ai pas eu le sentiment que ça pouvait gêner, mais bon, on sait jamais !

      Bernard

      • Salut Bernard

        Xtian conseille les polices sans empattement pour les personnes de moins de 40 ans.
        Pour éviter que la taille de police varie selon les navigateur, il faut la définir en « em » plutôt qu’en px ou pt.
        Une table des correspondance doit bien exister sur le net.

        Tiens, voici quelques infos intéressantes : http://www.designvegetal.com/gadrat/cours/informatique/CSS/CSS-point-em.html

        Concernant le menu horizontal, il est mieux d’en avoir un c’est exact. Je n’en ai pas mis par esthétisme sur ce blog, mais il y en a un de prévu malgré tout d’ici peu.

        Enfin, concernant les petites choses qui bougent, je me suis juste autorisé un gros émoticon animé à la toute fin d’un de mes articles. Est-ce encore trop ? Je n’ai pas eu le sentiment que ça pouvait gêner, mais bon, on sait jamais !

        Mais non ça ne gêne pas. Quand c’est ponctuel, pas de souci. Il faut juste retenir ceci : En général, il faut faire bouger ce qu’on veut que le lecteur voit et retienne en priorité.
        Une petite légende sous une image qui bouge, ou du texte sur l’image elle même est donc une bonne idée.

        Bonne journée

        Yvon

        • BK

          Merci Yvon, pour toutes ces précisions. Je viens par ailleurs de lire à l’instant l’article de Julie où elle dit que l’empattement est mieux pour le papier et le « sans empattement » mieux pour l’écran. C’est effectivement bien possible. Quant à l’idée de les distinguer en fonction de l’âge, c’est sans doute également vrai mais… je vois pas comment trier mes lecteurs pour faire atterrir les plus de 40 ans sur un blog à empattement et les autres sur un blog sans.

          • Il faut réagir en « coeur de cible », ami Bernard. C’est à dire que tu dois adapter ton texte à ce qui correspond à la majorité de tes lecteurs en terme d’âge.
            si la majorité de tes lecteurs ont plus de 40 ans, alors prévois l’empattement.
            Tu poeux aussi tester avec et sans, et voir quel taux de rebond est le plus faible. Ne fonctionne qu’avec au moins 500 personnes par jour pour que ce soit significatif sur au moins 10 jours, ou alors 5000 visiteurs en tout.

          • BK

            Je penserai sans doute à tester la chose, mais pour autant que je connaisse mon public de spiritualistes – et en caricaturant à peine -, je dirais qu’il se partage à peu près équitablement entre des jeunes qui se posent des questions sur la vie, et des vieux qui s’en posent sur la mort ; les autres étant, à de rares exceptions près, trop occupés à vivre pour s’intéresser à ces « conneries ».

            Donc : a priori fifty-fifty

    • Salut Geoffroy

      La taille de police varie d’une police à l’autre, mais la taille standard de 12pt en arial est celle à prendre en compte.
      Ensuite, la largeur du texte n’est absolument pas à dépasser 600 px, quelle que soit la taille de la police. C’est pour une question de largeur de champ et de vision globale du texte. Des caractères trop gros gènent dans tous les cas la lecture.

      Bonne journée

      Yvon

  4. Bien fichu, l’article.
    Ô Maître nageur, je te souhaite de belles fêtes de fin d’année et un 2012 plein de rencontres captivantes sur le Web.

    Tu fais beaucoup plus de lecteurs que moi – chapeau ! – mais je vais y arriver !

    • Salut Etienne.

      Pourrais-tu me dire steplait pourquoi tu m’appelles « Maître nageur » ? Ca me fait rire, mais je ne comprends toujours pas pourquoi.
      Belles fêtes de fin d’année à toi aussi :)

      • Maître Nageur ?
        1. Dans la science du blog, tu es notre Maître à tous.
        Mais attention, un bon Maître est celui qui fait en sorte que ses élèves le dépassent. Voir Zorro.

        2. Tu nous apprends à nager dans les eaux du Web. Tu nous apprends à ce que les lecteurs viennent nombreux surfer chez nous.

        3. C’est pure gentillesse et moquerie légère de ma part : cela reste ainsi léger.
        Je nous vois tous patauger dans la piscine et toi, sur le bord, en caleçon, tu guides et siffles. Quel brouhaha !

  5. Bonjour Yvon, j’aime bien ta façon de voir les choses et je suis d’accord avec tout ce que tu dis, je me sens agressée par tout ce qui clignote et c’est vrai que ça ne donne pas forcement envie de revenir.

    Je voulais savoir comment régler wordpress pour que le texte fasse 450 pixels de large, je suis toute nouvelle blogueuse et techniquement, j’ai besoin d’apprendre.

    En tout cas, merci pour tes articles, ils m’aident beaucoup !

    Zenie

    • Bonjour Blandine

      Tout cela dépend de ton thème. Il faut maitriser un peu le CSS pour le faire.
      Bonne journée

      Yvon

      • BK

        Eh oui, maîtriser le CSS ! Au fait, c’est quoi, le CSS (inutile de répondre, c’était de l’humour, c’est à dire une réflexion 50% bidon, et 50% fondée). Ô Pôvre !

    • Bonjour Blandine,

      La largeur de tes arcticles est définie dans le fichier style.css de ton thème wordpress.

      De plus il y a plusieurs ligne à modifier.
      Et surtout, la première chose à faire avant de modifier un tel fichier est de le sauvegarder (en cas de mauvaise manip).

      Thierry

  6. Bonjour Yvon,

    Merci pour cet article qui me convient mieux que les derniers … un peu trop techniques pour le moment … Celui-ci me permet d’aller à mon rythme, d’améliorer ce qui est en mon pouvoir et de choisir mes priorités. :haha:

    Je choisis ce jour pour te remercier également pour tout ce que tu donnes et, SURTOUT, pour la qualité de ton professionnalisme.

    Ce que j’apprécie depuis que je suis abonnée à ton blog, c’est de ne pas recevoir 3x par jour des offres de formations payantes ou des rappels disant que je ne me suis pas inscrite à une formation.

    Tant que tu continues ainsi, ce sera une joie de venir te lire. :)

    Bonnes fêtes de Noël et bonne année 2012
    Madeleine

  7. Salut yvon,

    merci pour l’article. Je constate que je fais une erreur avec mon blog.

    J’ai mis un pop-up. Donc je COURT vite l’enlever ;) !!!

    Mais je dirais que la forme d’un produit est tout aussi essentiel sinon meme plus important que le fond.

    Quand j’étais encore à l’école nos professeurs nous disaient que c’est pas parce qu’on a résolu une équation qu’on aura forcément tous les points.

    La manière avec laquelle cela est rédigé compte énormément! :)

  8. Bonjour Yvon,
    La largeur du contenu que l’on lis sur un écran est en effet très importante.
    Je n’avais jamais entendu parler d’une taille en px mais plutôt d’un maximum de caractères à afficher sur une même ligne. Si les caractères sont plus grands (ce qui est conseillé pour faciliter la lisibilité), la ligne peut plus être plus large, dans certaines limites. Amélie Boucher, conseillère en ergonomie web, conseille d’utiliser entre 60 et 95 caractères.

  9. Coucou Yvon,

    Il est vrai que j’essaye de respecter ces règles, moi je suis partie sur le texte centré, c’est une peu ma petite touche.

    Autrement merci grâce à toi j’ai un nouveau mot de passe (suite à ton article de hier)
    « gran2clakedslacourj »

    Bonne journée
    Marie-Do

    • Coucou Marie Do

      Voui j’ai pensé à toi en la mettant celle-là :D

      Bonne journée

      Yvon

      PS : Le texte centré est le pire de tout ce qu’on peut voir sur le web. Pour un lecteur, c’est l’enfer le plus total. Pas de repère visuel, mais surtout, pas de point de départ d’une phrase. L’horreur. Tu vas devenir célèbre dans quelques mois, profites-en pour mettre ton texte comme il faut, parce que ça te désservira, aussi sûr que les courges n’ont pas d’aile.

      • A ce point là c’est l’horreur :cry:
        donc ce que je croyais être ma petite patte va en fait
        me desservir. :-o
        Ok je me suis pris une grande claque dans la courge :hin:
        Et bien j’ai du boulot, si je dois remettre en forme tous mes
        articles, bon sur ce coup là je vais procrastiner,
        je ferai ça l’année prochaine. ;)
        Merci pour le conseil en tout cas

        • Coucou Marie Do
          Pas besoin de le faire pour tous les articles. Normalement, avec une petite instruction dans le CSS, ça se fait tout tout seul.
          Quand tu seras prête, dis moi le. Je le ferai pour toi :)

          En attendant, très bonne journée

          Yvon

  10. Salut Yvon,
    Merci pour ton article !
    5/7, j’ai 2 points à améliorer :)

    En ce qui concerne les interviews, tu penses qu’il faut aussi découper les réponses des interviewés en paragraphes de 3 lignes max ?

  11. J’adhère à ton article, ce qui me gonfle le plus, c’est la pop-up type aweber qui s’ouvre sur la plupart des blogs « conseils blogging et monétisation » du moment.

    Je l’ai fait aussi un temps donné, mais ça me gonlfait moi-même et n’optimisait pas non plus les inscrits à ma newsletter, donc j’ai viré.

  12. Je suis tout à fait d’accord avec le contenu de ton article. Trop de site où ça clignote et où ça pop-up !

    Donc je pense faire partie des bons élèves dans l’ensemble :)

    Mais effectivement je ne m’étais jamais posé la question de la largeur de la zone de lecture … une fois expliqué cela semble logique.

    Pour la mise en page des articles j’y fais bien plus attention maintenant :)

  13. Bilan pas trop mauvais. Allez, rien que pour toi, j’ai changé la couleur de ma police de gris assez foncé à gris encore plus foncé (presque noir).

    De toutes façons, je me demandais si tu étais déjà venu sur mon blog depuis son ouverture officielle…

    @Bernard: pour que tes mails ou tes pages aient une longueur qui te convienne, tu fais un saut à la ligne au bon endroit (maj+enter) . Juste un saut de ligne.

    Et surtout Joyeux Noël à tous! :coeur: :coeur: :coeur:

    • BK

      Marie-Noël bonjour et bonnes fêtes,

      Je viens de voir la présentation de tes derniers ebooks : super pro ! Vraiment excellent ! Bravo !

      En revanche, ton conseil de saut à la ligne (que je vais quand même tester) ne me semble pas, a priori, sans danger.

      Le danger possible, c’est qu’en passant d’un navigateur à l’autre, on se retrouve, ici ou là, avec des lignes d’un seul mot (parce que la ligne coupée pile poil là où il faut sur IE, par exemple, se révélera juste trop longue pour Chrome et passera ainsi à la ligne à cause d’un malheureux mot).

      Mais je vais tout de même essayer, on ne sait jamais.

      Merci, en tout cas.

      Bernard

      • C’est vrai que j’ai pensé les tester sur différentes adresses mails hotmail, gmail, yahoo & Cie mais je n’avais pas réfléchi en terme de navigateur.

        Je ne suis pas beaucoup plus loin que toi dans la technique, rassure-toi: je suis surtout championne du monde du bricolage!!!

        A chaque article d’Yvon j’apprends un nouveau truc. Peut-être que dans dix ans je serai au top du référencement et du copywriting. Mais d’ici, là, tout aura changé!

        Merci pour ton appréciation sur mes eBooks: c’est Yvon qui a fait la préface du premier et Cédric Vimeux du second. Ca c’est des mecs sympas! :super:

        Je me réjouis de voir ton travail!

        • xavier

          Bonjour marie Noel
          Je ne connaissais pas ton blog .
          Je l’ai parcouru à l’instant et …..hop dans les favoris.
          Je crois que je vais revenir le visiter plus souvent
          car il y a de nombreuse réponses à mes besoins actuels.
          Bonne Journée
          Xavier

        • Salut Marie-Noël

          Merci pour le mec sympa :) :red:

          Et je confirme : BRavo pour tes livres !

          Yvon

          PS : Et je confirme aussi mon impatience à voir le travail de Biquet.

      • Hello Bernard

        65 caractères maxi pour tes lignes, et t’auras jamais de souci :)

        Yvon

    • Coucou Marie Noël

      Hé non je n’y étais pas venu sur ton blog, tout débordé que je suis. Mais il est super cool. J’adore le header. Un peu gros, peut-être, ce qui fait que sur mon portable, je ne vois que lui et le menu (et aucun contenu sans scroller). Mais j’imagine que ça va se peaufiner tout ça.

      Joyeux Noël à toi aussi et à tous tes proches

      Bonne journée

      Yvon

  14. Bonjour,

    Existe-t’il une astuce pour choisir la taille et le corps d’une lettre?

    Au début d’un paragraphe par exemple…

    ;-)

  15. xavier

    Bonjour Yvon

    Incroyable.
    Hier j’ai envoyé un mail au sujet de ce pop up.
    Romain faisait un sondage et une  » barre
    google+ face book twitter « 
    s’affichait en pop up.
    Sur chrome cette barre restait immobile sur
    l’écran et dissimulait le texte derrière. Aucun
    moyen de l’enlever.(je n’ai pas eu le réflexe
    de changer de navigateur)

    Si je n’avais pas une grande motivation
    pour participer à ce sondage je serais parti.

    Il m’a fallu deviner ce qui était écrit derrière.
    Ce n’était vraiment pas confortable.

    Par mail j’ai prévenu Romain qui l’a enlevé. A
    priori le problème ne se posait que pour Chrome.
    Et le même jour tu écrivais cet article bien à propos!

    Bonne journée
    Xavier

    • SAlut Xavier

      Oui on dit que les grands esprits se rencontrent. :)
      Et qu’il n’y a que les plus modestes qui s’en aperçoivent :haha:

      Trêve de boutade, il est clair qu’il faut vraiment que la personne soit un bon ami pour que je me casse la tête à tenter de regarder derrière une popup.
      Mais je lui écris. Comme toi.

      Yvon

  16. Hello Yvon,

    super article, j’ai adoré le ton un peu « rough » à certains endroits et j’ai bien ri en te lisant !

    Oui, le texte en noir sur blanc (adieu les beaux gris sur fond blanc ! malheureusement faut s’y faire) demeure la combinaison qui offre le plus haut taux de contraste.

    Le taux de contraste (en dehors de la police et de sa taille) est un paramètre primordial dans le confort de lecture.

    Cela vaut pour nous, relatifs « bien voyants », mais il faut aussi penser à la quantité non négligeable de personnes atteintes de troubles de la vision.

    Amicalement,
    Alexandra

    • Coucou Alexandra,

      ravie de te voir en « direct ». t’ai envoyé un mail via ton site, tu peux regarder?

      Merci et Bonnes Fêtes

    • Hello Alexandra

      Merci pour ton passage. Pas mal de boulot à ce que je vois ?
      Idem ici. Pendant les fêtes, avec la famille, c’est la galère totale pour l’agenda.
      Vivement l’année prochaine :)
      Je blague.
      J’apprécie le moment présent avec délectation, même si je dors peu. Après tout, demain, on sera peut-être plus là.
      Yvon

  17. bonsoir Yvon,

    je te rejoins sur tout ou presque, l’essentiel mais ai un soucis avec les pages claires qui me font un mal de ch… aux yeux.

    la mode du trop net et trop clair, du plus blanc que blanc, est aussi passée par là. le soi disant zen me gêne, le super dépouillé nu-froid aussi. ok pas de fioritures mais quand même…

    je sais pêcher par manque de lisibilité sur la colonne mais pas sur la zone texte. ça ok.

    les pop-up sont insupportables et on a beau les comparer à leur taux multipliés d’abonnement aux newsletter et les parer des vertus pro listes de prospects ça me rend fou

    tu ne parles pas de la pub ou j’ai lu trop vite ?

    je ne sais pas si c’est noël oblige mais là je vais dégager de price m… qui a saturé de pub à mort, j’en deviens fou !
    ai plus envie ni d’acheter ni de vendre! (en plus de la hauteur des commissions prélevées)

    les publicités imposées en début de vidéo : je ferme la page, tant pis
    sinon je coupe le son et je dégage ailleurs le temps que ça passe
    je suis totalement allergique et imperméable aux pubs de toute façon

    eh bien le pop-up est une pub imposée et à la con, je l’affirme haut et fort.
    je viens pas pour me faire emm…
    récemment ai arrêté mon abonnement chez une de tes confrères à cause de son pop-up, je dois l’avouer.
    trop axé résultats, trop axé chiffres, je trouve qu’un blog perd son âme.

    le pop-up est intrusif. et le petit machin qui t’empêche de fermer l’onglet ou la fenêtre me rend fou, de rage ! ;)

    • Pour ce qui est de la pub essaye le plugin Adblock Plus pour Firefox, il fait vraiment des miracles…

      Mais il n’enlève pas encore ces satanées pop-up.

      Enfin t’y verras quand même plus clair sur les sites du genre price ;)

  18. Bonjour Yvon,

    Toujours de bon conseil, votre blog est une vraie source d’infos pratiques! Et cet article est particulièrement utile pour quelqu’un (comme moi) qui débute sur WordPress.

    J’ai compris que j’ai tout faux pour le gris sur blanc… :-? … mais après des semaines à comparer et choisir un thème, j’en ai acheté un qui ne propose pas d’options de couleur pour la police. Comment faire pour y remédier?

    Merci encore pour vos bons tuyaux!

    Ruth

    • Bonsoir Ruth et bienvenue ici.

      Il faut aller fouiller un peu du côté de la feuille de style CSS, et chercher si dans la balise body il y a une mention de couleur de police, du genre « color: #XXXXX ».
      C’est souvent là qu’elle se trouve ;)
      Pour mettre le noir, c’est : « color: #000; »

      Bonne soirée

      Yvon

  19. Une fois de plus, Bravo pour cet article. :super:

    Difficile de ne rien apprendre en lisant tes articles.
    Les 1ers points me semblaient à peu près maitrisés de mon coté, mais le 7 (sur les pixels), voilà encore une découverte pour moi. Merci.

    Pour rebondir sur les objets qui bougent et autres pop up, je te confirme que je suis heureux d’avoir désactivé mon pop up (suite à la lecture d’un de tes articles).

    J’ai croisé quelques uns de mes lecteurs qui m’ont remercié pour ça. Je suis archi convaincu.

    L’argumentaire de ceux qui préconisent les pop up, c’est de dire « en 2 ans, je n’ai eu aucune plainte ».
    Ca ne tient pas debout, car le visiteur agacé par le pop up a le choix entre :
    – se désinscrire tout de suite et ne plus jamais revenir sur mon blog,
    – tenter de me joindre pour me convaincre de désactiver ma pop up

    Le choix me semble évident, quand tu es agacé, tu veux tout … sauf faire des efforts (et au revoir la compagnie). :cry:

    Bon, dodo :-z

    A bientôt.

  20. J’ai lu ton article et j’avais changé le thème de mon blog en pensant qu’il était plus agréable à regarder.

    Et quand tu as parlé des blogs à fond avec du texte en gris, j’ai regardé mon blog et j’ai dit « Oh M….! »
    En plus on m a fait encore la remarque dans mes commentaires. Donc j’ai retravaillé tous mes articles et la je gratte actuellement dans mon thème pour tout mettre à la bonne couleur.

    Merci Yvon de m’avoir botté les fesses à ce sujet ^^

  21. Encore et toujours des conseils au top que je viens de lire!

    Eh oui le contenu ne fait pas tout, beaucoup oublient l’aspect ergonomique qui est très important aux yeux de nos lecteurs.

    Allez, j’en remets une petite couche : Si votre idée est de faire apparaître une pop-up à l’ouverture de la page, histoire de récupérer l’adresse mail de vos visiteurs, comment dire ?

    Ha oui… ARRÊTEZ !!!

    C’est clair qu’il faut vite stopper cela, c’est gonflant, une trop grosse majorité de blogs que je lis les utilise, c’est très énervant à la longue.

  22. Bonjour,

    Alors j’ai écrit mon premier article en essayant d’appliquer le plus possible ce qui est dit ici.
    Par contre, j’ai une question :
    mon premier titre dans l’article (pas le titre de l’article lui-même), le premier titre dans l’article je l’ai mis avec H1.
    Il y en a deux dans l’article, les autres sont en sous_titres H2.

    Je vois par-ci par-là que c’est une erreur d’utiliser le style H1 à l’intérieur de l’article, vu qu’il est considéré être celui du titre de l’article.
    Or, j’ai un style Title spécifique. Alors je me pose quelques questions sur ce coup là.

    Qu’en est-il vraiment ?

    Hubert

    • Bonjour Hubert

      Les titres définissent une hiérarchie au sein de ton document.

      Si le titre de ton article est en H1, alors les intertitres de ton article doivent être en H2
      Les sous titres en h3, etc…

      De plus, d’un point de vue visuel, si tu mets également un H1 dans le corps de ton article, alors il aura la même police et la même taille, et la même couleur que le titre de l’article. Pas très esthétique.

      Yvon

  23. Bonjour Yvon,

    Je suis arrivée sur cet article à partir d’un lien (calendrier de Noël). Je le lis avec beaucoup d’intérêt et je prends bonne note de tes conseils.

    Tu vois, je change de ligne pour espacer mon commentaire!

    Je me demande comment faire pour changer la largeur du texte. N’est-ce pas préalablement déterminé par notre thème? À moins de s’amuser dans les codes, je suppose!

    Mon blog est tout nouveau. J’ai donc beaucoup à apprendre.

    Moi aussi j’ai horreur des pop ups (fenêtres intempestives en français? Je ne sais pas). Je ferai la recherche, car, à mon avis, il y a trop de mots anglais utilisés dans les blogs francophones!

    Je déteste la fenêtre qui me saute à la figure pour me demander de m’inscrire dès que j’arrive sur un blog alors que je suis déjà abonnée. Pour ma part, je n’ai pas encore la fiche d’inscription sur mon blog.

    Ce qui me surprend sur ton blog est que je ne vois pas en ce moment d’onglet «accueil» si je veux voir les autres articles. Pour moi, cet onglet est essentiel pour aller à une date.

    Merci d’écrire des articles intéressants. Je crois que c’est la première fois que je commente, mais j’en ai déjà lus quelques-uns.

    Merci aussi d’écrire correctement. Il y a trop de blogs plein d’erreurs, de coquilles, de fautes, etc. Je les évite. Je déteste voir des coquilles dans ce que j’écris. :(

    Merci et Joyeux Noël!

    Sco! :)

    • Bonjour Sco, et bienvenue ici !

      Je me demande comment faire pour changer la largeur du texte. N’est-ce pas préalablement déterminé par notre thème? À moins de s’amuser dans les codes, je suppose!

      Oui il faut aller dans le CSS de ton thème. Mais c’est mieux de choisir un thème approprié avec la bonne largeur. Parce que si tu réduis la taille de ton texte, tu devras soit augmenter la taille du menu, soit réduire la taille de ta page.

      Pop-up = Fenêtre (qui apparait, ou qui saute – comme un pop corn- au-dessus des autres fenêtres)

      L’onglet accueil n’est pas sur ce blog car il suffit de cliquer sur l’entête pour y revenir. J’ai de toute façon prévu de faire un menu horizontal un de ces 4, masi pas ce soir ;)

      Bonne nuit et Joyeux Noël à toi aussi.

      Yvon

    • Bonjour Sco,
      une astuce pour retirer la quintessence moelle (au moins !) du blog de Yvon :
      Tout en bas de chez en bas, au niveau des « mentions légales », à droite de cette ligne, il y a un « Plan du blog ».
      Et prière de repérer plutôt la catégorie de l’article que sa date !

      Hubert

  24. Bonjour,

    cet article a déclenché… un article de ma part sur des présentations Powerpoint / Keynote.

    Je participe tous les ans fin novembre / début décembre à un jury de soutenance de thèses professionnelles en contrôle de gestion, niveau bac+6.

    Les élèves sont déjà des professionnels, en formation continue.

    C’est globalement désespérant.

    Hubert

  25. Bonsoir,

    Moi également cette histoire de pop-up devenu pop-in me gène beaucoup. Il faut toujours cliquer pour fermer avant de passer au plus important c’est-à-dire ce qui nous amène à visiter le blog.

    Merci pour les conseils mais une chose en passant:

    depuis quelque temps quand je lis un article chez toi en cliquant sur le lien reçu par mail, je n’arrive plus à retrouver ta page d’accueil.

    Alors je fais comment pour retourner à ton Home Page quand je suis quelque part au beau milieu de ton blog?

    Merci et bien à toi!

    Andy

    • Hello Andy,

      Il suffit juste de cliquer sur le header de n’importe quel article.
      (Header : Bandeau en haut de la page)

      Thierry

  26. Bonjour Yvon,

    Ton article me fait penser que souvent les personnes n’arrivent pas à ce voir ce qui cloche sur leurs sites.
    Amicalement,
    Hicham

  27. J’ai la même allergie que vous pour les fautes d’orthographe! Je sais que malgré ça il m’arrive d’en laisser passer sur mon blog!
    Par solidarité, je vous les signalerai donc toujours, ce n’est pas de l’acharnement!!

    « vos articles ne sont pas lu », lus, au pluriel!

  28. Mathilde

    Bonjour, Merci pour cet article ! Pour compléter, afin de rendre lisible la lecture surtout si il y a beaucoup de texte (blog) est d’opter pour une typo avec empattement qui va créer des éléments d’accroche de l’oeil lors de la lecture.
    Bonne journée

Laisser un commentaire

;) :super: :red: :hin: :haha: :evil: :cry: :coeur: :cafe: :beer: :D :?: :-z :-x :-o :-P :-? :) :( 8))

Créé et géré avec par Yvon CAVELIER