05.09.2016

So gestaltet ihr E-Mails – der ultimative Guide

E-Mails

E-Mails gestalten? Das ist gar nicht so viel anders, als eine Website zu designen – mit ein paar kleinen, aber wichtigen Unterschieden. Denn euch bleiben nur wenige Sekunden, um die Aufmerksamkeit der Empfänger zu erhaschen. Behaltet ein paar unserer Hinweise im Hinterkopf – und der Gestaltung effektiver Mails steht nichts mehr im Weg.

 

Diese E-Mail-Typen gibt es:

Newsletter
Bestehen aus jeder Menge Links und wenig Text, oder aus längeren Artikeln. In jedem Fall enthalten sie eher keine Call to Actions, was Designer vor die Herausforderung stellt, den Content einer gewissen Hierarchie unterzuordnen.

Benachrichtigungen
Denkt an die Mails, die Facebook euch schickt, wenn jemand euch eine Freundschaftsanfrage stellt. Oder Twitter, wenn euch jemand folgt. Diese Mails sind meist kurz und enthalten einen kaum zu übersehenden Call to Action.

Transaktionsmails
Solche Mails werden verschickt, wenn User mit einer Website interagieren. Ob Kauf oder Registrierung – die Mail liefert einerseits die passenden Informationen und versucht, zurück auf die Seite zu locken.

Marketing E-Mails
Die klassische Mail zum “Geschäfte machen”. Sei es eine Angebotserinnerung oder eine Produktvorstellung – dies sind Mails, die jede Menge “Design” erfordern. Und sie verlangen eine Aktion vom Empfänger – zum Beispiel eine Registrierung oder einen Kauf. Die Call to Actions sind hier das wichtigste Element.

 

Mit diesen Tipps seid ihr im Vorteil:

1. Content, Content über alles
Content ist King – klar. Aber in E-Mails muss er auch noch kurz und knapp sein. Immer auf den Punkt. Mit jeder verschwendeten Sekunde verliert ihr Leser. Das Zauberwort: Präzision.

2. Klare Call to Actions
Was ist eure Absicht? Der Call to Action sollte dies sehr klar zeigen, sich nicht verstecken und – natürlich – tippfreundlich sein.

3. Testen, Testen, Testen
Geräte, Klienten – unterzieht eure Mails von Anfang an zahlreichen Tests. Das Ergebnis: Weniger Bugs, jede menge Technikverständnis und am Ende ein starkes Produkt.

4. Benutzt Pre-Header-Text
Pre-Header-Text ist fast so wichtig, wie die Betreffzeile eurer Mail. Benutzt ihn, um euren Leser davon zu überzeugen, die Mail zu öffnen.

5. Verlinkt eine Web-Version
Geht sicher, einen Link zur Web-hosted Version eurer Mails in die Mail zu inkludieren – falls jemand Probleme damit hat, die Mail auf seinem Device oder im E-Mail-Client anzeigen zu lassen.

6. Design? Einfach.
Fancy Grafiken und aufwändiges Design sind ästhetisch. Doch simple Gestaltung ist universell. Macht es nicht kompliziert und stellt damit sicher, dass eure Mails auf sämtlichen Geräten anständig dargestellt werden.

 

Responsive Design – für optimale mobile Optimierung
E-Mails auf dem mobilen Endgerät? Heutzutage fast Standard, denn über die Hälfte aller Menschen macht es ständig. Deshalb ist es wichtig, dass eure Mails auch auf dem Smartphone gut aussehen – sonst wartet bereits der Lösch– oder Unsubscribe-Button.

Euch bleiben zwei Möglichkeiten: Entweder ein klassischer Resize – oder ein Responsive Design. Responsive Designs erweisen sich gerade bei HTML E-Mails als praktischer. Speziell auf kleinen Screens sind Websites sonst kaum noch lesbar.

 

Hier ein paar Tipps, die eure E-Mails mobile-freundlich und leicht adaptierbar machen:

  1. Schmal, aber effektiv: Layoutet nicht breiter als 500-600 Pixel. So senkt ihr die Wahrscheinlichkeit, dass es auf einigen Geräten nur schlecht lesbar ist.
  1. Benutzt große Schrift: Informiert euch über passende Schriftgrößen für die unterschiedlichen Plattformen – iOS zum Beispiel hat eine minimum Font Size von 13 Pixeln.
  1. Groß und klickbar: Haltet die wichtigen Bereiche nicht zu klein. Isoliert sie von anderen Links, damit die User beim ersten Tippen richtig landen.
  1. Weniger ist mehr: Benutzt display:none, um unerwünschte Website-Elemente zu verstecken. Was auf dem Monitor userfreundlich ist, ist auf dem Smartphone unübersichtlich.

 

Templates und Frameworks
Eine HTML-E-Mail komplett selbst zu coden ist machbar – ein Template oder ein Framework zu benutzen, um erst einmal zu starten, kann den Prozess jedoch deutlich beschleunigen.

Hier ein paar unserer Empfehlungen:

Cerberus: http://tedgoas.github.io/Cerberus/

Ink: http://zurb.com/ink/

Antwort: http://internations.github.io/antwort/

 

Ganz schön viel Stoff? Nicht verzagen, 9ZWEI4EINS fragen. Die Marketing-Mail und Responsive Design-Experten aus Düsseldorf kümmern sich um eure Anliegen. Kontaktiert uns einfach.

Schreibe einen Kommentar

Kreative, die kämpfen, beißen nicht.

Du möchtest uns kennenlernen? Meld dich in unserem Kreativring. Wir begrüßen dich mit Heißgetränk, kräftigem Händedruck und dem Lächeln einer Kämpfernatur.

Jetzt E-Mail schicken