Designs, Vorlagen und Beispiele für 2023

Haben Sie schon einmal eine E-Mail auf Ihrem Telefon geöffnet und das Bild war von schlechter Qualität, der Text zu klein und der Call-to-Action-Button war kaputt? Das sind alles Mängel des statischen E-Mail-Designs. Responsive E-Mails sind die Antwort.

Angesichts der Tatsache, dass mehr als die Hälfte der US-Bürger E-Mail-Marketing-Nachrichten auf ihren Handys lesen, müssen Sie Ihre E-Mails für mehrere Bildschirme optimieren, einschließlich Handy und Tablet.

Responsive E-Mails verwenden flüssige Bilder und Tabellen, um über verschiedene Bildschirmgrößen hinweg flexibel zu bleiben. Letztendlich liefern sie Inhalte, die für die optimale Erfahrung jedes Benutzers entwickelt wurden.

Obwohl reaktionsschnelle E-Mails mit CSS-Medienabfragen entworfen werden können, benötigen Sie keine Programmiererfahrung, um eine zu erstellen. Das Erstellen einer responsiven E-Mail ist nicht nur eine Aufgabe für Programmierer.

Hier haben wir einige Best Practices und gebrauchsfertige Vorlagen sowie ein kurzes Tutorial zu den Grundlagen responsiver E-Mails zusammengestellt.

Responsive E-Mails sind auch besser zugänglich, da sie es Abonnenten ermöglichen, auf ihrem bevorzugten Gerät zu lesen.

Zur Veranschaulichung sehen Sie hier, wie eine Werbe-E-Mail, die ich erhalten habe, auf dem Desktop aussah.

Diese E-Mail hat tolle Bilder, einkaufbare Symbole und ist schön formatiert. Wenn ich die E-Mail auf dem Handy öffne, werde ich damit begrüßt.

Ich habe immer noch die gleichen Informationen und die gleichen Fotos und Einkaufssymbole. Der einzige wahrnehmbare Unterschied ist das E-Mail-Format. Es ist anders, um besser zum mobilen Erlebnis zu passen.

Stellen Sie sich nun vor, dasselbe Desktop-Layout würde auf Mobilgeräten angewendet. Ich müsste auf meinem Handy hineinzoomen, um eines der Bilder oder Texte zu sehen. Stattdessen würde ich mich abmelden.

Mit reaktionsschnellen E-Mails kann die Benutzererfahrung sowie der Kampagnen-ROI verbessert werden.

Denken Sie darüber nach: Abonnenten, die mit einem optimierten mobilen E-Mail-Design zufrieden sind, werden feststellen, dass sie mehr Marketingnachrichten öffnen, weil sie wissen, dass sie zugänglich sind und gut aussehen.

Bei all dem Gerede über reaktionsschnelle E-Mails juckt es Sie bestimmt, Ihre eigenen zu erstellen. Als Nächstes sehen wir uns einige Beispiele und Vorlagen für responsive E-Mails an.

Responsive E-Mail-Designs

Es gibt viele Möglichkeiten, responsive E-Mails zu gestalten.

Wenn Sie über Programmierkenntnisse verfügen, können Sie verschiedene E-Mail-Vorlagen für verschiedene Bildschirmgrößen codieren. Sie können auch eine vorgefertigte Vorlage verwenden, die für alle Bildschirmgrößen geeignet ist.

Unabhängig von Ihrem Ansatz benötigen Sie Ihre E-Mail-Marketing-Software. Hier können Sie eine E-Mail entwerfen und diese E-Mail dann auf mehreren Geräten in der Vorschau anzeigen. Die meisten E-Mail-Programme zeigen Ihnen, wie das Design auf mehreren Geräten aussehen wird.

Das folgende Video führt Sie durch die Gestaltung einer E-Mail mit einer Vorlage. In dem Video ist der Benutzer auf Klaviyo, aber die Konzepte gelten unabhängig davon, welche Software Sie verwenden.

