Tailles des e-mails : les dimensions idéales pour vos modèles [2022]

Vous êtes-vous déjà demandé quelles sont les tailles d'e-mail idéales pour vos modèles de newsletter ? Avez-vous besoin de choisir une largeur et une hauteur spécifiques pour eux ?

Eh bien, la réponse courte est oui. La réponse longue est un peu plus complexe. Ne vous inquiétez pas, cependant, car nous explorerons tout ce que vous devez savoir sur les dimensions idéales et le nombre de pixels (px) qu'elles doivent avoir pour un rendu correct.

Pour vous donner une idée, nous allons aujourd'hui passer en revue les tailles incontournables, dont :

• Largeur et hauteur du modèle
• Taille du fichier de campagne
• En-tête d'e-mail
• Blocs de contenu et pied de page

Sans plus tarder, voyons-les !

Dimensions du modèle d'e-mail : présentation

Si vous êtes pressé de connaître les meilleures tailles pour vos newsletters , vous pouvez consulter le tableau ci-dessous :

Maintenant, examinons-les plus en détail !

Taille de l'e-mail - Anatomie des éléments

Voici un exemple de newsletter par e-mail et les éléments que nous examinerons :

Cette campagne a une largeur de 664 px et une hauteur de 2549 px. La conception de l'e-mail s'affiche bien dans les boîtes de réception Gmail et Outlook et s'affiche correctement sur les appareils mobiles. En ce qui concerne la taille du fichier, elle est de 57,8 Ko, ce qui se situe dans les limites de taille idéales.

Avant de continuer, gardez à l'esprit que votre conception peut s'afficher différemment selon la résolution et la taille de l'écran de vos abonnés . Alors maintenant que nous savons ce que nous allons examiner, commençons à explorer ces tailles « idéales » une par une !

Meilleures tailles d'e-mail : largeur, hauteur et poids

En commençant par les dimensions cruciales du modèle d'e-mail HTML , découvrons la meilleure largeur, hauteur et "poids" nécessaires pour éviter les problèmes avec les clients de messagerie populaires tels que Gmail, Outlook.com, Yahoo Mail, etc.

Largeur de l'e-mail

La plupart des conseils marketing soulignent que la largeur idéale doit être de 600 px . Qu'est-ce que cela signifie? Tous vos modèles n'ont-ils pas besoin d'être plus que cela pour être efficaces ?

Et bien non. Alors que 600 px est la largeur standard du modèle d'e-mail, vous pouvez avoir des modèles plus larges. La raison en est que les clients de messagerie d'aujourd'hui sont beaucoup plus avancés que par le passé. Ainsi, l'affichage de modèles plus larges n'est plus un problème.

Néanmoins, bien que vous puissiez expérimenter avec la largeur, vous devez savoir que Gmail peut ne pas afficher les couleurs d'arrière-plan pour les conceptions de plus de 640 px. Cela peut être une nuisance pour vos campagnes. Le moyen le plus simple de l'éviter consiste donc à utiliser des mises en page d'une largeur maximale de 640 px .

Ci-dessous, vous pouvez voir un e-mail d'Apple d'une largeur de 736 px :

Si vous souhaitez utiliser des modèles plus larges, assurez-vous de tirer parti de divers outils de prévisualisation des e-mails pour vous assurer que la largeur choisie ne causera aucun problème.

En outre, il est bon de savoir que la plupart des créateurs de modèles d'e-mails tels que Moosend et Mailchimp proposent des conceptions d'une largeur par défaut de 600 px, vous n'avez donc pas à vous soucier de la taille des modèles d'e-mails.

Hauteur de l'e-mail

Parlons maintenant de la hauteur du modèle d'e-mail . Ici, vous pouvez aller jusqu'à 1500 px ou plus selon le contenu que vous souhaitez présenter.

Vous pouvez devenir "sauvage" avec cette taille d'e-mail, mais rappelez-vous que votre abonné doit être capable de digérer le message sans faire défiler à l'infini pour aller droit au but !

Idéalement, votre template doit faire entre 1500 et 3000 px . Si vous pensez que 3000 px c'est peu, voyons un exemple concret de The Citizenry :

L'exemple ci-dessus a une hauteur de 2230 px, que les abonnés peuvent vérifier en quelques défilements.

