Machen Sie Ihr E-Mail-Design in 5 einfachen Schritten responsiv und mobilfreundlich

Möchten Sie, dass Ihre E-Mail-Newsletter und Marketingkampagnen auf jedem Gerät großartig aussehen? Natürlich tust du. Niemand möchte, dass seine harte Arbeit im Posteingang einer anderen Person unlesbar wird. Glücklicherweise können Sie in nur fünf Schritten sicherstellen, dass Ihre E-Mails reagieren und bereit sind, Abonnenten zu beeindrucken. Schnappen Sie sich also ein paar Erfrischungen, Ihre Lieblingsplaylist oder ein Getränk und fangen wir an, dafür zu sorgen, dass sie auf jedem Bildschirm optimal aussehen.

Legen Sie die Spaltenbreite in Prozent fest, nicht in Pixeln

Um Ihr E-Mail-Design responsive zu gestalten, legen Sie die Spaltenbreiten mithilfe von Prozentsätzen statt festen Pixelwerten fest. Dadurch können die Säulen flexibel an unterschiedliche Bildschirmbreiten angepasst werden.

Verwenden Sie ein flüssiges Gitter

Beim Fluid-Grid-Ansatz werden Prozentsätze für die Spaltenbreiten verwendet, sodass diese je nach Bildschirmgröße je nach Bedarf erweitert und verkleinert werden können. Für ein einfaches zweispaltiges Layout machen Sie die linke Spalte 60–70 % breit und die rechte Spalte 30–40 % breit. Zum Beispiel:

<Tabelle>

<tr>

<td width=“65%“>Inhalt von Spalte 1 hier</td>

<td width=“35%“>Inhalt von Spalte 2 hier</td>

</tr>

</table>

Dadurch kann Spalte 1 65 % des verfügbaren Platzes einnehmen und Spalte 2 die restlichen 35 %. Auf einem großen Desktop-Bildschirm kann Spalte 1 am Ende 650 Pixel breit sein, während sie auf einem kleinen mobilen Bildschirm möglicherweise nur 200 Pixel breit ist. Aber die relativen Proportionen bleiben gleich.

Fügen Sie Medienabfragen für reaktionsfähige Haltepunkte hinzu

Mit Medienabfragen können Sie je nach Bildschirmbreite unterschiedliche Stilregeln anwenden. Sie können sie nutzen, um an verschiedenen Haltepunkten weitere Anpassungen an Ihrem Fluid Grid vorzunehmen. Zum Beispiel:

/* Für Mobiltelefone: */

Nur @media-Bildschirm und (maximale Breite: 600 Pixel) {

Tabelle, td {

Breite: 100 % !important;

}

}

/* Für Tablets: */

@media nur Bildschirm und (min-width: 601px) und (max-width: 900px) {

Tabelle, td {

Breite: 80 % !wichtig;

}

}

Dadurch werden die Tabelle und die Spalten erweitert, um auf kleinen Telefonen 100 % der Bildschirmbreite und auf Tablets 80 % der Bildschirmbreite auszufüllen, sodass das Design vollständig responsiv ist.

Verwenden Sie flüssige Bilder und Medien, deren Größe sich ändert

Um Ihr E-Mail-Design mobilfreundlich zu gestalten, müssen sich die Größe von Bildern und anderen Medien fließend an jede Bildschirmgröße anpassen lassen. Befolgen Sie diese Tipps:

Verwenden Sie responsive Bildgrößen

Verwenden Sie beim Hinzufügen von Bildern zu Ihrer E-Mail die responsive Bildgröße. Dies bedeutet, dass mehrere Bildgrößen bereitgestellt werden müssen, damit der E-Mail-Client die richtige Größe für den Bildschirm auswählen kann, auf dem es angezeigt wird.

Anstatt beispielsweise nur ein großes 1000 Pixel breites Bild einzufügen, fügen Sie auch Folgendes ein:

• Eine mittlere Größe (ca. 600 Pixel)
• Eine kleine Größe für schmale Spalten (ca. 400 Pixel)
• Eine winzige Größe für kleine mobile Bildschirme (ca. 200 Pixel)

Der E-Mail-Client wählt automatisch die beste Größe für Bildschirm und Bandbreite. Um mehrere Bildgrößen in Ihrer E-Mail anzugeben, verwenden Sie das Attribut <img srcset>.

Machen Sie Medien mobilfreundlich

Stellen Sie für andere Medien wie Videos oder GIFs auch mehrere Größenoptionen bereit. Videos sollten MP4-Quellen in unterschiedlichen Auflösungen haben. GIFs und Iframes (wie YouTube-Einbettungen) sollten Breitenbeschränkungen haben, die sich an jeden Bildschirm anpassen lassen.