Codieren einer Response-E-Mail

Wenn Sie Elemente Ihrer E-Mail responsive gestalten möchten, müssen Sie mit Medienabfragen arbeiten.

Medienabfragen sind eine CSS-Technik. Sie können Stilregeln festlegen, die nur angezeigt werden, wenn bestimmte Bedingungen zutreffen. Sie können beispielsweise angeben, welche Schriftgrößen und Bildgrößen verwendet werden sollen, wenn ein Bildschirm 600 Pixel breit oder kleiner ist.

Bei der Arbeit mit E-Mail können Sie mithilfe von Medienabfragen angeben, wie Ihr Design auf Desktops, Tablets und Mobilgeräten aussehen soll. Dazu müssen Sie Folgendes angeben:

• Verwenden Sie den Selektor „@media“ und geben Sie „screen“ an. Dies zeigt an, dass der Code Geräte mit einem Bildschirm betrifft.
• Stellen Sie Ihre „Max-Breite“ in Pixel ein. Dies gibt die Bildschirmgröße an, bei der der Code wirksam wird.
• Geben Sie alle CSS-Styleguides an, denen dieser bestimmte Bildschirm folgen soll.

Schauen wir uns den folgenden Code an.

@media screen und (max-width: 600px)

Körper

Schriftgröße: 30px;

Bei Anwendung auf das CSS einer E-Mail wird der Textkörper auf Bildschirmen mit einer Breite von 600 Pixel oder kleiner in einer Größe von 30 Pixel angezeigt.

Obwohl dieser Ansatz Ihnen dabei helfen kann, bestimmte Elemente Ihrer E-Mail-Antwort zu erstellen, empfehlen wir, wenn möglich, eine Vorlage zu verwenden.

Wenn Sie nicht über umfassende Webdesign-Erfahrung verfügen, kann das Codieren mehrerer Medienbildschirme zeitaufwändig und frustrierend sein.

Wenn Sie nicht technisch versiert sind oder eine einfachere Methode suchen, versuchen Sie es mit einem E-Mail-Marketing-Tool mit integrierten responsiven Vorlagen. Die kostenlose E-Mail-Software von HubSpot bietet beispielsweise Drag-and-Drop-Vorlagen, die standardmäßig responsive sind.

Beispiele für responsives E-Mail-Design

Es ist Zeit, Beispiele zu untersuchen. Beginnen Sie mit diesem Video, das einige der besten E-Mail-Marketingkampagnen vorstellt.

Dann können Sie sich über einige unserer beliebtesten responsiven E-Mail-Designs informieren.

1. TOMS-Newsletter

Im Newsletter von TOMS besteht der Hauptunterschied zwischen der Desktop-Version und der mobilen Version in der Stapelung und Größe der Display-Anzeigen.

Mit responsivem Design hat die mobile Version keine überladene Navigation und das Bild passt gut auf den Bildschirm. Auch die CTAs wurden zur besseren Sichtbarkeit verschoben.

Bildquelle

2. Das Metropolitan Museum of Art

Wie im TOMS-Newsletter zu sehen ist, hilft responsives E-Mail-Design dabei, den Inhalt so zu stapeln, dass er optisch ansprechend und leicht verdaulich ist. Dieses Beispiel aus dem MET ist nicht anders.

Auf Mobilgeräten ändert sich die Positionierung des Menüs. Links zu verschiedenen Geschenkartikeln befinden sich unten auf der Seite. Dadurch bleiben die Bilder der verfügbaren Souvenirs vorne und in der Mitte.

Bildquelle

3. Maulbeere

Auch hier ist der Name des Spiels mit einem reaktionsschnellen E-Mail-Design stapelbar. Es geht darum, den Inhalt leicht lesbar und optisch ansprechend zu gestalten, egal wie klein das Gerät ist, auf dem jemand den Inhalt ansieht.

