Die 5 Geheimnisse des Responsive E-Mail-Designs

 
 

In der heutigen hyper-vernetzten Welt spielen Marketer alle möglichen Karten aus, um ihre Botschaften zu vermitteln. Und ungeachtet der zunehmenden Beliebtheit von Social Media bleibt die E-Mail der leuchtende Stern: Solide 59 % aller B2B-Markteter geben die E-Mail als den „effektivsten Kanal” zur Umsatzgenerierung an (BtoB Magazine).   

Doch bei den rund 200 bis 300 E-Mails, die ein durchschnittlicher Kunde täglich erhält, braucht es etwas mehr als genaues Zielen, um ins Schwarze zu treffen.

Bevor sie loslegen sollten Marketingfachleute zwei eng miteinander verflochtene E-Mail-Trends berücksichtigen:

■ Etwa 48 % aller E-Mails werden mittlerweile auf Mobilgeräten geöffnet (Litmus).

■ E-Mails, die nicht korrekt angezeigt werden, werden von 71,2 % der Nutzer umgehend gelöscht (BlueHornet).

Zack! Diese Zahlen sprechen eindeutig für Responsive E-Mail-Design. Im Prinzip geht es hier um ein fließendes E-Mail-Design, das reaktiv ist und sich jedem Gerät anpasst auf dem es angezeigt wird, toll aussieht und gleichzeitig reibungslos funktioniert.

Eine wachsende Zahl von Marketern hat das bereits verstanden. Laut einer jüngsten Untersuchung von Forrester Research gaben 72 % der Unternehmens-E-Mail-Marketer an, bereits ein Responsive Design zu nutzen. Unterdessen sagen 27 %, dass sie planen, ein Responsives Design zu nutzen oder „es gerne würden”… wahrscheinlich, irgendwie, in Kürze.

Planen oder Liebäugeln reicht aber nicht aus. Die gute Nachricht ist: Das Ankurbeln der Klickraten und Erhöhen der Konversionsrate auf verschiedenen Geräten ist gar nicht so kompliziert.

Wie machen Sie Ihr E-Mail-Design reaktiv? Es gibt unzählige technisch versierte Möglichkeiten wie DOCTYPE, Medien-Anfragen, Viewport-Rendering und die Verwendung von HTML, die anderen Optionen gegenüberstehen. All diese Optionen werden detailliert dargestellt in unserem kostenlosen Leitfaden zum „Responsive E-Mail Design".

Für den Anfang können die folgenden grundsätzlichen 5 Geheimnisse des Responsive E-Mail-Designs, dabei helfen, die Dinge auf den Weg zu bringen:

1. Verwenden Sie ein 1-Spalten-Layout

E-Mails werden auf einem Desktop-Computer in einem horizontalen Bildschirm angezeigt, sodass nebeneinander angeordnete Texte und Tabellen toll aussehen und der Platz optimal genutzt wird. Aber nicht auf Mobilgeräten. Hier funktionieren E-Mails in einer Spalte von oben nach unten am besten, da die User dazu neigen, ihre Smartphones aufrecht zu halten.

Bedienen Sie diese Anwender und erstellen Sie zuerst eine mobile Version Ihrer E-Mail, indem Sie an einem 1-Spalten-Layout ohne feste Breite festhalten. Machen Sie es nicht zu kompliziert und peppen Sie den Inhalt großzügig mit eingebetteten Tabellen, Bildern oder interaktiven Elementen auf, die Ihrem Design Rhythmus verleihen.     

2. Glühen Sie mit starken Preheaders vor

Das typische Nutzungsszenario für E-Mails ist ein Leser, der am frühen Morgen die E-Mail-Nachrichten des Tages in der Listenansicht sichtet – und dabei auswählt, welche Nachrichten geöffnet werden und welche gelöscht. Das Zünglein an der Waage kann für Sie ein aussagekräftiger Preheader sein. Dabei handelt es sich um den kurzen, zusammenfassenden Text, der neben der Betreffzeile der E-Mail im Posteingang angezeigt wird.

