Dimensions du modèle de e-mails : largeur et hauteur des éléments

Ceci est un sujet très complexe et il est impossible de le couvrir en seulement quelques paragraphes.

La largeur typique d’un modèle d’e-mail était de 600 pixels pour les ordinateurs de bureau, 320 pixels pour une vue verticale et 480 pixels pour une vue horizontale sur un appareil mobile. La hauteur était illimitée et dépendait de la longueur du contenu. Il y a quelques années, la largeur de 600 pixels était une norme obligatoire et n’avait aucune alternative. Mais les normes ont changé.

Parlons maintenant de la largeur acceptable des e-mails, de la meilleure largeur de tous les éléments d’un e-mail et de la manière de les ajuster à plusieurs clients de messagerie, écrans et périphériques.

Quelle est la meilleure largeur pour un bulletin de e-mail ?

Il y a un article sur le blogue Litmus qui prétend que la largeur de e-mails de 600 pixels est un mythe. Nous sommes totalement d’accord, car il y a plus d’options que seulement une largeur de 600 pixels, mais elle demeure la plus optimale. Mais d’où vient cette largeur ? Pourquoi exactement 600 px ?

Il y a longtemps, la guerre des résolutions d’écran était loin d’être parfaite et un grand nombre d’appareils étaient bien pires que ceux d’aujourd’hui. C’est alors que la norme de 600 pixels est apparue. Depuis, de nombreuses choses ont changé, mais la largeur de 600 pixels est devenue la norme pour la disposition des e-mails.

Donc, la largeur de 600 pixels est plus une tradition qu’une règle et elle vous assure qu’elle sera correctement affichée sur la totalité des appareils. C’est n’est pas trop mal, non ?

Regardez ce magnifique e-mail HTML avec une largeur de 600 pixels. Cela peut être vraiment spacieux, avec plein de colonnes et d’informations utiles :

Nous avons entendu dire que certains clients e-mail ne présentent pas correctement les e-mails qui sont plus larges que 650 px.

J’ai construit un e-mail, la largeur de la portion du contenu était de 860 pixels. Il a bien été présenté dans tous les clients e-mail majeurs, bien que son arrière-plan ne fut pas affiché par Outlook.com.

Et voici le e-mail que je viens tout juste de recevoir :

(Un e-mail par MailNinja. La largeur du e-mail est de 740 pixels. Gmail, MacOs)

Il y a aussi une croyance que Gmail ne montre pas une couleur de fond si votre modèle de e-mail dépasse les 640 pixels. Par contre, de nombreux tests avec notre outil de tests de e-mails et de nombreux e-mails que j’ai ouvert dans mon compte Gmail prouvent le contraire : les e-mails sont correctement affichés, il en va de même pour leurs arrière-plans aussi.

(Un e-mail de Forbes Daily Dozen. Largeur 800px. Gmail, MacOs)

Un autre mythe est que dans Yahoo! Mail on ne peut voir que des e-mails d’une largeur maximale de 650 px. Par contre, mon e-mail d’une largeur de 810 px s’est bien affiché dans ce client e-mail.

Si vous avez décidé de choisir une largeur qui n’est 600 px, juste à tester votre e-mail avant de l’envoyer via notre outil de test de e-mails qui vous donnera la manière exacte avec laquelle votre e-mail sera affiche dans différents clients e-mails et appareils. 

Nous avons noté que la largeur moyenne des e-mails par les plus importantes marques américaines varie entre 640 et 700 pixels.

(Un e-mail de Banana Republic. Largeur de l’e-mail 640px. Gmail, MacOs)

Alors, comment définir la largeur du modèle de e-mail avec Stripo ? 

Par défaut, elle est déjà de 600 pixels !!

Mais si vous voulez la changer pour une autre dimension, vous devez :

• cliquer sur l’onglet Apparence dans l’éditeur ;
• puis cliquer sur les Paramètres généraux
• définir la largeur de l’e-mail désirée.

Quelle est la meilleure hauteur pour les bulletins e-mail ?

Bien entendu, la hauteur d’un e-mail est illimitée. Vous pouvez utiliser autant de rangées dont vous avez besoin pour présenter tout le contenu que vous avez. Mais rappelez-vous que plus le e-mail est long, moindres sont les chances qu’il soit lu jusqu’à la fin. 

La hauteur totale d’une page Web est de 960 px, ce qui n’est habituellement pas suffisant pour présenter toute l’information que vous avez préparée pour partager dans un e-mail. Vous ne pouvez pas échapper au défilement. La longueur des e-mails varie habituellement entre 1 500 et 2 000 pixels. C’est habituellement suffisant pour le contenu et facile à défile pour les usagers.

