Das ist die Zukunft des E-Mail-Designs

Es wurde viel darüber gesagt, dass das E-Mail-Design in der Vergangenheit feststeckt. Designer, die ihre ersten Projekte in Angriff nehmen, beklagen die Verwendung von Tabellen und Inline-Stilen. Marketer, die ihre ersten Kampagnen planen, weigern sich, über die Batch-and-Blast-Mentalität hinaus zu denken.

Aber einige unerschrockene Absender lassen sich von den (manchmal) veralteten Technologien und Mentalitäten rund um das E-Mail-Design nicht aufhalten. Sie erweitern die Grenzen des E-Mail-Designs und verwenden Techniken, die im fortgeschrittenen Webdesign üblich sind, um ihre Abonnenten zu überraschen, zu begeistern und mit ihnen in Kontakt zu treten.

Werfen wir einen Blick auf die Herausforderungen im Zusammenhang mit experimentellem E-Mail-Design und fassen wir einige unserer beliebtesten futuristischen E-Mail-Kampagnen zusammen.

E-Mail-Marketing im Jahr 2020 Bereiten Sie sich mit den Erkenntnissen von 20 führenden Experten sowie den Umfrageergebnissen von Tausenden von Vermarktern und Verbrauchern auf die Zukunft des E-Mail-Marketings vor. Jetzt downloaden

E-Mail-Design muss nicht einschränkend sein

Wenn die meisten Leute an E-Mail-Marketing denken, denken sie an langweilige Newsletter, die von Unternehmen verschickt werden, die etwas verkaufen wollen. Und wenn Sie eine E-Mail-Kampagne erstellen müssen, sehen Sie sich wahrscheinlich einen Stapel HTML-Tabellen und Inline-CSS an und zählen die Minuten, bis Sie eine E-Mail zusammengehackt haben, die überall funktioniert.

Die Grundlagen des E-Mail-Designs sind zwar etwas alt, aber mit ein wenig Kreativität, Planung und vielen Tests sind den Möglichkeiten keine Grenzen gesetzt. Ja, E-Mail-Designer müssen tabellenbasierte Designs (danke, Outlook!), Inline-CSS verwenden und durch ein Meer von Hacks schwimmen, aber wie die folgenden Beispiele zeigen, können Sie im Posteingang immer noch einige erstaunliche Dinge erreichen.

Um das zu beweisen, sind hier einige unserer beliebtesten Beispiele für E-Mails, die gegen die Regeln verstoßen und die Grenzen des E-Mail-Designs überschreiten.

Ein Karussell in einer E-Mail?

Vor einiger Zeit schickte der britische Einzelhändler B&Q eine E-Mail, die die Branche in Brand setzte.

In dieser Kampagne können Benutzer mit der Maus über die Schaltflächen fahren oder darauf tippen und zusehen, wie verschiedene Inhaltsabschnitte reibungslos in die E-Mail ein- und ausgefahren werden. Diese Technik wird allgemein als Karussell bezeichnet und ist in der Webwelt weit verbreitet, wird jedoch selten für E-Mail-Kampagnen verwendet. Einige mögen sich beschweren, dass Karussells ineffektiv sind und nur zur Show dienen, aber die B&Q-Kampagne ist ein großartiges Beispiel dafür, wie man mit modernsten Techniken E-Mail-Abonnenten überraschen kann.

Die E-Mail verwendet eine Reihe von CSS3-Eigenschaften zusammen mit einem cleveren Targeting, um ihre Magie zu entfalten. Durch die Verwendung von CSS-Übergängen, Animationen, Z-Index und der Überlaufeigenschaft haben die Designer eine clevere E-Mail erstellt, die einfach darauf wartet, angetippt zu werden.

Noch beeindruckender ist, dass für E-Mail-Clients, die diese fortgeschritteneren Techniken nicht unterstützen, alles wunderbar zurückfällt.

Verrückte Farben und Star Wars

Die britische E-Mail-Agentur Action Rocket ist seit einiger Zeit führend im Bereich E-Mail-Design. Mit ihrer clever betitelten wöchentlichen Zusammenfassung von E-Mail-Nachrichten, Email Weekly, testen sie einige kreative Techniken, die schließlich ihren Weg in Kundenkampagnen finden könnten.

Eines unserer Lieblingsbeispiele ist ihre E-Mail mit der Frage „Welche Farbe hat diese E-Mail?“.

Mit CSS-Keyframe-Animationen animieren sie die Hintergrundfarben des Überschriftenabschnitts, was einen hypnotisierenden, halluzinatorischen Effekt erzeugt. Am Anfang ist es subtil, aber sobald ein Abonnent die Animation mitbekommt, kann er sich nicht mehr abwenden.

