E-Mail-Pixel-Kunst: Die seltenste und coolste defensive Design-Taktik

Das Blockieren von Bildern ist üblich, wobei einige E-Mail-Clients Bilder standardmäßig deaktivieren und einige Abonnenten Bilder deaktivieren, um mobile Daten zu speichern oder aus anderen Gründen. Aus diesem Grund müssen E-Mail-Vermarkter defensive Designtechniken anwenden, um sicherzustellen, dass ihre Nachricht übermittelt wird, wenn Bilder deaktiviert sind.

Defensives Design, das auch bei der E-Mail-Erreichbarkeit hilft, besteht aus drei Schlüsseltaktiken:

1. Verwenden Sie so viel wie möglich HTML oder Live-Text, anstatt Ihren gesamten Text in Ihre Bilder einzubetten
2. Hinzufügen von ALT-Text zu Ihren Bildern – oder noch besser, formatiertem ALT-Text
3. Verwenden von Hintergrundfarben für Tabellenzellen

Konzentrieren wir uns auf diese letzte Taktik.

Eines der großen Dinge, die beim Blockieren von Bildern passieren, ist, dass Ihre E-Mail ihre Struktur verliert. Die E-Mail wird flacher und alles verschwimmt. Die Verwendung von HTML-Text und das Formatieren der Größe und Farbe Ihres ALT-Textes können helfen, Struktur und Hierarchie zu schaffen, aber Hintergrundfarben sind noch leistungsfähiger.

Das Hinzufügen einer Hintergrundfarbe zu einer Tabellenzelle erstellt Banner, Inhaltsblöcke und ist für die Erstellung von kugelsicheren Schaltflächen unerlässlich. Diese Twitter-E-Mail zeigt, wie Hintergrundfarben in Tabellenzellen die Integrität eines E-Mail-Designs bewahren können, wenn Bilder blockiert werden.

Das ist großartig, aber Tabellenzellen mit Hintergrundfarbe können mehr – viel mehr. Neben der Verwendung zusammen mit HTML-Text zum Erstellen von E-Mail-Inhalten, die nicht von blockierten Bildern betroffen sind, können Hintergrundfarben von Tabellenzellen als Fallback für Bilder verwendet werden.

Dazu erstellen Sie ein Mosaik aus einer Reihe verschachtelter Tabellen mit Hintergrundfarben, die auf die Tabellenzellen angewendet werden. Anschließend schneiden Sie das Bild so auf, dass jedes Slice perfekt in die Tabellenzellen Ihres Mosaiks passt. Auf diese Weise erscheint das darunterliegende Mosaik aus farbigen Tabellenzellen, wenn das überlagernde Bild blockiert wird und verschwindet.

Beispiele für E-Mail-Pixel-Art

Um die Leistungsfähigkeit von E-Mail-Mosaiken zu demonstrieren, hier einige Beispiele, die jeweils die E-Mail mit aktivierten Bildern auf der linken Seite und deaktivierten Bildern auf der rechten Seite zeigen:

Mothercare erstellt in dieser E-Mail Pixelkunst ihres Kinderwagens, die auch durchgängig gestylten ALT-Text verwendet.

Pizza Express verwendet Pixelkunst in dieser ausgelösten Geburtstags-E-Mail, die auch ein personalisiertes Bild und einen entsprechenden personalisierten ALT-Text enthält.

PlayStation New Zealand verwendet ein E-Mail-Mosaik, um das Symbol der Autobots zu erschaffen und spielt geschickt den Slogan „Roboter in Verkleidung“ von Transformers ab.

Benton Lingerie fängt die Botschaft der Muttertags-E-Mail ein und verwendet E-Mail-Pixel-Kunst, um ein großes rosa Herz zu schaffen.

Design und strategische Überlegungen

Berücksichtigen Sie vor dem Erstellen eines E-Mail-Mosaiks die folgenden Design- und Strategiefragen:

