Pixel Art par e-mail : la tactique de conception défensive la plus rare et la plus cool

Le blocage d'images est courant, certains clients de messagerie désactivant les images par défaut et certains abonnés désactivant les images pour enregistrer des données mobiles ou pour d'autres raisons. Pour cette raison, les spécialistes du marketing par courrier électronique doivent utiliser des techniques de conception défensives pour s'assurer que leur message est transmis lorsque les images sont désactivées.

La conception défensive, qui contribue également à l'accessibilité des e-mails, se compose de trois tactiques clés :

1. Utiliser du HTML ou du texte en direct autant que possible, au lieu d'intégrer tout votre texte dans vos images
2. Ajouter du texte ALT à vos images ou mieux encore, du texte ALT stylisé
3. Utilisation des couleurs d'arrière-plan sur les cellules du tableau

Concentrons-nous sur cette dernière tactique.

L'une des grandes choses qui se produisent lorsque les images sont bloquées est que votre e-mail perd sa structure. L'e-mail s'aplatit et tout commence à se brouiller. L'utilisation de texte HTML et le style de la taille et de la couleur de votre texte ALT peuvent aider à créer une structure et une hiérarchie, mais les couleurs d'arrière-plan sont encore plus puissantes.

L'ajout d'une couleur d'arrière-plan à une cellule de tableau crée des bannières, des blocs de contenu et est essentiel pour créer des boutons pare-balles. Cet e-mail Twitter montre comment les couleurs d'arrière-plan des cellules d'un tableau peuvent maintenir l'intégrité d'une conception d'e-mail lorsque les images sont bloquées.

C'est très bien, mais les cellules de tableau de couleur d'arrière-plan peuvent faire plus, beaucoup plus. En plus d'être utilisées avec du texte HTML pour créer du contenu de courrier électronique qui n'est pas affecté par le blocage des images, les couleurs d'arrière-plan des cellules du tableau peuvent être utilisées comme solution de repli pour les images.

Pour ce faire, créez une mosaïque à partir d'une série de tableaux imbriqués avec des couleurs d'arrière-plan appliquées aux cellules du tableau. Vous découpez ensuite l'image pour que chaque tranche s'intègre parfaitement dans les cellules du tableau de votre mosaïque. De cette façon, lorsque l'image superposée est bloquée et disparaît, la mosaïque sous-jacente de cellules de tableau colorées apparaît.

Exemples de pixel art par e-mail

Pour démontrer la puissance des mosaïques d'e-mails, voici quelques exemples, chacun montrant l'e-mail avec les images activées à gauche et les images désactivées à droite :

Mothercare crée le pixel art de sa poussette dans cet e-mail, qui utilise également généreusement le texte ALT stylisé tout au long.

Pizza Express utilise le pixel art dans cet e-mail d'anniversaire déclenché, qui comprend également une image personnalisée et le texte ALT de style personnalisé correspondant.

PlayStation New Zealand utilise une mosaïque d'e-mails pour créer le symbole des Autobots, jouant intelligemment sur le slogan « robots déguisés » de Transformers.

Benton Lingerie capture le sentiment du message de l'e-mail de la fête des mères, en utilisant le pixel art de l'e-mail pour créer un grand cœur rose.

Conception et considérations stratégiques

Avant de créer une mosaïque d'e-mails, tenez compte des problèmes de conception et de stratégie suivants :

1. Le pixel art des e-mails peut devenir lourd , ce qui peut entraîner la coupure de votre e-mail dans Gmail si l'e-mail dépasse 102 Ko. Alors gardez les choses simples, en vous concentrant sur une image de pixel art minimum viable.

Par exemple, le cœur pixélisé de Benton Lingerie aurait pu être bien plus profilé avec le doublement ou le triplement du nombre de cellules du tableau. Mais leur exécution est très clairement un cœur et est donc très efficace telle quelle.

2. Le pixel art des e-mails peut représenter beaucoup de travail supplémentaire , il est donc généralement préférable de les réserver pour les e-mails à fort volume ou à fort impact. Cela signifie peut-être les utiliser pour les e-mails de diffusion clés pour les annonces de nouveaux produits, les campagnes Cyber ​​Monday et les grands événements similaires. Mais cela signifie également les considérer pour les e-mails déclenchés à grand volume, tels que l'e-mail d'anniversaire de Pizza Express ci-dessus.

De même, vous pouvez les envisager pour des éléments de courrier électronique à volume élevé, tels que votre logo ou un élément de pied de page. Si vous faites cela, implémentez-les en tant que partie, afin que vous puissiez modifier ou mettre à jour le pixel art dans toutes les instances de votre logo ou pied de page.

Quelle que soit l'approche que vous choisissez, vous voulez être sûr de profiter de l'impact de votre effort de conception supplémentaire.

