Struktur Vorlagen How-to
~ 7 min gelesen
45455 Aufrufe
bewerten Sie es
28 März

So erstellen Sie ein responsive E-Mail-Layout

Stripo / Blog / So erstellen Sie ein responsive E-Mail-Layout

Responsive E-Mail-Design, auch bekannt als die Anpassung von E-Mails für mobile Geräte oder mobilfreundliches E-Mail-Design, ist nicht länger ein Alleinstellungsmerkmal, sondern Teil der Pflichtfunktionen. Deshalb können Sie, wenn Sie einen E-Mail-Newsletter mit Stripo erstellen, gerne unsere Bibliothek vorgefertigter E-Mail-Vorlagen verwenden, da diese alle voll responsive sind. Das bedeutet, dass alle Newsletter, die auf ihnen basieren, auf jedem Gerät korrekt dargestellt werden.

Aber manchmal kommt es vor, dass Sie ein ungewöhnliches Problem lösen müssen, um Ihre E-Mails auf mobilen Geräten auf eine bestimmte Art und Weise darstellen zu können. Deshalb möchten wir im Detail über die zusätzlichen Möglichkeiten der Anpassung sprechen.

image7

1. Responsive Bilder

Wenn Sie responsive HTML-E-Mails erstellen, dann ist die einfachste Funktion, die Sie überhaupt nutzen können „responsive Bilder“.

image12-1Wenn diese Option aktiv ist, vermeiden Sie unnötiges horizontales Scrollen und riesige Schriftzüge. Die Funktion passt ein Bild an die Bildschirmgröße an und verhindert, dass es außerhalb des Bildschirms angezeigt wird.

/imgonline-com-ua-2to1-XQXCSVkj8O5IWC

Bitte beachten Sie:

Wenn Sie möchten, dass Ihr Bild auf Desktop und mobilen Geräten in der gleichen Größe dargestellt wird, dann aktivieren Sie die Option „responsive Bilder“ nicht. Ihre Empfänger müssen dann aber möglicherweise horizontal scrollen, um das komplette Bild sehen zu können.

2. Verbergen/Aktivieren von Modulen auf Desktop und mobilen Geräten

Stripo ermöglicht Ihnen, einige Elemente auf mobilen Geräten zu verbergen und zur gleichen Zeit andere Elemente auf Desktop zu verbergen. Das bedeutet, dass Sie entscheiden, welche Elemente auf mobilen Geräten und welche nur auf Desktop-Geräten angezeigt werden.

Wenn Sie zum Beispiel eine GIF-Animation für mobile Geräte verbergen (wie obiges Beispiel zeigt. Der Grund dafür kann z.B. sein, dass der Upload dieses Elements einige Zeit dauern könnte und wir wissen, dass Empfänger auf den Upload der E-Mail warten zu lassen, einen negativen Einfluss auf die Konversion hat), fügen Sie ein statisches Bild hinzu, das Ihren mobilen Nutzern angezeigt wird. Auf diese einfache Art und Weise bieten Sie allen Empfängern wichtige Informationen zum Bild, ohne die Ladegeschwindigkeit auf mobilen Geräten zu beeinflussen.

image19-1-768x399Tatsächlich können Sie diese Kombination aus verschiedenen Gründen einsetzen. Kleine Schriftarten für Texte auf Bildern für Desktops und große Schriftarten für Texte auf mobilen Geräten für bessere Lesbarkeit:

Ein weiterer Grund ist - eingebettete interaktive Elemente wie das Bildkarussell funktionieren nur auf Desktop-Geräten, und wenn solche E-Mails auf Mobiltelefonen geöffnet werden, können die Empfänger nur das primäre (das erste) Bild sehen. Das bedeutet, dass die restlichen 3-5 Bilder auf mobilen Geräten ungesehen bleiben. Hier ist, was Sie tun sollten:

  • „Verbergen“ Sie Ihr Bildkarusell auf mobilen Geräten;

Stripo_Designing-Responsive-HTML-Email-on-Mobile-Devices

  • Erstellen Sie ein neues Modul mit all den Bildern, die in Ihrem Bildkarusell-Element enthalten waren, und verbergen Sie dieses Modul auf Desktop-Geräten;

