Bannières par email : types, tailles et comment les créer en quelques minutes

Il est difficile d'imaginer un email promotionnel moderne sans une bonne bannière. Le négliger ou le mal concevoir peut entraîner l'ignorance de votre courrier. Et la situation dans le marketing par e-mail, c'est que vous avez clairement vu des milliers d'emails avec des bannières bonnes et mauvaises.

La bannière est le premier élément que vos destinataires voient. Ainsi, il doit être accrocheur, envoûtant et émouvant. Choisir la bonne taille pour votre bannière est essentiel pour qu'elle s'intègre bien dans le design de votre email.

Nous allons passer en revue certains des types de bannières les plus populaires, discuter des meilleures pratiques de design, et montrer comment mettre en œuvre facilement vos idées avec Stripo.

Points clés

1. La taille idéale de la bannière est généralement d'environ 650 à 700 pixels de large et 90 à 200 pixels de haut pour un bureau, tandis que pour le mobile elle doit être de 350 pixels de large et jusqu'à 100 pixels de haut.
2. Le mode sombre est délicat pour les bannières email, car il peut modifier le texte, les couleurs d'arrière-plan et les éléments transparents de la bannière. Pendant ce temps, les bannières créées en une seule image restent généralement intactes.
3. Il est généralement plus difficile de créer des bannières email pour Outlook, car cela nécessite un codage rigoureux pour que cela soit bien paru, pour un comportement réactif, du texte en direct sur des bannières, et des bannières d'image d'arrière-plan en général.

Qu'est-ce qu'une bannière email ?

Une bannière d'email est un élément spécial de la newsletter qui occupe généralement le début de l'email, juste après l'en-tête. Dans la plupart des cas, il contient toute la largeur de l'email et se compose d'images et de textos de soutien.

Le but principal d'une bannière email est d'attirer l'attention et de transmettre rapidement des informations importantes grâce à la puissance des visuels et à un texte percutant. Il raconte l'histoire, fait la promotion des produits, tease des événements, délivre divers avertissements et constitue un excellent ajout à tout design d'email.

(Source : Email Love)

Bannière d'en-tête vs. bannière signature

Les bannières classiques sont assez simples, mais en plus, il y a aussi des bannières d'en-tête et des bannières signatures. Même si elles sonnent similaires, leur apparence générale et leur emplacement sont un peu différents.

Les bannières d'en-tête, comme leur nom l'indique, sont la première chose que les destinataires voient et remplacent généralement la bande d'en-tête supérieure par une bannière complète. Pas de boutons de menu, des rayures spécialement créées pour les logos, etc. Juste la bannière du git-go. Il contient tout ce dont vous pourriez avoir besoin, comme votre logo de marque, un texte percutant, des images accrocheuses et un bouton CTA pour le rendre non seulement joli mais aussi utile en termes de clics.

(Source : Email Love)

Pendant ce temps, la bannière de signature est placée près de votre signature de courriel (généralement, juste en dessous). Son objectif principal est de promouvoir subtilement quelque chose (en raison de sa taille compacte globale) dans des e-mails réguliers et d'établir une visibilité continue de la marque.

(Source : Mysignature.io)

Pourquoi les bannières par email sont importantes

Les bannières d'email peuvent avoir une structure simple ; Cependant, leur application et leurs avantages pour le marketing par email sont indéniables. Les bannières mettent en avant vos produits et événements, informent les destinataires des diverses mises à jour et aspects importants de votre entreprise, mettent en avant vos réussites et études de cas, stimulent les ventes et la visibilité de votre marque, et bien plus encore. Seulement trois éléments (image, texte et CTA), mais les possibilités de conception et d'adaptation pour n'importe quelle situation et entreprise sont illimitées.

Types de bannières email selon leur objectif

Les bannières d'email peuvent sembler être un simple élément pour attirer l'attention et rendre votre email bien paraître. Cependant, les bannières ont plusieurs objectifs que vous pouvez couvrir en concevant une pour votre newsletter.

Bannières promotionnelles

