Was ich rund um responsives E-Mail-Marketing gelernt habe

E-Mail-Marketing

Ein weiteres wichtiges Element des responsiven Designs ist responsives E-Mail-Design. Wenn Sie darüber nach­den­ken, wie Sie Ihre Abon­nenten dazu bringen, Ihre E-Mails zu öffnen, müssen Sie sich auch Gedanken darüber machen, wie Ihre Botschaften optisch dargestellt werden und wie Ihre Leser einen an­sprech­enden Lesekomfort er­hal­ten, un­ab­hän­gig vom Gerät, auf dem Sie Ihre E-Mails le­sen.

Bild: Gerd Altmann auf Pixabay

Inhaltsverzeichnis: Responsives E-Mail-Marketing

• Mobile E-Mail-Layouts
• Bilder
• Inhalt und Handlungsaufrufe
• Media Queries
• Was können Sie mit Media Queries ver­ändern?

Responsives E-Mail-Design passt sich, wie responsive Web­seiten, nahtlos an die Bildschirmauflösung und die Breite von unter­schied­lichen Geräte­größen an. Ihre E-Mails können somit in ansprechender Optik auf allen Gerätearten ge­le­sen wer­den.

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

Sie müssen bestimmen und festlegen, welche Inhalte Ihre mobilen Leser wirk­lich 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 anstren­gen müssen. Sehen wir uns jetzt einmal drei Bereiche an, die Sie bei Ihrem Design und Ihrer Inhaltsentwicklung stets berück­sichtigen sollten.

Mobile E-Mail-Layouts

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

Stellen Sie sicher, dass Ihre E-Mails op­tisch 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 ein­spaltigen 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 weni­ger Raum für strategische Gesta­ltung.
• 44 Pixels
  Integrierte Buttons sollten eine Mindestgröße von 44 x 44 Pixeln haben, damit Ihre Leser sie problemlos erken­nen und antippen können. Dies empfiehlt auch Apple in den Richt­linien.
• 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

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 klei­ner 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 so­wie einen Bezug zu Ihrem Unter­nehmen haben. Ihre Bilder sollten, wie die anderen Ele­mente in Ihrer E-Mail auch, sich auto­ma­tisch der verwen­deten Bild­schirm­größe anpassen.

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

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 Perso­nen 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 er­reichen:

Kreative HTML-Buttons

Sie können Buttons erstellen, die wie Bilder aussehen, tatsächlich aber ge­schickte 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 De­tails 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% Ra­batt auf diese roten Schuhe“ in die­se bei­den Tags eintragen.

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

Inhalt und Handlungsaufrufe

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 ab­schrecken.

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

Ein weiteres wichtiges Element in Ihren mobilen E-Mails sind Ihre Handlungs­aufrufe (CTAs).
Sie müssen sicherstellen, dass Ihre Leser genau wissen, was Sie mit den Hand­lungs­aufrufen in Ihren E-Mails machen sollen.

Unabhängig davon, ob Ihr Hand­lungs­aufruf „Jetzt bestel­len“, „Jetzt herunter laden“ oder eine andere Bot­schaft 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 be­halten sollten, wenn Sie starke Hand­lungsaufrufe erstel­len möchten:

Seien Sie ganz exakt

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

Seien Sie spezifisch und schrei­ben Sie statt „Jetzt klicken“ einen aussage­kräf­ti­geren 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 ein­mal selbst aus. Stellen Sie daher un­be­dingt sicher, dass Ihre Leser einfach und pro­blemlos auf ihre Handl­ungs­auf­rufe tippen können.

Je grösser Sie Ihre Buttons mit Hand­lungsaufrufen 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 Hand­lungs­auf­rufe zu fin­den.

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 auffä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 Hinter­grund hat, wäre es auffällig, wenn Ihre CTA-Buttons einen schwarzen Hinter­grund und eine weiße Schrift ha­ben.

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 verwen­den, 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 Queries verändern?

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

Navigation

Sie sollten über eine verein­fachte Navi­gation für Ihre mo­bilen Leser nach­den­ken. Statt alle Ihre Pro­dukt­kategorien an­zu­zeigen, was auf Desktop-Computern durchaus Sinn machen kann, sollten Sie mobi­len Lesern nur die wichtigsten anzeigen.

Schriftgrösse und Schriftstil

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­wen­deten 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 Far­ben, die auf mobilen Geräten einfach zu lesen sind. Beachten Sie dabei beson­ders den Kontrast zwischen dem Hinter­grund 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 bes­ser!

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 Smartphones, 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 mobil­en Geräten zur Verfügung stellen.

Oder Sie möchten den Lesern auf mo­bi­len Geräten nur die Schlagzeilen lie­fern.

Prüfen Sie daher vor jedem E-Mail-Ver­sand, ob die Verän­derung der Inhalte für unter­schied­liche Geräte sinnvoll und wirtschaftlich vertretbar ist. Je mehr Sie mit Media Queries machen, desto auf­wendiger 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 Bot­schaf­ten 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 wirk­lich erforderlich und wirtschaftlich vertretbar ist.
Auch wenn die meisten E-Mail-Service-Provider inzwischen responsive Tem­plates 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 in­stallieren.

Autor:
Volker Buntrock. Die 2011 gegründete Firma ROHINIE.COM LI­MI­TED basiert auf rund 40 Jahre Erfahrung in den Bereichen EDV und Marke­ting des Gesellschafters Volker Buntrock. Neben der Pro­gram­mie­rung 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 The­men angeboten. Auf der Internet­si­te rohinie.com werden regel­mäßig Informa­tio­nen zu diesen Themen, meist per Vi­deo, veröffent­licht.