German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)
In diesem Tutorial zeige ich Ihnen, wie Sie eine einfache responsive HTML Code für E-Mail erstellen, die in jedem E-Mail-Client funktioniert, auch in den problematischeren Mobil- und Tablet-Apps. Dabei werden minimale Media-Queries und ein "Fluid Hybrid"-Ansatz verwendet, um maximale Kompatibilität zu gewährleisten.
Beliebte HTML E-Mail Vorlagen auf Envato Elements
Wenn Ihnen die Zeit einfach fehlt und Sie auf der Suche nach einer fertigen, professionellen Lösung sind, holen Sie sich eine unserer beliebten HTML E-Mail Vorlagen auf Envato Elements. Wir haben Hunderte von responsiven Optionen, die alle in Ihrer Envato Elements-Mitgliedschaft enthalten sind, mit leicht anpassbaren Funktionen, damit Sie loslegen können. HTML Code für E-Mail zu schreiben ist oft ziemlich mühsam, besonders wenn man es richtig machen möchte. Deswegen, setzen mehr und mehr Unternehmen auf HTML E-Mail Vorlagen. Lernen Sie wie Sie ihre eigene HTML E-Mail Vorlage erstellen und dadurch eine Menge Zeit und Aufwand ersparen.
Nicht das, wonach Sie suchen? Kein Problem, in diesem Tutorial lernen Sie, wie Sie Ihr eigenes bauen können.
Was wir bauen
Hier ist die responsive HTML-E-Mail, die wir erstellen werden. Fühlen Sie sich frei, den Stift zu spalten und ihn für Ihre eigene Arbeit zu verwenden.
Was ist der beste Weg, eine E-Mail Vorlage responsiv zu gestalten?
Der Prozess, eine HTML-E-Mail responsive zu machen, unterscheidet sich ein wenig von dem, eine Webseite responsive zu machen.
Das liegt daran, dass die Unterstützung für HTML- und CSS-Standards bei den verschiedenen E-Mail-Diensten und -Anwendungen sehr unterschiedlich ist. Während wir uns also im Web auf Dinge wie Media-Queries, Flexbox, Grid und JavaScript verlassen können, werden sie in HTML-E-Mails nicht immer unterstützt (und JavaScript kann in E-Mails nie verwendet werden, da es ein Sicherheitsrisiko darstellen würde, und wird daher immer entfernt).
Einige E-Mail-Apps unterstützen keine CSS-Media-Queries, was bedeutet, dass wir uns genau überlegen müssen, wie wir responsive E-Mail-Vorlagen erstellen. Am bemerkenswertesten in diesem Lager ist die Gmail-App für Android und iOS, die Media-Queries für Gmail-Konten unterstützt, aber wenn sie zum Lesen von E-Mails von einem anderen Dienst (wie Yahoo oder einem IMAP-Konto) verwendet wird, werden Media-Queries nicht unterstützt. Die Yahoo-App für Android ist ein weiterer Client, der Ihre Medienabfragen verwirft, es sei denn, Sie können einen Hack implementieren, bei dem Sie den gesamten Kopf Ihres Dokuments zweimal einschließen, aber das kann von Ihrer Sendeplattform herausgenommen werden.
Diese Art von Szenarien und die Tatsache, dass Outlook für Windows nur eine Teilmenge der CSS2.1-Spezifikation unterstützt, bedeuten, dass es etwas schwierig werden kann, responsive E-Mails zu erstellen, die überall perfekt dargestellt werden.
Die gute Nachricht ist, dass Sie eine einfache E-Mail entwerfen und erstellen können, die in jeder E-Mail-Anwendung hervorragend aussieht, auch in solchen, die keine Media-Queries unterstützen, indem Sie die flüssige Hybrid-E-Mail-Codierungsmethode verwenden.
Warum "Fluid Hybrid" eine großartige Methode zur Erstellung von Responsive Emails ist
Der Begriff "Fluid Hybrid" hat sich im Laufe der Zeit in der E-Mail-Entwicklungsgemeinschaft organisch entwickelt. Dabei handelt es sich um eine Methode, bei der die Reaktionsfähigkeit der E-Mail in das Layout selbst integriert ist, ohne dass Media-Queries erforderlich sind.
Wir nennen es flüssig, weil wir viele prozentuale Breiten verwenden, und hybrid, weil wir auch einige Pixel-Maximalbreiten auf größeren Bildschirmen implementieren, um die Größe unserer Elemente zu begrenzen. Wir kombinieren all dies mit der Verwendung von Ghost Tables, d. h. Tabellenauszeichnungen, die in bedingten Kommentaren versteckt sind und nur von Outlook unter Windows gerendert werden können. In der E-Mail-Entwicklung geht es oft darum, Altes und Neues erfolgreich miteinander zu verbinden, um Ergebnisse zu erzielen.
Wenn Sie einen genaueren Blick auf die Methode werfen oder ein komplexeres Layout erstellen möchten, sehen Sie sich mein anderes Tutorial an:
Mit dieser Methode werden wir also heute folgendes erstellen:
Erste Schritte
Beginnen wir mit unserer leeren Leinwand.
Wenn Sie von Anfang an dabei sind, holen Sie sich die Dateien von GitHub und erstellen Sie ein neues HTML-Dokument im gleichen Verzeichnis wie den Ordner /images.
Fügen Sie dann den folgenden Text in Ihr leeres Dokument ein:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta name="viewport" content="width=device-width,initial-scale=1"> |
6 |
<meta name="x-apple-disable-message-reformatting"> |
7 |
<title></title>
|
8 |
<!--[if mso]>
|
9 |
<style>
|
10 |
table {border-collapse:collapse;border-spacing:0;border:none;margin:0;}
|
11 |
div, td {padding:0;}
|
12 |
div {margin:0 !important;}
|
13 |
</style>
|
14 |
<noscript>
|
15 |
<xml>
|
16 |
<o:OfficeDocumentSettings>
|
17 |
<o:PixelsPerInch>96</o:PixelsPerInch>
|
18 |
</o:OfficeDocumentSettings>
|
19 |
</xml>
|
20 |
</noscript>
|
21 |
<![endif]-->
|
22 |
<style>
|
23 |
table, td, div, h1, p { |
24 |
font-family: Arial, sans-serif; |
25 |
}
|
26 |
</style>
|
27 |
</head>
|
28 |
<body style="margin:0;padding:0;word-spacing:normal;background-color:#939297;"> |
29 |
<div role="article" aria-roledescription="email" lang="en" style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#939297;"> |
30 |
[Scaffold goes here] |
31 |
</div>
|
32 |
</body>
|
33 |
</html>
|
Was wir hier erstellen, ist unsere Basisseite mit ihrer header, ihrem doctype und ihrem body. Es gibt ein paar meta-Tags, die dafür sorgen, dass unsere E-Mail auf mobilen Geräten richtig angezeigt wird, und einige CSS- und PNG-Größenanpassungen für Microsoft Outlook unter Windows, die in bedingten Kommentaren versteckt sind (die <!--[if mso]>-Bits). Es gibt auch einen grundlegenden Stil mit unseren Einstellungen für die font-family, vor allem um Gmail Webmail außer Kraft zu setzen, das ansonsten seine eigenen Schriftarten auf diese Elemente anwendet.
Zum Schluss richten wir unseren Textkörper ein. Am wichtigsten ist hier das Zurücksetzen des word-spacing, da Gmail diesen auf einen höheren Wert setzt, was Ihre Layouts durcheinander bringen kann (Tipp von Mark Robbins). Für eine bessere Zugänglichkeit richten wir ein div mit der role article ein, das wir dann genauer als "email" bezeichnen, den Schlüsselbereich auf der Seite, so dass Screenreader dem Benutzer einen klaren Kontext und Navigationsoptionen bieten können.
Eine genauere Aufschlüsselung aller Elemente finden Sie in meinem längeren Tutorial: Creating a Future-Proof Responsive Email Without Media Queries.
Erstellen eines äußeren Gerüsts
Ersetzen wir nun die Markierung [Scaffold goes here] durch den folgenden Code:
1 |
<table role="presentation" style="width:100%;border:none;border-spacing:0;"> |
2 |
<tr>
|
3 |
<td align="center" style="padding:0;"> |
4 |
[Ghost Table goes here] |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Dieses Gerüst ist notwendig, damit unsere E-Mail in allen E-Mail-Clients zentriert wird. Wir erstellen eine 100% breite Tabelle und setzen den border und den border-spacing auf Null. Dann erstellen wir eine Zeile und eine Tabellenzelle ohne Polsterung (padding), für die align="center" festgelegt ist, damit ihr Inhalt zentriert wird.
Hinweis: Die Clients fügen Ihren nicht aufgefüllten Zellen ein wenig Polsterung (padding) hinzu, wenn Sie sie nicht alle auf Null setzen, wie wir es hier getan haben. (Das Einstellen von padding für eine Tabellenzelle entspricht der älteren Methode, cellpadding für das Tabellenelement einzustellen, und border-spacing für eine Tabelle ist das CSS-Äquivalent des HTML-Attributs cellspacing für das Tabellenelement).
Wir haben auch die Tabellen role auf presentation eingestellt. Dies ist für die Barrierefreiheit sehr wichtig, da es sicherstellt, dass Bildschirmlesegeräte nur den Inhalt der Tabelle anzeigen und nicht standardmäßig auch die Struktur, d. h. die Zeile oder Spalte, die gerade ausgelesen wird. (Dieses Verhalten ist bei eigentlichen Tabellendaten nützlich, aber nicht, wenn eine Tabelle für das Layout verwendet wird).
Erstellen einer Ghost-Tabelle für Outlook unter Windows
Bevor wir unseren Hauptcontainer hinzufügen, müssen wir eine Ghost Table einrichten: eine starre Tabelle mit fester Breite, die nur in Outlook angezeigt wird, weil sie in einigen speziellen, nur für Outlook geltenden bedingten Kommentaren versteckt ist. Wir müssen dies tun, weil unser Hauptcontainer die CSS-Eigenschaft max-width verwenden wird, und nicht alle Versionen von Outlook für Windows unterstützen diese Eigenschaft. Ohne die Unterstützung von max-width würde der Hauptcontainer in voller Breite explodieren, wenn er in Outlook für Windows angezeigt wird, also müssen wir ihn einschränken.
Ersetzen Sie die Markierung [Ghost Table goes here] durch die folgende Markierung:
1 |
<!--[if mso]>
|
2 |
<table role="presentation" align="center" style="width:600px;">
|
3 |
<tr>
|
4 |
<td>
|
5 |
<![endif]-->
|
6 |
[Container goes here] |
7 |
<!--[if mso]>
|
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
11 |
<![endif]-->
|
Beachten Sie, dass die Pixelbreite mit CSS innerhalb des style-Attributs festgelegt wird und nicht als HTML-Attribut, d. h. width="600". Damit soll sichergestellt werden, dass Outlook die Breite bei der Anpassung an unterschiedliche DPI-Einstellungen unter Windows korrekt berechnet. Wenn Sie das HTML-Attribut verwenden, wird die Breite Ihrer E-Mail falsch berechnet und sie wird am Ende viel zu schmal ausfallen.
Jetzt können wir unseren Hauptinhaltscontainer hinzufügen, der eigentlich eine Tabelle sein wird.
Nebenbei: Sollten Sie Tabellen oder Divs für die Erstellung von Responsive Emails verwenden?
In der Vergangenheit wurden fast alle E-Mails mit Hilfe von Tabellen entwickelt, da dies die einzige zuverlässige Methode war, um eine korrekte Darstellung in allen Anwendungen von Lotus Notes bis iOS Mail zu erreichen. Heute bevorzugt man natürlich Divs und modernes HTML, wo immer dies möglich ist: um die Menge an Markup zu reduzieren, die Zugänglichkeit zu verbessern und allgemein zu versuchen, E-Mails in eine modernere Richtung zu bringen.
Die anhaltende Beliebtheit von Outlook für Windows bedeutet jedoch, dass wir immer noch ein Gleichgewicht zwischen alt und neu finden müssen, da Outlook unter Windows nur die CSS2.1-Spezifikation unterstützt, und das oft auf eine ziemlich lückenhafte Weise. Aus diesem Grund müssen wir Ghost Tables verwenden, wenn wir, wie oben erwähnt, div-basierte Layouts erstellen wollen. Ein Problem bei diesem Ansatz ist jedoch, dass Sie viele Ihrer CSS-Elemente doppelt verwenden müssen, da Outlook unter Windows viele der auf Divs angewendeten Stile ignoriert oder unzuverlässig implementiert, so dass Sie viele Ihrer Stilelemente auch auf die Ghost-Tabelle separat anwenden müssen.
Oft macht diese Verdoppelung nichts aus, insbesondere bei komplexen Layouts, da Sie durch die Verwendung von Divs anstelle von Tabellen eine Menge Code (und Komplexität) einsparen, so dass das zusätzliche Markup kein großes Problem darstellt. Außerdem kann Ihr Outlook-spezifisches CSS im Kopf der E-Mail in bedingten Kommentaren untergebracht werden, so dass Sie Ihre Stile nicht inline anwenden müssen.
Bei der Erstellung einer einfachen einspaltigen E-Mail erscheint es mir jedoch oft übertrieben, alle Divs zu erstellen und zu stylen und dann alles in eine Ghost-Tabelle zu packen, in der Sie auch noch die Polsterung (padding), die Ränder und das Styling für die verschiedenen Tabellen oder Zellen hinzufügen müssen - und das alles, obwohl eine einzige Tabelle für absolut jeden Kunden ausgereicht hätte. Es mag nicht supermodern sein, aber es spart einiges an Dateigröße, und das ist schließlich ein sehr wichtiger Faktor, wenn es um E-Mails geht, den man meiner Meinung nach nicht aus Prinzip opfern sollte. Außerdem ist die E-Mail dadurch leichter zu debuggen und zu pflegen.
Da diese E-Mail-Vorlage recht einfach ist, verwende ich der Einfachheit halber und um Dateigröße zu sparen, in der Tat eine einzige Tabelle, die den gesamten Inhalt und das Styling für jeden Kunden enthält. Aber genau das ist es: eine einzige Tabelle. Das gesamte Layout verwendet nur zwei Tabellen und eine Geistertabelle, und ich achte sehr darauf, dass sie alle auf role="presentation" eingestellt sind, um sicherzustellen, dass sie zugänglich sind. Wenn ich jedoch mehr als zwei oder drei Tabellen einbeziehen müsste, würde ich anfangen, die Dinge zu überdenken.
Nachdem das geklärt ist, fügen wir die betreffende Tabelle hinzu, um unseren Hauptcontainer zu erstellen.
Hinzufügen unseres Hauptcontainers
Ersetzen Sie die Markierung [Container goes here] durch die folgende:
1 |
<table role="presentation" style="width:94%;max-width:600px;border:none;border-spacing:0;text-align:left;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;"> |
2 |
[Rows go here] |
3 |
</table>
|
Hier verwenden wir das erste Hauptprinzip der Fluid-Hybrid-Methode: die Erstellung eines Containers, der eine fließende prozentuale Breite hat, aber auf eine feste maximale Breite in Pixeln begrenzt ist.
Hier sehen Sie, dass unser Container auf kleinen Bildschirmen 94 % breit ist, bis genug Platz für die Tabelle vorhanden ist, um die max-width von 600 Pixel zu erreichen. Sie können mit beiden Breiten spielen, z. B. wenn Sie die width auf 100% einstellen, gibt es keine "Polsterung" (padding) an den Seiten, wenn sie auf einem kleinen Bildschirm angezeigt wird.
Da diese Tabelle unseren gesamten Inhalt enthalten wird, habe ich CSS für die Textgestaltung hinzugefügt, die von den Zellen und Absätzen innerhalb der Tabelle übernommen wird. (Die einzigen Ausnahmen sind Comcast und Libero, zwei Webmail-Clients, die standardmäßig Textstyling auf der Überschriften- und Absatzebene verwenden. Wir verwenden hier relativ neutrale Schriftarten, so dass dies in diesem Layout nicht auffällt, aber wenn Sie eine Webschriftart oder eine ausgeprägtere Schriftart verwenden, müssen Sie die Schriftart für diese Clients in den Überschriften- und Absatz-Tags festlegen).
Fügen wir nun unsere erste Inhaltszeile ein.
Hinzufügen einer Kopfzeile mit einem Logobild
Ersetzen Sie die Markierung [Rows go here] und fügen Sie die folgende Tabellenzeilenmarkierung hinzu:
1 |
<tr>
|
2 |
<td style="padding:40px 30px 30px 30px;text-align:center;font-size:24px;font-weight:bold;"> |
3 |
<a href="http://www.example.com/" style="text-decoration:none;"><img src="images/logo.png" alt="Logo"></a> |
4 |
</td>
|
5 |
</tr>
|
Hier haben wir unsere Zelle mit etwas Polsterung (padding), und innerhalb ist ein Logo in einem Link verpackt. Auf der Zelle habe ich auch die Textausrichtung, Größe und Gewicht, so dass unsere ALT-Text sieht schön aus, wenn die Leute haben Bilder ausgeschaltet, oder sie nicht geladen werden.
Unser Logo-Bild konfigurieren
Wir möchten, dass das Logobild bei kleinen Größen fließend ist, aber auf eine maximale feste Breite begrenzt ist, genau wie unser äußerer Container.
Hier möchte ich, dass es auf kleinen Bildschirmen 80% breit ist (da es albern aussehen würde, wenn es auf einem Smartphone 100% breit wäre), bis zu dem Punkt, an dem es auf größeren Bildschirmen ein Maximum von 165 Pixel erreicht. Um all dies zu implementieren, können wir das img-Tag durch dieses ersetzen:
1 |
<img src="images/logo.png" width="165" alt="Logo" style="width:80%;max-width:165px;height:auto;border:none;text-decoration:none;color:#ffffff;"> |
Das width="165" ist sehr wichtig für Outlook unter Windows, da es diese Größe beachtet. Für alle anderen Clients legen wir in unserem Style-Attribut eine Breite von 80 % fest, mit unserer Pixel-max-width, und setzen die Höhe auf auto, damit das Bild sein Seitenverhältnis beibehält. Ich habe auch einige Farb- und Stilelemente hinzugefügt, um zu verhindern, dass der ALT-Text des verlinkten Bildes blau und unterstrichen dargestellt wird.
Und los geht's! Unser Logo ist fertig, und wenn du die Größe deines Fensters änderst, siehst du, dass es zwischen 80% Breite und 165px fließt, je nachdem, was kleiner ist.
Erstellen einer Überschrift mit Text
Jetzt können wir unsere erste Inhaltszeile einfügen, die eine Überschrift und einen einleitenden Text enthält. Nach dem abschließenden </tr> von oben können wir eine neue Zeile einfügen:
1 |
<tr>
|
2 |
<td style="padding:30px;background-color:#ffffff;"> |
3 |
<h1 style="margin-top:0;margin-bottom:16px;font-size:26px;line-height:32px;font-weight:bold;letter-spacing:-0.02em;">Welcome to our responsive email!</h1> |
4 |
<p style="margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, <a href="http://www.example.com/" style="color:#e50d70;text-decoration:underline;">eget accumsan dictum</a>, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p> |
5 |
</td>
|
6 |
</tr>
|
7 |
Dies ist ein recht einfaches Modul: Hier haben wir lediglich die Formatvorlagen für unsere Zelle festgelegt und eine Überschrift und einen Absatz mit einem Link hinzugefügt. Wir haben auch einige Stile zu unseren h1- und p-Tags hinzugefügt, damit wir ihre Ränder anpassen und das Aussehen der Überschrift verändern können.
Hinzufügen eines Bildes in voller Breite
Das ist ganz einfach, denn das Bild wird 100% breit sein. Wir müssen nur den Wert width="600" für Outlook unter Windows festlegen, um sicherzustellen, dass es dort nicht in seiner ursprünglichen Größe angezeigt wird.
Wir können einfach das Folgende nach dem obigen </tr> hinzufügen:
1 |
<tr>
|
2 |
<td style="padding:0;font-size:24px;line-height:28px;font-weight:bold;"> |
3 |
<a href="http://www.example.com/" style="text-decoration:none;"><img src="images/1200x800-2.png" width="600" alt="" style="width:100%;height:auto;display:block;border:none;text-decoration:none;color:#363636;"></a> |
4 |
</td>
|
5 |
</tr>
|
Hinzufügen eines zweispaltigen Abschnitts, der auf Mobilgeräten gestapelt wird
Um dieses Layout hinzuzufügen, fügen Sie eine neue Zeile nach dem vorherigen schließenden </tr> ein:
1 |
<tr>
|
2 |
<td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);"> |
3 |
[Multiple columns go here] |
4 |
</td>
|
5 |
</tr>
|
Wie Sie sehen können, setzen wir die font-size in dieser Zelle auf Null. Das liegt daran, dass wir zwei inline-block-Divs nebeneinander in dieser Zelle platzieren werden, und wenn die Schriftgröße größer als Null ist, kann eine Lücke entstehen, die dazu führt, dass sie sich stapeln.
Ich habe auch eine 1px unteren Rand auf dieser Zeile hinzugefügt. Ich habe eine Fallback-Rahmen eines soliden #f0f0f5 hinzugefügt, aber dann als eine Verbesserung gebe ich eine RGBA-Farbe, die einige Transparenz verwenden wird: rgba(201,201,207,.35). Dies ist nur ein kleiner Trick, um das Aussehen der E-Mail zu verbessern, wenn sie im dunklen Modus angezeigt wird. Insbesondere Outlook.com passt die border-color im dunklen Modus nicht an, so dass Sie eine generell dunkle E-Mail mit sehr hellen Rändern erhalten können. Es respektiert jedoch die Transparenz innerhalb unserer RGBA-Einstellung, so dass der halbtransparente Farbton über den angepassten Hintergrund gelegt wird, was zu weniger Konflikten führt. Alle Clients, die RGBA nicht respektieren, fallen einfach auf die Hex-Farbe zurück.
Einstellen der Spaltenbreiten
Ich möchte eine linke Spalte von 145px, und eine rechte Spalte von 395px. Fluid-Hybrid-Spalten arbeiten auf ähnliche Weise wie der äußere Wrapper. Sie sind so eingestellt, dass sie flüssig sind (hier 100 % breit) bis zu einer festen Pixel-max-width, und bei ihrer max-width sollten sie bequem nebeneinander sitzen, was uns ein mehrspaltiges Layout auf größeren Bildschirmen gibt.
Sobald der Platz für die Spalten nicht mehr ausreicht, um sie nebeneinander zu platzieren, stapeln sie sich trotzdem übereinander, und wenn die Bildschirmgröße kleiner wird als die maximale Breite der Spalte, bleiben sie fließend 100% breit. Auf diese Weise haben wir eine Reihe von Spalten mit Reaktionsfähigkeit in ihnen gebacken, was bedeutet, dass wir nicht auf Media-Queries angewiesen sind, um diese Transformationen für uns zu tun. Wir können Media-Queries auf dieses Verhalten anwenden, um es in Clients, die sie unterstützen, weiter zu verfeinern.
Wie bei unserem äußeren Container müssen wir eine Ghost-Tabelle für Outlook unter Windows verwenden, da es das CSS, das wir dafür benötigen, nicht unterstützt. Wir müssen also eine zweispaltige Ghost-Tabelle für Outlook unter Windows einrichten.
Ersetzen Sie die Markierung [Multiple columns go here] durch die folgende:
1 |
<!--[if mso]>
|
2 |
<table role="presentation" width="100%">
|
3 |
<tr>
|
4 |
<td style="width:145px;" align="left" valign="top">
|
5 |
<![endif]-->
|
6 |
<div class="col-sml" style="display:inline-block;width:100%;max-width:145px;vertical-align:top;text-align:left;"> |
7 |
[Left column content] |
8 |
</div>
|
9 |
<!--[if mso]>
|
10 |
</td>
|
11 |
<td style="width:395px;padding-bottom:20px;" valign="top">
|
12 |
<![endif]-->
|
13 |
<div class="col-lge" style="display:inline-block;width:100%;max-width:395px;vertical-align:top;padding-bottom:20px;"> |
14 |
[Right column content] |
15 |
</div>
|
16 |
<!--[if mso]>
|
17 |
</td>
|
18 |
</tr>
|
19 |
</table>
|
20 |
<![endif]-->
|
Wie in der obigen Randbemerkung erwähnt, können Sie sehen, dass diese Methode eine gewisse Verdoppelung erfordert. Wir haben die erste Spalte in unserer Ghost-Tabelle, in der ich die Breite, die Textausrichtung nach links und die vertikale Ausrichtung nach oben eingestellt habe, alles mit einer Mischung aus HTML und CSS. Dann hat das darin befindliche div.col-sml wieder dieselben Einstellungen, dieses Mal aber in CSS.
Für das Div der rechten Spalte, div.col-lge, gilt ein ähnlicher Aufbau, und Sie können auch sehen, dass wir das Padding verdoppeln müssen. Outlook unter Windows wendet Padding nicht zuverlässig auf Divs an (und aus diesem Grund deaktiviere ich es vollständig, indem ich padding:0; auf alle Divs im bedingten <style>-Block für Outlook im Kopf unseres Dokuments setze). Daher müssen wir sowohl dem div als auch der Containerzelle in der Ghost-Tabelle das gleiche Padding hinzufügen. Outlook wendet die div-Polsterung (div-padding) nicht an, und andere Clients ignorieren offensichtlich den nur für Outlook geltenden Code. Trotz alledem ist dies eine äußerst stabile und zuverlässige Methode, um diese Art von Layout zu erstellen, und wir können sicher sein, dass die Dinge überall perfekt dargestellt werden.
Schließlich ist der entscheidende Bestandteil der Divs display:inline-block, der dafür sorgt, dass die Spalten nebeneinander schweben und als inline-block-Divs die Eigenschaft text-align ihres Containers befolgen. Sie werden sich daran erinnern, dass wir text-align:left; auf diese gesamte Tabelle gesetzt, so dass diese divs auf der linken Seite bleiben, wenn sie stapeln.
Jetzt ist unsere zweispaltige Struktur fertig! Es ist nun an der Zeit, einige kosmetische Anpassungen vorzunehmen und unseren Inhalt hinzuzufügen.
Hinzufügen von Schriftstilen
Wir müssen unseren divs etwas Schriftstyling hinzufügen, da sie es nicht zuverlässig über alle Mail-Clients vererben, und außerdem haben wir unsere Schriftgröße ein paar Stufen nach oben gesetzt. Also fügen wir dies dem style-Attribut von div.col-sml hinzu:
1 |
font-family:Arial,sans-serif;font-size:14px;color:#363636; |
In ähnlicher Weise fügen Sie dies dem style-Attribut von div.col-lge hinzu:
1 |
font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636; |
Jetzt fügen wir innerhalb von div.col-sml ein flüssiges Hybridbild ein, das ähnlich wie unser Header-Logo konfiguriert ist. Ersetzen Sie [Left column content] durch dies:
1 |
<img src="images/icon.png" width="115" alt="" style="width:80%;max-width:115px;margin-bottom:20px;"> |
Und innerhalb von div.col-lge fügen wir etwas Text und einen Link ein, der Vorlage von Mark Robbin für als Schaltflächen gestylte Links folgt. Ersetzen Sie [Right column content] durch dies:
1 |
<p style="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p> |
2 |
<p style="margin-top:0;margin-bottom:18px;">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p> |
3 |
<p style="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> |
Die ganze Reihe setzt sich so zusammen:
1 |
<tr>
|
2 |
<td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);"> |
3 |
<!--[if mso]>
|
4 |
<table role="presentation" width="100%">
|
5 |
<tr>
|
6 |
<td style="width:145px;" align="left" valign="top">
|
7 |
<![endif]-->
|
8 |
<div class="col-sml" style="display:inline-block;width:100%;max-width:145px;vertical-align:top;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#363636;"> |
9 |
<img src="images/icon.png" width="115" alt="" style="width:80%;max-width:115px;margin-bottom:20px;"> |
10 |
</div>
|
11 |
<!--[if mso]>
|
12 |
</td>
|
13 |
<td style="width:395px;padding-bottom:20px;" valign="top">
|
14 |
<![endif]-->
|
15 |
<div class="col-lge" style="display:inline-block;width:100%;max-width:395px;vertical-align:top;padding-bottom:20px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;"> |
16 |
<p style="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p> |
17 |
<p style="margin-top:0;margin-bottom:18px;">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p> |
18 |
<p style="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> |
19 |
</div>
|
20 |
<!--[if mso]>
|
21 |
</td>
|
22 |
</tr>
|
23 |
</table>
|
24 |
<![endif]-->
|
25 |
</td>
|
26 |
</tr>
|
Und da haben Sie es! Wenn Sie Ihren Browser aktualisieren und dann die Größe ändern, werden Sie sehen, dass sich unsere Spalten jetzt stapeln, wenn der verfügbare Platz zu klein wird, und dass sie wieder nebeneinander stehen, wenn genügend Platz vorhanden ist.
Hinzufügen eines Bildes und Textes in voller Breite mit Füllung
Dies ist im Grunde identisch mit unseren vorherigen Bild- und Textmodulen in voller Breite, mit der Ausnahme, dass es einen Rahmen unter dem Bild und großzügiges Padding gibt. Da wir 30px Padding rundherum verwenden, von einem 600px breiten Layout, das lässt uns 540px für das Bild.
Dieser gesamte Block kann nach dem vorangegangenen Abschluss stehen </tr>:
1 |
<tr>
|
2 |
<td style="padding:30px;font-size:24px;line-height:28px;font-weight:bold;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);"> |
3 |
<a href="http://www.example.com/" style="text-decoration:none;"><img src="images/1200x800-1.png" width="540" alt="" style="width:100%;height:auto;border:none;text-decoration:none;color:#363636;"></a> |
4 |
</td>
|
5 |
</tr>
|
6 |
<tr>
|
7 |
<td style="padding:30px;background-color:#ffffff;"> |
8 |
<p style="margin:0;">Duis sit amet accumsan nibh, varius tincidunt lectus. Quisque commodo, nulla ac feugiat cursus, arcu orci condimentum tellus, vel placerat libero sapien et libero. Suspendisse auctor vel orci nec finibus.</p> |
9 |
</td>
|
10 |
</tr>
|
Erstellen der Fußzeile
Fügen Sie eine neue Zeile nach der vorherigen </tr> ein:
1 |
<tr>
|
2 |
<td style="padding:30px;text-align:center;font-size:12px;background-color:#404040;color:#cccccc;"> |
3 |
[Footer content goes here] |
4 |
</td>
|
5 |
</tr>
|
Damit werden eine dunkle Hintergrundfarbe, eine Textausrichtung und eine Grundschriftgröße festgelegt, die von unseren Bildern für ihren ALT-Text übernommen werden.
Als Nächstes fügen wir unsere beiden Social Icons hinzu. Diese werden einfach in einen Absatz-Tag eingefügt, mit einem einfachen Leerzeichen zwischen ihnen. Wir setzen unsere Bilder auf display:inline-block, um sicherzustellen, dass sie unsere Einstellung für die zentrierte Textausrichtung befolgen.
Wir können die Markierung [Footer content goes here] durch unseren Absatz mit den Symbolen ersetzen:
1 |
<p style="margin:0 0 8px 0;"><a href="http://www.facebook.com/" style="text-decoration:none;"><img src="images/facebook.png" width="40" height="40" alt="f" style="display:inline-block;color:#cccccc;"></a> <a href="http://www.twitter.com/" style="text-decoration:none;"><img src="images/twitter.png" width="40" height="40" alt="t" style="display:inline-block;color:#cccccc;"></a></p> |
Darunter fügen Sie einen weiteren Absatz mit einigen Copyright-Informationen und einem Link zum Abbestellen des Newsletters ein. Wir fügen die Klasse unsub zum a-Tag hinzu, damit wir sie später noch ein wenig erweitern können:
1 |
<p style="margin:0;font-size:14px;line-height:20px;">® Someone, Somewhere 2021<br><a class="unsub" href="http://www.example.com/" style="color:#cccccc;text-decoration:underline;">Unsubscribe instantly</a></p> |
Unser Layout ist fertig
Das ist die letzte Zeile, und damit ist das Layout fertig! Wenn Sie sich die Vorschau in Ihrem Browser ansehen, sollte alles gut aussehen.
An dieser Stelle können wir einige Media-Queries hinzufügen, um die Anzeige unserer E-Mail auf kleineren Geräten, die diese unterstützen, zu verbessern. Da wir uns noch mit der Fußzeile beschäftigen, beginnen wir mit der oben erwähnten Schaltfläche zum Abbestellen.
Optimierung von Schaltflächen für Mobilgeräte
Wir verwandeln unseren Fußzeilen-Link in eine schöne, dicke Schaltfläche für kleinere Geräte, da er so leichter mit dem Finger angetippt werden kann.
Wenn wir zum <head> des Dokuments zurückkehren, können wir den folgenden Code in unseren <style>-Block unterhalb unserer Schriftregel einfügen:
1 |
@media screen and (max-width: 530px) { |
2 |
.unsub { |
3 |
display: block; |
4 |
padding: 8px; |
5 |
margin-top: 14px; |
6 |
border-radius: 6px; |
7 |
background-color: #555555; |
8 |
text-decoration: none !important; |
9 |
font-weight: bold; |
10 |
}
|
11 |
}
|
Diese Medienabfrage ändert das Aussehen unserer Schaltfläche auf Bildschirmen, die schmaler als 530px breit sind.
Wenn Sie nun Ihren Bildschirm aktualisieren und verkleinern, werden Sie sehen, dass sich der Link in eine schön antippbare Schaltfläche verwandelt:
Weitere Erweiterungen mit Media Queries
Wir können jetzt auch einige andere Verbesserungen an unserem Layout vornehmen. Derzeit stapeln sich unsere beiden Spalten bei der Anzeige auf kleineren Bildschirmen übereinander, aber bei einigen Größen ist die Textspalte viel schmaler als der Bildschirm. Da die meisten Anwendungen Medienabfragen unterstützen, haben wir eine gute Chance, das Aussehen an vielen Stellen zu verbessern. Innerhalb der gleichen Medienabfrage wie oben, @media screen and (max-width:530px), können wir nach dem schließenden } des .unsub-Erklärungsblocks hinzufügen:
1 |
.col-lge { |
2 |
max-width: 100% !important; |
3 |
}
|
Dadurch wird die standardmäßige max-width von 395px außer Kraft gesetzt und sichergestellt, dass der Text auf allen Bildschirmgrößen bis zu einer Breite von 530px in voller Breite angezeigt wird.
Ein weiterer Punkt, an dem wir noch feilen können, ist die Tatsache, dass sich die Spalten sofort stapeln, wenn nicht genug Platz für sie vorhanden ist. In der Realität könnte es einige Fälle geben, in denen der Bildschirm eines Nutzers etwas kleiner als 600 Pixel breit ist, vielleicht auf einer Tablet-App mit einer dicken Seitenleiste oder weil sie Gmail Webmail mit einem schmalen Vorschaufenster verwenden. In diesen Fällen möchten wir sicherstellen, dass das zweispaltige Layout angezeigt wird, und können dies mit unserem CSS konfigurieren.
Fügen Sie nach der abschließenden } der obigen Medienabfrage eine zweite hinzu:
1 |
@media screen and (min-width: 531px) { |
2 |
.col-sml { |
3 |
max-width: 27% !important; |
4 |
}
|
5 |
.col-lge { |
6 |
max-width: 73% !important; |
7 |
}
|
8 |
}
|
Diese macht da weiter, wo unsere vorherige aufgehört hat - sie ging bis maximal 530px, ab 531px werden wir sicherstellen, dass die Spalten immer nebeneinander erscheinen, indem wir unsere Pixel-Maximalbreiten außer Kraft setzen und stattdessen Prozentwerte angeben.
Das war's dann auch schon! Alles zusammen sollte Ihr <style>-Tag so aussehen:
1 |
<style>
|
2 |
table, td, div, h1, p { |
3 |
font-family: Arial, sans-serif; |
4 |
}
|
5 |
@media screen and (max-width: 530px) { |
6 |
.unsub { |
7 |
display: block; |
8 |
padding: 8px; |
9 |
margin-top: 14px; |
10 |
border-radius: 6px; |
11 |
background-color: #555555; |
12 |
text-decoration: none !important; |
13 |
font-weight: bold; |
14 |
}
|
15 |
.col-lge { |
16 |
max-width: 100% !important; |
17 |
}
|
18 |
}
|
19 |
@media screen and (min-width: 531px) { |
20 |
.col-sml { |
21 |
max-width: 27% !important; |
22 |
}
|
23 |
.col-lge { |
24 |
max-width: 73% !important; |
25 |
}
|
26 |
}
|
27 |
</style>
|
Wenn Sie noch irgendetwas mit Media-Queries verändern wollen, können Sie das hier tun!
Test und los!
Abschließend sollten Sie wie immer sicherstellen, dass Sie wirklich gut testen, indem Sie Live-Geräte und einen Webvorschau-Dienst wie Litmus oder Email on Acid verwenden.
Erstellen Sie ansprechende E-Mail-Vorlagen, die in jedem E-Mail-Programm gut aussehen!
E-Mail-Vorlagen herunterladen
Wenn Sie mehr Optionen benötigen, dann ist eine unserer responsiven E-Mail-Vorlagen vielleicht genau das Richtige für Sie. Abonnieren Sie Envato Elements und Sie erhalten unbegrenzten Zugang zu Hunderten von anpassbaren E-Mail-Vorlagen sowie zu Stock-Fotografie, Icons, Grafiken und vielen anderen kreativen Assets für Ihre Projekte.
Weitere HTML-E-Mail-Tutorials
Um das Gelernte auf die nächste Stufe zu bringen! In unserem Lernhandbuch Mastering HTML Email finden Sie weitere Tutorials zu HTML-E-Mail-Vorlagen, E-Mail-Design, Codierung von responsiven E-Mails, Barrierefreiheit, Marketing, Transaktions-E-Mails, E-Mail-Dienstleistern (ESPs), Tipps zum Entwicklungs-Workflow und vieles mehr!
By