Les bannières promotionnelles sont les plus courantes que vous pouvez voir dans de nombreux e-mails. Le style de design habituel pour eux est l'image produit, une courte copie avec une fonctionnalité, une description ou un avantage exceptionnel, et un bouton CTA pour encourager les destinataires à l'acheter. L'avantage de ce type de bannière, c'est que vous pouvez l'utiliser pour promouvoir ce que vous voulez.

(Source : Email Love)

Bannières saisonnières et de fêtes

Les différentes fêtes et événements saisonniers sont un véritable trésor pour tout marketeur, et les bannières sont vos principaux outils pour attirer l'attention sur l'événement. Les bannières de ce type ont généralement un design festif avec des éléments pertinents pour l'occasion.

Par exemple, une bannière classique sur le thème de Noël comportera des éléments de design en forme de flocon de neige, des photos de divers cadeaux, et une copie spéciale qui attire l'attention sur votre contenu global dans cet email ou simplement souhaite de bonnes fêtes. Ces bannières visent davantage à attirer l'attention sur l'événement, mais personne ne vous interdit d'ajouter divers CTA ou de promouvoir des produits ou services à thème festif.

(Source : Email Love)

Bannières d'embauche

Ces bannières ont un champ d'utilisation assez restreint, car leur objectif principal est d'informer le destinataire des opportunités d'emploi potentielles. Le but principal est de donner les détails essentiels de l'offre d'emploi, rien de plus, rien de moins.

(Source : modèle Stripo)

Bannières de preuve sociale

En termes de chiffres, 97 % des décisions d'achat sont prises sous l'impact des avis clients. Vous pouvez intégrer la preuve sociale dans la conception de votre bannière email pour rendre vos produits ou services encore plus attrayants. Par exemple, vous pouvez ajouter un cas d'usage vidéo complet de votre client, ou ajouter des captures d'écran des avis sur votre produit.

(Source : Email Love)

Bannières de marque d'entreprise

Ces bannières visent davantage à faire ressortir votre marque et ses caractéristiques. Intégrez les couleurs, polices, devises et images de votre marque pour la rendre plus visible et mémorable.

(Source : Email Love)

Tailles idéales de bannière d'e-mail

Parlons maintenant des tailles des bannières, car elles occupent une assez grande place dans la conception de vos e-mails, mais vous devez savoir dans quelle mesure :

• la taille de bannière de bureau avec 650 à 700 pixels de large et 90 à 200 pixels de haut est parfaite ;
• la taille d'une bannière mobile de 350 pixels de large et jusqu'à 100 de haut sera parfaite sur les écrans de téléphone ;
• la taille signature de la bannière de 600 pixels de large et 150 px de haut ira bien dans votre pied de page ;
• la taille totale du fichier doit être limitée autour de 40 Ko avec un format PNG.

Meilleures pratiques de conception de bannières par email

Pour rendre votre bannière visuellement attrayante et percutante, vous pouvez appliquer différentes approches de design dont nous parlerons ci-dessous.

Gardez la marque

Créer votre bannière email conforme à la marque est en fait assez simple. Tout d'abord, vous devriez utiliser des couleurs de marque associées à votre entreprise. Vous pouvez les intégrer sous forme de couleurs de police, de couleurs d'arrière-plan ou divers éléments de design. La deuxième chose est la police (ou les polices) que vous souhaitez utiliser. 

La plupart des entreprises ont des polices qui leur sont associées, donc créer une copie avec ces polices est un moyen sûr de créer une bannière email conforme à la marque. À part ça, n'oubliez pas votre logo et les éléments de design associés (comme PlayStation l'a fait avec leurs icônes de boutons de manette).

(Source : Email Love)

Couleur, contraste et lisibilité

Les couleurs que vous utilisez pour créer une bannière ne sont pas seulement une question d'attrait visuel, mais aussi de lisibilité. Vous pouvez utiliser des couleurs vives pour attirer l'attention, mais cette attention sera gaspillée si les visuels de toute la bannière deviennent flous en un désordre difficile à lire.

