email Tutorial
Erste Schritte mit E-Mail
Suche…
Bemerkungen
HTML-E-Mail ist die Verwendung einer Teilmenge von HTML und CSS, um eine E-Mail-Nachricht wie eine Webseite mit Farben, Grafiken, Tabellenspalten und Links zu formatieren.
Nützliche Links:
HTML und Nur-Text
HTML-E-Mail ist die Verwendung einer Teilmenge von HTML und CSS, um eine E-Mail-Nachricht wie eine Webseite mit Farben, Grafiken, Tabellenspalten und Links zu formatieren.
Wenn Sie eine E-Mail senden, ist es wichtig, sowohl Text als auch HTML zu senden. Dazu senden Sie Ihre E-Mail als mehrteiliges MIME. Die meisten E-Mail-Dienstanbieter verfügen über Tools, um MIME automatisch für Sie zu erstellen. Einige generieren eine reine Textversion basierend auf Ihrer HTML-Version, und es gibt auch Tools von Drittanbietern .
Beispiel für eine Nur-Text-E-Mail:
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Beachten Sie, dass mit dem kürzlich erfolgten Start der Apple Watch ein neuer MIME-Teil aufgetaucht ist: text/watch-html . Dieser Inhalt wird nur in der Apple Watch (und allen anderen Clients, die diesen MIME-Typ unterstützen) angezeigt.
E-Mail-Clients und Rendering-Engines
E-Mail-Clients verwenden unterschiedliche Rendering-Engines zum Rendern von HTML-E-Mails:
- Apple Mail, Outlook für Mac, Android Mail und iOS Mail verwenden WebKit
- Outlook 2000/02/03 verwenden Sie Internet Explorer 6
- Outlook 2007/10/13 verwenden Microsoft Word
- Web-Clients verwenden die entsprechende Engine ihres Browsers (z. B. Safari verwendet WebKit, Chrome verwendet Blink)
Einige Clients fügen auch eigene Stile hinzu, z. B. setzt Google Mail alle <td> -Schriften auf die font-family: arial,sans-serif; , was Auswirkungen auf die Darstellung einer E-Mail haben kann.
Vor 2016 wurden alle Google Mail-Produkte <link> -Tags, alle CSS-Tags innerhalb von <style> -Tags und alle anderen nicht-eingebetteten CSS-Elemente entfernt. Ende 2016 unterstützte Google Mail in den meisten seiner Produkte das <style> -Tag und die Medienanfragen. Hier ist ein Update vom 23.11.2016 :
Die Grundlagen (Tabellen und Inline-CSS)
Tabellen für das Layout
Die Struktur einer HTML-E-Mail-Datei ähnelt der einer Webseite:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Ein <div> -basiertes CSS-Layout funktioniert jedoch nicht in E-Mails wie im Web. Große E-Mail-Clients bieten entweder keine Unterstützung für Floats und Flexbox an oder manipulieren sie auf verschiedene Weise. <div> s haben auch Positionierungs- und Boxmodellprobleme in verschiedenen Clients, insbesondere in Outlook. Es gibt ein paar Techniken, um eine E-Mail nur mit <div> s zu codieren, aber es ist sicherer, Tabellen für das Layout zu verwenden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Inline-CSS
Wenn Sie einen Stil inline anwenden, erhält er Vorrang vor weiter entfernten Stilen (z. B. Webmail-Client-Stile). Außerdem werden E-Mail-Clients verwendet, die CSS aus dem Kopf oder externen CSS-Dateien entfernen. Inline-CSS ist der beste Weg, um eine konsistente Anzeige in jedem E-Mail-Client sicherzustellen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Sie haben mehrere Möglichkeiten, um CSS einzublenden:
- Schreiben Sie CSS-Inline, während Sie gehen
- Verwenden Sie lokale Ausschnitte in Ihrem Editor
- Verwenden Sie einen webbasierten CSS-Inliner wie diesen
- Verwenden Sie einen programmatischen CSS-Inliner wie diesen
- Verwenden Sie einen Build-Prozess wie diese oder eine Schablonensprache
- Überlassen Sie Ihrem E-Mail-Dienstanbieter das Inlining für Sie (sofern er unterstützt wird)
E-Mails für alle E-Mail-Clients codieren
Verwendete Kodierungsmethode: Hybrid / Schwammig
Es war schon immer ein Mythos, dass div nicht in E-Mails verwendet werden kann. Es gibt E-Mail-Clients (im Gegensatz zu Outlook), die die Divs richtig darstellen können. Das folgende Beispiel zeigt, wie eine E-Mail codiert werden kann, die für die Google Mail-App (mit noch nicht ausgerollten Updates), Samsung-Geräten und anderen E-Mail-Clients, die keine Medienanfragen lesen, funktioniert.
Einführung in Outlook-Bedingungsanweisungen
Outlook-Bedingungsanweisungen sind sehr nützlich, wenn es darum geht, E-Mails zu rendern oder etwas Spezifisches zu zeigen, z.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Der obige Code liest, wenn größer als Microsoft Outlook 9 oder IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Versionen für bedingte Anweisungen aufgelistet.
Hybrid-E-Mail-Vorlage starten
Jeder Schritt wurde so erklärt, dass er für jeden mit HTML-Grundkenntnissen leicht verständlich sein sollte.
Zuerst beginnen wir mit einer Wrapper-Tabelle, die sich über den gesamten Bildschirm und mit einer Klasse von Containern erstreckt.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Danach fügen wir eine Medienabfrage für E-Mail-Clients hinzu, die nicht die maximale Breite lesen, aber das CSS in der Kopfzeile lesen. Die Medienabfrage richtet sich an alle Bildschirme und zeigt den Container in einer Breite von 700 Pixel.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Als Nächstes fügen wir eine Outlook-Bedingungsanweisung hinzu, die die Tabelle (mit Klassencontainer) auf einer Breite von 700 Pixel hält.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Der obige Code sollte jetzt Ihre Vorlage in Outlook bei 700px breit halten.
Nun zu den Spalten. Mit dem folgenden Code werden in der Vorlage zwei gleiche Spalten mit einer Breite von 350px erstellt.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Danach ist die Grenze nur noch Ihre Vorstellungskraft oder der Designer. Wenn Entwürfe erstellt werden, ist es wichtig, an der Drahtrahmenphase beteiligt zu werden, so dass es keine Überraschungen gibt, wenn sich das Design in der Codierungsphase befindet.
Hinweis:
- Für Retina-Bilder werden Bilder auf Elementebene und nicht in ihrem Stil festgelegt. <Img src = "" width = "" ...
- Sie können sich immer noch für Inline-CSS entscheiden, oder Sie können CSS im Kopf nur wählen, wenn alle Ihre Clients CSS im Kopf unterstützen.
