Demo-Editor Einloggen →
Design Struktur Vorlagen How-to
~ 9 min gelesen
86553 Aufrufe
bewerten Sie es
20 Dezember 2021

Neue Ära des mobilfreundlichen E-Mail-Designs

Stripo / Blog / Neue Ära des mobilfreundlichen E-Mail-Designs

Responsive E-Mail-Design ist heute keine Überraschung mehr, denn wir alle wissen, dass Mobilfreundlichkeit, auch Mobiloptimierung genannt, nicht mehr nur "nice to have" ist, sondern ein Muss. Und wir alle halten uns an diese goldene Regel: Sorgen Sie dafür, dass Ihre E-Mails mobil optimiert sind.

Aber wussten Sie, dass responsives Design weit über die Option "an den mobilen Bildschirm anpassen" hinausgeht? Sie können für Überschriften, normale Texte, Schaltflächen usw. andere Schriftgrößen verwenden als in der Desktop-Version Ihrer E-Mail. Sie können auch an internen Auffüllungen innerhalb von Containern arbeiten und bestimmte Elemente auf mobilen Geräten ausblenden/deaktivieren. 

Wie Sie das ohne Programmierkenntnisse machen können, zeigen wir weiter unten.

1. ​​ Ausblenden/Aktivieren von E-Mail-Elementen auf Desktop- und Mobilgeräten

Mit Stripo können Sie einige Elemente auf mobilen Geräten ausblenden und gleichzeitig andere Elemente auf Desktop-Geräten ausblenden. Das bedeutet, dass Sie auswählen können, welche Elemente auf mobilen Geräten angezeigt werden und welche nur auf Desktop-Geräten angezeigt werden.

Es gibt viele Gründe, warum Sie diese Option benötigen könnten. Zum Beispiel, um einige Menüreiter auf mobilen Geräten auszublenden, um horizontales Scrollen zu vermeiden, das auftreten kann, wenn Sie eine große Schriftgröße für den Text verwenden. Oder um einen vertikalen Abstandshalter auszublenden, wenn Sie ihn verwendet haben, um Elemente, die in einer Reihe platziert sind, visuell zu unterteilen.

So geht's mit Stripo:

  • Klicken Sie auf das Element, das Sie für mobile Geräte anzeigen/ausblenden möchten;

  • im Bereich "Einstellungen" finden Sie die Option "Element ausblenden";

  • klicken Sie auf das Symbol "Mobil" oder "Desktop".

Responsives E-Mail-Layout_Elemente auf Mobilgeräten ausblenden und aktivieren

Um Ihnen zu zeigen, wie es funktioniert, haben wir eine E-Mail mit Zwischenräumen zwischen den Fotos auf Desktop-Geräten erstellt und sie für mobile Geräte deaktiviert.

So erstellen Sie ein responsives E-Mail-Layout_Desktop-Version_mit Abstandshaltern

(Desktop-Version, mit Abstandshaltern)

So erstellen Sie ein responsives E-Mail-Layout_Mobile Version_ohne Spacer

(Mobile Version, ohne Abstandshalter)

Erleben Sie die neue Ära der mobilen Optimierung
Los geht's 

2. Stile für E-Mail-Texte entwerfen

Damit Ihre E-Mail-Texte auf jedem Gerät gut lesbar sind, sollten Sie die Schriftgröße für jeden Teil Ihres Textes anpassen, der größer oder kleiner ist als derselbe Teil auf einem Desktop.

Sie können dies auf der Registerkarte "Mobile Formatierung" tun.

Responsives E-Mail-Design_Mobile Styles mit Stripo festlegen_Kein Code

Auf der Registerkarte "Mobile Formatierung" können Sie die Schriftgröße auf:

  • Kopie der Kopfzeile;

  • Inhaltstext;

  • Fußzeile;

  • Infobereich;

  • Menü-Registerkarten;

  • Überschriften 1-3.