La lisibilité dépend des couleurs de fond, de leur contraste, de leur apparence côte à côte, des polices, de leur taille et couleur, ainsi que de l'agencement général des éléments de la bannière. Pour garantir que vos bannières soient non seulement faciles à lire mais aussi accessibles, nous recommandons d'utiliser des damiers de contraste, où vous pouvez vérifier chaque couleur et voir comment elle se fond avec les autres pour créer une bannière vraiment propre et lisible.

Nous recommandons également d'utiliser notre Vérificateur d'Accessibilité, qui vous permettra de voir toutes les imperfections d'accessibilité et de suggérer comment les résoudre pour maximiser la lisibilité de vos bannières et e-mails.

(Source : Email Love)

Une typographie qui survit à chaque boîte de réception

Commençons par la loin et disons qu'ajouter du texte au-dessus des bannières n'est pas toujours une bonne idée. Selon les polices que vous choisissez, ce texte peut poser des problèmes car il y a de fortes chances que vos polices de bannière personnalisées ne soient pas prises en charge par les clients email. En conséquence, elle sera remplacée par des polices supportées par des standards comme Arial, Helvetica, et d'autres.

Pour éviter ce genre de tracas et préserver votre vision du design de la bannière, ajoutez votre copie à l'image elle-même. Dessinez tous les textes nécessaires pour que l'image et le texte ne fassent qu'un tout, car c'est un moyen sûr de garder votre bannière intacte dans tous les clients de messagerie.

(Source : Email Love)

Hiérarchie visuelle et un CTA clair

Pour rendre votre bannière email encore plus accrocheuse et percutante, il faut appliquer la bonne structure. En général, les bannières d'e-mail ont une hiérarchie claire. Par exemple, si nous allons de haut en bas, nous verrons un logo d'entreprise ou un nom de produit. Juste ci-dessous se trouvera un texte court mais accrocheur avec les avantages du produit, la description de l'événement ou la transmission d'un message. Ensuite, il serait judicieux d'ajouter un bouton avec un appel à l'action tout aussi percutant. Et enfin, mais non des moindres, c'est l'image elle-même. Elle doit être pertinente, claire, et une partie qui complète harmonieusement votre message dans la copie sur la bannière et dans l'ensemble de l'email.

(Source : Email Love)

Comment créer une bannière email dans Stripo étape par étape

Créer vos propres bannières avec Stripo est assez facile, car nous avons un bloc spécial qui vous permet de concevoir de magnifiques bannières en quelques minutes. 

Glissez le bloc de la bannière dans votre email

Tout d'abord, vous devez ajouter une bannière à votre modèle d'email. Nous avons un bloc de bannière dédié que vous devez glisser-déposer dans votre modèle.

Téléchargez votre image

Ensuite, cliquez sur la bannière ajoutée pour ouvrir ce menu. Avant de pouvoir ajuster les dimensions et autres paramètres, vous devez joindre une image de bannière par email. Vous disposez de plusieurs options à cet égard, allant du simple téléchargement d'une image depuis votre appareil ou l'utilisation d'images de droits en ligne jusqu'à la génération d'une image unique grâce à notre fonction d'image IA.

Pour notre exemple, nous avons choisi une option Photostock. Il vous suffit de cliquer sur l'image que vous souhaitez (de lancer une requête dans le champ correspondant si vous ne voyez pas immédiatement les images appropriées pour vos idées de design), et elle sera automatiquement attachée à la bannière.

Une fois terminé, vous pouvez passer à l'ajustement des paramètres de la bannière des e-mails.

Ajuster la taille de l'image

Pour définir la bonne taille de bannière d'email, allez dans l'onglet Paramètres. La section Taille suffit à définir les dimensions nécessaires.

Il y a plusieurs boutons pour régler la bonne taille de votre bannière (de gauche à droite) :

• fait que l'image s'adapte à la taille du conteneur ;
• restaure la taille réelle de l'image ;
• le mode d'ajustement de largeur ;
• mode ajustement de hauteur ;
• Les boutons d'ajustement de taille (fonctionnent séparément pour les modes d'ajustement de largeur et de hauteur).

Il suffit de régler les bonnes dimensions avec ces boutons, et c'est bon.