Dies ist das redaktionelle Filetstück und genau der richtige Ort, um ein überzeugendes Argument für das Öffnen der Nachricht anzubringen: Entweder durch eine Zusammenfassung des Nachrichteninhalts, durch den ersten Satz des E-Mail-Texts, durch eine Auflistung Ihrer Unterüberschriften oder durch Bekräftigen der Betreffzeile mit einer überzeugenden Handlungsaufforderung. In diesem Zusammenhang brauchen Sie natürlich auch eine aussagekräftige Betreffzeile, um die Leser zu interessieren. 

3. Gehen Sie aufs Ganze mit großen Schriftarten und markanten Calls-To-Action (CTA).

Sorgen Sie für eine leichte Lesbarkeit mit großzügig dimensionierten Schriftbildern im Textkörper, eingestreuten Überschriften in Fettschrift und Unterüberschriften mit attraktiven Farbtupfern. Sie verwenden linksbündigen Text, oder? Wenn nicht, bitte ab sofort tun, denn nicht alle Betriebssysteme skalieren den Inhalt und passen ihn an den Bildschirm an. Achten Sie außerdem auf eine vertikale Hierarchie und platzieren Sie Kernbotschaften ganz oben.

Laden Sie die Nutzer ein, sich über ‚antippbare‘ Call-To-Action-Bereiche in Aktion zu „tippen“. In Apples iOS Human Interface Guidelines wird als grober Richtwert für Touchpoints eine Fläche von mindestens 44 x 44 Pixel empfohlen. Ohne vergrößern zu müssen können die Nutzer Buttons aktivieren wie „LIKE UNS AUF FACEBOOK”, „FOLGE UNS AUF TWITTER”, „NEUE PRODUKTE EINKAUFEN” – tipp, tipp, tipp!

4. Bilder verantwortungsvoll nutzen

Das Einfügen von Bildern in Ihr E-Mail-Design ist der Punkt, an dem sich Ansprechbarkeit und verantwortungsbewusster Umgang treffen: Nicht alle E-Mail-Clients zeigen Bilder automatisch an; einige verlangen die Autorisierung des Absenders. Packen Sie also nicht Ihre ganze Botschaft in Bilddateien. Außerdem ist der einzige, der bei zu wenig Textinhalt reagiert, der Spam-Filter.

Erfahrene Designer verwenden bei Mobilgeräten für ihre Nachrichten außerdem gerne kleinere Bilder, die weniger Bandbreite verbrauchen. Das kann man erzielen, indem man eine Medienabfrage einbezieht, um das Anzeigegerät zu ermitteln, gefolgt von der Anweisung, bei der Anzeige auf Mobilgeräten kleinere Bilder zu verwenden, um frustrierende Ladezeiten zu vermeiden (erfahren Sie mehr in unserem kostenlosen PDF „Responsive E-Mail Design").

5. Prüfen Sie Ihr Design  

Der nächste Schritt versteht sich eigentlich von selbst: Die einzige Möglichkeit, Ihr Design vor #Anzeigefehlern zu schützen ist die Prüfung Ihrer E-Mail-Nachricht mit einem Tool. Digitale Marketingtools wie beispielsweise Selligent Campaigner enthalten Funktionen, die E-Mail-Nachrichten vor dem Freischalten in einer sicheren Umgebung simulieren.

Die folgenden Websites bieten ebenfalls Prüfoptionen:

mattkersley.com/responsive Geben Sie eine URL mit Ihrem Responsive Design ein und zeigen Sie Ihre Nachricht in verschiedenen Vorschaugrößen an.

resizemybrowser.com Nicht alle Entwickler verfügen über alle Geräte, um ihr Design darauf zu prüfen. Diese Website passt Ihren Browser an die gewünschte Auflösung an.

pxtoem.com Konvertieren Sie Ihre Pixel für ein optimales Responsive Design in Prozentwerte.
 

Lust, noch mehr darüber zu erfahren, wie Sie Ihre E-Mails von Desktop-Computern über Laptops bis hin zu Mobilgeräten zu Stars machen können? Downloaden Sie unseren kostenlosen Leitfaden: "Responsive email design".
 

Main image photo source: Shutterstock (author: Rawpixel)