Für letztere können Sie auch die erforderliche Textausrichtung wählen: Rechts, mittig oder links.

Für Mobilgeräte optimierte E-Mails_Arbeiten an Überschriftenstilen

Alle diese Stile werden nur auf die mobile Version Ihrer E-Mail angewendet und haben keinen Einfluss auf die Designstile, die Sie im Abschnitt "Allgemeine Einstellungen" auf der Registerkarte "Erscheinungsbild" für die Desktop-Version festgelegt haben.

Um Ihnen zu zeigen, wie es funktioniert, haben wir eine kurze E-Mail mit einem Menü und einer Überschrift erstellt.

Desktop_Menü-Schriftgröße beträgt 12 Pixel

(Desktop, Menü 14 px, Überschrift 64 px)

Handy_Schriftgröße und Überschriften des Menüs

(Mobil, Menü 18 px, Überschrift 36 px)

Optimieren Sie die Texte in Ihren E-Mails, damit sie auf allen Geräten gut lesbar sind 
Los geht’s

3. Entwerfen Sie Stile für CTA-Schaltflächen

Es muss nicht gesagt werden, dass CTA-Schaltflächen das Schlüsselelement in allen E-Mails sind, da sie es den Nutzern ermöglichen, die notwendigen Maßnahmen zu ergreifen, sie auf unsere Website zu leiten usw. Das bedeutet, dass wir sie auffällig und leicht anklickbar gestalten müssen.

Auf der Registerkarte "Mobile Formatierung" können Sie:

  • eine größere Schriftart für Ihre Schaltflächen einstellen - in der Schaltflächentextgröße-Steuerung;
  • die Option "Schaltflächen in voller Breite" aktivieren, um die Schaltfläche an den Bildschirm des Mobiltelefons eines Benutzers anzupassen.

Für Mobilgeräte optimierte E-Mails_Schaltflächenbreite

Auf diese Weise stellen Sie sicher, dass Ihre Schaltflächen auf mobilen Geräten gut sichtbar und anklickbar sind.

Um Ihnen zu zeigen, wie es funktioniert, haben wir eine kurze E-Mail mit einer CTA-Schaltfläche erstellt.

Responsives E-Mail-Design_Schaltflächen auf Desktops

(Desktop, Button-Schriftgröße 18 px)

Für Mobilgeräte optimierte E-Mails_Schaltfläche mit voller Breite

(Mobil, Schriftgröße der Schaltfläche 22 px)

Wenn Sie die Option "Schaltflächen in voller Breite" aktivieren, können Sie auch die oberen und unteren Abstände festlegen, d. h. den internen Abstand zwischen dem Rand der Schaltfläche und dem Text darin.

Wichtig

Derzeit arbeitet unser Entwicklerteam an der neuen Version des Editors. Das neue Stripo wird Ihnen erlauben, an einem Design einer notwendigen Version Ihrer E-Mail zu arbeiten - Desktop oder Mobile. Um dies zu tun, schalten Sie einfach auf einen notwendigen Modus und perfektionieren Sie Ihre E-Mail.

Probieren Sie jetzt die neue Version des Stripo-E-Mail-Editors aus
Probieren Sie aus

4. Elementausrichtungen

Einige Elemente können auf Desktop-Geräten gut aussehen, wenn sie mittig ausgerichtet sind, aber auf mobilen Geräten sehen sie schlecht aus. Daher sollten Sie für bestimmte Elemente auf mobilen und Desktop-Geräten eine unterschiedliche Ausrichtung festlegen.

So geht's mit Stripo:

Bitte beachten Sie, dass diese Option nur für E-Mail-Elemente wie Texte, Schaltflächen, Videos und Bilder* funktioniert. Und niemals für ganze Container, Strukturen und Stripes.

  • Klicken Sie auf ein erforderliches E-Mail-Element in Ihrer Vorlage;

  • im Bereich "Einstellungen" sehen Sie das Symbol "Mobil".;