Vous pouvez aussi définir une forme de recadrage dans la section correspondante en choisissant parmi des orientations prédéfinies (verticales et horizontales).

Pendant ce temps, pour que votre bannière email s'affiche correctement sur les écrans mobiles, cliquez sur l'option Affichage mobile pour ouvrir les paramètres de la version mobile dans Stripo.

Nous avons aussi une option d'image Responsive activée par défaut, donc dans la plupart des cas, vous n'avez rien à faire, car cette option garantit que votre image de bannière s'ajuste automatiquement aux dimensions de l'écran.

Vous pouvez désactiver cette option, mais nous ne la recommandons pas, car une fois votre image bannière désactivée, elle restera statique, quelle que soit la résolution de l'écran. Cela peut entraîner une mauvaise présentation des images et du contenu dans votre bannière.

Changer la forme de recadrage est la même que pour la version bureau.

Ajoutez des images, des textes et des liens

Pour ajouter un bouton à votre bannière, nous avons une option qui vous permet d'ajouter une autre image au-dessus de votre bannière. Vous pouvez mélanger et associer votre image de fond pertinente à d'autres images, créant des designs uniques pour votre email ou attirant l'attention sur votre bannière.

Pour cela, cliquez sur l'option Image pendant que vous êtes dans les paramètres du bloc de bannière.

Vous verrez le même menu pour ajouter une image que pour toute la bannière plus tôt. Il suffit de choisir la bonne option pour ajouter une image et de continuer.

Une fois ajoutée, votre image apparaîtra au centre de votre bannière, et vous verrez un petit menu avec des options pour régler l'opacité de cette image et sa rotation, la retourner comme vous le souhaitez, puis appliquer des filtres visuels par-dessus.

Pour changer la taille de cette image supplémentaire, vous devrez glisser les coins du cadre, et votre image changera de taille. Vous pouvez aussi glisser l'image à l'intérieur des bordures de la bannière en cliquant et en la faisant glisser. Vous pouvez même le faire pivoter manuellement en touchant le point au-dessus du cadre.

Vous avez ajouté votre image CTA pour attirer l'attention. Maintenant, comment rendre votre bannière cliquable ? Il suffit de définir le lien dans le champ correspondant, et une fois ajouté, toute votre bannière se transformera en un grand bouton CTA qui transfère le destinataire vers la page dont vous avez besoin.

Si vous avez besoin de plus d'options pour décorer votre image de bannière, vous pouvez ajouter du texte par-dessus. Cliquez sur l'option Texte au-dessus de votre bannière.

Le nœud texte apparaîtra automatiquement au centre de votre bannière, et vous verrez un onglet avec différentes options de texte.

Pour taper votre texte, il suffit de double-cliquer sur le nœud texte pour sélectionner le texte par défaut, puis de taper votre nouveau texte.

Quant aux options de réglage, il y en a une grande variété. 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 tout le nœud lui-même, comme pour votre image.

Quant au texte lui-même, vous pouvez faire ce qui suit :

• sélectionnez la police, la taille et la couleur du texte ;
• choisir l'alignement du texte ;
• modifier les styles, comme gras, italique, souligner ou barrer ;
• changer la casse en majuscule ou minuscule ;
• Réglez l'opacité, la rotation et inversez le texte comme vous en avez besoin.

Types de bannières structurelles que vous pouvez construire

1. Des bannières avec une seule image et votre proposition de valeur

C'est le type de bannière le plus couramment utilisé dans les emails promotionnels. Vous pouvez l'utiliser pour annoncer une vente à l'échelle du site ou pour promouvoir un produit. Ça dépend de toi.

(Source : Email Love)

2. Bannières avec deux images

Les bannières à deux images sont assez rares à trouver, mais vous pouvez les intégrer pour promouvoir davantage de variations de produits (comme les couleurs, les goûts, les designs, etc.) dans votre bannière afin de les rendre visibles à votre audience.

(Source : Email Love)

3. Bannières encadrées

Les cadres servent soit à séparer deux images à l'intérieur d'une bannière, soit à souligner l'appel à l'action de la bannière.

Vous pouvez utiliser notre cadre ou télécharger le vôtre. Tout éditeur photo en propose beaucoup.