1. E-Mail-Pixel-Art kann schwer werden , was dazu führen kann, dass Ihre E-Mail in Gmail abgeschnitten wird, wenn die E-Mail 102 KB überschreitet. Halten Sie die Dinge also einfach und konzentrieren Sie sich auf ein minimal praktikables Pixel-Art-Bild.

Zum Beispiel hätte das pixelige Herz von Benton Lingerie mit der Verdoppelung oder Verdreifachung der Anzahl der Tabellenzellen viel konturierter sein können. Aber ihre Ausführung ist ganz klar ein Herz und ist so wie sie ist sehr effektiv.

2. E-Mail-Pixelgrafiken können eine Menge zusätzlicher Arbeit bedeuten , daher ist es im Allgemeinen am besten, sie für E-Mails mit hohem Volumen oder mit großer Wirkung zu reservieren. Das bedeutet, dass sie vielleicht für wichtige Broadcast-E-Mails für neue Produktankündigungen, Cyber ​​Monday-Kampagnen und ähnliche Großveranstaltungen verwendet werden. Aber es bedeutet auch, sie für hochvolumige ausgelöste E-Mails in Betracht zu ziehen, wie die oben genannte Pizza Express-Geburtstags-E-Mail.

Ebenso könnten Sie sie für E-Mail-Elemente mit hohem Volumen in Betracht ziehen, z. B. Ihr Logo oder ein Fußzeilenelement. Wenn Sie dies tun, implementieren Sie sie teilweise, damit Sie die Pixelgrafiken in allen Instanzen Ihres Logos oder Ihrer Fußzeile ändern oder aktualisieren können.

Welchen Ansatz Sie auch wählen, Sie möchten sicher sein, dass Sie die Wirkung Ihres zusätzlichen Designaufwands ernten.

3. E-Mail-Pixel-Art ist nicht immer mit Responsive Design kompatibel. Je nachdem, wie Sie Ihre responsiven E-Mails codieren, werden E-Mail-Mosaiks möglicherweise nicht von der Desktop-Version in die mobile Version übersetzt. Das Ausblenden und Stapeln von E-Mail-Inhalten in Ihrer mobilen Version kann Ihre E-Mail-Pixel-Grafik beschädigen. Berücksichtigen Sie dies bei der Gestaltung Ihres E-Mail-Mosaiks.

4. E-Mail-Pixel-Art muss nicht versuchen, die blockierten Bilder zu ersetzen. Wie wir in den Beispielen für PlayStation und Benton Lingerie gesehen haben, kann sich die E-Mail-Pixelgrafik völlig von den Bildern in der E-Mail unterscheiden. Sie müssen nicht immer die 8-Bit-Version Ihres Heldenbilds erstellen. Manchmal ist es genauso effektiv, den Geist eines Bildes zu vermitteln – und möglicherweise einfacher zu programmieren und weniger zu liefern.

5. Bei einigen E-Mails ist die Wahrscheinlichkeit höher, dass Bilder blockiert werden. Die Möglichkeit, die Bilder in einer E-Mail sperren zu lassen, ist nicht einheitlich. Die Wahrscheinlichkeit, dass Bilder blockiert werden, ist sowohl am Anfang einer E-Mail-Beziehung als auch gegen Ende höher.

Bei den allerersten E-Mails, die Sie einem Abonnenten senden, sind möglicherweise Bilder für unbekannte Absender gesperrt. Das bedeutet, dass Sie möglicherweise mehr Aufwand für das defensive Design Ihrer Willkommens-E-Mail(s) und Ihrer Transaktions-E-Mails verwenden möchten.

Bei E-Mails, die spät in einer Beziehung eingehen, d. h. nach einer beträchtlichen Zeit der Inaktivität, können Bilder blockiert werden, da sie sich im Spam-Ordner des Abonnenten befinden. Das bedeutet, dass Sie möglicherweise zusätzlichen Aufwand für das defensive Design in Ihre E-Mails zur Wiedereingliederung und zur erneuten Erlaubnis investieren möchten.

