Dans cet article, nous vous dévoilerons tous les secrets de la création de bannières pour vos e-mails. Découvrez les différents types de bannières, leurs dimensions idéales et comment les intégrer harmonieusement à vos designs grâce à Stripo.
Les bannières sont un outil formidable pour structurer vos e-mails, attirer l'attention des destinataires sur les éléments clés de votre message et vous permettre de vous démarquer dans les boîtes de réception saturées de vos lecteurs. Cependant, une bannière de taille inadaptée peut nuire à la présentation de votre contenu et anéantir tous vos efforts.
Dans cet article, vous découvrirez la largeur et la hauteur idéales d'une bannière et les points essentiels à prendre en compte lors de sa création pour vos campagnes d'emailing. Nous vous fournirons également des conseils utiles créer des bannières accrocheuses avec Stripo en quelques minutes.
Qu'est-ce qu'une bannière d'e-mail ?
Il s'agit d'une image de haute qualité placée en haut de votre message pour en souligner l'objectif principal et le ton. Les bannières peuvent être accompagnées du nom de votre marque, de votre logo, d'un appel à l'action, de votre offre et de photos de vos produits. Vous pouvez y inclure des textes courts et percutants comme « 15 % de réduction sur une sélection d'articles » ou « Vente flash ce week-end » afin de rendre le message de votre e-mail le plus clair possible.
(Source : Modèle Stripo)
L'importance de la taille des bannières d'email
Une image de bannière présente votre proposition de valeur unique (PVU) et Les éléments associés à votre marque, tels que votre logo, vos appels à l'action, vos couleurs et vos graphismes, vous distinguent des centaines d'e-mails promotionnels qui inondent les boîtes de réception de vos destinataires et incitent vos abonnés à ouvrir et à lire vos messages.
Une bannière d'e-mail de taille inadaptée peut nuire à la présentation de votre contenu. Une bannière trop large obligera votre client de messagerie à activer le défilement horizontal, tandis qu'une bannière trop petite obligera vos destinataires à plisser les yeux pour lire votre contenu.
Dimensions idéales pour un modèle d'e-mail
La taille de bannière d'e-mail la plus utilisée est de 600 à 700 pixels de large pour les appareils de bureau, ce qui garantit un affichage correct sur tous les appareils. Quant à la hauteur, elle est souvent comprise entre 350 et 500 pixels.
Concernant les appareils mobiles, il n'existe pas de taille idéale pour les bannières publicitaires, car chaque téléphone est différent. Toutefois, il est préférable que la bannière s'affiche en plein écran, sans que les destinataires aient à faire défiler. Pour ce faire, la hauteur de la bannière doit tenir dans la zone visible de l'e-mail. Cette zone est plus petite que l'écran de l'appareil en raison de la présence de l'interface de messagerie.
Par conséquent, si vous avez besoin d'une taille fixe, vous pouvez prendre en compte les appareils les plus populaires actuellement, tels que les Samsung Galaxy S21 et S20 (écran de 360 x 800 pixels) et les iPhone 14, 13 Pro et 12 Pro (écran de 390 x 844 pixels). En soustrayant l'interface de messagerie de la hauteur, vous estimez que l'espace disponible pour la bannière est d'environ 616 pixels pour les appareils Samsung et d'environ 650 pixels pour les iPhones.
Roman Burdyga,
Le respect des dimensions de bannières d'e-mail que nous avons partagées ci-dessous vous aide à créer des designs visuellement attrayants et adaptés aux écrans de bureau et mobiles, en évitant de créer une bannière d'e-mail de taille incorrecte.
Il est possible d'utiliser différents types de bannières publicitaires dans votre newsletter pour atteindre divers objectifs. Nous allons maintenant aborder la bannière idéale. Taille des bannières d'e-mail pour les bannières du corps de vos e-mails responsifs, en-têtes et pieds de page.
Taille de la bannière d'en-tête de l'e-mail
Une image d'en-tête dynamique et attrayante incitera vos lecteurs à poursuivre leur lecture. Vous pouvez y intégrer le logo de votre entreprise, un court texte expliquant l'objectif principal de votre e-mail et un appel à l'action. Nous vous recommandons de limiter la largeur de la bannière à 600-700 pixels et sa hauteur à 90-200 pixels sur ordinateur.
Sur les appareils mobiles, il est recommandé d'utiliser des éditeurs d'emails modernes compatibles avec les images adaptatives pour la création de bannières. Grâce à cette approche, l'image s'adapte automatiquement à la taille de l'écran. Les images adaptatives vous simplifieront la vie, car il est impossible de prévoir sur quel appareil mobile votre email sera ouvert. Votre objectif principal est donc d'offrir une expérience utilisateur optimale, et les images adaptatives sont la solution idéale.
Dans d'autres cas, vous pouvez suivre les conseils du Romain ci-dessus.
Voici un exemple d'en-tête d'e-mail de 650 px (largeur) et 200 px (hauteur) :
Taille de la bannière du corps de l'e-mail
Une bannière percutante intégrée au corps de votre e-mail permet de transmettre l'idée principale de votre message sans noyer le lecteur sous de longs paragraphes. Vous pouvez y dévoiler plus de détails sur votre offre et expliquer comment elle peut résoudre les problèmes de vos clients.
Pour les écrans d'ordinateur, nous vous conseillons de créer une bannière de 650 à 700 px de large et de 350 à 500 px de haut. Sur les appareils mobiles, le principe est le même. Tenez compte des tailles d'écran courantes, comme indiqué précédemment, ou utilisez des éditeurs d'e-mails modernes dotés de fonctionnalités permettant de créer des images dynamiques qui s'adaptent automatiquement.
(Source : Modèle Stripo)
Si vous avez besoin d'une bannière statique, voici une solution de contournement : créez deux bannières distinctes, une pour ordinateur et une pour mobile. Ces bannières s'afficheront ensuite sur les appareils appropriés. L'image semblera ainsi s'adapter au format d'écran. Cependant, cette méthode implique un travail supplémentaire pour le graphiste, du code additionnel dans l'e-mail et un temps de téléchargement plus long pour les destinataires.
Roman Burdyga,
Taille de la bannière de pied de page de l'e-mail
Placé en bas de votre newsletter, le pied de page peut inclure les coordonnées de votre organisation pour toute question, vos comptes sur les réseaux sociaux et l'option « Se désabonner ». Ces informations permettent à votre contenu d'éviter le dossier spam et d'arriver directement dans la boîte de réception de vos destinataires.
Gardez votre Pour les écrans d'ordinateur, le pied de page des e-mails doit mesurer entre 650 et 700 px de large et jusqu'à 150 px de haut. Sur mobile, nous vous conseillons de suivre nos recommandations concernant les dimensions d'images prédéfinies, adaptées aux écrans les plus courants, ou de créer vos e-mails avec des éditeurs prenant en charge les images responsives afin de simplifier votre travail. Voici un exemple de pied de page (700 px de large et 150 px de haut) :
(Source : Modèle Stripo)
Taille de la bannière de signature électronique
Les signatures sont souvent placées en bas des e-mails et peuvent être réalisées à l'aide de bannières. Les dimensions de votre signature sous forme de bannière sont sensiblement les mêmes que celles du pied de page classique : Vous pouvez donc les définir entre 650 et 700 pixels de largeur et jusqu'à 150 pixels de hauteur pour la version de votre messagerie électronique sur ordinateur de bureau.
(Source : Modèle Stripo)
Pour les appareils mobiles, utilisez des tailles d'image prédéfinies ou une approche d'image réactive si votre éditeur de messagerie prend en charge des fonctionnalités similaires qui vous permettent de créer des parties d'e-mail avec des images dynamiques.
Éléments à prendre en compte lors de la création d'une bannière d'email
Maintenant que vous connaissez les dimensions idéales pour les différents types de bannières d'e-mail, examinons quelques autres éléments essentiels à prendre en compte lors de la conception pour rendre vos bannières attrayantes :
Taille du bouton
Les boutons des bannières d'e-mail doivent être suffisamment visibles ; Il est donc essentiel de veiller à ce qu'ils ne se confondent pas avec l'image d'arrière-plan et les autres éléments de votre message.
(Source : Modèle Stripo)
Texte sur les images de bannière
Une bannière d'e-mail classique se compose d'une image et de texte superposés. Il est donc essentiel de choisir des polices et des couleurs appropriées pour que votre texte soit lisible et attrayant. Par exemple, un texte marron sur une image noire serait difficilement lisible. Il en va de même pour les couleurs claires : un texte blanc sur un fond gris clair est à proscrire.
Nous vous recommandons d'expérimenter avec les polices, les couleurs, les tailles et le positionnement de votre texte afin de le rendre visible et lisible. Sur les images ci-dessous, vous pouvez voir une bannière avec une police illisible et un texte gris sur fond marron. L'image de fond paraît désordonnée, tandis que la première option, avec une police plus lisible et une couleur contrastée, est beaucoup plus facile à repérer.
Taille de l'image
Il est également essentiel d'avoir une bonne vitesse de chargement. Plus votre e-mail se charge rapidement, mieux c'est. Veillez à compresser vos images de bannière avant de les ajouter à vos e-mails afin d'éviter d'augmenter la taille du fichier de bannière.
Lorsque vous utilisez Stripo, vous pouvez compresser automatiquement toutes les images que vous ajoutez. Il vous suffit d'activer la compression d'image et de choisir le pourcentage de compression souhaité dans les paramètres de votre espace de travail.
Optimisation des appareils
Les bannières d'e-mail avec des images sur le thème des fêtes nécessitent une optimisation pour tous les appareils afin de garantir leur accessibilité et leur efficacité sur tous les supports. Pendant les fêtes, lorsque les gens sont pressés, ils utilisent principalement leurs téléphones ou tablettes. Il est donc essentiel que votre modèle soit optimisé, ainsi que tous les boutons d'appel à l'action et les illustrations.
Image de marque
En créant une bannière de fin d'année pour vos e-mails, ornée d'images de votre marque, vous renforcez la notoriété de votre marque et attirez de nouveaux clients, un atout essentiel pour votre entreprise. Veillez à ce que cette bannière soit cohérente avec vos autres supports de communication : utilisez le modèle de votre marque et personnalisez-la pour qu'elle reflète votre identité visuelle. Vos campagnes d'e-mailing pour les fêtes seront ainsi facilement identifiables. Un logo, une typographie et une palette de couleurs harmonieuses contribuent à instaurer un climat de confiance et de fidélité entre les consommateurs et les entreprises, favorisant ainsi l'engagement, les ventes et le retour sur investissement.
Création de liens
Assurez-vous que l'image de votre bannière de fêtes renvoie vers la page de destination appropriée ! Il est très facile d'ajouter un lien à n'importe quelle image ; par exemple, un lien vers une page produit peut être un excellent choix si vous faites la promotion d'un produit en particulier. Les destinataires cliquent et interagissent directement avec votre contenu. Ainsi, vous augmentez votre taux de clics et générez des conversions directement depuis votre bannière de fêtes.
Création d'une bannière avec Stripo
Grâce à notre éditeur, vous pouvez créer des bannières pour vos e-mails en quelques minutes. Voici quelques conseils pour vous faciliter la tâche :
Préparation de votre bannière
Tout d'abord, vous devez ajouter une bannière à votre modèle d'e-mail. Nous mettons à votre disposition un bloc Bannière dédié que vous pouvez glisser-déposer dans votre modèle.
Ensuite, cliquez sur la bannière ajoutée pour ouvrir ce menu. Avant de pouvoir modifier les dimensions et autres paramètres, vous devez joindre une image à votre bannière d'e-mail. Plusieurs options s'offrent à vous : importer une image depuis votre appareil, utiliser des images libres de droits ou générer une image unique grâce à notre fonctionnalité d'IA.
Pour cet exemple, nous avons choisi une image provenant d'une banque d'images. Il vous suffit de cliquer sur l'image souhaitée (saisissez une requête de recherche dans le champ prévu à cet effet si vous ne trouvez pas immédiatement d'images adaptées à vos idées de design), et elle sera automatiquement ajoutée à la bannière.
Une fois cette étape terminée, vous pouvez procéder à la modification des paramètres de la bannière de l'e-mail.
Modifier la largeur et la hauteur de l'écran de bureau
Pour définir la taille correcte de la bannière de votre e-mail, rendez-vous dans l'onglet Paramètres. La section Taille vous permet de définir les dimensions souhaitées.
Vous aurez besoin de plusieurs boutons pour définir la taille appropriée de votre bannière (de gauche à droite) :
- adapter l'image à la taille du conteneur ;
- restaure la taille réelle de l'image ;
- mode de réglage de la largeur ;
- mode de réglage de la hauteur ;
- boutons de réglage de la taille (fonctionnent séparément pour les modes de réglage de la largeur et de la hauteur).
Il vous suffit de définir les dimensions appropriées à l'aide de ces boutons, et vous êtes prêt à partir.
Vous pouvez également définir une forme de recadrage dans la section correspondante en choisissant parmi les orientations prédéfinies (verticale et horizontale).
Modification de la largeur et de la hauteur pour les écrans mobiles
Pour que votre bannière d'e-mail s'affiche correctement sur les écrans mobiles, cliquez sur l'option « Vue mobile » pour ouvrir les paramètres de la version mobile dans Stripo.
L'option d'image réactive est activée par défaut ; ainsi, dans la plupart des cas, vous n'avez rien à faire, car cette option garantit que votre image de bannière s'adaptera automatiquement aux dimensions de l'écran.
Vous pouvez désactiver cette option, mais nous vous le déconseillons, car une fois désactivée, l'image de votre bannière restera fixe, quelle que soit la résolution de l'écran. Cela peut entraîner un affichage médiocre des images et du contenu de votre bannière.
La modification de la forme du recadrage est identique à celle de la version de bureau.
Ajout d'images et de liens
Pour ajouter un bouton à votre bannière, nous vous proposons une option permettant d'y superposer une image. Vous pouvez ainsi combiner votre image de fond avec une autre, créant des designs uniques pour vos e-mails ou mettant en valeur votre bannière.
Pour ce faire, cliquez sur l'option Image dans les paramètres du bloc Bannière.
Vous verrez le même menu pour ajouter une image que celui utilisé précédemment pour la bannière complète. Il vous suffit de sélectionner l'option appropriée pour continuer.
Une fois ajoutée, votre image apparaîtra au centre de votre bannière, et vous verrez un petit menu avec des options permettant de régler l'opacité de cette image, sa rotation, de la retourner comme vous le souhaitez et d'appliquer des filtres visuels par-dessus.
Pour modifier la taille de cette image supplémentaire, faites glisser les coins du cadre ; l’image changera alors de taille. Vous pouvez également la déplacer à l’intérieur des bordures de la bannière en cliquant dessus et en la faisant glisser, ou la faire pivoter manuellement en touchant le point situé au-dessus du cadre.
Vous avez ajouté votre image d'appel à l'action pour attirer l'attention. Comment rendre votre bannière cliquable ? Il vous suffit de saisir le lien dans le champ prévu à cet effet. Une fois ajouté, votre bannière se transformera en un bouton d'appel à l'action qui redirigera le destinataire vers la page souhaitée.
Ajout de textes et modifications
Si vous souhaitez personnaliser davantage votre bannière, vous pouvez y ajouter du texte. Cliquez sur l'option « Texte » située au-dessus de votre bannière.
Le nœud de texte apparaîtra automatiquement au centre de votre bannière, et vous verrez un onglet avec différentes options de texte.
Pour saisir votre texte, double-cliquez simplement sur le nœud de texte pour sélectionner le texte par défaut, puis saisissez votre nouveau texte.
Quant aux options de personnalisation, elles sont nombreuses. Vous pouvez modifier manuellement la position, la taille et la rotation en faisant glisser les coins du cadre du nœud Texte ou en faisant glisser le nœud entier, comme vous l'avez fait pour votre image.
Quant au texte lui-même, vous pouvez :
- sélectionner la police du texte, sa taille et sa couleur ;
- choisir l'alignement du texte ;
- modifier les styles comme le gras, l'italique, le soulignement ou le barré ;
- modifier la casse des lettres en majuscules ou en minuscules ;
- régler l'opacité, la rotation et inversez le texte selon vos besoins.
Voici à quoi ressemble notre nœud de texte une fois la plupart des options appliquées. Modifiez facilement les textes pour qu'ils correspondent à vos besoins en matière de conception d'e-mails.
Pour conclure
La taille idéale de votre bannière d'e-mail structure votre message et attire l'attention de vos abonnés sur ses éléments clés. Maintenant que vous connaissez la largeur et la hauteur parfaites d'une bannière et que vous savez comment en créer une avec Stripo, vous êtes fin prêt pour faire de votre prochaine campagne un succès !
0 commentaires