En téléchargeant des cadres, vous pouvez créer des newsletters plus uniques. 

Veuillez noter : lorsque vous téléchargez une image déjà encadrée avec un outil tiers de Stripo, vous ne pourrez pas y apporter de modifications dans notre créateur de modèles ou dans tout autre modèle. Les cadres sont également téléchargés sous forme d'images supplémentaires.

(Bannière sans cadres)
(Source : modèle Stripo)

(Bannière avec cadre)
(Source : modèle Stripo)

La première bannière paraît fraîche, mais vous ne prêterez guère attention à la proposition de valeur qu'elle offre, tandis que la seconde est élégante, avec une insistance sur le texte. Les chances que vous ne remarquez pas l'offre sont très faibles.

4. Bannières avec un bouton CTA

Une autre approche pour créer des bannières email (et la plus courante) consiste à ajouter un bouton CTA à votre bannière. Et c'est une excellente décision si vous voulez que votre bannière soit à la fois impressionnante et une partie utile du design des e-mails.

(Source : Email Love)

5. Bannières avec images supplémentaires transparentes

Toute conception de newsletter est un vol d'imagination. Vous pouvez ajouter ce que vous voulez. Nous recommandons également d'ajouter des images saisonnières. Cela ferait en sorte que votre email corresponde à l'esprit des fêtes. Les images transparentes vous aident à apporter de légères modifications à votre newsletter sans modifier l'ensemble du design.

(Source : Email Love)

Bannières 6. GIF-animées

Une bannière animée par GIF est un sujet complexe, et nous avons déjà discuté des raisons pour lesquelles nous devrions les utiliser dans les newsletters par email. Les animations GIF vous aident à attirer votre attention sur votre offre de valeur, afin de présenter une plus grande variété d'articles produits sur un seul écran.

(Source : modèle Stripo)

7. Bannières avec vidéos

Les vidéos, lorsqu'elles sont utilisées correctement, créent un lien émotionnel plus fort avec les destinataires. Les vidéos sont aussi utiles lorsque votre offre de valeur est trop grande pour être exprimée en mots dans des e-mails, lorsque vous devez montrer exactement comment utiliser votre outil.

Les vidéos placées sur le premier écran servent de bannières email.

Utilisez-les pour vos campagnes d'e-mail dès que c'est nécessaire. Dans notre section «Comment ajouter une vidéo dans les emails», nous montrons comment intégrer des vidéos dans des emails avec Stripo en un rien de temps.

(Source : modèle Stripo)

8. Bannières avec un carrousel AMP

Ce type de bannière est en fait une compilation de 3 à 16 bannières placées sur un même écran. Et le fait que les utilisateurs doivent cliquer sur le bouton « Slide » vous aide à interagir et à mieux interagir avec votre audience.

(Source : modèle Stripo)

Cela peut sembler difficile à réaliser, mais l'éditeur Stripo dispose d'un bloc de carrousel dédié qui permet de créer des carrousels sans aucune connaissance technique. Il suffit d'ajouter les images que vous souhaitez mettre en avant dans cet élément email, et vous êtes prêt. Plus d'informations sur les carrousels dans notre article du centre d'aide.

Faites fonctionner les bannières partout : mobile, mode sombre et clients email

Les bannières peuvent sembler être un simple élément d'email que vous pouvez concevoir, ajouter à votre message, puis l'oublier. Cependant, faire fonctionner cela dans différentes conditions, comme sur mobile, en mode sombre et divers clients de messagerie, est une grande partie de la création d'un e-mail parfait.

Comportement réactif sur mobile

Rendre votre bannière email bien paraître, aussi bien sur ordinateur que sur mobile, est une tâche délicate. Voici plusieurs options possibles pour y parvenir :

• créer une bannière Banner diminue proportionnellement et devient plus petite pour s'adapter à la largeur de l'écran. Mais gardez à l'esprit que votre texte à l'intérieur de l'image peut devenir difficile à lire ;
• concevez votre mise en page pour qu'elle s'empile verticalement de façon à ce que tous vos éléments, comme les textes, les boutons et les images, s'empilent les uns sous les autres ; 
• créez une bannière mobile séparée et montrez-la à la place. 

