Schritt für Schritt zum responsive E-Mail-Template

Mit durchschnittlich 42 Prozent haben die Zugriffe auf E-Mails durch mobile Geräte im letzten Jahr dominiert. Desktop-Aufrufe lagen bei nur 14 bis 18 Prozent. Wie auf Mails und Newsletter zugegriffen wird, bestimmt nicht zuletzt auch die Zielgruppe. So können zwischen B2B und B2C große Unterschiede auftreten. Dennoch wird deutlich, dass der mobilen Nutzung und damit dem responsive Design auch im E-Mail-Marketing eine immer größere Bedeutung zukommt.

In diesem Artikel erfahren Sie, was es mit dem responsive E-Mail-Design auf sich hat und wie Sie Schritt für Schritt Ihre eigene mobil-optimierte Mail-Vorlage erstellen.

Responsive E-Mail-Design: Was ist das und warum ist es so wichtig?

Nicht nur beim Webseiten-Design, sondern auch bei Newslettern und E-Mails im Allgemeinen spielen responsive Layouts eine immer wichtigere Rolle. Ist ein E-Mail-Template mobil-optimiert, passt sich das Layout entsprechend an die Bildschirmgröße des jeweiligen Gerätes an. Dies geschieht zum Beispiel mithilfe von sogenannten Media Queries: Das sind CSS-Regeln, die die Elemente einer Nachricht rendern und sie so an den jeweiligen Bildschirm anpassen.

E-Mails werden heute immer häufiger mobil aufgerufen. Unternehmen können es sich also kaum noch leisten, ihre E-Mails nicht an mobile Geräte anzupassen. Allerdings warten bei der Erstellung einige Herausforderungen. Denn die unterschiedlichen E-Mail-Clients sorgen dafür, dass es nicht die eine ideale Lösung gibt. Nichtsdestotrotz sorgt das responsive Design für eine bessere Bedienbarkeit und verhindert, dass Ihr Newsletter-Layout unter der mobilen Nutzung leidet.

So erstellen Sie ein responsive E-Mail-Template

Um ein E-Mail-Template zu erstellen, dass auf mobilen Geräten optimal dargestellt wird, gehen Sie wie folgt vor:

Schritt 1: Analysieren Sie Ihre Zielgruppe

Es gibt eine Vielzahl unterschiedlicher Mail-Programme. Das erschwert es, Ihr E-Mail-Design für jeden Empfänger ideal anzupassen. Nicht jedes Programm unterstützt alle Anwendungen, weshalb es schnell zur Herausforderung werden kann, ein optimales Mail-Template zu entwerfen.

Die Information, welche E-Mail-Clients von Ihren Abonnenten am häufigsten genutzt werden, kann Ihnen dabei helfen zu entscheiden, wie Sie Ihr Design am besten optimieren sollten. Einen solchen Überblick ermöglichen Ihnen Ihre E-Mail-Marketing-Software oder Google Analytics – vorausgesetzt, Sie nutzen Tracking-Parameter in Ihren E-Mails. Sobald Sie wissen, welche Programme besonders häufig für das Aufrufen Ihrer Mails verwendet werden, können Sie das Layout gezielt an diese anpassen und viele (wenn auch nicht alle) Ihrer Abonnenten glücklich stellen.

Schritt 2: Finden Sie eine passende Vorlage

Sie können das Layout natürlich vollständig selbst erstellen, allerdings gibt es bereits eine Vielzahl von Vorlagen, die Sie ganz einfach verwenden und an Ihre individuellen Bedürfnisse anpassen können:

• Webseiten wie Themeforest oder Themezy bieten zum Beispiel viele unterschiedliche Vorlagen an.

• Auf dem Hubspot Marketplace finden Sie ebenfalls eine große Auswahl verschiedenster Newsletter-Templates.

• Auch die meisten E-Mail-Software-Anbieter stellen eigene Templates zur Verfügung, die Sie im Rahmen Ihrer Mitgliedschaft nutzen können. MailChimp und Campaign Monitor bieten sogar responsive HTML-Vorlagen an, die Sie sich als Code herunterladen und anschließend mit CSS bearbeiten können.

Schritt 3: Optimieren Sie die Text- und Bildinhalte für die mobile Nutzung

Haben Sie eine Vorlage gefunden, geht es im nächsten Schritt darum, diese an Ihr eigenes Design anzupassen. Um dabei aber nicht die Bedienbarkeit einzuschränken und das Layout besonders auf mobile Geräte zu münzen, sollten Sie einige Punkte beachten:

Zunächst sollten Sie alle wichtigen Elemente innerhalb der Touch-Area platzieren – also dem Bereich des Bildschirms, der bequem mit dem Daumen erreicht werden kann. Der variiert, dennoch sollten Sie versuchen, ihn für einen Großteil der möglichen Endgeräte zu berücksichtigen. Denn kann ein Newsletter-Abonnent zum Beispiel einen Link nicht direkt öffnen, weil er ihn nicht bequem anklicken kann, führt das zu Unzufriedenheit.