3. Le pixel art des e-mails n'est pas toujours compatible avec le responsive design. Selon la façon dont vous codez votre e-mail réactif, les mosaïques d'e-mails peuvent ne pas être traduites de la version de bureau à la version mobile. Cacher et empiler le contenu des e-mails dans votre version mobile peut casser le pixel art de vos e-mails. Assurez-vous d'en tenir compte lors de la conception de votre mosaïque d'e-mails.

4. Le pixel art par e-mail n'a pas à essayer de remplacer les images bloquées. Comme nous l'avons vu dans les exemples PlayStation et Benton Lingerie, le pixel art de l'e-mail peut être totalement différent des images de l'e-mail. Ne vous sentez pas obligé de toujours créer la version 8 bits de votre image de héros. Parfois, transmettre l'esprit d'une image est tout aussi efficace et peut être plus facile à coder et moins à livrer.

5. Certains e-mails sont plus susceptibles d'avoir des images bloquées. La possibilité de faire bloquer les images d'un e-mail n'est pas uniforme. Le risque de blocage d'image est plus élevé au tout début d'une relation par e-mail et vers la toute fin.

Pour les tout premiers e-mails que vous envoyez à un abonné, les images peuvent être bloquées pour les expéditeurs inconnus. Cela signifie que vous voudrez peut-être consacrer plus d'efforts à la conception défensive de vos e-mails de bienvenue et de vos e-mails transactionnels.

Pour les e-mails tardifs dans une relation, c'est-à-dire après une période d'inactivité considérable, les images peuvent être bloquées car elles se trouvent dans le dossier spam de l'abonné. Cela signifie que vous voudrez peut-être mettre un effort de conception défensif supplémentaire dans vos e-mails de réengagement et de ré-autorisation.

Dans les deux cas, cet effort supplémentaire peut inclure le pixel art par courrier électronique, en plus de l'utilisation libérale du texte HTML et du texte ALT stylisé.

Optimiser pour le blocage d'images Litmus Builder vous permet de coder facilement des e-mails et de les prévisualiser dans plus de 70 applications et appareils de messagerie. Activez et désactivez les images en un seul clic pour perfectionner le pixel art de votre e-mail. Créez de bons e-mails →

Comment faire du pixel art par e-mail

Avec ces considérations à l'esprit, quelle est la meilleure façon de créer du pixel art par e-mail ?

Pour commencer, nous vous recommandons :

• Convertisseur d'image en tableau
• Chiens optimisés par e-mail
• Application Image-HTML

Cependant, vous ne les trouverez peut-être pas utiles dans tous les cas. Le plus souvent, nous nous attendons à ce que vous souhaitiez créer manuellement votre pixel art par e-mail.

Si c'est la voie que vous empruntez, voici les principales étapes que vous devrez suivre :

1. Esquissez une image pixel art d'e-mail minimum viable sur du papier millimétré ou dans le logiciel de conception de votre choix.
2. Utilisez l'outil de découpe de Photoshop ou d'un autre logiciel de conception pour diviser votre image en blocs de tailles nécessaires pour créer votre mosaïque d'e-mails et les enregistrer en tant qu'images séparées. Utilisez une convention de nommage des fichiers qui permet de reconstituer facilement votre image globale.
3. À l'aide d'une série de tables imbriquées à l'intérieur d'une table, créez les blocs dans les positions dont vous avez besoin pour adapter votre conception.
4. Pour vous assurer que vos images découpées s'emboîtent parfaitement, spécifiez que cellpadding="0", cellspacing="0" et border="0" sont définis pour vos tableaux.
5. Appliquez le bgcolor nécessaire à chacune des cellules de votre tableau.
6. Prévisualisez votre e-mail avec les images désactivées pour vous assurer qu'il s'affiche comme prévu.

Voici un excellent exemple de pixel art d'e-mail de la newsletter EmailWeekly d'Action Rocket. Sélectionnez « Basculer les images » dans l'interface Litmus Builder pour afficher l'e-mail avec les images désactivées.

Une tactique rare et inattendue

Les spécialistes du marketing par e-mail comprennent la nécessité de concevoir pour les images. Nous le savons, car 83 % des marques utilisent toujours ou souvent du texte ALT pour leurs images d'e-mail, selon l'enquête sur l'état des e-mails 2018 de Litmus auprès de près de 3 000 spécialistes du marketing.

Cependant, bien que l'ajout de texte ALT soit assez simple, la création de pixel art par courrier électronique est tout sauf. En conséquence, près de 77 % des marques n'utilisent jamais de mosaïques d'e-mails.

Pour les marques intrépides, c'est une opportunité. La rareté de cette tactique signifie qu'il s'agit d'un moyen efficace de surprendre et de ravir les abonnés en leur offrant l'inattendu, et de plus en plus de marques s'en emparent. Plus de 23 % des marques utilisent au moins rarement le pixel art des e-mails, contre 18 % en 2017.

Vous voulez plus de ressources comme celle-ci ?

Abonnez-vous à Litmus Weekly pour recevoir votre dose hebdomadaire d'inspiration, de conseils et d'astuces par e-mail, directement dans votre boîte de réception.

S'inscrire sur la liste →