Il est intéressant de noter que les e-mails appartenant à des sujets touristiques sont les plus longs par rapport aux e-mails d’autres industries. Les e-mails du commerce électronique sont également longs, malgré le fait que les cartes de produits sont généralement très compactes, les spécialistes du marketing publient toujours trop de produits dans un seul e-mail.

Voici un exemple d’un modèle de e-mail d’une hauteur de 2 550 pixels :

Comme vous le voyez, 4 différents blocs de contenu sont aisément fusionnés dans un e-mail facile à défiler.

Important de noter :

Sur les appareils mobiles, la longueur de vos modèles de e-mail augmente en raison de la réorganisation des blocs.

Si vous pensez que votre e-mail sera trop long sur les appareils mobiles, vous pouvez toujours masquer certains éléments avec Stripo.

Alors, comment cacher des éléments du e-mail sur les appareils mobiles ?

• cliquez l’élément désiré dans votre modèle d’e-mail pour activer ses paramètres ;
• dans le panneau des paramètres, défilez pour trouver le contrôle « Masquer l’élément » ;  

• terminé. Le ou les élément(s) choisis ne seront pas affichés sur les appareils mobiles supportant les demandes de média.

Dimensions de l’aperçu de l’e-mail

De nombreux clients de messagerie tels qu’Outlook, Apple Mail et Thunderbird ont une fenêtre d’aperçu d’une taille limitée : 600 pixels de large et 300 à 500 pixels de haut. Ils n’affichent pas la copie réduite de l’intégralité de l’e-mail, mais capturent le champ supérieur de l’e-mail avec un aperçu approprié de la taille de la fenêtre.

Assurez-vous que le premier 300px-500px contient des informations précieuses qui inciteront les utilisateurs à ouvrir et à lire un e-mail. Une bonne première impression vaut mieux que mille « j’aime ».

Les utilisateurs de ces clients de messagerie ne constitueront pas la moitié de votre liste de contacts. Il n’est donc pas nécessaire de modifier la taille de votre modèle de e-mail.

Voici à quoi ressemble le volet de visualisation dans le client de messagerie mail.com :

Taille du pré-en-tête

Le pré-en-tête est un élément de ligne/e-mail qui va au-dessus du modèle. Elle comprend un bref message d’introduction qui s’affiche avec une option permettant d’afficher le e-mail dans le navigateur ou sous forme de version Web en cas de problème de rendu du e-mail. Certaines marques y placent des informations très importantes, telles que les notifications concernant la livraison gratuite. 

(e-mail de Adidas)

En raison du fait que ce domaine est plutôt technique que contextuel, vous ne devriez pas le rendre grand ou y placer des éléments supplémentaires.

La taille du champ de pré-en-tête varie de 50 pixels à 65 pixels de hauteur. La largeur hérite de la taille des dimensions du modèle du e-mail.

Lors de la création de cet élément de e-mail, vous devrez ajouter un lien vers la « version Web » de votre e-mail.

Alors, comment obtenir le lien vers la version Web de votre e-mail avec Stripo ?

• une fois que votre e-mail est construit, allez dans le mode de prévisualisation ;

• dans une nouvelle fenêtre, cliquez le bouton « Copie » ;  

• terminé. — le lien a été sauvegardé dans votre presse-papiers.

Important de noter :

Nous parlons présentement du pré-en-tête en tant qu’élément d’un e-mail. Pourtant, il y a aussi le texte de tête que vous pouvez définir avec Stripo. Le texte de l’en-tête est affiché en mode aperçu uniquement. 

L’élément de pré-en-tête est affiché dans le e-mail aussi.

Taille de l’en-tête

La hauteur la plus courante pour un en-tête qui ne contient pas de menu ni de logo volumineux est de 70 px. Pour celles qui ont une barre de menu, l’en-tête peut être d’une hauteur de 150-200 px. Une hauteur d’en-tête de plus de 300 px n’est pas pratique à lire.

Des centaines et des milliers de styles sont utilisés pour la conception des en-têtes de e-mails, mais vous devez choisir celui qui est à la fois convivial et compatible avec les appareils mobiles. Indépendamment de cela, choisissez le style et les couleurs qui permettent de mettre en valeur l’identité de votre marque et ne se fragmentent pas dans les boîtes de réception des utilisateurs.

Voici quelques exemples d’une bonne conception d’en-tête de e-mail :  

Important de noter :

Normalement, un menu de e-mail contient de 3 à 5 onglets. Si vous en ajoutez plus, assurez-vous de cacher les onglets supplémentaires pour les appareils mobiles.

Pour plus d’informations sur la méthode de créer un en-tête de e-mails avec Stripo, référez-vous à cet article de notre blogue.

Taille de la bannière

Une bannière est un endroit où vous pouvez mettre en œuvre votre créativité et vous ne devriez pas être limité avec les dimensions. Moins vous y mettez de contenu, meilleurs sont les résultats. Plus l’appel à l’action est clair, plus vous obtenez de conversions. 