Ein weiteres großartiges Beispiel von Action Rocket ist ihr kürzlich von Star Wars inspirierter Digest, der die experimentelle Eigenschaft -webkit-perspective zusammen mit CSS-Transformationen nutzte, um den ikonischen Eröffnungs-Crawl des beliebtesten Science-Fiction-Films nachzubilden.

Infografiken in einer E-Mail?

Während der Displayblock von E-Mail-Agenturen durchweg großartige E-Mails sendet, ist es ihre jüngste Infografik-E-Mail, die unsere Aufmerksamkeit wirklich auf sich gezogen hat.

Ähnlich wie bei den Hintergrundfarben im Beispiel von Email Weekly verwendet der Display-Block CSS-Keyframe-Animationen, um einer bereits gut gestalteten Kampagne etwas Leben einzuhauchen. Was wirklich großartig ist, ist, dass die E-Mail wunderbar reaktionsschnell ist und jeden Abschnitt gut auf mobilen Geräten stapelt. Das ansprechende Design und die animierten Symbole dienen alle dazu, einige großartige Daten über die mobile E-Mail-Nutzung zu verbessern.

Wir haben nicht viele solche Infografiken in einer E-Mail gesehen, was sie umso beeindruckender und bahnbrechender macht. Wir würden uns freuen, mehr Beispiele für Infografiken zu sehen, deshalb veranstalten wir einen Community-Wettbewerb, der ihnen gewidmet ist!

HTML5-Video und interaktive Touren

Wir praktizieren gerne, was wir predigen, weshalb wir unsere E-Mails schön und reaktionsschnell gestalten, obwohl wir überwiegend ein Desktop-Publikum haben. Dies ist auch der Grund für einige unserer eigenen hochmodernen E-Mail-Kampagnen, wie unser HTML5-Videohintergrund von der letztjährigen E-Mail-Design-Konferenz (die wir diesen Sommer wieder veranstalten…).

Unser Designer, Kevin, hat ein fortschrittliches E-Mail-Client-Targeting verwendet, um ein ansonsten einfaches Design schrittweise zu verbessern. Wenn Sie neugierig sind, wie genau er es geschafft hat, hat er einen Blogbeitrag geschrieben, in dem er den Prozess detailliert beschreibt.

Und um die Einführung unseres E-Mail-Code-Editors Builder zu feiern, ging er noch einen Schritt weiter, indem er eine interaktive Tour direkt in einer E-Mail erstellte.

Mit CSS-Animationen, dem Checkbox-Hack und der großzügigen Nutzung der CSS-Content-Eigenschaft zeigt er einige der Funktionen von Builder direkt im Posteingang und gibt Abonnenten einen Vorgeschmack auf das Produkt, ohne sich einloggen zu müssen. Es gibt eine Menge von Code, der es antreibt, aber Sie können es direkt im Builder überprüfen (ähnlich wie E-Mail Inception).

Leckerere E-Mail-Menüs

Wie bei der Karussell-E-Mail ließ sich Designer Jerry Martinez vom Internet inspirieren, um ein Hamburger-Menü für mobile Abonnenten zu implementieren.

Navigationselemente sind für E-Mail-Designer immer ein Trick – insbesondere auf Mobilgeräten. Da sie in der Regel viel Platz einnehmen, wenn sie gestapelt sind, können sie vom Haupt-Call-to-Action in einer Kampagne ablenken. Um das Problem zu lösen, hat Jerry ein elegantes Hamburger-Menü entwickelt, das es mobilen Benutzern ermöglicht, Navigationselemente selektiv anzuzeigen.

Wir waren so beeindruckt von Jerrys Lösung, dass wir die Leute eingeladen haben, andere kreative Navigationsmuster in einem unserer Community-Wettbewerbe vorzuführen…

Community-Wettbewerbe: Die wahrhaftigen Spitzenreiter

Bei unseren Community-Wettbewerben fordern wir die Leute wirklich auf, verrückte Ideen zu entwickeln. Jeden Monat geben wir ihnen ein Thema und lassen sie ihre Fähigkeiten erweitern. Unser erster Wettbewerb, der sich mit der kreativen Verwendung von ALT-Text befasste, brachte einige erstaunliche Ergebnisse, wie Space Invaders in einer E-Mail:

Für unseren zweiten Wettbewerb ließen wir uns interessante Navigationsmuster ausdenken. Wir waren überwältigt von einigen Ergebnissen, wie dem klebrigen Navigationskonzept von Remi Parmentier:

Etwas Neues ausprobieren?

Es ist zwar aufregend, neue Dinge in E-Mails auszuprobieren, aber es kann viel schiefgehen, wenn Sie Ihre Kampagnen nicht gründlich testen. E-Mail-Vorschauen erleichtern das Testen jeder Technik in Desktop-, Webmail- und mobilen E-Mail-Clients.

Testen Sie Lackmus kostenlos →