Responsives E-Mail-Layout_Ausrichtung für Mobilgeräte einstellen

  • klicken Sie darauf, um die Einstellungen für das gewählte Element zu aktivieren;

  • eine notwendige Ausrichtung wählen.

* Die Ausrichtungsoption funktioniert nur bei Videos und Bildern, bei denen im Container noch etwas Platz ist, z. B. bei internen Auffüllungen. Wenn das Bild oder das Video den gesamten Container einnimmt, wird die Ausrichtungsoption nicht aktiv sein. 

Um Ihnen zu zeigen, wie es funktioniert, haben wir die Bilder für Desktop-Computer mittig und für Mobiltelefone linksbündig ausgerichtet.

Zentriert ausgerichtete Bilder auf Desktop-Geräten_So erstellen Sie eine responsive E-Mail

(Desktop, zentrierte Bilder)

Linksbündig ausgerichtete Bilder auf Mobilgeräten

(Mobile, linksbündige Bilder)

5. Abstände 

Manchmal möchten Sie Ihr E-Mail-Design "sauber" mit viel Weißraum gestalten. Manchmal verwendet man Abstände für Container und Strukturen/Zeilen, um sie mit einem farbigen Hintergrund zu füllen. Das alles sieht auf Desktop-Geräten gut aus, aber auf mobilen Geräten werden diese Elemente dadurch nur kleiner oder verschlechtern das Erscheinungsbild Ihrer E-Mail ein wenig. 

Daher sollten Sie sie für mobile Geräte entfernen.

Bitte beachten Sie, dass Abstände für Container und Strukturen funktionieren.

So geht's mit Stripo:

  • Klicken Sie auf ein notwendiges Element in Ihrer E-Mail-Vorlage;

  • suchen Sie im Bereich Einstellungen das Symbol "Mobil";

  • klicken Sie darauf, um die Einstellungen für Mobiltelefone zu aktivieren;

Einstellen von Polsterungen für Mobilgeräte

  • stellen Sie den erforderlichen Wert für Ihre Abstände ein.

Wichtig

Wenn Sie für alle 4 Seiten rund um das Element innerhalb der Struktur gleiche Abstände benötigen, legen Sie sie hier nur einmal fest:

Polster für Handys_Ein Wert für alle Seiten

Und dieser Wert wird auf alle vier Seiten des Elements angewendet.

Wenn Sie für jede Seite einen anderen Wert festlegen möchten, klicken Sie bitte auf die Schaltfläche "Mehr".

Einstellen unterschiedlicher Padding-Werte für Mobilgeräte

Um Ihnen zu zeigen, wie es funktioniert, haben wir für die Desktop-Version unserer E-Mail Abstände festgelegt, für die mobile Version jedoch keine.

Abstände zwischen Elementen auf Mobilgeräten

(Desktop, Abstände zwischen zwei Bildern in einer Reihe und zwischen den Zeilen)

Einstellen von Polsterungen für Mobilgeräte_Nullwert

(Mobil, keine Abstände)

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

Häufig sehen Sie in E-Mails die folgende Reihenfolge der Produktkarten.

Responsives E-Mail-Design_E-Mail-Elemente auf dem Desktop bestellen

Normalerweise verwenden E-Mail-Vermarkter sie, um ihre Werbe-E-Mails zu diversifizieren.

Auf Desktop-Geräten sehen diese Produktkarten einfach fantastisch aus. Aber auf mobilen Bildschirmen sehen sie nicht gut aus und können sogar etwas verwirrend sein, da das Element, das sich auf Desktop-Geräten auf der linken Seite befindet, auf mobilen Bildschirmen über dem Element steht, das sich auf Desktops auf der rechten Seite befindet. Auf diese Weise sehen die Empfänger möglicherweise zwei Produktbeschreibungen hintereinander statt einer logischeren Reihenfolge - Produktschnipsel, Beschreibung, CTA-Schaltfläche, Produktschnipsel, usw.

