Erstellen Sie eine HTML E-Mail-Vorlage aus dem Nichts

() translation by (you can also view the original English article)

Der beste Weg, jeden Prozess zu verstehen, ist, ihn von Grund auf auszuführen. Heute werden wir genau das mit dem E-Mail-Design tun, indem wir eine HTML-E-Mail-Vorlage von Grund auf neu erstellen.

Kick Dinge aus

Zu Beginn ist es erwähnenswert, wo ich einige der Ressourcen hergezogen habe.

Die schönen 2D-Icons sind von Pierre Borodin auf Dribbble
Die verwendeten Schriftarten sind Oil Can, Source Sans Pro und Mission Script
Die Social Media Icons stammen von Metrize Icons

Nun müssen Sie, wie wir im vorherigen Tutorial besprochen haben, Ihr HTML-E-Mail-Dokument mit einem XHTML-Doctype beginnen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

Damit können wir beginnen, den Rest der Struktur zu bauen.

Erstellen des Hauptteils und der Haupttabelle

Zuerst fügen wir eine Gesamtstruktur für Ihre E-Mail hinzu, beginnend mit einem <body> Tag. Wir setzen den Rand und das Padding für das body - Tag auf Null, um unerwarteten Speicherplatz zu vermeiden.

Wir fügen auch eine Tabelle mit einer Breite von 100% hinzu. Dies dient als echtes Body-Tag für unsere E-Mails, da das Styling des Body-Tags nicht vollständig unterstützt wird. Dies dient als echtes Body-Tag für unsere E-Mails, da das Styling des Body-Tags nicht vollständig unterstützt wird.

Setzen Sie das Cellpadding und den Zellenabstand auf Null, um unerwarteten Speicherplatz in der Tabelle zu vermeiden.

Hinweis: Wir werden border="1" auf all unseren Tabellen belassen, damit wir das Grundgerüst unseres Layouts sehen können. Wir werden sie am Ende mit einem einfachen Suchen & Ersetzen entfernen.

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Hello!
   </td>
  </tr>
 </table>
</body>

Wenn ein Attribut in HTML vorhanden ist, verwenden Sie dieses anstelle von CSS

Platzieren Sie nun eine zentrierte Tabelle mit einer Breite von 600 Pixeln in der Containertabelle. 600 Pixel ist eine sichere maximale Breite für Ihre E-Mails, die in den meisten Desktop - und Webmail-Clients auf den meisten Bildschirmauflösungen angezeigt werden.

Legen Sie diese Breite mit HTML anstelle von CSS fest, indem Sie das Attribut width verwenden. Die goldene Regel bei der HTML-E-Mail-Entwicklung lautet: Wenn ein Attribut in HTML vorhanden ist, verwenden Sie dieses anstelle von CSS.

Wir ersetzen unseren kleinen 'Hallo!' Gruß mit dieser Tabelle:

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   Hello!
  </td>
 </tr>
</table>

Wir haben außerdem eine Inline-Style-Eigenschaft hinzugefügt, die die border-collapse-Eigenschaft auf collapse setzt. Wenn wir das nicht tun, fügen neuere Versionen von Outlook einen kleinen Abstand zwischen unserer Tabelle und unserem Rahmen hinzu.

Erstellen der Struktur und des Headers

In unserem Design können wir sehen, dass die E-Mail in drei logische Abschnitte unterteilt ist, sodass wir für jede eine Zeile erstellen.

Lassen Sie uns die einzelne Zeile, die wir bereits erstellt haben, duplizieren, so dass wir insgesamt drei haben. Ich habe den Text in ihnen geändert, so dass wir jede Zeile leicht identifizieren können.

1	<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
2	<tr>
3	<td>
4	Row 1
5	</td>
6	</tr>
7	<tr>
8	<td>
9	Row 2
10	</td>
11	</tr>
12	<tr>
13	<td>
14	Row 3
15	</td>
16	</tr>
17	</table>

Jetzt werden wir sie entsprechend dem Design färben. Da bgcolor ein gültiges HTML-Attribut ist, verwenden wir das, um die Hintergrundfarbe anstelle von CSS festzulegen. Denken Sie immer daran, die vollen sechs Zeichen eines Hex-Codes zu verwenden, da die Kurzschrift mit drei Zeichen nicht immer funktioniert.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9">
   Row 1
  </td>
 </tr>
 <tr>
  <td bgcolor="#ffffff">
   Row 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#ee4c50">
   Row 3
  </td>
 </tr>
</table>

Ok, als nächstes werden wir uns auf Zeile 1 konzentrieren. Wir möchten die Polsterung der Zelle anpassen und dann unser Bild einfügen.

Padding verwenden