Bien sûr, de nombreux spécialistes du marketing par e-mail choisiront des hauteurs plus élevées pour leurs campagnes. Tout en montrant à votre public tout ce que vous avez à offrir, n'oubliez pas que notre capacité d'attention est très courte, ayant considérablement diminué au cours des 15 dernières années !

Ainsi, une hauteur de 2 000 à 25 000 px est préférable au fait que votre destinataire fasse défiler un modèle sans fin pour accéder à votre CTA !

Poids de l'e-mail

Eh bien, maintenant que vous connaissez la largeur et la hauteur de votre campagne, prenons un moment pour parler de la meilleure taille de fichier pour votre modèle .

Généralement, vous souhaitez créer des messages qui atterriront dans la boîte de réception de vos abonnés sans aucun problème. Une ligne d'objet contenant du spam est généralement la cause du déclenchement des filtres anti-spam. Mais saviez-vous que la taille de votre fichier e-mail peut également être la cause d'une mauvaise délivrabilité des e-mails ?

Pour éviter cela, vous devez garder le "poids" de votre e-mail assez léger. Cela signifie que vous devez avoir des campagnes d'e-mails avec un corps compris entre 20 et 102 Ko .

Voici trois façons rapides d'éviter les problèmes de rendu :

• Visez une taille de fichier d'e-mail maximale de 102 Ko
• Utiliser les éléments visuels (GIF, images) à bon escient
• Laissez de côté les pièces jointes volumineuses

Découpage de la boîte de réception

Mais que se passe-t-il lorsque votre email dépasse 102 Ko ? Eh bien, si vous l'envoyez à une adresse Gmail, le client de messagerie coupera votre message .

L'écrêtage des e-mails se produit lorsque les campagnes dépassent la limite de taille de fichier maximale. En conséquence, Gmail masquera ou "coupera" votre campagne, et les abonnés devront sélectionner l'option "Afficher l'intégralité du message" pour le vérifier.

Alors que Gmail leur montrera finalement votre message, le découpage de vos campagnes n'est pas idéal pour l'expérience utilisateur. L'ajout d'une étape supplémentaire au processus peut frustrer vos contacts et entraîner une baisse des taux de clics et d'engagement .

La solution est simple : gardez vos e-mails sous la barre des 102 Ko (75 Ko est tout simplement parfait) !

Dimensions de l'élément de campagne d'e-mail

Maintenant que nous avons couvert les tailles d'e-mail essentielles que vous devez connaître, découvrons les bonnes dimensions pour vos composants d'e-mail , en commençant par votre pré-en-tête d'e-mail.

Pré-en-tête d'e-mail

Tout d'abord, le pré-en-tête de votre e-mail est la ligne de texte supplémentaire qui suit vos lignes d'objet. Vous pouvez le vérifier rapidement en consultant votre boîte de réception. Habituellement, ils ressemblent à ceci :

Cependant, votre texte de pré-en-tête est également visible sous la forme d'un court message au-dessus de votre newsletter par e-mail. Ces lignes de copie peuvent fournir à vos lecteurs des informations précieuses et même leur permettre de consulter vos e-mails sur leur navigateur.

Voici un exemple de Sigma Beauty :

Alors, quelle devrait être la taille de votre pré-en-tête d'e-mail ?

En ce qui concerne la largeur, votre preheader sera aussi large que le reste de votre campagne. En hauteur, cependant, il devrait se situer entre 20 px et 60 px .

En-tête d'e-mail

Passons maintenant à l'un des éléments les plus importants de vos campagnes, l'en-tête de l'e-mail ! Comme vous l'avez peut-être remarqué, les campagnes peuvent avoir différentes tailles d'en-tête d'e-mail. Voyons quelques exemples.

En voici une de Wendell August Forge :

(600×98 pixels)

Et un de The Blonde Abroad :

(600×255px)

Les deux en-têtes ont la même largeur de 600 px. Cependant, en ce qui concerne la hauteur, le second mesure 255 pixels de haut.

Alors qu'un en-tête plus petit comme celui de Wendell August Forge est idéal à la fois pour les ordinateurs de bureau et les appareils mobiles, avoir un en-tête légèrement plus haut ne sera pas un problème (tant que vous le testez d'abord !). En règle générale, l'en-tête de votre campagne par e-mail doit mesurer environ 60 à 70 pixels de haut . Cependant, si votre logo contient des éléments supplémentaires ou un menu, il peut atteindre 200 px .

