Ein wichtiges Element des responsiven Designs ist responsives E-Mail-Design. Wenn Sie darüber nachdenken, wie Sie Ihre Abonnenten dazu bringen, Ihre E-Mails zu öffnen, müssen Sie sich auch Gedanken darüber machen, wie Ihre Botschaften optisch dargestellt werden. Ihre Leser sollen einen ansprechenden Lesekomfort erhalten, unabhängig vom Gerät, auf dem Sie Ihre E-Mails lesen.
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 Webseiten, nahtlos an die Bildschirmauflösung und die Breite von unterschiedlichen Gerätegrößen an. Ihre E-Mails können somit in ansprechender Optik auf allen Gerätearten gelesen werden.
Die Erstellung von E-Mails für mobile Geräte erfordert, dass Sie den Weg überdenken, in dem Sie traditionell E-Mails entworfen 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 erstellen. Sie müssen ganzheitlicher über das Layout Ihrer E-Mails denken.
Stellen Sie sicher, dass Ihre E-Mails optisch ansprechend sind, der Text lesbar ist und Ihre Aufrufe zum Handeln ganz klar erkennbar und verständlich sind.
Hier sind einige der besten Praktiken, die Sie im Kopf behalten sollten:
- Breite
Ihre E-Mails sollten nicht breiter als 500–600 Pixel sein und in einem einspaltigen Layout für das einfache Lesen und den schnellen Konsum auf einem Mobilgerät gestaltet sein. - Über dem Falz
Alle kritischen Design-Elemente 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 Mindestgröße von 44 × 44 Pixeln haben, damit Ihre Leser sie problemlos erkennen 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 Mindestschriftgröß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-E-Mails an.
Bilder
Bilder sind ein wichtiger Teil davon, wie Ihre E-Mails auf einem 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 Aufmerksamkeit der Leser erhalten.
Die Bilder sollten bunt und mutig sein sowie einen Bezug zu Ihrem Unternehmen haben. Ihre Bilder sollten, wie die anderen Elemente in Ihrer E-Mail auch, sich automatisch der verwendeten Bildschirmgröße anpassen.
Die meisten E-Mail-Clients blockieren derzeit alle Bilder standardmäßig, sodass die Nutzer die Initiative ergreifen müssen, 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 sehen. 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änger, die E-Mails konsumieren, ohne dass sie die Bilder abrufen. Hier sind zwei Ideen, um auch diese wie gewünscht visuell zu erreichen:
Kreative HTML-Buttons
Sie können Buttons erstellen, die wie Bilder aussehen, tatsächlich aber geschickte HTML-Formatierungen 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 eingehen.
Verwenden Sie die Alt- und Title-Tags Ihrer Bilder
Wenn Sie möchten, dass Ihre Leser die Blockierung von Bildern 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 diese 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 Handlungsaufrufe
Achten Sie immer auf die Textlänge in Ihren mobilen E-Mails.
Eine E-Mail, die auf einem Desktop in einem oder zwei Abschnitten angezeigt wird, kann auf einem Smartphone sehr lang aussehen. Stellen Sie sicher, dass Ihre Texte prägnant sind und Ihre Leser sofort ansprechen und nicht optisch abschrecken.
Die Erstellung von Botschaften für mobile Geräte erfordert Disziplin in der Textgestaltung, denn statt eines großen Lesebereiches steht nur ein kleiner Bildschirm für den Konsum der Botschaft zur Verfü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 Handlungsaufruf „Jetzt bestellen“, „Jetzt herunterladen“ oder eine andere Botschaft enthält, Sie müssen sie für Ihr responsives Design und mobiles Lesen optimieren!
Hier sind vier Tipps, die Sie im Auge behalten sollten, wenn Sie starke Handlungsaufrufe erstellen möchten:
Seien Sie ganz exakt
Vermeiden Sie vage Phrasen wie „Hier klicken“. Stellen Sie sicher, dass Ihre Leser genau wissen, warum geklickt werden sollte.
Seien Sie spezifisch und schreiben Sie statt „Jetzt klicken“ einen aussagekräftigeren Text wie „Sehen Sie sich die neue Kollektion an!“ oder „Jetzt downloaden, um mehr zu erfahren!“
Sie werden sehen, Ihre Klickrate steigt an, wenn Sie Ihre Leser genau über den Sinn Ihrer Handlungsaufrufe informieren.
Mindestens 44 × 44 Pixel
Touchscreens sind nicht so präzise wie Desktop-Computer, probieren Sie es einmal selbst aus. Stellen Sie daher unbedingt sicher, dass Ihre Leser einfach und problemlos auf ihre Handlungsaufrufe 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 Handlungsaufrufe 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 auffällige Farben
Ihre Handlungsaufrufe müssen auffällig sein, insbesondere dann, wenn Ihre E-Mail große Fotos und einnehmende Schriften enthält.
Die Texte Ihrer Handlungsaufrufe sollten fett sein und die Buttons sich farblich vom Rest der E-Mail unterscheiden.
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 Webdesign gibt es im responsiven E-Mail-Design Media Queries. Media Queries erlauben es Ihnen, das Layout und die Anzeige Ihrer responsiven E-Mails auf mobilen Geräten zu kontrollieren.
Allerdings ist es wichtig zu wissen, dass nicht alle mobilen E-Mail-Clients Media Queries unterstü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 Feinabstimmung Ihres Codes mit Designs für bestimmte Geräte und Situationen, einschließlich horizontalem gegenüber vertikalem Layout und Tablett-spezifischem Design, bei Bedarf zu entwickeln.
Was können Sie mit Media Queries verändern?
Es gibt eine Vielzahl an Design-Elementen, die Sie in Ihren E-Mails mit Media Queries bedarfsgerecht ändern und anpassen können.
Hier einige Beispiele:
Navigation
Sie sollten über eine vereinfachte Navigation für Ihre mobilen Leser nachdenken. Statt alle Ihre Produktkategorien anzuzeigen, was auf Desktop-Computern Sinn ergeben kann, sollten Sie mobilen Lesern nur die wichtigsten anzeigen.
Schriftgrösse und Schriftstil
Sie können bei Bedarf die Schriftgrösse und den Schriftstil für unterschiedliche Geräte per Media Query anpassen.
Da mobile Bildschirme wesentlich kleiner als Desktop-Bildschirme sind, sollten Sie immer sicherstellen, dass die verwendeten Schriftgrößen lesbar und immer auf fett eingestellt sind.
Farben
Mit Media Queries sind Sie auch in der Lage, Farben für unterschiedliche Geräte individuell zu ändern.
Verwenden Sie dann kontrastreiche 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 Lichtverhältnissen abrufen.
Je einfacher sie zu lesen sind, desto besser!
Layouts
Responsives E-Mail-Design mit Media Queries versetzt Sie in die Lage, das Layout Ihrer Mails je nach Gerät anzupassen.
Beispiel: Zweispaltige Layouts, deren Nutzung auf dem Desktop kein Problem für Ihre Leser darstellen, sollten auf mobilen Geräten, insbesondere Smartphones, im einspaltigen Layout angezeigt werden.
Dies macht vornehmlich bei längeren E-Mails das Lesen mit erforderlichem Scrollen wesentlich benutzerfreundlicher.
Inhalte
Selbst die Inhalte von E-Mails können mit Media Queries für unterschiedliche Geräte angepasst 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änderung der Inhalte für unterschiedliche Geräte sinnvoll und wirtschaftlich vertretbar ist. Je mehr Sie mit Media Queries machen, desto aufwendiger werden Ihre E-Mails.
Ich empfehle allen Personen, die technische Informationen über Media Queries suchen, einmal auf YouTube Ausschau zu halten – es gibt dort viele, auch deutschsprachige, Videos zum Thema.
Responsives E-Mail-Marketing gibt Ihnen sehr viele Möglichkeiten, um Ihre Botschaften in einer gut konsumierbaren Form an Ihre Leser zu senden.
Allerdings bedeutet die passgenaue 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 verstehen, um auch diese Templates bei Bedarf den eigenen Wünschen anzupassen und ein ganzheitliches E-Mail-Marketing zu installieren.
Bitte klicken, ähnliche Themen:
Autor:
Volker Buntrock. Die 2011 gegründete Firma ROHINIE.COM LIMITED basiert auf rund 40 Jahre Erfahrung in den Bereichen EDV und Marketing des Gesellschafters Volker Buntrock. Neben der Programmierung von Individualsoftware liegt der Schwerpunkt heute in der Beratung kleiner Unternehmen und Freiberufler in den Gebieten Videomarketing, Social-Media-Marketing und Büroautomation. Dazu werden Online-Lehrgänge zu diesen Themen angeboten. Auf der Internetsite rohinie.com werden regelmäßig Informationen zu diesen Themen, grösstenteils per Video, veröffentlicht.