Stripo_Designing-Responsive-HTML-email_Hiding-Elements-on-Desktop-Devices

  • Fertig!

Probieren Sie Stripo aus

3. Button-Breiten und Schriftgrößen für mobile Geräte einstellen

Um Ihre E-Mails auf allen Geräten lesbar zu machen, können Sie die Schriftarten für Texte und Buttons für Mobiltelefone individuell einstellen.
Um das zu tun, müssen Sie:

  1. Zum Reiter „Aussehen“ gehen;

  2. Den Abschnitt „Mobile Ansicht“ öffnen.

Stripo_How-to-Build-Mobile-Responsive-Emails-with-Stripo_Mobile-View-SettingsWenn Sie responsive E-Mails mit Stripo erstellen, dann können Sie die Überschriften-Größen einstellen — das bedeutet, dass Sie verschiedene Größen für den Text selbst und auch für die Überschriften H1, H2 und H3 einstellen können.

Stellen Sie die Schriftgröße für Buttons ein, bei denen die empfohlene Schriftgröße bei 18 oder mehr liegt, niemals weniger.

Um CTA-Buttons auf mobilen Geräten sichtbar zu machen, müssen wir auch an ihrer Breite arbeiten. Aktivieren Sie die Option „Buttons in voller Breite“, damit Ihre Buttons an die Bildschirmgröße auf mobilen Geräten angepasst werden.

image11

Bitte beachten Sie:

Die Schriftgröße, die Überschriftengröße und die Schriftgröße der Buttons, die Sie in den „Allgemeinen Einstellungen“ bei Beginn der Erstellung Ihrer E-Mails einstellen, werden auf all diese Elemente angewendet, wenn die E-Mail auf Desktop-Geräten geöffnet wird. Die Parameter, die Sie hier gerade eingestellt haben, werden ausschließlich auf E-Mails auf mobilen Geräten angewendet. 

Probieren Sie Stripo aus

4. Aktivieren/Deaktivieren des responsive E-Mail Designs

Wie ich vorher bereits sagte, sind alle E-Mail-Vorlagen, die Stripo anbietet, standardmäßig vollkommen responsive.

Sie können diese Anpassbarkeit jedoch deaktivieren. Wir haben diese Option tatsächlich auf Wunsch der Nutzer freigegeben.

Responsive-Email-Design

Wenn Sie diese Option ausschalten, dann sieht Ihre E-Mail genauso aus wie auf Desktop-Geräten. Empfänger müssen horizontal scrollen, um den gesamten Inhalt Ihrer E-Mails zu sehen.

5. Benutzerdefinierte Schriftarteneinstellungen

Manchmal sind die Standardeinstellungen für die Erstellung von responsive HTML-E-Mails nicht genug. Zum Beispiel heißt es in Ihrem Markenhandbuch, dass auf mobilen Geräten nur „Arial, 15px” in den Menü- und Header-Modulen angewandt werden soll, aber die Editoren bieten standardmäßig nur 14px und als nächstes 16px an. Das führt zur Notwendigkeit für responsive E-Mails mit dem HTML-Code zu arbeiten. Aber lassen Sie sich von diesen Kleinigkeiten nicht abschrecken.

Sie müssen nur wissen, wo genau im Code sich die Anpassbarkeit befindet. Das ist einfach — öffnen Sie den E-Mail Code-Editor und gehen Sie zum CSS-Reiter.