Beachten Sie diese Tipps und Ihre E-Mail-Bilder, Videos und anderen Medien werden auf jedem Gerät wunderschön angezeigt. Ihre Abonnenten werden eine E-Mail zu schätzen wissen, die gut aussieht und überall dort, wo sie sie öffnen, leicht zu lesen ist.

Schriftgröße in ems, nicht in Pixeln

Um Ihr E-Mail-Design mobilfreundlich zu gestalten, sollten Sie die Schriftgröße auf EMS statt auf Pixel einstellen. Pixel sind feste Einheiten. Wenn also jemand seinen Browser vergrößert, kann der Text verzerrt werden. Ems hingegen sind relative Einheiten, die mit den Einstellungen des Benutzers skaliert werden.

Verwenden Sie ein responsives E-Mail-Framework

Ein responsives E-Mail-Framework verfügt über vorgefertigte Komponenten, deren Größe automatisch an jede Bildschirmbreite angepasst wird. Einige beliebte Optionen sind MJML, Foundation for Emails und Ink. Diese Frameworks verwenden ems zur Größenanpassung, sodass Sie sich nicht um die Konvertierung selbst kümmern müssen.

Wenn Sie kein Framework verwenden, konvertieren Sie Pixel in EMS

Wenn Sie die volle Kontrolle über Ihr CSS haben möchten und kein Framework verwenden möchten, müssen Sie alle Pixelgrößen in ems konvertieren. Hier ist wie:

1. Bestimmen Sie Ihre Basisschriftgröße in Pixel. Nehmen wir an, es ist 16px.
2. Wandeln Sie das in ems um. 1em = 16px (Ihre Basisgröße), also 16px = 1em.
3. Teilen Sie die gewünschte Größe durch 16 Pixel und multiplizieren Sie sie mit 1em. Für eine 24-Pixel-Überschrift gilt beispielsweise: 24 Pixel/16 Pixel = 1,5 Em.
4. Ersetzen Sie alle Pixelgrößen in Ihrem CSS durch die em-Äquivalente.

Richten Sie Ihre Inhalte responsiv aus

Um Ihr E-Mail-Design responsiv zu gestalten, müssen Sie Ihren Inhalt so ausrichten, dass er auf jeder Bildschirmgröße richtig angezeigt wird. Folge diesen Schritten:

Verwenden Sie Flüssigkeitsmessungen

Anstatt feste Pixelbreiten für Spalten, Bilder und Container zu verwenden, verwenden Sie Prozentsätze. Dadurch können Ihre Inhalte proportional zur Bildschirmbreite skaliert werden. Verwenden Sie beispielsweise anstelle eines Bildes mit der Breite = „600 Pixel“ die Breite = „50 %“.

Vermeiden Sie starkes Styling

Halten Sie Ihre E-Mails einfach, indem Sie die Verwendung benutzerdefinierter Formatierungen einschränken, die in einigen E-Mail-Clients nicht richtig angezeigt werden. Verlassen Sie sich für das Layout auf einfache HTML-Tabellen, Inline-Stile und das align-Attribut. Zentrieren Sie Elemente bei Bedarf.

Wenn Sie diese praktischen Schritte befolgen, stellen Sie sicher, dass Ihre E-Mail-Inhalte schön angezeigt werden, unabhängig davon, welches Gerät Ihre Leser zum Öffnen ihres Posteingangs verwenden. Es lohnt sich, Ihren Abonnenten ein großartiges responsives E-Mail-Design-Erlebnis zu bieten.

Testen, testen und noch mehr testen

Überprüfen Sie, wie es auf Mobilgeräten angezeigt wird

Wir alle wissen, dass die meisten Menschen ihre mobilen Geräte verwenden, um auf E-Mails zuzugreifen. Um sicherzustellen, dass Ihre E-Mails für Mobilgeräte geeignet sind, testen Sie sie, indem Sie sie auf verschiedenen Mobiltelefonen senden. Überprüfen Sie sie auf Androids, iPhones und Tablets. Überprüfen Sie, wie Bilder, Schaltflächen und Text sowohl im Hoch- als auch im Querformat angezeigt werden.

Testen Sie es mit den wichtigsten E-Mail-Clients

Nicht alle E-Mail-Clients zeigen E-Mails auf die gleiche Weise an. Führen Sie Tests mit Gmail, Outlook, Yahoo Mail und allen anderen wichtigen E-Mail-Diensten durch, die Ihre Abonnenten häufig nutzen. Suchen Sie nach Problemen mit der Darstellung von Bildern, eingebetteten Links, Schaltflächen oder anderen interaktiven Elementen. Nehmen Sie Änderungen an Ihrem Code vor, um etwaige Anzeigeprobleme zu beheben und die Konsistenz auf allen Clients sicherzustellen.

