Was ich rund um respon­sives E-Mail-Mar­ke­ting ge­lernt habe

mit Keine Kommentare

E-Mail-Mar­ke­ting-Bei­trag

Ein weiteres wichtiges Element des res­ponsiven Designs ist responsives E-Mail-Design. Wenn Sie darüber nach­den­ken, wie Sie Ihre Abonnenten dazu bringen, Ihre E-Mails zu öffnen, müssen Sie sich auch Gedanken darüber machen, wie Ihre Bot­schaf­ten optisch dar­gestellt werden und wie Ihre Leser einen an­sprechenden Lesekomfort er­hal­ten, unab­hän­gig vom Gerät, auf dem Sie Ihre E-Mails lesen.

E-Mail

Quelle: Gerd Altmann auf Pixabay

Inhalts­ver­zeich­nis: Respon­sives E-Mail-Mar­ke­ting

Responsives E-Mail-Design passt sich, wie responsive Web­seiten, nahtlos an die Bildschirm­auflösung und die Breite von unterschiedlichen Gerätegrößen an. Ihre E-Mails können somit in ansprechender Optik auf allen Gerätearten ge­le­sen werden.

Die Erstellung von E-Mails für mobile Geräte erfordert, dass Sie den Weg überdenken, in dem Sie traditionell E-Mails entwor­fen haben.

Sie müssen bestimmen und festlegen, welche Inhalte Ihre mobilen Leser wirklich sehen müssen, denn Sie haben nicht viel Raum.

Und Sie sollten Ihr Design so gestalten, dass Ihre E-Mails auch auf mobilen Geräten das Interesse der Leser finden, ohne dass diese sich beim Lesen anstrengen müssen. Sehen wir uns jetzt einmal drei Bereiche an, die Sie bei Ihrem Design und Ihrer Inhaltsentwicklung stets berücksichtigen sollten.

Mobile E-Mail-Layouts

Das Entwerfen für mobile Geräte ist mehr als nur eine E-Mail mit mobil-spezifischem Code zu er­stellen. Sie müssen ganzheit­licher über das Layout Ihrer E-Mails denken.

Stellen Sie sicher, dass Ihre E-Mails optisch ansprechend sind, der Text gut lesbar ist und Ihre Aufrufe zum Handeln ganz klar erkennbar und verständlich sind.

Hier sind einige der besten Prakti­ken, die Sie im Kopf behal­ten sollten:

  • Breite
    Ihre E-Mails sollten nicht brei­ter als 500-600 Pixel sein und in einem einspaltigen Layout für das einfache Lesen und den schnellen Konsum auf einem Mobilgerät gestal­tet sein.
  • Über dem Falz
    Alle kritischen Design-Ele­men­te sollten sich im oberen Abschnitt Ihrer E-Mail befinden – über dem Falz. Denken Sie daran, auf einem Handy oder einem Tablett-PC haben Sie weniger Raum für strategische Gestaltung.
  • 44 Pixels
    Integrierte Buttons sollten eine Mindest­größe von 44 x 44 Pixeln haben, damit Ihre Leser sie problemlos erken­nen und antippen können. Dies empfiehlt auch Apple in den Richtlinien.
  • Lesbarkeit
    Gestalten Sie Ihren Text größer, um die Lesbarkeit zu erhöhen. Leser mögen keinen Text, der zu klein ist. Apple empfiehlt eine Mindest­schriftgröße von 13 Pixeln.
  • Oldies
    Einige ältere Geräte unterstützen responsives Design nicht. Stattdessen werden Ihre E-Mails dort skaliert.
  • Multimedia
    Denken Sie daran, dass Rich-Media wie Flash, JavaScript-Videos und einige mehr in HTML-Mails nicht arbeiten.
  • Text E-Mails
    Bieten Sie den Lesern, die aus diversen Gründen keine HTML-Mails empfangen wollen, reine Text-Emails an.

