Livraison de l'épisode 4 : Comprendre les images d'arrière-plan dans les e-mails

Dans cet épisode de Delivering, nous examinerons une technique essentielle pour les concepteurs d'e-mails : l'image d'arrière-plan humble mais puissante. Découvrez pourquoi les images d'arrière-plan sont importantes, comment les coder à l'aide de diverses techniques et comment ces différentes méthodes se comparent entre différents clients de messagerie. Cet épisode est un compagnon de notre Guide ultime des images d'arrière-plan dans les e-mails récemment mis à jour. Consultez-le pour obtenir des conseils, des astuces et du code.

Assurez-vous de vous abonner à Delivering sur iTunes ou Spotify pour écouter les futurs épisodes et rejoindre la conversation sur Twitter en utilisant le hashtag #DeliveringPodcast.

Transcription de l'épisode

Il existe de nombreuses façons d'ajouter des visuels intéressants aux campagnes par e-mail.

Alors que CSS permet de nombreuses options de style différentes, vous avez parfois juste besoin d'une bonne image. Mais quelle est la meilleure façon d'utiliser des images dans un e-mail ? Dans cet épisode de Delivering, nous examinerons une technique essentielle pour les concepteurs d'e-mails : l'image d'arrière-plan humble mais puissante.

Je suis Jason Rodriguez et bienvenue dans Delivering, un podcast sur le marketing par e-mail et sa place dans le monde. La livraison vous est proposée par Litmus, la plate-forme leader du secteur pour les spécialistes du marketing par e-mail. Rejoignez plus de 600 000 professionnels de la messagerie qui utilisent Litmus pour créer, réviser, tester et suivre de meilleures campagnes de marketing par e-mail. Découvrez-en plus et obtenez un essai gratuit de 7 jours sur Litmus.com.

