Quel format choisir pour l’emailing ?

Quelle est la largeur et la taille idéale d’un email ? C’est à cette question très classique en emailing que nous allons essayer d’apporter une réponse détaillée dans cet article. La largeur et la taille des emails ont un impact loin d’être négligeable sur les performances de vos campagnes marketing dans la mesure où elles déterminent la qualité de l’affichage de vos emails. C’est d’autant plus vrai avec l’envoi d’emails en masse. Pour replacer la problématique dans son contexte, nous allons commencer par un petit rappel sur l’histoire de l’email et sur l’absence de standards. On verra ensuite si la fameuse convention des 600 px reste d’actualité, et si oui, pourquoi. On testera pour finir le rendu de templates d’emails dont la largeur est supérieure à 600 px (640 px, 650 px et 700+ px) pour achever de répondre à la question. C’est parti !

Petit historique du format email

L’email est presque aussi vieux qu’internet. Les deux ont émergé lentement dans les années 1960 avant de se développer franchement et de se diffuser au plus grand nombre dans les années 1990. C’est à cette époque qu’internet et l’email sont devenus familiers de centaines de millions de particuliers. Plusieurs sociétés ont émergé durant ces années et ont conçu leur propre client email : Outlook Express et Hotmail en 1996, YahooMail et Outlook 97…en 1997, Apple Mail en 2000. Vous trouverez ci-dessous la chronologie de l’émergence des poids lourds de l’email :

Chaque client email s’est battu pour maximiser ses parts de marché, en misant sur la différenciation. Cela n’a pas encouragé le développement de standards emails. Tout au contraire. Ce point est très important. Cette absence de standards est toujours d’actualité aujourd’hui, même si les choses évoluent dans le bon sens depuis ces dernières années.

Découvrez notre Top 10 des logiciels d’emailing pour automatiser l’envoi de vos emails.

Il n’y a pas de standards emails

Chaque client email a ses priorités, ses préoccupations, sa politique, ce qui a bloqué la constitution de standards email. L’organisation W3C a permis une forte standardisation du web et des langages et formats associés (HTML, CSS, XML, PNG), mais n’est pas parvenu au même résultat concernant l’email. L’organisation Email Standards Project qui, comme son nom l’indique, cherche à établir ces standards emails, peine à faire entendre sa voix et n’a pour le moment qu’une très faible influence. Malgré tout, il y a quelques signes encourageants de modernisation et d’avancées vers plus de standardisation :

• Depuis 2015, Yahoo supporte les media queries, un module CSS3 qui permet d’adapter le format de l’email à la taille de l’écran.
• Litmus et Microsoft ont annoncé un partenariat visant à améliorer le rendu des emails sur Outlook.
• Gmail supporte la propriété display:none depuis août 2016 et a annoncé qu’il en serait de même pour d’autres propriétés CSS d’ici peu. Gmail, comme Yahoo, a lui aussi intégré les media queries.

Bref, la tendance est positive. Le secteur de l’email sera très probablement de moins en moins segmenté dans les années à venir. Mais nous n’y sommes pas encore. Intéressons-nous maintenant aux limitations actuelles concernant le design des emails HTML.

La solution marketing tout-en-un pour TPE et PME

Emails marketing

CRM

SMS Marketing

Emails transactionnels

Segmentation client

Marketing Automation

Tester Brevo

Existe-t-il un format idéal pour la taille d’un email ?

A cette question, la réponse est claire : non. Certains optent pour une largeur de 600 px, d’autres pour 700 px. Il y en a d’autres encore qui testent des largeurs plus grandes. Les entreprises ont chacune leurs guidelines et des pratiques différentes. Malgré tout, la convention de 600 px n’est pas dépourvue de sens.

Que penser de la convention de 600 px pour la largeur des emails ?

La définition des écrans (nombre de pixels) augmente avec le temps, au fil des progrès technologiques. Au tout début de l’email marketing et des emails codés en HTML, la définition de référence se situait en dessous de 1024 px. Les choses ont bien changé. Voici un graphique intéressant qui montre l’augmentation de la définition des écrans entre 1999 et 2012.

La convention des 600 px date de la préhistoire de l’email, de cette période où Outlook (logiciel client) et Yahoo et Hotmail (webmails) se partageaient le marché. Les développeurs devaient alors choisir des largeurs permettant aux emails d’être lus sur les plus petits écrans, c’est-à-dire sur les écrans de 550 – 600 px. Avec l’augmentation de la définition des écrans, cette convention est-elle toujours pertinente ? Oui, dans la mesure où vous ne pouvez jamais être certain que l’email sera affiché en full width. Si vous utilisez Outlook en trois colonnes (comme la plupart des utilisateurs), l’espace consacré à l’affichage du message est assez limité :

Pour une définition de 1366 x 768 sur Outlook 2007, il est conseillé d’opter pour une largeur de 600 px afin que vos emails s’affichent correctement dans la colonne de droite. Si vous utilisez Outlook 2013, la colonne d’affichage du message est encore plus réduite, ce qui incite à privilégier une largeur de 550 px. Même si les utilisateurs d’Outlook peuvent modifier la largeur de chacune des trois colonnes, en personnalisant la configuration de leur messagerie, mieux vaut respecter ces standards pour que vos emails s’affichent correctement pour tous vos utilisateurs. Par ailleurs, et on peut le regretter, Outlook, quelque soit la version utilisée, ne supporte pas (encore) le design responsive. Ce qui, concrètement, signifie que même si vous utilisez des designs responsive, la taille de l’email ne s’ajustera pas à la taille de la colonne.