Die abwechselnden Fotos und Texte sind für den Desktop sinnvoll, während das konsistente Stapeln von Fotos über verwandtem Text für Mobilgeräte zusammen mit den Trennlinien dafür sorgt, dass der Betrachter nicht verwirrt wird.

Bildquelle

Responsive E-Mail-Vorlagen

Eine responsive Vorlage passt sich automatisch an jede Bildschirmgröße an, sodass die E-Mail unabhängig davon, ob sie auf einem Smartphone, Tablet oder Computer geöffnet wird, großartig aussieht und alle Funktionen bietet.

Für diejenigen mit weniger Programmierhintergrund oder diejenigen, die weniger Zeit mit Design verbringen möchten , empfehle ich die Verwendung einer Vorlage. Sie sind ein todsicherer Weg, um sicherzustellen, dass Ihre E-Mail professionell aussieht und reaktionsschnell ist.

Responsive E-Mail-Vorlagen sparen Ihnen Zeit beim Entwerfen einer E-Mail, die aus einer Auswahl hätte ausgewählt werden können. Beispielsweise enthält das E-Mail-Marketing-Tool von HubSpot über 60 Vorlagen nur für responsive E-Mails.

Sehen wir uns nun einige Vorlagenoptionen an.

1. HubSpot

HubSpot bietet einige kostenlose responsive E-Mail-Vorlagen an . Wenn Sie ein HubSpot-Kunde oder ein kostenloser Benutzer sind, können Sie sie herunterladen und selbst ausprobieren.

Hier ist zum Beispiel eine der responsiven E-Mail-Vorlagen – beachten Sie die Seitenleiste, in der Sie eine Vorschau der Vorlage auf mehreren Geräten anzeigen können.

Bildquelle

Das Durchsuchen der Gerätetypen und das Sicherstellen, dass Ihre E-Mail entsprechend formatiert ist, ist einer der letzten Schritte im Designprozess und der einzige Schritt im Responsive-E-Mail-Prozess, wenn Sie Software wie HubSpot verwenden.

Wenn Sie beispielsweise auf das Smartphone-Gerät für die Vorschau klicken, können Sie sehen, ob Ihre Inhalte – einschließlich Schriftgröße und Bildauflösung – für Mobilgeräte ansprechend formatiert sind.

2. Kampagnenmonitor

Die von CampaignMonitor angebotenen Vorlagen ähneln vielen anderen, bei denen responsive E-Mail-Ergebnisse im Vorschau-Tool angezeigt werden. Hier ist zum Beispiel eine CampaignMonitor-Vorlage:

Bildquelle

Sie können die verschiedenen Geräte nebeneinander sehen, sodass Sie Designelemente einfach vergleichen können. Winzige Änderungen können vorgenommen werden, um das beste Erlebnis für alle Abonnenten zu schaffen.

CampaignMonitor-Vorlagen sind oft kostenlos, daher ist es eine gute Wahl, wenn Sie ein minimales Budget haben.

3. Stripo

Stripo bietet über 300 kostenlose HTML-E-Mail-Vorlagen an. Sie können Vorlagen nach Branche, Saison, Typ und Funktion auswählen. Hier ist zum Beispiel eine Vorlage aus ihrem Branchenbereich.

Bildquelle

Ein gutes Zeichen für eine solide reaktionsschnelle E-Mail-Vorlage ist die Option, die Vorschau sowohl in Desktop- als auch in Smartphone-Varianten anzuzeigen, wie im Vorschaumodus von Stripo gezeigt.

Beachten Sie, wie ein einzelnes Spaltenlayout in der mobilen Vorschau übernommen wurde, um den Spezifikationen von Telefonen zu entsprechen.

Stripo ist eine Website, die Sie schnell besuchen können, um eine Vorlage zu finden, die Ihren Zielen entspricht. Sie könnten Stripo in Betracht ziehen, wenn Sie reaktionsschnelle E-Mails ausprobieren oder Design-Inspiration wünschen.