Wenn Sie Padding in E-Mails verwenden, müssen Sie immer jeden einzelnen Wert angeben (oben, rechts, unten und links), andernfalls können Sie unvorhersehbare Ergebnisse erhalten. Ich finde, dass Sie immer noch die Kurzschrift verwenden können, d. H. padding: 10px 10px 8px 5px; wenn Sie jedoch Probleme haben, möchten Sie vielleicht Longform schreiben, d. H. padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Wenn Sie noch größere Probleme mit dem Padding haben (z. B. wenn Ihre Send-Plattform Ihr CSS streicht), verwenden Sie es überhaupt nicht. Verwenden Sie einfach leere Zellen, um Platz zu schaffen. Es gibt keine Notwendigkeit, spacer GIFs zu verwenden, stellen Sie einfach sicher, dass Sie style="line-height: 0; font-size: 0;" in die Zelle, platziere einen   innerhalb und geben Sie ihm eine explizite Höhe oder Breite. Hier ist ein Beispiel:

1	<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>

Beachten Sie auch, dass Padding für TD-Tags, nicht jedoch für P-Tags oder DIVs verwendet werden kann. Sie verhalten sich viel unvorhersehbarer.

Wir werden also ein Inline-CSS verwenden, um der Zelle einen Padding hinzuzufügen. Dann fügen wir unser Bild ein, fügen alt text hinzu und fügen style="display: block;" Dies ist ein gängiger Fix, der einige E-Mail-Clients daran hindert, unter Ihren Bildern Lücken hinzuzufügen. Wir zentrieren das Bild, indem wir align="center" zu unserem td-Tag hinzufügen. Wir werden auch ein alt-Tag hinzufügen, das wichtig ist, wenn unsere E-Mail anfänglich geladen wird, was in den meisten Fällen bei Bildern der Fall sein wird.

Hinweis: Wenn der Inhalt Ihres Headers für Ihre Nachricht wirklich wichtig ist, verwenden Sie keinen Image-Only-Header. Denken Sie daran, dass Bilder für die meisten Clients standardmäßig blockiert sind. Wenn also ein Aspekt Ihrer E-Mail wichtig ist, sollten Sie ihn niemals als Bild hinzufügen. In diesem Beispiel ist mein Header jedoch ziemlich überflüssig.

1	<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
2	<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
3	</td>

Erstellen des Inhaltsbereichs

Als Erstes fügen wir der mittleren Zelle eine Auffüllung hinzu, so dass die Tabelle nach unserem Design etwas Platz hat.

Jetzt fügen wir eine Tabelle mit drei Zeilen für unseren Hauptinhalt hinzu - einen für die Überschrift, einen für den einleitenden Text und einen für die Zeile mit zwei Spalten. Wir werden die Breite dieser Tabelle auf 100% setzen, anstatt einen Pixelwert zu verwenden, da dies uns helfen wird, die Spur weiter zu verbessern, wenn wir unsere E-Mails ansprechen möchten. Wenn Sie immer Pixelbreiten haben, können Sie viele Werte überschreiben, die Sie mit Medienabfragen überschreiben können. Wenn die geschachtelten Tabellenbreiten auf Prozentsätzen basieren, passt sich die Breite des übergeordneten Elements an, und alles wird entsprechend angepasst.

1	<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
2	<table border="1" cellpadding="0" cellspacing="0" width="100%">
3	<tr>
4	<td>
5	Row 1
6	</td>
7	</tr>
8	<tr>
9	<td>
10	Row 2
11	</td>
12	</tr>
13	<tr>
14	<td>
15	Row 3
16	</td>
17	</tr>
18	</table>
19	</td>

Jetzt fügen wir unseren Inhalt hinzu und fügen der mittleren Zelle eine Auffüllung hinzu.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Lorem ipsum dolor sit amet!
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 30px 0;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

Jetzt werden wir unsere zwei Inhaltsspalten zu Zeile 3 hinzufügen. Da wir zwischen diesen beiden Zellen einen "Rand" haben wollen, aber der Rand nicht unterstützt wird, erstellen wir eine dreispaltige Tabelle mit einer leeren Zelle zwischen den beiden äußeren Spalten.

So sehr ich gerne bei Prozentsätzen bleibe, kann es bei Inhalten mit einer bestimmten Größe schwierig sein, sie in Prozentwerte umzuwandeln (in diesem Beispiel wären die Spalten 48,1%, was zu Verwirrung führen könnte). Da unsere beiden Bilder 260 Pixel breit sind, erstellen wir deshalb Spalten, die ebenfalls 260 Pixel breit sind, mit einer 20 Pixel breiten Randzelle in der Mitte. (Dies wird insgesamt 540px ergeben, was der Breite von 600px unserer Tabelle minus dem Auffüllen von 30px auf jeder Seite entspricht.) Stellen Sie sicher, dass Sie die Schriftgröße und die Zeilenhöhe auf Null setzen und fügen Sie ein Leerzeichen ein, das keine Unterbrechungen aufweist.   in der Randzelle.

Wir setzen das valign auch für beide Zellen auf "top", so dass sie vertikal nach oben ausgerichtet sind, selbst wenn eine Spalte mehr Text als die andere enthält. Die standardmäßige vertikale Ausrichtung ist "middle".

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   Column 1
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   Column 2
  </td>
 </tr>
</table>

