[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

3 conseils pour faire de votre newsletter un véritable succès Email

3 conseils pour faire de votre newsletter un véritable succès

Véritable point d’entrée stratégique pour un site, la newsletter est depuis de nombreuses années le média idéal pour communiquer sur sa marque et fidéliser ses …

+ lire la suite
Le marketing automation pour dialoguer avec vos clients Email

#MonClientEtMoi – Le marketing automation pour dialoguer avec vos clients

Aujourd’hui, nous vous donnons des nouvelles d’Arnold. Bon, Arnold n’est pas en super forme. Et oui, les festins de fin d’année sont passés par là …

+ lire la suite
Email

Emailing B2B : Comment ajouter vos événements dans le calendrier de vos destinataires ?

Vous souhaitez planifier un rendez-vous dans l’agenda de vos collaborateurs, clients ou prospects directement depuis un emailing ? Intégrez simplement un bouton au sein de …

+ lire la suite