Trois de ces méthodes sont unies aux mêmes règles de conception qui faciliteront grandement le processus de création : garder votre message court et centré, la lisibilité plutôt que l'apparence, et des tests approfondis sont indispensables.

Découvrez comment rendre votre bannière email (et l'ensemble de l'email) réactif dans notre article dédié. 

Comment les bannières s'affichent en mode sombre

Tout dépend du type de bannière que vous avez choisi d'utiliser pour votre email, donc nous allons prendre en compte chacun d'eux.

Bannières d'images

Ce type de bannière reste généralement intact, quel que soit le mode dans lequel elle est affichée. Les clients de messagerie recolorent l'arrière-plan de l'ensemble de l'email, tandis que l'image de la bannière indique la même chose, ce qui s'applique à tous les formats (JPG, PNG, GIF). Le seul problème qui peut survenir ici est si votre image initiale de bannière est claire, ce qui sera encore plus lumineux sur le fond en mode sombre.

Bannières en texte direct

C'est là que toutes les nuances commencent. Si votre bannière utilise du texte HTML, des couleurs d'arrière-plan et des boutons, le mode sombre peut changer ces couleurs. Certains clients changent le fond blanc en foncé, le texte noir en blanc, ou modifient les couleurs de la marque, etc. En conséquence, cela peut améliorer la lisibilité, mais aussi modifier le design original.

Contenu transparent

Nous avons décidé d'en discuter séparément, car les logos transparents, les images et divers éléments sont essentiels dans de nombreux designs de bannières. En général, un contenu transparent peut mal paraître s'il a été initialement conçu pour une couleur de fond spécifique. Par exemple, un logo sombre sur fond transparent a de fortes chances de disparaître simplement lorsque l'email est ouvert en mode sombre. 

Pour éviter divers problèmes avec vos bannières et le mode sombre, voici quelques astuces que vous pouvez appliquer à votre processus de conception :

• évitez les couleurs noir pur ou blanc pur pour vos bannières, car elles seront inversées lors du changement de mode ;
• les boutons CTA doivent être conçus avec un contraste élevé, tant pour leur design global que pour leurs textes intérieurs ;
• créez des versions distinctes de votre contenu en clair et en obscurité ;
• utilisez le texte en direct, mais vérifiez bien comment il change de couleur en mode sombre.

La façon la plus simple de voir à quoi apparaîtra votre email en mode sombre est de le prévisualiser. Stripo dispose d'une fonction de Prévisualisation détaillée qui vous permet de consulter à la fois l'apparence desktop et mobile de votre modèle.

En plus de cela, l'aperçu en mode sombre est également disponible d'un seul clic.

Différences entre Outlook, Gmail et Apple Mail

Outre la réactivité et le mode sombre, les différences dans la façon dont vos bannières d'email sont affichées dans les clients de messagerie populaires comme Outlook, Gmail et Apple Mail peuvent ajouter un peu de casse-tête. Ces différences sont importantes à prendre en compte lors de la conception des bannières, alors discutons-en brièvement.

Les principaux problèmes qui peuvent survenir lors du rendu dans Outlook sont les suivants :

• Outlook ne gère pas très bien le contenu réactif ;
• Outlook prend en charge moins de polices personnalisées ;
• Outlook nécessite un codage soigneux des styles en ligne pour un comportement réactif, du texte en direct sur des bannières, et des bannières d'image d'arrière-plan en général.

Gmail est bien meilleur, mais il a toujours ses propres nuances :

• Gmail envoie de gros e-mails, donc la taille du fichier de votre bannière est extrêmement importante ;
• il faut surveiller le mode sombre et comment il change les couleurs du texte et de l'arrière-plan ;
• le support des polices personnalisées est satisfaisant, mais il y a toujours place à amélioration.

Apple Mail est généralement l'application la moins conviviale de toutes. La seule chose à noter est que pour une expérience plus conviviale en mode sombre, vous devriez utiliser un attribut @media séparé (schéma de couleurs préféré : sombre).