Hier müssen Sie die Reihenfolge der Container für jede zweite Zeile umkehren.

So geht's mit Stripo:

  • Klicken Sie auf das Symbol "Struktur" einer erforderlichen Zeile;

Das Struktursymbol

  • in den Einstellungen die Schaltfläche "Container-Inversion auf dem Handy" aktivieren.

Die Container-Inversionsschaltfläche

Das war's.

Nur um Ihnen zu zeigen, wie es funktioniert, haben wir die Option "Inversion" für eine E-Mail aktiviert und für die andere deaktiviert.

Die Container-Inversionsoption AUS

(Mobile, die Option Umkehrung aus)

Die Inversionsoption bei_Mobilfreundlichem E-Mail-Design

(Mobile, die Option Umkehrung an)

Dieses Bild veranschaulicht, dass die Beschreibung nach dem Produkt-Snippet für alle Karten folgt - die Reihenfolge, die wir beabsichtigen.

7. Reaktionsfähige Bilder

Bei der Gestaltung von responsiven HTML-E-Mails ist die einfachste Funktion, die Sie jemals verwenden können, "Responsive image".

Wenn Sie diese Option aktivieren, schützen Sie sich vor unnötigem horizontalen Scrollen und riesigen Logos. 

So geht's mit Stripo:

Bitte beachten Sie, dass diese Option standardmäßig immer eingeschaltet ist. Wenn Sie also nur wollen, dass Ihr Bild auf die Größe eines Handy-Bildschirms passt, müssen Sie nichts tun. Oder Sie wollen einfach nur überprüfen, ob die Option wirklich aktiviert ist. Natürlich ist sie das ;) 

Responsive Image_Option ist aktiviert

Wenn Sie Ihr Bild, z. B. ein Logo oder ein Symbol, auf mobilen Bildschirmen klein halten müssen, sollten Sie diese Option deaktivieren.

Deaktivieren der Responsive Image-Option für Mobilgeräte

Um Ihnen zu zeigen, wie es funktioniert, haben wir die Option "Responsive image" für dasselbe E-Mail-Logo aktiviert und deaktiviert.

Responsive Image-Option AUS_Mobiles Design

(Die Option "Responsive image" eingeschaltet)

Responsive Image-Option EIN_Mobilfreundliches Design

(Die Option "Responsive image" ausgeschaltet)

8. ​​ Aktivieren/Deaktivieren von responsivem E-Mail-Design

Alle E-Mail-Vorlagen, die Stripo anbietet, sind standardmäßig vollständig responsiv.

Sie können diese Eigenschaft jedoch für eine bestimmte E-Mail-Vorlage deaktivieren. Wir haben diese Option auf Wunsch der Nutzer freigegeben. 

Wenn Sie diese Option deaktivieren, wird Ihre E-Mail auf mobilen Geräten genauso aussehen wie auf Desktop-Geräten. Es kann sein, dass es einen horizontalen Bildlauf gibt oder auch nicht, und wenn es in der Desktop-Version Ihrer E-Mail drei Container pro Zeile gibt, werden die Nutzer auf mobilen Geräten die gleiche Anzahl davon sehen.

So geht's mit Stripo:

Bitte beachten Sie, dass diese Eigenschaft standardmäßig immer eingeschaltet ist.

  • Gehen Sie im Einstellungsbereich auf die Registerkarte "Allgemeine Einstellungen";

  • Schalten Sie die Schaltfläche "Responsive Design" um, um diese Eigenschaft zu deaktivieren.

Die Responsive Design-Option

Um Ihnen zu zeigen, wie es funktioniert, haben wir die Option "Responsive Design" für dieselbe E-Mail aktiviert und deaktiviert.

Die Responsive-Design-Option AUS_Erstellen von mobil optimierten E-Mails

(Mobile, die Option "Responsive Design" ausgeschaltet)

Responsives Design_Option EIN_Stripo

(Mobile, die Option "Responsive Design" eingeschaltet)

Abschließende Überlegungen