Hier können Sie eine ganze Tabelle mit Stilen finden, aber die interessantesten Dinge befinden sich nach der Zeile „@media only screen and (max-width: 600px) {" – das ist der Anfang des Codes für die Anpassbarkeit.

Finden Sie den notwendigen Abschnitt — „Menü“ und „Header“ in unserem Fall — und tauschen Sie „14px“ mit „15px“ aus.

Stripo_How-to-Create-a-Responsive-Email-Template_Working-with-HTML-CodeMachen Sie das Gleiche mit weiteren E-Mail-Elementen, falls notwendig.

Wichtig!

Entfernen Sie nichts aus diesem Code.

6. Umkehrung von E-Mail-Elementen für mobile Geräte

Sie sehen in E-Mails bei Produktkarten möglicherweise ziemlich häufig die folgende Reihenfolge. Normalerweise verwenden E-Mail-Marketer sie, um ihre E-Mails abwechslungsreicher zu gestalten.

Responsive-Email-Design_Normal-OrderAuf Desktop-Geräten sehen diese Produktkarten einfach super aus.

Aber auf mobilen Bildschirmen sehen sie nicht gut aus und können sogar ein wenig verwirrend sein, da das Element, das sich bei Desktop-Geräten auf der linken Seite befindet auf mobilen Bildschirmen über das Element, das sich auf Desktop-Geräten rechts befindet, wandert. Auf diese Weise sehen Empfänger möglicherweise zwei Produktbeschreibungen in einer Reihe anstatt einer logischeren Reihenfolge — Produktausschnitt, Beschreibung, CTA-Button, Produktausschnitt usw.

Wrong-Order-for-Mobile-Devices-Due-to-Disabled-Container-InversionDeshalb ziehen es viele Vermarkter vor, einfach bei der normalen Reihenfolge der Elemente zu bleiben: Produktausschnitt, Beschreibung, Preis, CTA-Button.

Um eine responsive E-Mail-Vorlage zu erstellen und Ihr E-Mail-Design mit Stripo zu erweitern, müssen Sie:

  • Eine 2-spaltige Struktur in Ihre E-Mail-Vorlage ziehen;

  • Ihr Produktinhaltsmodul erstellen;

  • Den „Container-Umkehrungs-Button” aktivieren.

Stripo_Responsive-HTML-email_Toggling-the-Inversion-Button

Bitte beachten Sie:

Bitte denken Sie daran, dass Sie diese Umkehrung für jede zweite Zeile aktivieren müssen.

Die Umkehrung kann nur bei 2-spaltigen Strukturen aktiviert werden.

Probieren Sie Stripo aus

Schlusswort

Mit diesen einfachen Schritten können Sie eine responsive HTML-E-Mail fertigstellen. 

Wenn Sie weitere Fragen oder Anmerkungen haben, dann hinterlassen Sie uns bitte untenstehend einen Kommentar oder schreiben Sie uns eine E-Mail an contact@stripo.email

Holen Sie sich ein kostenloses Stripo-Konto, um vollständig responsive E-Mails im Handumdrehen zu erstellen

Sie könnten interessiert sein an

← vorherige nächste →
gestern · 8 min gelesen
Wie man eine E-Mail-Newsletter-Vorlage für Outlook mit Stripo erstellt

Mit Stripo können E-Mails an die Outlook-App (sowohl unter MacOS als auch unter Windows) und an Outlook Web gesendet werden. Daher ist das Senden eleganter HTML-E-Mails über Ihren bevorzugten E-Mail-Client jetzt ganz einfach! Es sind keine Add-Ons erforderlich. In diesem Beitrag zeigen wir Ihnen, wie Sie HTML-E-Mail-Vorlagen mit nur zwei Klicks nach Outlook exportieren können. Stripo beitreten Einführung Bis vor kurzem war es schwierig, ja fast unmöglich, HTML-E-Mail-Newsletter über Outlook zu versenden, die korrekt angezeigt werden. Und Stripo fand den...

Marketing Vorlagen How-to
6 Tage · 11 min gelesen
So schreiben Sie eine effektive Erinnerungsmail für eine Veranstaltung

Heutzutage, da die Kunden so daran gewöhnt sind, tonnenweise Werbeaktionen zu erhalten, kann nur noch aufrichtige Sorge und Wertschätzung ihre Aufmerksamkeit auf eine E-Mail-Marketingkampagne lenken. Und Erinnerungsmails für Veranstaltungen sind eine gute Möglichkeit, dies zu tun. Wenn die Kunden Ihre Produkte bereits gekauft haben, sei es eine Eintrittskarte für eine Konferenz oder ein Video-Tutorial, denken Sie vielleicht, Ihre Mission wäre hiermit erledigt. Aber Menschen, die extrem beschäftigt sind, neigen dazu, jede Art von Veranstaltung zu vergessen. Und wir müssen Sie...

Design Marketing Vorlagen
Seien Sie immer auf dem Laufenden in Bezug auf aktuelle E-Mail-Marketing-Nachrichten, Leitfäden, Artikel und How-To's