Bilder

Smartphone

Bilder sind ein wichtiger Teil da­von, wie Ihre E-Mails auf ei­nem mobilen Gerät erscheinen. Die Bildschirme, auf denen Ihre E-Mails angezeigt werden, sind viel kleiner als auf einem Desktop-Computer – und doch müssen Sie die Auf­merk­sam­keit der Leser erhalten.

Die Bilder sollten bunt und mutig sein sowie einen Bezug zu Ihrem Unter­nehmen haben. Ihre Bilder sollten, wie die anderen Ele­mente in Ihrer E-Mail auch, sich automatisch der verwen­deten Bildschirmgröße anpassen.

Die meisten E-Mail-Clients blockieren derzeit alle Bilder standardmäßig, so dass die Nutzer die Initiative ergreifen müs­sen, um sie zu entsperren, wenn sie diese sehen wollen.

KlickTipp E-Mail-Marketing

Die gute Nachricht ist, dass die meisten Leser dies auch tun, denn sie wollen Ihre Bilder se­hen. In einer Umfrage von David Daniels von der Firma The Relevancy Group gaben 55% der befragten Personen an, dass Sie den Abruf von Bildern in den erhaltenen E-Mails einschalten.

Von diesen gaben wiederum 57% an, dass sie ihre E-Mails hauptsächlich auf mobilen Gerä­ten abrufen.

Trotzdem gibt es viele Empfän­ger, die E-Mails konsumieren, ohne dass sie die Bilder abrufen. Hier sind 2 Ideen, um auch diese wie gewünscht visuell zu erreichen:

Kreative HTML-But­tons

Sie können Buttons erstellen, die wie Bilder aussehen, tatsächlich aber geschickte HTML-Forma­tie­run­gen sind.

Diese Buttons gewährleisten, dass Ihre Abonnenten die wichtigen Punkte Ihrer E-Mail sehen, unabhängig davon, ob sie Bilder blockiert haben oder nicht.

Da dies kein HTML-Kurs ist, kann ich an dieser Stelle nicht auf die technischen Details ein­gehen.

Verwenden Sie die Alt- und Title-Tags Ihrer Bilder

Wenn Sie möchten, dass Ihre Leser die Blockierung von Bil­dern aufheben, sollten Sie die „Alt“-Tags nutzen, um sie dazu zu veranlassen.

Beispiel: Wenn Sie rote Schuhe anbieten, könnten Sie den Text „Rote Schuhe“ in den Alt- und Title-Tag schreiben.

Wenn Sie 15% Rabatt auf diese Schuhe anbieten, könnten Sie den Text „15% Rabatt auf diese roten Schuhe“ in die­se beiden Tags eintragen.

Da der Alt- resp. Titel-Tags Ihren Lesern immer angezeigt werden, wecken Sie auf diese Weise das Interesse an Ihren Bildern.

Inhalt und Hand­lungs­auf­rufe

Achten Sie immer auf die Text­länge in Ihren mobilen E-Mails.

Eine E-Mail, die auf einem Desk­top in einem oder zwei Ab­schnit­ten angezeigt wird, kann auf einem Smartphone sehr lang aussehen. Stellen Sie sicher, dass Ihre Texte prägnant sind und Ihre Leser sofort an­sprechen und nicht optisch abschrecken.

Die Erstellung von Botschaften für mobile Geräte erfordert Dis­ziplin in der Textgestaltung, denn statt eines großen Lese­bereiches steht nur ein kleiner Bildschirm für den Konsum der Botschaft zur Ver­fügung.

Ein weiteres wichtiges Element in Ihren mobilen E-Mails sind Ihre Handlungsaufrufe (CTAs).
Sie müssen sicherstellen, dass Ihre Leser genau wissen, was Sie mit den Handlungsaufrufen in Ihren E-Mails machen sollen.

