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

mit Keine Kommentare

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.

E-MailBild: Gerd Altmann auf Pixabay

Inhaltsverzeichnis: Responsives E-Mail-Marketing

NewsAbo

Erhalten Sie alle 7 bis 14 Tage aktuelle Tipps und frisch entdeckte Online-Tools direkt ins eigene Post­fach. Zudem erhalten Sie Zugriff auf den Mitglieder­bereich mit E-Books.

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

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 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.

Newsletter? Kinderleicht! Hier 14 Tage Gratis Newsletter versenden!

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.