Verwenden Sie außerdem einspaltige Layouts für den mobil-optimierten Newsletter. Dies verhindert, dass unschöne Umbrüche im Design entstehen, wenn sich das Design an kleinere Bildschirmgrößen anpasst. Gleichzeitig erhöht es die Lesbarkeit.

Auch das Schrift-Layout sollte an das mobile Erlebnis angepasst werden. So sind Schriftgrößen unter 14 pt. nicht zu empfehlen, da sie für den mobilen Nutzer oft nicht bequem zu lesen sind. Immerhin fällt auch der Viewport – also das Sichtfenster innerhalb des Bildschirms – auf einem mobilen Gerät wesentlicher kleiner aus. Daher ist es auch empfehlenswert, kurze, prägnante Texte zu nutzen. Zu viel Text kann eine E-Mail schnell überladen – insbesondere in einem mobilen Setting, in dem sich Nutzer meist noch weniger Zeit für das Lesen der Mail nehmen. Durch entsprechende Absätze erzeugen Sie zusätzlich eine klare Struktur und stärkere Übersichtlichkeit.

Für mehr Individualität können Sie auch die Schriftart anpassen. Achten Sie bei der Verwendung von Webfonts jedoch stets auf die Lesbarkeit und Performance. Google-Fonts beispielsweise müssen immer vom Google-Server nachgeladen werden, was die Leistung schmälern kann.

Neben Texten sollten Sie auch Bildinhalte verwenden. Achten Sie hier auf ein flexibles Format und nicht zu große Dateigrößen. Denn diese erhöhen die Ladezeit der E-Mail. Zu jedem Bild gehört außerdem ein Alt-Tag. Diese Beschreibung ist insbesondere für blinde Menschen gedacht. In Fällen, in denen ein E-Mail-Client den Inhalt Ihrer Mail nicht lädt, wird der Alt-Tag allerdings ebenfalls eingeblendet und klärt den Nutzer über den Inhalt des Bildes auf, das an dieser Stelle der Mail eigentlich zu sehen wäre.

Schritt 4: Heben Sie den CTA hervor

Neben den Text- und Bildinhalten sind auch Verlinkungen ein wichtiger Teil des Newsletters. Vor allem der Call-to-Action (CTA) ist ein ausschlaggebendes Element, da er den Leser zu einer definierten Zielhandlung auffordert – zum Beispiel, Ihre Webseite zu besuchen und dort ein E-Book herunterzuladen.

Gerade auf mobilen Geräten ist es wichtig, den CTA bestmöglich zu platzieren. Denn geht die Handlungsaufforderung unter, wirkt sich das negativ auf die Konversionsrate aus. Achten Sie deshalb darauf, dass der entsprechende Button nicht zu groß oder zu klein dargestellt wird und in jedem Fall im anklickbaren Bereich liegt. Kontrastreiche Farben helfen dabei, den Button vom übrigen Inhalt abzuheben und die Aufmerksamkeit des Lesers darauf zu lenken.

Schritt 5: Überladen Sie Ihr Design nicht mit Media Queries

Zusätzliche CSS (also mehrstufige Formatvorlagen) helfen Ihnen dabei, das responsive Design umzusetzen, indem die Inhalte gerendert und entsprechend an die Gerätebedingungen angepasst werden. Diese sogenannten Media Queries sorgen jedoch auch für eine höhere Download-Größe.

Media Queries werden derzeit bereits von Android, iOS und Windows Phone sowie den meisten E-Mail-Clients unterstützt – von der Outlook-Desktop-Anwendung und Gmail in der Browser- und Android-App-Version hingegen noch nicht. Auch ältere Modelle der genannten Geräte spielen Media Queries oft nicht aus. Deshalb dienen Sie nicht in jedem Fall als ultimative Lösung. Achten Sie also darauf, Ihr responsive Design nicht unnötig mit entsprechenden Abfragen zu überladen.

Schritt 6: Testen und versenden Sie Ihre E-Mails mit einem geeigneten Tool

Zuletzt sollten Sie überprüfen, ob Ihre E-Mail wirklich korrekt dargestellt wird. Um die Code-Struktur zu testen, eignet sich zum Beispiel PutsMail. Sieht alles gut aus, können Sie die Mails über Ihr Tool versenden.

Die meisten E-Mail-Software-Programme bieten außerdem ein A/B-Testing an, mit dem Sie analysieren können, welches Mail-Design bei Ihren Kunden am besten ankommt. So können Sie Ihre E-Mail-Kampagnen stets nachjustieren und optimieren.

Responsive E-Mail-Designs werden aufgrund der hohen Aufrufzahlen über mobile Geräte immer wichtiger. Für die Erstellung können Sie ganz einfach auf entsprechende Templates zurückgreifen und diese an Ihre eigenen Vorstellungen anpassen. Beachten Sie dabei stets, auch den Inhalt auf das mobile Nutzungserlebnis auszurichten und mithilfe von A/B-Testing kontinuierlich Optimierungen vorzunehmen.

Titelbild: TCmake_photo / Getty Images