Unabhängig davon, ob Ihr Hand­lungsaufruf „Jetzt bestel­len“, „Jetzt herunter laden“ oder eine andere Botschaft ent­hält, Sie müssen sie für Ihr respon­sives Design und mobiles Lesen opti­mieren!

Hier sind vier Tipps, die Sie im Auge behalten sollten, wenn Sie starke Handlungsaufrufe erstel­len möchten:

Seien Sie ganz exakt

Vermeiden Sie vage Phrasen wie „Hier klicken“. Stellen Sie sicher, dass Ihre Leser genau wissen, warum geklickt wer­den sollte.

Seien Sie spezifisch und schrei­ben Sie statt „Jetzt klicken“ einen aussagekräftigeren Text wie „Sehen Sie sich die neue Kollek­tion an!“ oder „Jetzt downloaden um mehr zu erfah­ren!“

Sie werden sehen, Ihre Klickrate steigt an, wenn Sie Ihre Leser genau über den Sinn Ihrer Hand­lungsaufrufe in­for­mieren.

Mindestens 44 x 44 Pixel

Touchscreens sind nicht so präzi­se wie Desktop-Computer, probieren Sie es einmal selbst aus. Stellen Sie daher un­bedingt sicher, dass Ihre Leser einfach und problemlos auf ihre Handl­ungs­aufrufe tippen können.

Je grösser Sie Ihre Buttons mit Handlungsaufrufen und Ihre Links machen, desto besser wird die Conversion-Rate auf mobilen Geräten sein.

Platzierung oberhalb der Falz

Sicher wollen Sie nicht von Ihren Lesern verlangen, dass sie erst zum Ende Ihrer E-Mail scrollen müssen, um Ihre Handlungs­auf­rufe zu finden.

Stellen Sie daher unbedingt sicher, dass Ihre Handlungsaufrufe offensichtlich erkennbar sind und sich in der Nähe des Anfangs Ihrer mobilen E-Mail befinden.

Verwenden Sie auf­fällige Farben

Ihre Handlungsaufrufe müssen auffällig sein, insbesondere dann, wenn Ihre E-Mail große Fotos und einnehmende Schrif­ten enthält.

Die Texte Ihrer Handlungs­aufrufe sollten fett sein und die Buttons sich farb­lich vom Rest der E-Mail unter­scheiden.

Beispiel: Wenn Ihre E-Mail einen weißen Hintergrund hat, wäre es auffällig, wenn Ihre CTA-Buttons einen schwarzen Hintergrund und eine weiße Schrift haben.

Media Queries

Genau wie im responsiven Web­design gibt es im respon­siven E-Mail-Design Media Queries. Media Queries er­lauben es Ihnen, das Layout und die Anzeige Ihrer responsiven E-Mails auf mobilen Geräten zu kontrollieren.

Allerdings ist es wichtig zu wis­sen, dass nicht alle mobilen E-Mail-Clients Media Queries unter­stützen.

Ermitteln Sie daher, so weit möglich, wie viele Ihrer Leser E-Mail-Clients verwenden, die Media Queries nicht unterstützen und schaffen Sie bei Bedarf Alternativen.

Sie können Media Queries auch dazu verwenden, um eine Fein­abstimmung Ihres Codes mit Designs für bestimmte Geräte und Situationen, ein­schließlich horizontalem gegenüber vertikalem Layout und Tablett-spezifischem Design, bei Bedarf zu ent­wickeln.

Was können Sie mit Media Que­ries verändern?

Es gibt eine Vielzahl an Design-Elementen, die Sie in Ihren E-Mails mit Media Queries be­darfs­gerecht ändern und anpas­sen können.
Hier einige Beispiele:

Navigation

Sie sollten über eine verein­fachte Navigation für Ihre mo­bilen Leser nachdenken. Statt alle Ihre Produkt­kategorien an­zu­zeigen, was auf Desktop-Computern durchaus Sinn machen kann, sollten Sie mobi­len Lesern nur die wichtigsten anzeigen.