Encore une fois, n'oubliez pas de vérifier le volet de prévisualisation Gmail ou Outlook ou le mode de prévisualisation de votre outil logiciel de marketing par e-mail ! Moosend, par exemple, dispose d'une fonctionnalité de bureau et mobile qui vous permet de vérifier l'apparence de votre campagne avant de l'envoyer à votre liste de diffusion. Vous pouvez facilement créer un compte et l'essayer gratuitement !

Blocs de contenu d'e-mail

Examinons maintenant les tailles d'e-mail de vos blocs de contenu. Ces blocs peuvent contenir n'importe quoi, de la copie d'e-mails et des images aux GIF, vidéos et CTA !

En ce qui concerne la largeur, vos blocs de contenu doivent suivre la taille du modèle d'e-mail que vous avez choisie . Cependant, en ce qui concerne la hauteur, il y a quelques choses que vous devez garder à l'esprit.

Tout d'abord, pour offrir à votre public la meilleure expérience, vous devez rendre vos blocs de contenu précieux et courts. De longs blocs de contenu entraîneront l'abandon des e-mails et des temps de lecture des e-mails réduits ! Et vous n'avez besoin de rien de tout cela.

Ci-dessous, vous trouverez une campagne d'email marketing de Julie Blanner avec trois blocs de contenu :

Chaque bloc mesure 344 pixels de haut et comprend une image, une copie et un simple appel à l'action. Visuellement, chaque bloc de continent est facile à lire et à utiliser. La conception minimaliste de l'e-mail contribue également à l'objectif du blogueur.

Au total, le contenu des e-mails de Julie Blanner fait 1032 px de haut, hors bloc de signature de la blogueuse. Si nous considérons tout ce qui précède, il est prudent de dire que vos blocs de contenu doivent être suffisamment courts pour que vos abonnés puissent les consulter en quelques parchemins.

Ainsi, nous pouvons maintenant conclure que :

• Chaque bloc de contenu doit avoir une hauteur d'environ 200 à 300 px .
• La hauteur totale de vos blocs de contenu doit être de 800 à 1200 px .

Taille du pied de page des e-mails

Enfin, nous avons les pieds de page de vos campagnes par e-mail , où vous pouvez trouver des boutons de médias sociaux et de désabonnement, des liens vers des sites Web, etc.

Comme pour vos en-têtes, les pieds de page peuvent varier en longueur en fonction de vos objectifs. Par exemple, la taille du pied de page de Modcloth est de 600 px de large et 361 px de haut :

Le pied de page ci-dessus fonctionne bien avec la conception de l'e-mail car il fournit aux abonnés toutes les informations nécessaires dont ils ont besoin avant de fermer l'e-mail. En termes de hauteur, cela peut être long, étant donné que les pieds de page des e-mails doivent être un dernier recours intelligent pour capter l'attention de vos abonnés sans les ennuyer.

Dans cet esprit, la taille d'e-mail idéale pour votre pied de page doit être d' environ 100 px . Si vous devez inclure d'autres éléments, tels que des liens vers des sites Web, assurez-vous que la longueur totale ne dépasse pas 300 px .

Tailles de composants d'e-mail supplémentaires

Outre votre pré-en-tête, votre en-tête, vos blocs de contenu et votre pied de page, vous devez tenir compte de vos bannières, de vos boutons CTA et de la taille des images. Voyons voir!

Bannière d'e-mail

Parlons bannières une minute. Tout d'abord, une bannière de courrier électronique est généralement une image infusée de copie trouvée au-dessus de votre campagne de marketing par courrier électronique. Une bonne conception de bannière de courrier électronique peut exciter votre public et lui donner plus de raisons de s'engager avec votre message.

Par exemple, voici un exemple de bannière par Velasca :

La bannière de la marque comprend toutes les informations nécessaires pour attirer l'attention de l'abonné . Il a son logo, une copie claire, des graphiques et un bouton CTA. De plus, en termes de taille, l'exemple ci-dessus mesure 600 px de large et 612 px de haut, ce qui est tout à fait idéal sur la base des données suivantes.

