Quelle est la largeur idéale pour un courriel ?

par
   

Lors de la conception d'une infolettre arrive toujours le moment de se poser la question : quelle largeur doit faire mon courriel ? Bonne question, quand on sait qu'un ou deux pixels de trop peuvent impliquer l'affichage d'une barre de défilement horizontale... pour le plus mauvais effet. De nombreuses statistiques sont disponibles sur Internet, mais elles sont à la fois différentes et de larges estimations. Vu l'importance stratégique d'une infolettre, pourquoi se limiter à 500 pixels de large (par exemple) si 600 pixels conviendraient ? Afin de répondre à cette question de manière précise, nous avons décidé de mener notre enquête auprès des principaux services de messagerie et messageries en ligne.

emailonacid

Méthodologie : le cadre de l'enquête

Email on Acid est un outil en ligne, entièrement gratuit, qui permet de tester un courriel tel que vu par les principaux services de messagerie et messageries en ligne. Grâce à lui, nous avons pu centraliser nos tests, et éviter de s'inscrire et d'installer toutes les messageries sur le marché. Pour chaque messagerie, nous avons noté la largeur en pixels de la zone de contenu. Enfin, nous avons comparé les largeurs par rapport à : 1) la part de marché de chaque messagerie et 2) les principales largeurs d'écran (résolutions 1 024*768, 1 280*800 et 1 280*1 024 pixels).

Note : la précision des résultats obtenus est limitée par le fait que les lecteurs peuvent personnaliser leur messagerie et la taille des différentes colonnes (donc de la colonne de contenu), sur la plupart des messageries. (Nous avons comparé la largeur obtenue via Email on Acid avec un affichage standard sur 3 messageries : Outlook 2007, Gmail et Yahoo Mail, et arrivons à un taux d'erreur quasiment négligeable.)

Les résultats

> Résolution 1 024*768 pixels (31,12% des visites)

  • En résolution 1 024*768 pixels, la résolution maximale pour rejoindre 100% des lecteurs est 530 pixels. C'est Gmail, avec sa colonne de publicité et d'options, et ses 6% de part de marché, qui impose cette limite, suivi de près par AOL AIM Mail.
  • Toutefois, il est possible de rejoindre la grande majorité des lecteurs (79.9,%) avec une largeur de 620 pixels. On exclue alors Gmail, AOL Mail et Yahoo Mail.

> Résolution 1 280*800 et 1 280*1 024 pixels (total d'environ 30,95% des visites)

  • Avec une résolution d'écran de largeur 1 280 pixels, la résolution maximale pour rejoindre 100% de la cible est 720 pixels. C'est à nouveau Gmail et AOL qui imposent la limite.
  • Il est également possible d'exclure les messageries avec les plus petites parts de marché : on rejoint toujours 79.9% de la cible avec une largeur de 820 pixels.

largeur-courriel-webmail

proportion-lecteurs-largeur-courriel-webmail-1024

proportion-lecteurs-largeur-courriel-webmail-1280

Le schéma suivant combine en plus des parts de marché des messageries, les taux de pénétration des résolutions d'écran. Ainsi, on considère chaque messagerie en fonction des 3 principales résolutions d'écran. Avec toutes les messageries et toutes les résolutions d'écran, on arrive à 92% du total des lecteurs (les 8% restant sont ceux qui ont une résolution inférieure à 1 024 pixels de large).  Le graphique suivant montre donc la proportion de lecteurs pour laquelle le courriel s'affichera sans barre de défilement horizontale, toutes messageries et toutes résolutions d'écran confondues.

largeur-courriel-toutes-resolutions

Conclusion

Étant donné que la résolution 1 024*768 pixels est encore (mais peut-être plus pour très longtemps) la plus majoritairement répandue, il est important que les courriels aient une largeur maximale de 530 pixels (estimation à un ou deux pixels près), si le but est de rejoindre tous les services de messagerie de manière égale. Sinon, une largeur de 620 pixels permet de rejoindre une grande majorité des lecteurs (la proportion baisse beaucoup ensuite, à partir de 650 pixels environ).

Vu la part de marché de certaines messageries, il est tout à fait envisageable d'en laisser quelques unes de côté, pour gagner jusqu'à 100 pixels de largeur. Le conseil le plus judicieux serait de partir avec un design de 530 pixels de large, puis d'adapter en fonction des statistiques d'ouverture de votre infolettre (via votre Google Analytics favori). Si aucun de vos lecteurs n'utilise Gmail ou AOL, il est alors facile de passer à une largeur supplémentaire : toute l'importance de l'optimisation constante (de votre site comme d'une infolettre) ! Bien sûr, si vous vous appelez Apple, il est évident qu'il faut s'attendre à une redistribution des parts de marché des messageries en faveur d'Entourage et Mac Mail : Always be testing!

Enfin, comme me le faisait judicieusement remarquer mon collègue Mehdi hier, il faudra de plus en plus penser aux nouveaux supports matériels, comme les mobiles, en prévoyant de créer une version adaptée de votre newsletter pour eux.

Limites

Il est important de noter que cette enquête a été menée de façon empirique, et que les largeurs sont estimées sur la base de copies d'écran (considérer 1 ou 2 pixels de battement). Les parts de marché des messageries prises en compte datent de septembre 2008 : les résultats seront donc à adapter en fonction des prochains statistiques (probablement à publier bientôt). Il en va de même pour les statistiques de pénétration des résolutions d'écran, qui datent de mars 2009. La plus importante limite de ces résultats est liée au fait que les lecteurs personnalisent la taille des colonnes dans leur messagerie.

COMMENTAIRES

  1. Glenn

    Y -a-t-il eu une étude similaire pour déterminer la ligne de flotaison (à quelle hauteur en moyenne va apparaitre l’ascenceur vertical , jusqu’à quelle hauteur l’internaute voit en une seule fois l’infolettre?

    Répondre
  2. Marie

    Salut Michaël ! C’est drôle de se retrouver sur ce blogue 😉

    C’est une question vraiment très intéressante, et j’ai déjà commencé les recherches sur un point similaire. Pour répondre à la question, et départager les versions txt et HTML, il faudrait notamment savoir quelle est la proportion des lecteurs qui désactivent les images dans leur messagerie.

    Ensuite, il y a d’autres questions, comme : est-ce qu’il y a une différence en termes de taux d’ouverture entre les versions txt et HTML ? En termes de taux de clic ?

    Une fois encore, on pourrait donner certaines réponses instinctives, mais je pense effectivement qu’il serait intéressant d’analyser ces questions d’un point de vue objectif et statistique dans un premier temps.

    À suivre donc, je poursuis mes recherches 😉

    Répondre
  3. Michael

    Merci, pour cet article détaillé!
    C’est effectivement une information précieuse que je cherchai à connaitre!
    Je vais l’appliquer pour le prochain mailing.

    J’ai une autre question pour le courriel.
    Au niveau de son formatage: version txt vs HTML.
    Est-ce qu’il est encore pertinent de faire des versions TXT (texte brut uniquement)?

    Répondre
  4. Courrielleur » La largeur optimale d’une infolettre est 530 px

    […] Adviso suggère que  530 px est la largeur optimale que vous devriez viser lors de la conception de votre gabarit pour satisfaire l’ensemble des messageries courriel. Pour vous donner une référence lors de l’utilisation avec le Courrielleur, 550 px est la largeur qu’occupe l’éditeur HTML sur la page “Message (2/4)”. Donc, le corps de votre infolettre devrait être entièrement visible sans défilement horizontal. […]

    Répondre

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>