Schriftgrösse und Schrift­stil

Sie können bei Bedarf die Schrift­grösse und den Schriftstil für unterschiedliche Geräte per Media Query anpassen.

Da mobile Bildschirme wesent­lich kleiner als Desktop-Bild­schir­me sind, sollten Sie immer sicherstellen, dass die ver­wendeten Schriftgrößen gut lesbar und immer auf fett einge­stellt sind.

Farben

Mit Media Queries sind Sie auch in der Lage, Farben für unter­schiedliche Geräte individuell zu ändern.

Verwenden Sie dann kontrast­reiche Farben, die auf mobilen Geräten einfach zu lesen sind. Beachten Sie dabei besonders den Kontrast zwischen dem Hintergrund der E-Mails und den Texten.

Ihre mobilen Nutzer werden Ihre E-Mails in unterschiedlichen Situationen und Licht­verhält­nissen abrufen.

Je einfacher sie zu lesen sind, desvto besser!

Layouts

Responsives E-Mail-Design mit Media Queries versetzt Sie in die Lage, das Layout Ihrer Mails je nach Gerät anzu­pas­sen.

Beispiel: Zweispaltige Layouts, deren Nutzung auf dem Desktop kein Problem für Ihre Leser darstellen, sollten auf mo­bilen Geräten, insbesondere Smart­phones, im einspaltigen Layout angezeigt werden.

Dies macht insbesondere bei längeren E-Mails das Lesen mit erforderlichem Scrollen wesentlich benutzer­freund­licher.

Inhalte

Selbst die Inhalte von E-Mails können mit Media Queries für unterschiedliche Geräte ange­passt werden.

Vielleicht möchten Sie Ihren Lesern, die auf einem Desktop lesen, umfangreichere Informationen als den Lesern auf mobilen Geräten zur Verfügung stellen.

Oder Sie möchten den Lesern auf mobilen Geräten nur die Schlagzeilen liefern.

Prüfen Sie daher vor jedem E-Mail-Versand, ob die Verän­derung der Inhalte für unterschiedliche Geräte sinnvoll und wirtschaftlich vertretbar ist. Je mehr Sie mit Media Queries machen, desto aufwendiger wer­den Ihre E-Mails.

Ich empfehle allen Personen, die technische Informationen über Media Queries suchen, einmal auf YouTube Aus­schau zu halten – es gibt dort viele, auch deutsch­sprachige, Videos zum Thema.

Responsives E-Mail-Marketing gibt Ihnen sehr viele Möglich­keiten, um Ihre Botschaften in einer gut konsumierbaren Form an Ihre Leser zu senden.

Allerdings bedeutet die passge­naue Entwicklung jedes Details auch einen gewissen Mehraufwand.

Sie sollten daher immer prüfen, welche technisch mögliche Variante auch wirklich erforderlich und wirtschaftlich vertretbar ist.
Auch wenn die meisten E-Mail-Service-Provider inzwischen responsive Templates anbieten, halte ich es für wichtig, die Hintergründe genau zu ver­stehen, um auch diese Templates bei Bedarf den eigenen Wünschen anzupassen und ein ganzheitliches E-Mail-Marketing zu installieren.

Autor: Volker Buntrock
Die 2011 gegründete Firma ROHINIE.COM LIMITED basiert auf rund 40 Jahre Erfahrung in den Bereichen EDV und Marke­ting des Gesellschafters Volker Buntrock. Neben der Pro­grammierung von Individual­software liegt der Schwer­punkt heute in der Bera­tung kleiner Unternehmen und Freiberufler in den Gebieten Videomarketing, Social-Me­dia-Mar­ke­ting und Büroautomation. Dazu werden Online-Lehrgänge zu diesen Themen angeboten. Auf der Internet­si­te rohinie.com werden regel­mäßig Informa­tio­nen zu diesen Themen, meist per Video, veröffent­licht.