Überprüfen Sie, wie Ersatzinhalte angezeigt werden

Für Abonnenten, deren Bilder in ihrem E-Mail-Client deaktiviert sind, wird Ihr Ersatzinhalt anstelle von Bildern angezeigt. Überprüfen Sie noch einmal, ob alle Alternativtexte, Bildunterschriften und Bildbeschreibungen für sich genommen sinnvoll sind und Kontext für Ihren E-Mail-Inhalt bieten. Der Fallback-Inhalt sollte auch ohne die Bilder zu einem guten Leseerlebnis führen.

Rezension zu einem E-Mail-Rendering-Dienst

Nutzen Sie einen kostenlosen E-Mail-Rendering-Testdienst wie Litmus, Email on Acid oder Mosaico, um zu sehen, wie Ihr E-Mail-Design auf einer Vielzahl von E-Mail-Clients und Geräten gleichzeitig gerendert wird. Sie stellen Berichte bereit, in denen alle Probleme hervorgehoben werden, die behoben werden müssen, um die Reaktionsfähigkeit Ihrer E-Mails zu verbessern. Nehmen Sie Änderungen an Ihrem Code vor und laden Sie Test-E-Mails erneut hoch, bis die Berichte wieder sauber sind.

Überprüfen Sie Links und interaktive Elemente noch einmal

Eingebettete Links, Schaltflächen und andere interaktive Komponenten in Ihrer E-Mail müssen auf allen Plattformen ordnungsgemäß funktionieren. Überprüfen Sie noch einmal, ob die Links zum beabsichtigten Ziel führen und ob alle Schaltflächen oder Formulare wie erwartet funktionieren. Testen Sie sie mehrmals, um sicherzustellen, dass keine defekten Links oder nicht funktionierenden Elemente vorhanden sind, bevor Sie Ihre Kampagne starten.

Um das responsive Design Ihrer E-Mail zu perfektionieren, sind ständige Tests und Optimierungen erforderlich. Wenn Sie sich jedoch im Vorfeld anstrengen, erhalten Sie eine E-Mail mit großer Reichweite und hohem Engagement auf allen Geräten und E-Mail-Clients Ihrer Abonnenten.

Behebung häufiger Probleme mit responsiven E-Mails

Auf Mobilgeräten wimmelt es von Inhalten

• Verwenden Sie einspaltige Layouts. Mehrere Spalten funktionieren in E-Mails selten gut.
• Halten Sie Absätze und Abschnitte kurz und prägnant. Lange Textblöcke sind auf kleinen Bildschirmen schwer zu lesen.
• Verwenden Sie nach Möglichkeit Aufzählungspunkte und nummerierte Listen. Sie nehmen weniger Platz ein als Absätze.
• Verstecken Sie sekundäre Inhalte auf kleinen Bildschirmen. Sie können Medienabfragen verwenden, um Inhalte basierend auf der Bildschirmbreite anzuzeigen/auszublenden.

Probleme mit der E-Mail-Breite

Einige ältere E-Mail-Clients haben Probleme mit der Antwortbreite der E-Mails. Um dies zu beheben:

1. Legen Sie eine maximale Breite für Ihren E-Mail-Container fest. Für die meisten E-Mails empfehlen wir 600px.
2. Fügen Sie !important nach den Breitendeklarationen hinzu, um einiges E-Mail-Client-CSS zu überschreiben. Zum Beispiel:
3. Fügen Sie Fallback-Code für Outlook 2007–2013 hinzu. Diese älteren Versionen benötigen ein separates Styling:

Wenn Sie diese Tipps zur Fehlerbehebung befolgen, können Sie die häufigsten Probleme mit responsiven E-Mails lösen. Lassen Sie mich wissen, wenn Sie weitere Fragen haben!

Abschluss

Dies sind einige einfache Möglichkeiten, um sicherzustellen, dass Ihre E-Mails responsiv sind. Bedenken Sie, dass heutzutage mehr als 50 % der E-Mails über mobile Geräte geöffnet werden. Daher ist eine Optimierung für kleinere Bildschirmgrößen unerlässlich. Überprüfen Sie alle Ihre Vorlagen für E-Mails und nehmen Sie gegebenenfalls Änderungen an der Schriftgröße sowie der Bildgröße und dem Abstand vor. Ihre Empfänger werden es zu schätzen wissen, eine E-Mail zu erhalten, die sie lesen und mit der sie interagieren können, unabhängig davon, welche Geräte sie verwenden.