Vous ne devez pas économiser d’espace entre les lignes de texte ; vous pouvez expérimenter avec des tailles de police. Les bannières les plus populaires ont une image en arrière-plan et sont situées juste après l’en-tête.

Les plus courantes sont les tailles 600 px x 300 px et 600 px x 400 px pour les bannières. De nombreux concepteurs d’e-mail expérimentent les tailles de bannière. Bien que la largeur soit limitée par la taille du modèle d’e-mail, sa longueur/hauteur peut être différente.

Important de noter :

Avec Stripo, vous pouvez choisir la forme de votre bannière. Cela s’appelle — orientation. Elle peut être verticale lorsque la hauteur est supérieure à la largeur, carrée et horizontale lorsque la largeur est supérieure à la hauteur.

En faisant votre sélection, vous ne devrez pas définir de paramètres spéciaux, car la largeur hérite de sa taille de la taille du modèle de e-mail, et la hauteur dépend de l’orientation choisie.

Le mode horizontal est le type d’orientation le plus populaire pour les bannières.

Voici quelques exemples de bannières créatives et informatives :  

Voici celle qui est animée :

Taille du bouton

Il n’y a pas de largeur standard pour les boutons de e-mails. L’exigence commune est qu’un bouton contraste avec tous les autres éléments de l’e-mail, mais, en même temps, de manière organique, correspond au design de l’e-mail.

Pour rendre votre bouton visible et cliquable, vous devez travailler sur sa conception et sur sa taille.

Si le texte du bouton est court, utilisez de l’espace vide pour votre bouton. Dans Stripo, cela s’appelle le « Rembourrage ». 

Ne vous inquiétez pas. En raison de la conception unique de nos boutons, cet espace blanc est cliquable :)

Les lecteurs n’ont pas besoin de cliquer sur le texte du bouton. Ils peuvent cliquer où ils veulent.

Il est également très important de prendre soin de votre public mobile et de rendre les boutons aussi grands que possible pour permettre aux lecteurs de cliquer sur le bouton avec le pouce et non de cliquer sur tous les autres éléments lors de la lecture de vos e-mails sur des appareils mobiles.

Parfois, il est même difficile de trouver un bouton ou de lire son texte parce que la taille est trop petite ou que sa police est illisible.

Alors, comment utiliser une grande police et rendre vos boutons pleine largeur sur les appareils mobiles ?

Pour définir une police plus grande pour vous bouton sur les appareils mobiles, vous devez :

• aller dans l’onglet « Apparence » ;
• entrer dans la section « Vue mobile » ;
• définir la « Taille texte Bouton » ;
• et basculez le bouton « Boutons extra-larges ».  

La taille la plus commune pour le texte des boutons est de 16 pixels.

Voici un exemple démontrant le contraste :

Voici un exemple d’un bouton pour une bannière largement répandu :

Taille de l’image

Considérant que la largeur moyenne des e-mails est de 600 px — 640 px pour l’ensemble du modèle, la largeur de l’image héritera de sa taille — lorsqu’on parle des bannières. Il y a des tonnes d’images avec cette largeur en stock ou sur Pinterest. Stripo fournit également plus de 10 000 images gratuites dans sa banque.

En ce qui concerne les fiches pour les produits, il n’existe aucune norme.

Par conséquent, la hauteur est un ajustement proportionnel à la largeur indiquée. Une fois que vous avez téléchargé votre image, vous pouvez changer sa largeur - et sa hauteur sera modifiée proportionnellement ; c’est-à-dire que le rapport largeur/hauteur sera sauvegardé. 

Dans Stripo, vous pouvez recadrer les images ou définir le rapport avec notre éditeur de photos intégré Pixie. Pour entrer en mode d’édition, vous devez cliquer sur le bouton « Modifier » à côté de l’image dans le panneau de configuration. 

Important de noter :

N’oubliez pas que vous devez compresser les images, faute de quoi votre e-mail sera trop lourd et son envoi mettra un certain temps à se charger sur les écrans mobiles des destinataires. Vous pouvez le faire avec Tiny.png ou tout autre outil spécial du même genre. 

Taille du bloc de contenu

Le bloc de contenu comprend normalement du texte, un extrait d’image/photo et un bouton.

Nous avons déjà discuté de la taille des images et des boutons. En ce qui concerne le texte, il n’y a pas de limite, car il hérite toujours de la largeur des lignes du e-mail ou des conteneurs/blocs. Vous pouvez placer du texte sur des images, sous ou au-dessus des images. C’est totalement à votre discrétion.

Voici un exemple où cela a été fait à la perfection :  

Un nombre de blocs de contenu

Nous osons dire : « Moins, c’est plus ». Utilisez des images, mais ne surchargez pas votre e-mail avec des photos qui ne fournissent aucune information utile et qui n’ont aucun lien avec le sujet du e-mail.