In beiden Fällen kann dieser zusätzliche Aufwand neben der großzügigen Verwendung von HTML-Text und formatiertem ALT-Text auch E-Mail-Pixel-Art umfassen.

Für Bildblockierung optimieren Mit Litmus Builder können Sie E-Mails einfach codieren und in über 70 E-Mail-Apps und -Geräten in der Vorschau anzeigen. Schalten Sie Bilder mit einem einzigen Klick ein und aus, um Ihre E-Mail-Pixelkunst zu perfektionieren. Erstellen Sie großartige E-Mails →

So erstellen Sie E-Mail-Pixel-Art

Wie erstellt man in Anbetracht dieser Überlegungen am besten E-Mail-Pixel-Art?

Für den Anfang empfehlen wir:

• Bild-zu-Tabelle-Konverter
• E-Mail-optimierte Hunde
• Bild-HTML-App

Sie finden diese jedoch möglicherweise nicht in allen Fällen hilfreich. In den meisten Fällen erwarten wir, dass Sie Ihre E-Mail-Pixelgrafiken manuell erstellen möchten.

Wenn Sie diese Route wählen, müssen Sie die folgenden Schritte ausführen:

1. Skizzieren Sie ein minimal tragfähiges E-Mail-Pixel-Art-Bild auf Millimeterpapier oder in der Design-Software Ihrer Wahl.
2. Verwenden Sie das Slice-Tool in Photoshop oder einer anderen Designsoftware, um Ihr Bild in die erforderlichen Blockgrößen zu unterteilen, um Ihr E-Mail-Mosaik zu erstellen und diese als separate Bilder zu speichern. Verwenden Sie eine Dateinamenskonvention, die es Ihnen leicht macht, Ihr Gesamtbild wieder zusammenzusetzen.
3. Verwenden Sie eine Reihe von Tabellen, die in einer Tabelle verschachtelt sind, und erstellen Sie die Blöcke an den Positionen, die Sie für Ihr Design benötigen.
4. Um sicherzustellen, dass Ihre aufgeteilten Bilder nahtlos zusammenpassen, legen Sie für Ihre Tabellen cellpadding=“0“, cellpacing=“0“ und border=“0“ fest.
5. Wenden Sie die benötigte bgcolor auf jede Ihrer Tabellenzellen an.
6. Zeigen Sie eine Vorschau Ihrer E-Mail mit deaktivierten Bildern an, um sicherzustellen, dass sie wie beabsichtigt gerendert wird.

Hier ist ein großartiges Beispiel für E-Mail-Pixel-Art aus dem EmailWeekly-Newsletter von Action Rocket. Wählen Sie „Bilder umschalten“ in der Litmus Builder-Benutzeroberfläche, um die E-Mail ohne Bilder anzuzeigen.

Eine seltene und unerwartete Taktik

E-Mail-Marketer verstehen die Notwendigkeit, für Bilder zu designen. Wir wissen das, weil 83 % der Marken ALT-Text für ihre E-Mail-Bilder immer oder oft verwenden, laut Litmus' 2018 State of Email Survey unter fast 3.000 Vermarktern.

Während das Hinzufügen von ALT-Text ziemlich einfach ist, ist das Erstellen von E-Mail-Pixel-Art alles andere als. Infolgedessen verwenden fast 77 % der Marken niemals E-Mail-Mosaiken.

Für unerschrockene Marken ist das eine Chance. Die Seltenheit dieser Taktik bedeutet, dass sie eine effektive Möglichkeit ist, Abonnenten zu überraschen und zu begeistern, indem sie das Unerwartete liefert – und immer mehr Marken setzen sich durch. Mehr als 23 % der Marken verwenden E-Mail-Pixel-Art zumindest selten, gegenüber 18 % im Jahr 2017.

Möchten Sie weitere Ressourcen wie diese?

Abonnieren Sie Litmus Weekly, um Ihre wöchentliche Dosis an E-Mail-Inspiration, Tipps und Tricks direkt in Ihrem Posteingang zu erhalten.

Auf die Liste kommen →