Les images sont un élément essentiel des campagnes de marketing par e-mail. Ils sont utilisés pour les photos de produits, les illustrations mignonnes, les logos, les icônes et, dans certains cas, pour l'intégralité de l'e-mail lui-même. Dans le monde de la vente au détail en particulier, les spécialistes du marketing sont enclins à concevoir des campagnes entièrement dans des outils tels que Photoshop, à découper ces images et à les vider en HTML avant de les envoyer aux abonnés. Toutes les informations (titres, textes, incitations à l'action, etc.) existent dans les images.

C'est un bon moyen de respecter les directives de la marque et de produire des e-mails rapidement, mais l'utilisation d'images de cette manière présente des inconvénients majeurs.

La première est que de nombreux clients de messagerie désactivent les images par défaut. Les images - et tout le contenu - d'un e-mail sont littéralement laissées déchargées par le client de messagerie, ce qui entraîne des campagnes vierges qui semblent brisées pour de nombreux abonnés.

La seconde est que les abonnés utilisant une technologie d'assistance, comme un logiciel de lecture d'écran, ne pourront pas découvrir le contenu de l'e-mail.

Dans les deux cas, toute la copie, les offres et la valeur que vous avez consacrés à votre campagne d'e-mails ont été essentiellement perdues. Il doit y avoir une meilleure solution, non?

Entrez les images d'arrière-plan.

Les images d'arrière-plan sont simplement des images, comme n'importe quelle autre dans un e-mail. Ce sont des fichiers téléchargés sur un serveur et liés dans le code. La différence est que les images d'arrière-plan ne sont pas appliquées avec une balise d'image HTML, mais en tant qu'attribut ou CSS sur d'autres éléments HTML.

Il existe quatre façons de coder les images d'arrière-plan, chacune avec ses avantages et ses inconvénients.

La première méthode, et la plus traditionnelle, consiste à appliquer l'attribut background à une cellule de tableau. La valeur de l'attribut est simplement l'URL qui pointe vers l'image. Cette méthode est intéressante car elle est assez bien prise en charge par les clients de messagerie. L'inconvénient majeur, cependant, est qu'il n'est pas très flexible. Vous ne pouvez pas contrôler la taille de votre image d'arrière-plan et l'image se répétera, par défaut, sur votre élément.

Vous pouvez également charger des images d'arrière-plan en utilisant CSS. Les deux techniques suivantes utilisent la même méthode, mais sont appliquées différemment.

CSS a un certain nombre de propriétés d'arrière-plan, notamment : background-image, background-repeat, background-position, background-size et background-color. Il y a aussi la propriété abrégée d'arrière-plan super utile.

À l'aide de ces propriétés, vous pouvez inclure l'URL d'une image, contrôler la façon dont cette image est positionnée et si elle se répète ou non, ainsi qu'inclure une couleur de secours lorsque les images ne sont pas chargées.

La première façon d'utiliser les arrière-plans CSS consiste à intégrer ces propriétés dans un bloc de style dans l'en-tête de votre e-mail. Ciblez simplement un élément HTML comme une cellule de tableau ou un div, et lancez-vous. Cette méthode est facile à coder, à lire et à gérer, mais les styles intégrés ne sont pas pris en charge dans tous les clients de messagerie.

Une méthode plus robuste consiste à inclure ces propriétés en ligne sur votre élément HTML. Cela peut devenir compliqué si vous utilisez des images d'arrière-plan sur plusieurs éléments, mais comme nous sommes des geeks du courrier électronique et habitués à utiliser des images en ligne, cela reste parfaitement gérable.

La dernière façon d'inclure des images d'arrière-plan dans un e-mail consiste à utiliser ce qu'on appelle des « arrière-plans à l'épreuve des balles ». Les arrière-plans à l'épreuve des balles s'appuient sur la méthode d'attribut HTML en incluant également le VML (ou Vector Markup Language) dans le code. VML est un langage propriétaire Microsoft utilisé dans les produits Office comme Outlook. En appliquant des images d'arrière-plan dans VML, elles fonctionneront dans Microsoft Outlook, ce qui n'est pas nécessairement vrai pour les autres méthodes décrites précédemment.

L'inconvénient majeur de l'utilisation de VML est qu'il n'est pas très accessible ou bien documenté, et qu'il ajoute beaucoup de code qui est, franchement, difficile à comprendre. Pour faciliter les choses, nos amis de Campaign Monitor ont en fait construit un outil incroyable pour générer des arrière-plans à l'épreuve des balles. Vous pouvez le trouver facilement sur backgrounds.cm.

Quelle que soit la méthode que vous choisissez, il y a des avantages incroyables à utiliser des images d'arrière-plan dans les e-mails par rapport aux images codées traditionnellement.

Le principal avantage est l'accessibilité. En utilisant des images d'arrière-plan, vous pouvez vous fier à du texte HTML en direct au lieu d'images pour tout votre contenu. Le texte ne souffre pas du blocage comme les images, donc même lorsque les images sont désactivées, votre message sera toujours lisible pour les abonnés. Et, pour les utilisateurs qui ont besoin de lecteurs d'écran, ils pourront entendre le contenu qui leur est lu, contrairement aux images traditionnelles.

Vous pouvez utiliser CSS pour styliser ce contenu HTML afin qu'il ressemble à des images provenant de Photoshop, et vous pouvez même y inclure des boutons CTA.

Les images d'arrière-plan sont ensuite utilisées pour inclure un style visuel supplémentaire, qu'il s'agisse d'un simple dégradé, de photos de produits fantaisistes ou d'un motif répétitif. Ils fonctionnent en conjonction avec du texte HTML pour créer des e-mails beaux et utilisables.

Ce qui est encore plus cool, c'est que vous pouvez faire des choses plus avancées comme inclure des GIF animés comme images d'arrière-plan, échanger des images en fonction de la taille de l'écran ou de l'appareil, ou même coder un arrière-plan vidéo comme nous l'avons fait il y a quelques années pour notre e-mail d'annonce Litmus Live.

Il y a beaucoup à faire pour utiliser les images d'arrière-plan au maximum. Nous avons récemment publié une mise à jour de notre guide ultime des images d'arrière-plan dans les e-mails sur le blog Litmus qui mérite d'être consulté. C'est un excellent moyen d'examiner le code qui alimente les images d'arrière-plan, ainsi que de s'inspirer pour mettre à jour vos propres campagnes. Rendez-vous simplement sur les notes de l'émission d'aujourd'hui pour le lien.

Et assurez-vous de vous abonner à Delivering on iTunes ou Spotify pour écouter les futurs épisodes où nous approfondissons davantage de techniques pour créer de meilleurs e-mails HTML.