N’essayez pas de ranger dans le même e-mail tous les produits que vous avez sur votre site Web en tant que nouveaux arrivants ou propositions de vente. Il est préférable de publier les meilleures offres et de fournir un lien vers le site Web dans le menu principal et dans un pied de page. Il existe une règle pour ne pas créer plus de 6 à 9 cartes d’achat dans un même e-mail, comme cela a été fait ici :

Mieux vaut que vos blocs de contenu ne dépassent pas 900 pixels de longueur. C’est suffisant pour créer 3 blocs d’information différents. Chaque fois que vous ajoutez un nouveau bloc, demandez-vous si cette information est appropriée et indispensable.

Toutefois, si vous souhaitez ajouter un certain nombre de blocs à vos e-mails, vous pouvez utiliser des carrousels d’images, des accordéons, et ajouter des vidéos qui pourraient être plus informatives que même des centaines de photos.

Taille du pied de page

En fait, certaines sociétés ajoutent des menus aux pieds de page afin qu’ils soient plus volumineux que les variantes classiques de cet élément. Certaines entreprises fournissent l’adresse complète avec un code postal et ainsi de suite afin que leurs bas de page soient suffisamment grands.

Je préfère les bas de page laconiques qui ne contiennent que les informations qui devraient figurer à 100 %. Le pied de page classique doit contenir les informations de contact, les liens de désabonnement, les icônes de réseaux sociaux et la raison pour laquelle vous contactez les destinataires. C’est pourquoi la dimension de pied de page standard 600px x 200px est plus que suffisante pour afficher toutes ces informations. 

Apprenez-en davantage sur le design de pied de page de e-mails avec cet article de notre blogue. N’hésite pas à le partager avec vos amis et collèques si vous le désirez !

Vue mobile

Nous vous rappelons que vous pouvez définir des paramètres spéciaux pour tous les éléments de la vue mobile. Ils seront différents des ordinateurs de bureau.

Pour passer en mode de configuration, cliquez sur l’onglet « Apparence » dans le panneau de configuration, puis cliquez sur la section « Vue mobile ».

Ici, vous pouvez définir des paramètres individuels spéciaux pour :

• la taille du texte pour les items du bloc de menu ;
• la taille de la police pour les en-têtes ;
• la taille de la police pour les pieds de page ;
• la taille de la police pour les éléments de contenu ;
• les tailles de police pour les en-têtes 1 à 3 ;
• l’alignement pour vos en-têtes ;
• la taille du texte des boutons ;
• et définir si vous voulez que vos boutons soient affichés en pleine largeur ou non sur les appareils mobiles.  

(Sur ordinateur de bureau)

 

(Écran mobile, bouton pleine largeur)

Taille totale du e-mail

• Si votre e-mail est lourd, vous n’aurez aucune garantie qu’il sera affiché en taille réelle, en particulier dans les clients de messagerie tels que Gmail et Yahoo! Mail. Gmail et Yahoo! Mail pèsent la taille du code HTML de votre e-mail et le coupent si la taille dépasse ces valeurs :
• la taille limite pour Gmail est de 102 ko ;
• la taille limite pour Yahoo! Mail est de 100 ko.

Vous pouvez peser votre e-mail avec mail-tester. C’est totalement gratuit.

La taille de l’e-mail dépend souvent de l’éditeur de messagerie que vous utilisez. Généralement, un code supplémentaire est ajouté automatiquement lors de la création d’un modèle de e-mail. Vous pouvez supprimer ce code manuellement et réduire considérablement la taille de l’e-mail ou simplement choisir l’éditeur qui le fait. Stripo en fait partie et fournit du code HTML pur sans aucun caractère système. Vérifiez cela en créant tout modèle dont vous avez besoin ou que vous souhaitez.

En résumé

Nous avons analysé la largeur et la hauteur d’un modèle de e-mail en général et de chaque élément distinct en particulier. La largeur de 600 px est non seulement sûre et fiable, avec une présentation correcte à 100 % sur tous les appareils et les clients de messagerie, mais aussi la plus connue des utilisateurs.

La hauteur dépend de la longueur du contenu, mais ne doit pas dépasser 2 500 pixels dans le meilleur des cas. Plus vous ajoutez d’images, plus il est crucial d’utiliser un compresseur d’images. Parfois, vous avez également besoin d’optimiser le code HTML du e-mail. 

Aucune règle précise ne dicte les dimensions des éléments d’un e-e-mail. Vous pouvez donc expérimenter avec des formes et des tailles sans toutefois rendre le modèle trop inhabituel et bizarre pour les utilisateurs. Accomplissez votre créativité avec des images et du texte que vous choisissez. Nous vous souhaitons bonne chance dans le processus de création de e-mail.