Image vs. bannières en texte live et pourquoi cela affecte la délivrabilité

Lorsque vous choisissez la conception de votre bannière email, vous avez deux façons de les créer : en image ou en texte en direct. Il y a une différence entre as :

• la bannière d'image contient tous ses éléments graphiques, textes, et même les boutons CTA en une seule image ;
• les bannières en texte vivant intègrent des textes HTML placés sur une image ou une couleur de fond.

Même si nous avons mentionné les bannières d'image comme un bon choix pour que votre bannière email ait l'air intacte sur tous les clients de messagerie, elles présentent des inconvénients qui peuvent affecter votre livrabilité avec ce type de bannière :

• plus vous avez d'images dans votre email et moins il y a de SMS, plus cet email paraît suspect aux yeux des filtres anti-spam qui ne peuvent pas lire entièrement le message à l'intérieur des images ;
• si votre image est bloquée, vous recevrez une bannière vierge au lieu d'une offre, et les destinataires peuvent envoyer votre email dans le dossier spam comme un message défaillant ;
• les bannières d'image présentent leurs inconvénients en termes d'accessibilité, car les lecteurs d'écran ne peuvent pas lire votre texte sur la bannière ;
• les gros fichiers image ralentissent le chargement des e-mails.

Nous ne vous demandons pas d'abandonner complètement l'idée d'utiliser des bannières basées sur des images pour passer à des bannières en live-text. Ils présentent aussi leur lot d'inconvénients, car ils sont plus difficiles à concevoir parfaitement sur tous les clients de messagerie.

Nous vous conseillons de garder un équilibre entre tous les e-mails, car la bannière n'est qu'un élément. Si vous avez un e-mail à gros texte, utilisez une bannière basée sur des images. Par ailleurs, les bannières en texte en direct seront un bon choix pour les e-mails courts avec un faible rapport texte/image.

Accessibilité des bannières de messagerie

L'accessibilité est une pierre angulaire de tout courrier électronique, car dans le monde, environ 2,2 milliards de personnes ont une déficience visuelle de près ou de loin. Cela représente 27 % de la population mondiale, donc les chances d'avoir des personnes malvoyantes dans votre audience sont assez élevées. 

Comme pour toute partie de l'email, vos bannières doivent également être accessibles, il y a donc quelques mesures que vous pouvez faire pour les rendre accessibles :

1. Utilisez du texte en direct lorsque possible pour rendre vos bannières d'e-mail lisibles par les lecteurs d'écran, les outils de traduction, et mieux adaptés à la mise à l'échelle mobile.
2. Ajoutez toujours des textes alternatifs significatifs qui expliquent exactement quelles informations figurent sur votre bannière, surtout si celle-ci ne contient qu'une image ou si un texte important est dessiné sur la bannière plutôt que dans un texte séparé par-dessus. 
3. Conçu pour la lisibilité mobile, à savoir, vos textes bannière doivent rester lisibles facilement sur les écrans mobiles.
4. Incorporez soigneusement les animations et GIFs, car ils ne doivent pas être rapides ni tape-à-l'œil. Les meilleures animations pour vos bannières sont fluides, courtes, et pas essentielles pour comprendre le message de votre bannière.
5. Maintenez le contraste des couleurs sur tout le contenu de vos bannières car WCAG recommande un ratio de contraste d'au moins 4,5:1 pour le texte classique et 3:1 pour le texte volumineux.

Note importante : Vous pouvez tester la lisibilité de votre bannière email directement dans Stripo grâce à notre vérificateur d'accessibilité qui teste l'ensemble de votre email selon différents niveaux de lisibilité et d'accessibilité, ainsi que les imperfections à corriger et la manière de procéder.

Lisez-en plus sur l'accessibilité des emails et ses meilleures pratiques dans notre article spécial. 

Testez et mesurez votre bannière

Avant de penser que votre processus de création de bannière est terminé, il y a toujours de la place pour les tests et les dernières retouches.

Aperçu et rendu test 

