In der Vergangenheit haben wir bei nicht reaktionsfähigen E-Mails dem Telefon die Schuld gegeben, es geschüttelt oder die App einfach neu geöffnet. Damals schienen unsere Postfächer noch wie ferngesteuerte digitale Paradiese.
Aber wie viele E-Mails bekommst du heute täglich? 20, 30, 100? Ich könnte gar nicht sagen, wo ich anfangen soll, sie zu zählen. Seit geraumer Zeit lösche ich E-Mails, die merkwürdig aussehen, bei denen Bilder abgeschnitten sind und Blöcke so seltsam ausgerichtet sind, dass das Ganze wie ein Picasso aussieht, ohne lange zu überlegen. Und ich bin nicht allein: 80 % der Menschen würden eine E-Mail löschen, die auf ihrem Mobilgerät nicht richtig angezeigt wird.
Aus diesem Grund ist responsives E-Mail-Design in einer Welt, in der Mobilgeräte König sind und Menschen wie ich die Mühe, die in Ihre Newsletter und Kampagnen fließt, nicht zu schätzen wissen und sie ohne Reue löschen, unerlässlich.
Responsives E-Mail-Design ist keine neue digitale Erscheinung, aber wenn Sie kein Designer oder kein Experte im Bereich digitales Marketing sind, wissen Sie vielleicht nicht genau, was das bedeutet.
Ein responsives – auch adaptives – Design ist ein Design, das sich verschiedenen Bildschirmgrößen anpasst und ordnungsgemäß angezeigt wird. Zum Beispiel wird vermieden, dass ein Bild breiter als der Bildschirm ist oder der Benutzer die Größe des Texts vergrößern oder verkleinern muss, um ihn lesen zu können.
Obwohl wir hier über E-Mail-Design sprechen werden, kann diese Technik auch (und vor allem) für das Design und die Layouts von Webseiten verwendet werden. Warum ist es so wichtig, dass das Design sowohl von E-Mails als auch von Webseiten sich den verschiedenen Geräten anpasst? Nun, das ist fast eine rhetorische Frage, aber wir wollten eine gewisse Spannung hinzufügen.
Ein Artikel von Email Monday besagt, dass heute 59 % der versendeten E-Mails auf Mobilgeräten geöffnet werden und nur 15 % auf einem Desktop geöffnet werden. Gleiches gilt auch für die Websuche: Fast 60 % der Internet-Suchen werden auf Mobilgeräten durchgeführt. Das sind mehr als genug Gründe für Marken, die Benutzererfahrung so einfach und intuitiv wie möglich zu gestalten.
Bildschirmgröße des Geräts
Der Hauptfaktor, der beeinflusst, wie ein Benutzer eine E-Mail sieht, ist zweifellos der Gerätetyp. E-Mails werden auf einem Desktop-Computer, einem Samsung Mini und einer digitalen Uhr auf unterschiedliche Weise abgerufen.
Auf einem Desktop ist der Bildschirm viel größer und wir haben eine Maus, mit der wir uns einfach durch den Text navigieren, scrollen und auf Textlinks oder Buttons klicken können, egal wie klein sie sind.
Auf einem Telefon ist die Geschichte etwas anders. Hier werden die Proportionen des Inhalts reduziert, um auf den Mikro-Bildschirm eines Mobiltelefons der neuesten Generation zu passen (obwohl einige Telefone eher wie Tablets sind). Bilder sind also kleiner, der Text ist komprimierter und Sie müssen viel mehr scrollen, um zum Ende zu gelangen.
E-Mail-Clients
Die anderen großen Feinde des responsiven E-Mail-Designs sind die E-Mail-Clients selbst. Wenn Sie mit diesem Begriff nicht vertraut sind, handelt es sich dabei um Programme, die es Ihnen ermöglichen, E-Mails zu senden und zu empfangen und ein E-Mail-Konto effektiv zu verwalten. Die bekanntesten E-Mail-Clients sind Gmail und Outlook, aber es gibt noch viele mehr und jeder zeigt E-Mails auf eigene Weise an.
Was können wir also tun? Keine Panik. Wie das Bild zeigt, haben die fünf bekanntesten E-Mail-Clients praktisch ein Monopol, sodass Sie damit beginnen können, Ihre E-Mails basierend auf diesen Informationen anzupassen.
Diese fünf E-Mail-Clients haben zusammen einen Marktanteil von über 70 %, sodass wir unsere E-Mails für Mobilgeräte priorisieren sollten, die in diesen Clients gelesen werden.
Wenn es um die Optimierung des E-Mail-Designs geht, haben wir mehrere Möglichkeiten unterschiedlicher Einfachheit und Effektivität. Hier sind die Hauptoptionen:
Skalierbares E-Mail-Design
Skalierbares Design ist die einfachste Methode zur Anpassung Ihrer E-Mails. Der Inhalt einer solchen E-Mail wird einfach auf die Größe des Benutzerbildschirms skaliert, ohne die Struktur der E-Mail oder das Layout des Inhalts zu ändern.
Diese Art von E-Mail ist am einfachsten zu entwickeln, liefert jedoch tatsächlich nicht die besten Ergebnisse.
Flüssiges E-Mail-Design
Flüssiges Design verwendet prozentuale Größenanpassungen, um Inhaltsblöcke automatisch an die Bildschirmgröße des Geräts anzupassen. Mit anderen Worten: Der Inhalt “fließt” von der Desktop-Version in verschiedene Bildschirmbreiten und füllt den verfügbaren Platz aus, wenn sich die Bildschirmbreite ändert.
Dieses Format funktioniert in der Regel am besten für textlastige E-Mails, aber es ist auch sehr schwierig, das Layout richtig hinzubekommen.
Responsives E-Mail-Design
Von den drei Arten liefert das responsive Design das beste Anzeigeerlebnis auf allen Bildschirmgrößen. Was es auszeichnet, ist, dass es sicherstellt, dass jedes Gerät eine andere Version der Nachricht anzeigt, die für die spezifische Bildschirmgröße optimiert ist.
Die Gestaltung von E-Mails auf diese Weise ist eine ziemlich komplexe Aufgabe, aber die gute Nachricht ist, dass Passport, der Drag-and-Drop-E-Mail-Editor von Mailjet, dies standardmäßig ermöglicht. Wir werden am Ende des Beitrags auf Passport zurückkommen.
Wenn Sie einen E-Mail-Editor wie unseren verwenden, müssen Sie sich keine Sorgen um Media Queries, CSS und ebenso unbekannte Konzepte machen: Der Editor erledigt alles für Sie. Es gibt jedoch andere Dinge, die das Endergebnis beeinflussen können, und hier sagen wir Ihnen, welche dies sind und wie Sie sie vermeiden können.
Layout einer responsiven E-Mail-Vorlage
Ein häufiger Fehler beim E-Mail-Design besteht darin, ein Layout mit mehreren Spalten zu verwenden. Das kann passieren, wenn wir uns von kreativem Drang (oder Emotionen) mitreißen lassen, aber diese erste Entscheidung könnte zu einem epischen Versagen bei der Anpassungsfähigkeit von E-Mails führen.
Das liegt daran, dass die überwiegende Mehrheit der Mobilgeräte ein vertikales Bildschirmformat aufweist, das dazu zwingt, alles mit einem breiteren Format zu verkleinern, einschließlich E-Mails mit mehreren Spalten.
Was ist also die Lösung? Entscheiden Sie sich für ein Ein-Spalten-Design. Dadurch wird sichergestellt, dass Webbrowser und E-Mail-Clients den Inhalt Ihrer E-Mail in den richtigen Proportionen anzeigen und Sie das Design nicht für kleinere Bildschirmgrößen anpassen müssen. Bei Mobilgeräten ist Einfachheit Ihr Freund!
Werfen Sie einen Blick auf einige Fehler, die wir direkt aus unseren Postfächern übernommen haben.
Bilder für responsive E-Mails
Bilder (und GIFs) sind eine fantastische Möglichkeit, E-Mails dynamischer und attraktiver zu gestalten. Aber in responsivem E-Mail-Design können Bilder ein zweischneidiges Schwert sein.
Wählen Sie eine geeignete Bildgröße
Was Bilder in E-Mails betrifft, lautet das (nicht so große) Geheimnis, dass Sie keine überdimensionierten oder zu kleinen Bilder verwenden sollten. Wenn Sie übermäßig große Bilder verwenden, besteht die Gefahr, dass E-Mails nicht ordnungsgemäß angezeigt werden oder lange zum Laden benötigen. Und glauben Sie uns, niemand wird länger als drei Sekunden warten, bevor er zur nächsten E-Mail übergeht.
Auf der anderen Seite liefern zu kleine Bilder auch keine besseren Ergebnisse. Tatsächlich erhalten wir wahrscheinlich verzerrte oder pixelige Bilder.
Um sicherzustellen, dass Ihre Bilder ordnungsgemäß angezeigt und an jedes Gerät angepasst werden, verwenden Sie Bilder, die sich an die Größe Ihres Newsletters anpassen können: Schneiden Sie sie auf die genaue Größe vor dem Hochladen in Ihre E-Mail-Vorlage oder verwenden Sie noch besser einen E-Mail-Editor wie den von Mailjet, mit dem Sie sie direkt in Ihrer Vorlage bearbeiten können.
Alt-Text: ein Muss
Trotz all der Anstrengungen, die wir bei der Auswahl von angemessen dimensionierten Bildern unternehmen, kann es vorkommen, dass sie manchmal immer noch nicht richtig angezeigt werden. Die Schuld kann bei E-Mail-Clients liegen, die den visuellen Inhalt von E-Mails unterschiedlich verwalten, oder bei Benutzern, die aus verschiedenen Gründen Bilder standardmäßig blockieren möchten.
Aber keine Sorge! Eine einfache und effektive Lösung besteht darin, dem Bild einen Alt-Text (alternativen Text) hinzuzufügen, der angezeigt wird, wenn das Bild nicht angezeigt wird. Dieser Text ist aus zwei Gründen besonders wichtig. Erstens informiert er die Benutzer darüber, dass sie die fehlenden Bilder im Zusammenhang mit dem Text nicht sehen. Zweitens haben E-Mails, die diesen Tag enthalten, einen besseren Ruf bei E-Mail-Clients, da Spammer im Allgemeinen keine Zeit damit verschwenden, ihn hinzuzufügen.
Vermeiden Sie E-Mails nur mit Bildern
Bezüglich Spammer ist eine andere unangebrachte Technik, E-Mails zu erstellen, die nur Bilder enthalten, und Sie können sich wahrscheinlich denken, warum. Es ist eine sehr riskante Wahl, zum Teil, weil diese Nachrichten oft im Spam-Ordner landen, aber auch, weil, wie wir gerade gesagt haben, wenn aus irgendeinem Grund die Bilder nicht ordnungsgemäß angezeigt werden, haben wir keine Möglichkeit, unsere Kontakte zu erreichen.
Denken Sie daran: Um Ihre E-Mail effektiv zu gestalten, zielen Sie auf ein Text-zu-Bild-Verhältnis von 60:40 ab.
Wenn Sie mehr über Bilder in E-Mails erfahren möchten, werfen Sie einen Blick auf diesen Leitfaden.
Handlungsaufforderungen für responsive E-Mails
Ein grundlegendes Element eines jeden E-Mail-Designs ist die Handlungsaufforderung (CTA), die entwickelt wurde, um Leser zu orientieren und sie zur Durchführung einer bestimmten Aktion zu ermutigen.
Wenn wir klare Anweisungen für unsere Empfänger nicht angeben, sind sie möglicherweise unsicher, was sie mit unserer E-Mail tun sollen, und bewegen sich in einer Nanosekunde weiter. Das ist auch der Grund, warum CTA und Links leicht zu erkennen und in genau die richtige Richtung zu weisen sein sollten.
Wenn Sie eine CTA für eine responsive E-Mail entwerfen, stellen Sie sicher, dass die Schaltflächen deutlich sichtbar sind, indem Sie beispielsweise eine Farbe verwenden, die zu Ihrer Palette im Kontrast steht, und groß genug sind, damit sie jeder leicht erkennen kann. Wie wir alle wissen, sind einige Menschen anfällig für “Fettfingerfehler”!
Und natürlich keine Links im Text- oder Bildformat: Diese Arten von CTA können viel schwieriger auszuwählen sein und im Falle von Bildern sogar zu sehen sein. Seien Sie vorsichtig, wo Sie Ihre Schaltflächen platzieren, und vermeiden Sie es, sie zu eng beieinander zu platzieren, wie im folgenden Beispiel.
Text und Lesbarkeit
Der Text ist einer der Aspekte, die wir anpassen sollten, damit Menschen, die unsere Nachrichten mit diesen Geräten öffnen, nicht von winzigen Schriftarten und endlosen Absätzen überwältigt werden.
Hierarchie und Prioritäten
In einem Webbrowser gibt es eine Reihe von Techniken, die Sie anwenden können, um die Aufmerksamkeit eines Lesers zu erregen: Verwenden Sie Farben, ansprechende Bilder, elegante Schriftarten usw. Aber auf Geräten mit kleinen Bildschirmen, wie Smartphones, hat die Hierarchie diese Rolle. Die Hierarchie muss klar sein, um sicherzustellen, dass die Leser das Wesentliche unserer Botschaft erfassen, auch wenn sie nicht bis ans Ende der Seite gelangen.
Die Menschen erhalten jeden Tag eine riesige Anzahl von E-Mails, sodass der Wettbewerb groß ist und es immer schwieriger wird, dass die Menschen sie lesen. Deshalb sollten wir immer unser E-Mail-Design mit Blick auf die Reihenfolge der Bedeutung gestalten und die relevantesten Elemente zuerst platzieren.
Texttyp und -größe
Was den Text selbst betrifft, stellen Sie sicher, dass Ihre E-Mails lesbar sind. Setzen Sie Ihre Ansprüche an Schriftarten nicht zu hoch an und entscheiden Sie sich für eine Standard-Schriftart, die auf jedem Gerät verfügbar ist, wie die klassische und zeitlose Arial, Georgia, Times New Roman oder Verdana.
Auch hier ist die Größe wichtig. Verwenden Sie eine Schriftgröße, die groß genug ist, damit Ihre Leser nicht eine Lupe brauchen, um Ihren neuesten Newsletter zu überprüfen.
Vergessen Sie schließlich nicht, zwischen einem Inhaltsblock und dem nächsten weiße Räume zu lassen: Sie machen die E-Mail übersichtlicher und moderner, ohne Ihre Abonnenten zu ermüden.
Bis jetzt haben wir über die Dos und Don’ts von responsivem E-Mail gesprochen. Nach so vielen schlechten Beispielen (es ist nicht unsere Schuld, dass unser Postfach voll davon ist), möchten wir Ihnen ein Beispiel für eine besonders gute E-Mail zeigen, während wir alle wichtigen Dinge untersuchen, die Sie bei der Gestaltung Ihrer eigenen beachten sollten.
Courrier International ist eine französische Wochenzeitung, in der die Nachrichten der internationalen Presse analysiert werden. Sie bietet Abonnenten einen täglichen Newsletter mit den wichtigsten Nachrichten des Tages aus der ganzen Welt an.
Es kann sein, dass Sie auf den ersten Blick keine wesentlichen Unterschiede zwischen den beiden E-Mails (der Desktop- und der Mobilversion) bemerken. Deshalb werden wir sie uns einmal genauer ansehen und analysieren, was diese E-Mail so gut für den reaktionsfähigen E-Mail-Versand macht.
Jetzt sind Sie bereit, und wir sind sicher, dass Sie Ihrer perfekt responsiven E-Mail gegenüberstehen, die bereit ist, verschickt zu werden. Aber bevor Sie Ihre Kampagne starten, ist es immer eine gute Idee, einige letzte Überprüfungen durchzuführen. Hier sind drei Möglichkeiten, wie Sie prüfen können, wie Ihr E-Mail-Design angezeigt wird.
Vorschau Ihrer E-Mail
Verwenden Sie das Vorschaufenster in Ihrem Editor, um zu sehen, wie Ihre E-Mail auf verschiedenen Geräten aussieht. In Mailjet beispielsweise können Sie die Mobil- und Desktopversionen Ihrer fertigen E-Mail anzeigen und sich eine klare Vorstellung davon machen, wie sie in den Postfächern Ihrer Abonnenten angezeigt wird.
Senden Sie eine Test-E-Mail
Eine weitere einfache Möglichkeit, dies zu überprüfen, besteht darin, sich selbst eine Test-E-Mail zu senden. Sie können sie an Ihre eigene E-Mail-Adresse, an einen Kollegen oder einen Freund mit Zugang zu verschiedenen Geräten, Browsern und Betriebssystemen senden, um sicherzustellen, dass mit Ihrer E-Mail unterwegs nichts schief geht. Am Ende des Tages ist es keine schlechte Idee, eine zusätzliche Person zu haben, die den Inhalt und die Links überprüft, die Benutzererfahrung testet und prüft.
Zusätzlicher Tipp: Schauen Sie sich die Berichte vergangener Kampagnen an und filtern Sie sie, um die Aufschlüsselung der Geräte und die Nutzung der E-Mail-Clients durch die Empfänger anzuzeigen, und Sie können überprüfen, welche Geräte Ihre Kunden am häufigsten verwenden.
Verwenden Sie spezifische Tools
Schließlich empfehlen wir den akribischsten unter Ihnen, die Schritte A und B mit Plattformen wie Litmus und Email on Acid zu ergänzen. Diese beiden Tools senden Ihre E-Mail an mehr als 50 E-Mail-Clients und bieten Ihnen Analysen und Vorschauen, um Zeit zu sparen und Ihnen die nötige Sicherheit zu geben.
Wenn Sie keine Kenntnisse im Codieren haben (oder keine Lust haben, mit HTML-Code zu kämpfen), können Sie unseren E-Mail-Editor Passport verwenden, um professionelle Newsletter zu erstellen, die sich an jedes Gerät und jeden E-Mail-Client anpassen lassen. Sie müssen nur die Inhaltsblöcke, die Sie in Ihre E-Mail aufnehmen möchten, wie Bilder, Überschriften, Texte, Buttons und Social-Media-Symbole, per Drag & Drop ziehen und ablegen.
Responsive E-Mail-Vorlagen
Eine weitere Option, für die Tage, an denen Ihnen die Inspiration fehlt, ist die Auswahl einer der bearbeitbaren Vorlagen aus unserer “Template Gallery”. Natürlich sind alle Vorlagen responsiv. Sie müssen nur eine auswählen und sie bearbeiten, um Ihren Inhalt einzufügen, et voilà!
Möchten Sie unsere Vorlagen sehen? Erstellen Sie ein kostenloses Konto und schauen Sie sie sich alle an.
MJML
Bei Mailjet bieten wir auch eine Lösung für fortgeschrittene Benutzer, die Entwickler auf der ganzen Welt begeistert hat. MJML ist unser Open-Source-Framework, das das Codieren einer E-Mail viel einfacher und schneller macht. Es dauert nur halb so lange, Sie benötigen nur halb so viele Codezeilen wie beim Codieren mit HTML, und die Anpassungsfähigkeit ist gewährleistet. Glauben Sie uns nicht? Überzeugen Sie sich selbst.
Wir hoffen, Ihre Zweifel bezüglich reaktionsfähiger E-Mails und Designs ausgeräumt zu haben. Wir wissen, dass dies kein einfaches Thema ist. Wenn Sie jedoch den Ratschlägen und bewährten Verfahren in diesem Beitrag folgen (und unsere Vorlagen verwenden), werden Ihre wertvollen Newsletter ihr Bestes geben. Bevor Sie jedoch an die Arbeit gehen, hier eine Zusammenfassung dessen, worüber wir gesprochen haben:
- Verwenden Sie ein E-Mail-Design mit einer Spalte für optimale Ergebnisse.
- Optimieren Sie die Bildgröße, damit sie problemlos angepasst werden kann.
- Arbeiten Sie an den Aufforderungsschaltflächen, damit sie sichtbar und anklickbar sind (ja, auch für Menschen mit dicken Fingern).
- Verwenden Sie eine auf jedem Gerät verfügbare Schriftart und achten Sie besonders auf die Schriftgröße.
- Überprüfen Sie vor dem Versenden durch die Vorschau Ihrer E-Mail, das Senden einer Test-E-Mail oder die Verwendung spezifischer Tools (oder allen dreien).
- Verlassen Sie sich auf einen E-Mail-Anbieter, der ein reaktionsfähiges Design standardmäßig garantiert (hüstel, wir sind aus gutem Grund die Besten).
Haben Sie weitere Tipps, um sicherzustellen, dass Ihre E-Mails reaktionsfähig sind? Teilen Sie uns Ihre Ideen auf Twitter mit!