4. Ständiger Kontakt

Constant Contact bietet über 200 professionelle E-Mail-Vorlagen, auf die nach der Anmeldung zugegriffen werden kann. Wenn Sie sich das Beispiel unten ansehen, können Sie sehen, dass die Plattform responsive E-Mail-Vorlagen anbietet.

Bildquelle

Die Vorlagen von Constant Contact verfügen über Drag-and-Drop-Bearbeitung, die Option zum Hinzufügen von Umfragen, E-Commerce-Funktionen und ein Fotobibliothekstool. Diese Funktionen können alle dazu beitragen, die E-Mail-Abonnenten zu erstellen, die sie sehen möchten.

Es ist hilfreich, einen Dienst wie Constant Contact zu verwenden, da die spezifischen Tools es Ihnen ermöglichen, Konsistenz zu wahren, wie im obigen Beispiel. Sie können feststellen, dass die Reaktionsfähigkeit der E-Mail keines der Designelemente beeinträchtigt.

Nachdem wir uns nun einige Vorlagenoptionen angesehen haben, wollen wir uns neben Best Practices auch eine andere Möglichkeit ansehen, wie responsive E-Mails funktionieren.

Best Practices für reaktionsschnelle E-Mails

Das genaue Design Ihrer responsiven E-Mail hängt von den Zielen Ihrer Kampagne ab. Diese Tipps können Ihnen jedoch helfen, das beste Erlebnis für Ihre Leser zu gewährleisten.

• Stellen Sie sicher, dass Ihre responsive E-Mail skalierbar und flexibel ist. Sehen Sie sich die E-Mail auf verschiedenen Geräten an, um sicherzustellen, dass Ihre Nachricht reagiert.
• Wenn Sie Ihre eigene E-Mail codieren, denken Sie daran, dass CSS-Medienabfragen feste Felder in fließende Felder ändern.
• Verwenden Sie größere Schriftarten, die auf kleineren Bildschirmen gut lesbar sind.
• Einspaltige Layouts sind einfacher zu skalieren. Wenn einfache Layouts gut für Ihre Webseiten sind, ziehen Sie sie auf jeden Fall für responsive E-Mails in Betracht.

Stellen Sie sicher, dass Sie Ihre E-Mails testen, bevor Sie auf „Planen“ klicken. Stellen Sie die Designs erst fertig, wenn Sie sehen, wie sie bei mehreren Bildschirmauflösungen aussehen. So viele Menschen greifen einfach aus Bequemlichkeit per Handy auf E-Mails zu.

Eine einfache Möglichkeit, die Effektivität Ihrer E-Mail zu überprüfen, besteht darin, sie als Test an sich selbst oder Ihr Team zu senden – schneidet sie mit den anderen responsiven Marketing-E-Mails in Ihrem Posteingang ab? Wenn ja, sind Sie bereit zu senden.

Erste Schritte mit Responsive-E-Mails

Responsive E-Mails schaffen ein besseres, zugänglicheres Erlebnis für Ihre Kunden. Wenn Sie gerade erst umsteigen, erkunden Sie zunächst vorgefertigte responsive E-Mail-Vorlagen. Diese sparen Ihnen Zeit und geben Ihnen Designflexibilität.

Dann holen Sie sich eine zweite Meinung ein. Bitten Sie einen Kollegen, eine E-Mail auf seinem Desktop und Telefon zu öffnen. Sie können ihr ehrliches Feedback zu beiden Erfahrungen erhalten.

Schließlich haben Sie keine Angst zu experimentieren. Sie können verschiedene responsive Designs A/B testen, bis Sie ein Layout finden, das am besten ankommt.

Bald werden Sie reaktionsschnelle E-Mails versenden und Ihre Öffnungsraten erhöhen.