La situation n’est pas très différente avec le webmail Yahoo!Mail, qui ne supporte pas non plus le responsive design et qui, en plus, a le malheur d’afficher des publicités à droite de l’écran.

Cet email est affiché avec 650 px de largeur, avec une largeur d’écran de 1366 px. En résumé : même si les définitons mobile et desktop deviennent de plus en plus grandes, la structuration des messageries en colonnes (en particulier sur Outlook et Yahoo) impose de conserver ce standard de 600 px. Sur Yahoo, vous pouvez monter jusqu’à 650 px, mais à vos risques et périls. La plupart des leaders dans l’industrie de l’email continuent d’ailleurs de se baser sur ce standard de 600 px de largeur pour la conception de leurs templates d’emails responsive. C’est le cas de MailChimp, de Campaign Monitor, de Get Response et de Litmus.

Voici 10 logiciels à bien connaître pour booster les performances de vos emailings.

Les tailles d’emails alternatives

Pour certains designers et marketeurs, 600 px est une limitation jugée beaucoup trop restrictive. Pour y échapper, certains expérimentent des tailles d’emails différentes : 640 px, 650 px, voire supérieures à 700 px. Nous avons testé ces largeurs d’emails alternatives avec Litmus pour se rendre compte du résultat. Pour en savoir plus sur Litmus et les tests de rendering en général, lire notre guide « Tester vos templates d’emails« .

Largeur d’emails alternative #1 : 640 px

Il y a certains grands noms parmi les développeurs d’emails qui optimisent leurs emails pour une largeur de 640 px. Comment s’affiche un email de cette taille ? Pour le tester, nous avons récupéré un template de newsletter de Gap grâce à l’outil Beetle.email.

D’après les résultats du test de rendering Litmus (disponible ici), la largeur 640 px semble bien fonctionner sur la plupart des clients emails. Nous avons testé l’affichage sur Yahoo!Mail, et le résultat est parfait.

Etant donné que Gmail supportera bientôt le responsive design, ce type de templates de 640 px de largeur fonctionnera aussi sans problèmes sur la messagerie de Google.

Nous vous invitons à découvrir notre guide complet sur la mise en page et le contenu des emails. Nous revenons sur l’importance des boutons CTA et sur les raisons pour lesquelles vous devez privilégier une mise en page simple (bloc par bloc).

Largeur d’emails alternative #2 : 650 px

Nous avons fait un deuxième test en récupérant – toujours grâce à Beetle.email – un template avec une largeur de 650 px. Il s’agit d’un template de newsletter de Graphics.com, un site qui partage des designs, des éléments graphiques, des inspirations et relaie des actualités sur le design. La version complète du template d’email est disponible ici.

Nous avons également fait le test de rendering sur Litmus (résultats disponibles ici) et testé l’affichage de l’email sur Yahoo!Mail.

On voit clairement que la partie droite du message est tronquée tandis qu’un espace blanc a été ajouté à gauche. Cet espace blanc n’apparaissait pas dans l’exemple Gap (640 px). Nous avons fait le test avec un deuxième template d’une largeur de 650 px pour la partie texte mais comprenant une image promo de 970 px de large tout en haut. Le test Litmus n’est pas très positif – l’email s’affiche mal sur plusieurs messageries. Par contre, il s’affiche correctement sur Yahoo!Mail en définition 1366 px. En revanche, dès que l’on passe la taille de la fenêtre du navigateur en full HD, le template pose problème sur Yahoo, comme sur Litmus. Il est en fait très possible que les problèmes d’affichage rencontrés proviennent ici de la mauvaise qualité du code du template, plus que de la largeur de 650 px. Dans tous les cas, la largeur 650 px est à manier avec précaution. Sur les tailles d’écran classiques (1366 x 768 px), des problèmes peuvent apparaître.

Découvrez notre guide complet sur l’art de coder un email en HTML / CSS.

Largeur d’emails alternative #3 : 700+ px

Une largeur supérieure à 700 px, c’est très osé – surtout lorsque l’on a en tête les ratés du 650 px. Nous avons malgré tout fait le test sur Yahoo!Mail en optant pour la définition d’écran classique 1366×768 et en choisissant un template d’Asos, un template au design minimaliste.

Ce template mobile-friendly a une largeur de 728 px. Le test de rendering Litmus montre un affichage défectueux sur Yahoo Mail. Le header est aligné à gauche tandis que la partie droite est tronquée.

Nous avons réalisé d’autres tests, aboutissant au même résultat. Cette taille d’email est donc à éviter, en particulier si vous avez beaucoup d’inscrits qui utilisent Outlook ou Yahoo Mail.

Quelle taille d’e-mail choisir ?

Si beaucoup de vos inscrits utilisent Yahoo Mail ou Outlook, il est conseillé de rester sous 650 px de large ou même de vous en tenir au standard de 600 px pour un maximum de sécurité. Rappelons néanmoins que la largeur du template n’est pas la seule responsable du mauvais affichage des emails. Le poids des templates joue aussi un rôle. Sur Gmail et Yahoo, il est conseillé par exemple de ne pas dépasser les 100 kb pour le template (et 1 mb pour l’email). Ce qui suppose d’opter pour des mises en page et un code simples. Limitez également le nombre d’images intégré dans le template, réduisez leur taille et choisissez les bons formats (PNG pour les images simples, JPEG pour les photographies…). Nous avons récemment publié un article complet sur ce sujet : L’art d’optimiser les images pour le web : choix du format, compression et bonnes pratiques.