Plus précisément, selon Swift Digital, la taille de bannière recommandée devrait être :

• 600-700 px de large (320-385 px pour les appareils mobiles)
• 1730 pixels de haut

Boutons CTA

Les spécialistes du marketing par e-mail du commerce électronique ajoutent généralement des boutons CTA colorés pour inciter les clients potentiels à agir. Les spécialistes du marketing B2B, en revanche, peuvent ajouter un lien hypertexte pour diriger leurs abonnés vers leur site Web ou leurs pages de destination.

Pour vous assurer que vos boutons s'alignent sur la conception de votre e-mail, examinons quelques données intéressantes sur la taille des e-mails des boutons CTA :

• La hauteur moyenne du CTA est de 47,9 px
• Apple suggère une hauteur de 44 px
• Le CTA moyen a 14 caractères

Comme vous pouvez le constater, la hauteur du bouton de messagerie est importante pour créer un CTA efficace. Mais qu'en est-il de la largeur ? Eh bien, les spécialistes du marketing par e-mail optent pour différentes tailles de boutons d'e-mail en fonction de leurs objectifs. Considérez les exemples suivants.

Kings Theatre a un bouton très simple qui mesure 122,4 x 41,51 px :

D'autre part, le Wizarding World opte pour un CTA plus proéminent de 300 px de large et 60 px de haut :

Idéalement, vos CTA doivent être en harmonie avec vos visuels et la conception de vos e-mails pour vous assurer qu'ils se démarquent sans être excessifs.

Et bien qu'il n'y ait pas de largeur et de hauteur standard pour eux, vous pouvez utiliser les résultats du bouton CTA ci-dessus comme guide pour créer le vôtre plus efficacement !

Taille de l'image de l'e-mail

Tout d'abord, le format de fichier image le plus populaire lu par les navigateurs de messagerie comprend votre bon vieux JPG (ou JPEG), PNG et GIF . Mais qu'en est-il des dimensions ? Eh bien, en largeur, vos images suivront la taille de votre modèle défini. Ainsi, si vous avez défini une largeur de 640 px, votre image suivra.

En termes de longueur, cependant, vous devez d'abord considérer le but de votre image. S'ils sont utilisés comme bannières, ils doivent être compris entre 800 et 1730 px. De même, si vous les utilisez comme images de newsletter, vous devriez aller jusqu'à 1200 px. Néanmoins, il n'y a pas de tailles d'image d'e-mail standard que vous devez suivre.

Côté qualité, privilégiez une résolution de 72 dpi pour augmenter les performances globales de vos visuels ! Et n'oubliez pas d'optimiser vos images pour les écrans Retina (iPhone, iPad, etc.) !

Les éditeurs de messagerie tels que Moosend vous proposeront des options appropriées pour garantir à vos utilisateurs Apple la meilleure expérience en termes de qualité d'image.

Outre les bonnes dimensions, assurez-vous que vos images ne sont pas trop grandes. Vous pouvez éviter l'écrêtage en utilisant des outils comme TinyJPG ou Imagesmaller pour les compresser. Si possible, essayez de vous en tenir au format PNG car il est plus qu'idéal pour les campagnes par e-mail.

Enfin, gardez à l'esprit que la plupart des clients de messagerie n'utiliseront pas l'option pleine largeur. Soyez donc prudent lorsque vous créez les versions de bureau de vos messages en tant qu'aperçu, et ce que vos abonnés voient peut être différent !

Meilleures tailles d'e-mails pour clouer vos modèles

Maintenant que vous connaissez les meilleures tailles de modèles d'e-mails, vous pouvez créer des campagnes qui s'afficheront correctement à chaque fois.

Bien que vous puissiez utiliser les dimensions ci-dessus comme références, n'hésitez pas à les expérimenter à l'aide d'un éventail d'outils de test. Faites également attention à vos utilisateurs mobiles et au besoin d'e-mails plus réactifs !

Dans cet esprit, il est temps de créer les newsletters de marketing par e-mail les mieux dimensionnées pour votre entreprise !

Et si vous voulez un outil avancé pour vous aider, assurez-vous d'essayer gratuitement Moosend pour créer des e-mails réactifs qui étonneront votre public !