Wie Sie sehen können, sind keine Programmierkenntnisse erforderlich, um eine vollständig responsive HTML-E-Mail zu erstellen. Erleben Sie selbst und lassen Sie Ihre Kunden die neue Ära des mobilen E-Mail-Designs erleben.

Erstellen Sie mobil-optimierte E-Mails für Ihre zukünftigen Kampagnen

Sie könnten interessiert sein an

vorherige nächste
Greatest Examples of GIF animations in Emails_Cover Image
27 Oktober 2021 · 10 min gelesen
16 großartige Beispiele für animierte GIFs in E-Mails

GIFs in E-Mails sind von großem Nutzen, wenn Sie Ihr Produkt präsentieren, die Aufmerksamkeit der Nutzer auf bestimmte Elemente lenken oder einfach nur Ihren Text etwas ausschmücken möchten. In diesem Artikel haben wir einige der besten Beispiele für E-Mail-GIF-Animationen zusammengestellt. Beispiele für animierte GIFs in E-Mails Hier ist eine Zusammenstellung der besten Beispiele mit GIFs in E-Mails. Jedes GIF erfüllt seine Aufgabe. 1. Adidas (Quelle: E-Mail von Adidas) Adidas verwendet E-Mail-Animationen, um zu zeigen, welche Farboptionen sie haben. Sieht ordentlich...

Design Marketing
24 September 2021 · 18 min gelesen
Beste Schriftarten für E-Mails: Tipps und Tricks zur Verwendung

Eines der größten Probleme bei der Erstellung von E-Mails ist die Wahl der richtigen Schriftart. Gewicht, Höhe, Breite, Farbe, Form, Abstände... Ist das alles wichtig? Ja, das tut es, aber eines der wichtigsten Dinge ist die Wahl einer lesbaren Schriftart. In diesem Beitrag zeigen wir Ihnen, wie Sie die beste professionelle Schriftart für E-Mails auswählen. Mit Stripo ist es einfach, Schriften in E-Mails zu bearbeiten Los geht’s HTML-Schriftarten für E-Mails: Zu beachtende allgemeine Regeln Es gibt drei Grundregeln, die Sie...

Design Vorlagen
08 April 2021 · 17 min gelesen
14 besten E-Mail-Signatur-Design-Beispiele

Gute E-Mail-Signaturen helfen uns, unser Unternehmen aufzubauen und einen guten Eindruck bei den Kunden zu hinterlassen. Da dies das letzte Element ist, das Menschen in E-Mails sehen, sollten wir unsere persönlichen Signaturen kreativ und einprägsam gestalten. Lassen Sie uns die besten Beispiele für E-Mail-Signaturen und ihre angemessene Verwendung in E-Mails und Newsletter-Vorlagen für E-Mails untersuchen. Es sollte erwähnt werden, dass alle Arten von Unternehmen professionelle E-Mail-Signaturen mit detaillierten Kontaktinformationen benötigen. Verwenden Sie diese Vorlage bei der Gestaltung einer E-Mail-Signatur Verwenden...

Design Marketing Vorlagen
banner9
11 September 2020 · 15 min gelesen
Die 10 besten kostenlosen Erstellungstools für E-Mail-Vorlagen 2021

Erstellungstools für E-Mail-Vorlagen scheinen irgendwie alle ähnlich zu sein? Sie sind nun unsicher, welches Sie wählen sollen, um die besten E-Mail-Vorlagen zu erstellen? Klar, es gibt schließlich eine ganze Menge von ihnen. Wir werden viele von ihnen auf ihre Unterscheidungsmerkmale hin untersuchen. Ich werde versuchen, die gleiche Vorlage in jedem der Editoren mit den gleichen Mediendateien zu erstellen. Mal sehen, ob die Erstellungstools sich unterscheiden. Für die Untersuchung haben wir Stripo.email und seine Wettbewerber ausgesucht: BEE Free, CampaignMonitor, EDM Designer,...

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