U bevindt zich hier: Know-How > HTML-Newsletter-Format für den mobilen Einsatz

HTML-Newsletter-Format für den mobilen Einsatz

Bei HTML-Newslettern kommt man um ein Format nicht mehr umhin: Mobil! Mehr und mehr Empfänger lesen Ihren Newsletter auf Ihren Smartphones oder Tablet-PCs. Wenn Sie Ihre E-Mailmarketing-Aktivitäten planen, sollten Sie diesen Bereich auf jeden Fall berücksichtigen.

Derzeit werden durchschnittlich 10 bis 30% der E-Mails mobil gelesen. -eMailmonday: "Party safe mobile email stats (2011).
43% der mobilen E-Mailleser checken Ihre E-Mails 4x oder öfter pro Tag, in Vergleich zu 29% der Leute, die keinen Gebrauch von mobilen E-Mails machen. -Merkle "View from the Inbox Digital 2011" (2011).

Das bedeutet, dass sich die Notwendigkeit, HTML-Newsletter für den mobilen Gebrauch zu erstellen, erhöht. Aber wie stellen Sie das an? Hier nun 5 technische Hinweise, die Sie in Betracht ziehen sollten, wenn Sie sich auf mobile HTML-Newsletter vorbereiten:

1. CSS-Optimierung für mobile Geräte

Ein bekanntes Phänomen beim Lesen von E-Mails auf Mobiltelefonen sind die Style-Änderungen im mobilen Browser. Dies kann durch den Einsatz von CSS (Cascading Style Sheets) vermieden werden. Der folgende Code in der Überschrift Ihres Newsletters sorgt dafür, dass sich die Textgröße nicht ändert.


    <style type=”text/css”>

    body {-webkit-text-size-adjust:none;}

    div, p, a, li, td {-webkit-text-size-adjust:none;}

    </style>

Dies bedeutet, dass die Textgröße sich nicht ändern sollte (wenn der Newsletter auf einem mobilen Gerät angeschaut wird). Wenn Sie CSS in Ihren HTML-Newslettern nutzen, benutzen Sie inline CSS! Viele E-Mailprogramme ersetzen den CSS-Code vom <head>-Tag.

Eine gute Marketing-Software bietet Ihnen Instrumente, Inline-Style-Attribute automatisch zu spezifizieren und die Löschung des CSS-Code vom <head>-Tag Ihres Newsletters zu vermeiden.

2. Formatieren Sie Ihre HTML-Newsletter

Sorgen Sie dafür, dass Ihre Leser nicht zu viel scrollen müssen, wenn Sie Ihren Newsletter öffnen. Platzieren Sie die Inhalte Ihres Newsletters an den Anfang, so dass der Leser einfach entscheiden kann, was er lesen möchte.

Wenn Sie Ihren Newsletter erstellen, beschränken Sie die Breite auf 640 Pixel oder weniger. E-Mails, die auf mobile Nutzer zugeschnitten sind, erhöhen die Interaktion und letztendlich Ihre Durchklickrate. Die meisten Mobiltelefone (Smartphones) haben ein Display mit einer Breite von 320 und 480 Pixeln (das iPhone verfügt über 320 Pixel in der Senkrechten und 480 in der Waagerechten). Wenn Ihr Newsletter 640 Pixel breit ist, ist er bereits gut lesbar, ohne dass der Leser zoomen muss.

3. Denken Sie an die Finger

Ihre Leser verfügen nicht über eine Maus, wenn sie Newsletter auf Ihrem Smartphone oder Tablet-PC lesen. Neben der Breite müssen Sie daher auch die Anordnung der Links und Handlungsaufforderungen (Call-to-Actions) berücksichtigen. Ein bekannter Frustraktionsfaktor im Mobilbereich stellt sich ein, wenn man auf mobilen Geräten versucht, Hyperlinks zu öffnen, weil die Hyperlinks einfach zu klein oder nicht gut angeordnet sind.

Dieses Problem lässt sich durch den effektiven Gebrauch eines simplen Designs lösen: nutzen Sie eine Spalte und Ihren weißen Platz optimal. Ein Finger verdeckt etwa 45 Pixel auf dem Bildschirm Ihres Mobiltelefons. Indem Sie einen Freiraum von 10 bis 15 Pixel zu Ihrem CTA lassen, wird das Anklicken des CTA erleichtert und Frust beim Anwender vermieden. Ein anderes praktisches Extra ist ein "Display-Block". Dieser vergrößert die Fläche, aber kann nicht gesehen werden, weil er von Freiräumen umgeben ist.

Oder versehen Sie Ihre Links mit einer größeren Schrift. So ist Ihre wichtige Information eindeutig zu sehen und die Newsletter sind leichter zu lesen.

4. Denken Sie an Ihre Bestandsgröße

Vergessen Sie nicht, dass eine mobile Internetverbindung etwas langsamer läuft als eine Glasfaserverbindung in Ihrem Büro! Das Einfügen eines PDFs oder diverser Bilder mit durchschnittlich 300kb in Ihre Newsletter macht wenig Sinn für mobile Leser, da sich solche Dateien schwerlich öffnen lassen. Je weiter Sie die Größe Ihres HTML-Newsletters verringern können, desto besser.

5. Betrachten Sie die Landingpage

Sind Ihre Newsletter "mobilfreundlich" gestaltet? Achten Sie darauf, dass die Landingpage hinter einem Link und CTA genauso "mobilfreundlich" gestaltet ist. Es macht wenig Sinn, wenn ein Newsletter auf einem Mobilgerät gut angezeigt wird, die folgenden Seiten aber nicht. In diesem Fall wird Ihr mobiler Leser bei der nächsten Mail weniger bereit sein, dich durchzuklicken. Sorgen Sie also dafür, dass Ihre Landingpage:

über die richtige Breite verfügt
auf den Punkt gebracht wird. Vertiefende Informationen können Sie auf weiterführenden Seiten platzieren. Mobilleser, die wissen, was sie wollen, werden Ihre Webseite besuchen, wenn sie am PC sitzen.
Haben Sie Flash auf Ihrer Landingpage? Ersetzen Sie es mit HTML5, CSS3 und Javascript. IPhone und Blackberry unterstützen nämlich kein Flash. Android zwar schon, doch sind die Ladezeiten recht lang. Also vermeiden Sie Flash am besten gänzlich.
Links auf mobilen Touchscreens haben keinen "Hover State". Das bedeutet, dass Sie keinen Link oder kein Bild haben, über das Sie mit der Maus fahren können, um einen Link angezeigt zu bekommen. Berühren Sie den Bildschirm und klicken Sie dann. Stellen Sie sicher, dass dem Leser klar ist, um welchen Link es sich handelt und wie der CTA lautet.

6. Last but not least: Testen!

Den letzten Tipp, den wir Ihnen gerne geben, ist nicht weniger bedeutend. Die bisherigen Hinweise sind alle gut und wichtig. Das bedeutet aber nicht, dass Sie die Punkte abhaken und direkt starten können. Testen Sie Ihre Änderungen erst, um zu sehen, ob alles reibungslos funktioniert. Funktionieren die Links? Wird der spezifizierte Style korrekt angezeigt? Werden Ihre Landingpages richtig angezeigt? Wenn Sie alles überprüft haben und Ihre HTML-Newsletter von Ihren mobilen und anderen Empfängern gelesen werden können, sind Sie bereit, zu versenden.

Folgen Sie uns auf:

Produktvideo ansehen

Testimonials