Pour chaque bannière que vous créez, vous devriez la prévisualiser pour voir à quoi elle ressemble. Mais surtout, il doit subir un rendu test en environnement réel. Envoyez un email test avec cette bannière dans votre propre boîte mail ou dans celles de vos collègues dans différents clients de messagerie. Voyez à quoi ressemble votre bannière, regardez-la depuis les écrans mobiles, et trouvez les imperfections possibles avant d'appuyer sur le bouton d'envoi pour vos destinataires.

En dehors de cela, il serait judicieux de tester votre email dans Email on Acid, qui montre comment votre email se rendra sur des dizaines de versions de clients de messagerie, des centaines d'appareils mobiles, des thèmes clair et sombre, et bien plus encore.

Stripo a une intégration directe avec Email sur Acid, et vous pouvez voir comment cela fonctionne dans notre article spécial. 

Rendez-le cliquable et suivez les performances

Au-delà de l'attrait visuel, votre bannière doit aussi être fonctionnelle, donc la rendre cliquable est une bonne idée. Pour ce faire, vous pouvez ajouter un lien vers l'image afin de rendre l'ensemble de votre bannière email cliquable. Ou, si votre bannière utilise du texte sur une image, vous pouvez ajouter des liens vers des éléments textuels individuels. Par exemple, cela rendra votre bouton CTA cliquable.

Cela orientera non seulement vos destinataires vers les bons liens sur votre site, mais vous permettra aussi de suivre l'activité et l'efficacité de vos bannières.

Conclusion

Les bannières email sont l'un de vos outils fiables pour attirer l'attention et transmettre des messages visuels et des textes percutants. Ils sont votre moyen de rendre votre email unique et de garder la cohérence globale de votre marque. Et même si elles semblent faciles à réaliser, les bannières email comportent leurs pièges dans le processus de conception. Nous espérons que cet article vous donnera les bonnes astuces pour éviter tout piège de design et obtenir l'apparence de bannière email parfaite que votre newsletter mérite.

FAQ

1. Quelle taille doit avoir une bannière email ?

La taille idéale de bannière pour un bureau est de 650 à 700 pixels de large et 90 à 200 pixels de haut, ce qui est parfait. Par ailleurs, la taille de la bannière mobile de 350 pixels de large et jusqu'à 100 est une limite d'or. La taille de la bannière signature doit être de 600 pixels de large et 150 pixels de haut, et la taille totale de vos bannières doit être restée autour de 40 Ko avec un format PNG.

2. Que dois-je mettre dans une bannière email ?

Le contenu principal de votre bannière est une image claire, un texte percutant pour attirer l'attention, et un bouton CTA.

3. Quelle est la différence entre une bannière d'en-tête et une bannière signature ?

La bannière d'en-tête lance généralement l'email et remplace les en-têtes habituels par des menus et d'autres boutons. Pendant ce temps, les bannières signatures sont placées presque à la fin de l'email, et leur but principal est de promouvoir subtilement quelque chose et de garder l'identité de la marque visible.

4. Comment rendre une bannière email cliquable ?

Il suffit d'ajouter un lien à l'image de votre bannière pour que toute la bannière soit cliquable. Vous pouvez aussi ajouter des liens vers vos textes en direct via des bannières.

5. Pourquoi ma bannière email semble-t-elle défectueuse sur mobile ?

Il y a beaucoup de raisons à cela. Par exemple, votre e-mail peut afficher la bannière de votre bureau, ce qui peut entraîner des textes illisibles ou des dimensions étranges de la bannière. Ou bien l'image que vous avez utilisée peut avoir un ratio pas adapté aux mobiles. En plus, si vous utilisez du texte en direct en arrière-plan, certains clients de messagerie ne le gèrent pas bien (par exemple, Outlook).

6. Dois-je utiliser une image ou un texte en direct pour ma bannière ?

Les bannières d'image conservent leur apparence quoi qu'il arrive. Mais ils peuvent impacter votre capacité à livrer. Les bannières textuelles en direct sont plus faciles à créer, mais elles sont plus difficiles à concevoir de manière cohérente sur tous les clients et modes de messagerie. Tout dépend de votre vision de conception, des contraintes de temps et des capacités.