Jetzt fügen wir unseren Bildern und Inhalten diese Spalten hinzu. Da wir mehrere Zeilen benötigen, verschachteln wir noch eine weitere Tabelle, da wir keine colspan- oder rowspan-Tags verwenden können. Außerdem fügen wir zwischen den Bildern und den Kopien in jeder Spalte ein Padding hinzu.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Hier haben wir die Breite der Bilder mit HTML bei 100% der Spaltenbreite festgelegt. Dies ist wiederum so, dass wir, wenn wir diese E-Mail ansprechen, nur Medienabfragen verwenden müssen, um die Breite des übergeordneten Elements zu ändern. Wir müssen die Höhe in Pixeln überschreiben, weil die Verwendung von style="height: auto" jetzt nicht in allen Fällen funktioniert (hust hust, Outlook). Also werden wir es mit Pixeln einstellen. Das bedeutet, dass wir die Höhe einstellen height: auto!important, die Medienabfragen verwenden, um den Pixelwert zu überschreiben, aber wir könnten das mit einer einzigen Klasse machen. Da wir die Breite als Prozentsatz festlegen, müssen wir das nicht überschreiben. Je weniger Dinge überschrieben werden müssen, desto besser.

Die Fußzeile

Jetzt fügen wir unsere Auffüllung der Fußzeile hinzu.

1	<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
2	Row 3
3	</td>

Innerhalb dieser Zelle werden wir einen weiteren Tisch verschachteln, um unsere zwei Spalten zu erhalten.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Column 1
  </td>
  <td>
   Column 2
  </td>
 </tr>
</table>

Wir werden einen weiteren kleinen Tisch für unsere Social Media Icons erstellen. Wir legen seine Elternzelle auf align="right" fest. Stellen Sie sicher, dass Sie border="0" auf diesen Bildlinks setzen (um einen blauen Linkrand zu vermeiden) und vergessen Sie nicht: display:block.

<td align="right">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
   <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
  </tr>
 </table>
</td>

Jetzt werden wir unseren Text hinzufügen und eine Breite zu unseren Zellen hinzufügen, nur um sicher zu sein, obwohl zwischen ihnen eine Menge Leerräume liegen. Wir setzen diese Zelle auf 75% und die andere auf 25%.

1	<td width="75%">
2	® Someone, somewhere 2013<br/>
3	Unsubscribe to this newsletter instantly
4	</td>

Und da haben wir es! Unser Layout ist abgeschlossen.

Validierung

Lassen Sie uns dies durch den W3C-Validator laufen, um sicherzustellen, dass nichts schlecht oder kaputt ist. Wenn Sie genau gefolgt sind, wird es sagen, dass es vorbei ist.

Als nächstes werden wir einen Test durch Litmus durchführen, um sicherzustellen, dass die Struktur unserer E-Mails großartig funktioniert. Hier ist eine Zusammenfassung meines Tests:

email-build-litmus — Schaut online vorbei

Styling unseres Textes

Unsere erste Zeile ist die Überschrift. Wir verwenden das <b> Tag, um fett formatierten Text zu erstellen, da wir, wie wir bereits wissen, wenn es in HTML vorhanden ist, dieses anstelle von CSS verwenden.

1	<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
2	<b>Lorem ipsum dolor sit amet!</b>
3	</td>

Wir fügen diesen Inline-Stil auch allen anderen Zellen des Textes hinzu:

1	style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

Als nächstes müssen wir den Fußtext formatieren und wir werden auch unseren Abmelde-Link aufräumen. Wir werden unseren Abmeldetext-Link sowohl mit CSS als auch mit dem HTML <font> Tag formatieren. Diese Verdoppelung ist der beste Weg, um sicherzustellen, dass Ihre Links niemals im Standard-Blau angezeigt werden.

1	<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
2	® Someone, somewhere 2013<br/>
3	<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly
4	</td>

Und da haben wir es! Alles ist drin. Zeit, die Grenzen abzuschalten und zu sehen, dass sie wunderschön aussieht. Gehe hindurch und ersetze jedes Vorkommen von border="1" mit border="0".

An diesem Punkt sieht es ein wenig traurig aus, im weißen Raum zu schweben, also gehen wir zu unserem ersten 600px großen Tisch und fügen hinzu:

1	style="border: 1px solid #cccccc;"

Jetzt sieht es nicht so aus, als würde es schweben. Als letzten Schliff werde ich 30px Padding am Ende der allerersten Zelle hinzufügen, um zu verhindern, dass unsere E-Mail in einigen Webmail-Clients (wie Apple Mail) abrupt unten stoppt und oben 10px Padding, so dass unser blauer Header etwas Luft zum Atmen hat.

1	<td style="padding: 20px 0 30px 0;">

Und das ist es! Sie sind alle bereit für einen letzten Test.

email-build-litmus-finished — Schaut online vorbei

Das ist ein Wrap!

Bevor wir es einen Tag nennen, wenn Sie irgendwelche Kommentare benutzt haben, werden Sie sie los. Einige E-Mail-Clients können Kommentare unterdrücken, daher ist es am sinnvollsten, keinen unnötigen Code in Ihren Dateien zu haben.

Jetzt ist ein guter Zeitpunkt, um einen letzten Test zu machen, und dann ist Ihre HTML-E-Mail bereit zum Senden!

Um das Gelernte auf die nächste Stufe zu bringen, lies dir die nächsten Tutorials durch: