[Mon email graphique] Valorisez le design de vos newsletters avec un background image !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

Créer une newsletter design et impactante, sans sacrifier son message, c’est possible ! Nous abordons ici une contrainte bien connue des opérationnel(le)s en charge de réaliser des campagnes emailing : pour valoriser le header de ma newsletter, est-ce que j’intègre du texte ou une image ?

Il existe deux obstacles bien connus :

  • Si j’utilise une image, celle-ci ne d’affiche pas par défaut sur toutes les messageries,
  • Si j’utilise du texte, cela limite l’impact graphique.

Pour résumer, l’idéal serait de pouvoir placer du texte sur une image en arrière-plan.
Cela tombe bien ! C’est l’objet de cet article 🙂

#intégration

Nous vous proposons une méthode d’intégration HTML pour obtenir ce résultat. Attention, celle-ci ne sera pas interprétée dans toutes les messageries (nous vous donnons les résultats de nos tests plus bas).

Cette méthode peut aussi bien vous permettre de placer un titre devant une image, ou simplement de créer un joli encadré sur votre newsletter, et vous éviter ainsi une découpe complexe.

Comment obtient-on ce résultat ? Par l’utilisation de background image (« image en arrière-plan »). C’est un attribut qui est utilisé en HTML pour ajouter un arrière-plan à votre email.

Plusieurs méthodes existent, NP6 Studio a sélectionné les Embedded CSS (« CSS intégrés »). Cette méthode nous semble en effet la plus simple à réaliser, et surtout la plus lisible.

Cela consiste à à créer une class dédiée à notre background image :

Exemple de code HTML pour insérer un background image

Insérez cette class dans une <td> qui contiendra l’arrière-plan. Attention, cette <td> ne doit pas être celle qui contient votre titre. Nous avons d’abord créé une table dans laquelle nous appelons la class, puis nous imbriquons une seconde table pour insérer le titre.

Astuce essentielle : prévoir une couleur de fond, qui permet de rendre le titre lisible même si l’image ne s’affiche pas !

#backgroundaccepted

Est-ce que cela fonctionne sur toutes les messageries ?

Avouez que ce serait terriblement chouette non ? Ce n’est pas malheureusement pas le cas, nous avons effectué une série de tests dont les résultats vous sont présentés ci-dessous.

Si vous souhaitez utiliser cette méthode pour le design de votre prochaine newsletter, nous vous recommandons de bien réfléchir à la mise en page globale, afin d’obtenir un rendu optimal, toutes messageries confondues.

Test d'affichage d'un background image sur la messagerie Outlook
Test d’affichage d’un background image sur la messagerie Outlook

Résultat de nos tests avec la méthode des Embedded CSS (attention, ces résultats peuvent faire l’objet d’évolutions selon les messageries) :

Test d'affichage d'un background image sur différentes messageries
Test d’affichage d’un background image sur différentes messageries


Faites vos propres tests et partagez vos résultats avec nous !

PS : Un écureuil  se cache dans cet article, allez-vous le trouver ?

Webinar NP6 : Boostez la performance de vos emails
Webinar NP6 : Boostez la performance de vos emails
" Un moment de lecture à partager "
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email
GARDONS LE CONTACT

Inscrivez-vous à notre newsletter

* Champ obligatoire
LAISSEZ-VOUS TENTER...

Ces articles pourraient aussi vous intéresser

Email remarketing : comment lutter contre l'abandon de panier ? Email

Email Remarketing : comment lutter contre l’abandon de panier ?

L’abandon de panier est un véritable enjeu pour les acteurs du e-commerce. Il est toujours difficile de perdre des visiteurs ayant une intention d’achat avérée, …

+ lire la suite
Emailing de soldes : 4 conseils pour réengager vos abonnés inactifs Email

Emailing de soldes : 4 conseils pour réengager vos abonnés inactifs

Bons plans, programmes client avantageux, prix imbattables, la période des soldes est propice à la réactivation de cibles endormies… à condition de se démarquer ! Vos …

+ lire la suite
Call To Action : 3 conseils pour augmenter le taux de conversion de vos emails Email

Call To Action : 3 conseils pour augmenter le taux de conversion de vos emails

L’emailing est le canal idéal pour générer du trafic sur votre site web … à condition d’en ouvrir grand les portes à vos lecteurs ! …

+ lire la suite