Wie erstelle ich eine E-Mail-Vorlage mit HTML & CSS?

Als Designer und Entwickler wird Ihr Kunde Sie eines Tages nach einer E-Mail-Vorlage für eine Art Newsletter fragen. Ich muss sagen, dass E-Mail-Vorlagen nicht so aufregend sind, einfach weil es eine große Lücke bei der Unterstützung von HTML und CSS gibt. Sie würden sich vorstellen, dass dies in der heutigen Zeit nicht der Fall wäre, da wir HTML5 und CSS3 vorantreiben. Leider muss ich jedoch sagen, dass dies bei der Wiedergabe von E-Mails bei weitem nicht der Fall ist.

Das erste, was Sie beim Erstellen einer HTML-E-Mail-Vorlage beachten sollten, ist die Tatsache, dass alle CSS-Stile inline ausgeführt werden sollten. In jedem anderen Fall ist dies ein sehr großes Nein-Nein. Aber da es sehr wenig Unterstützung für externes CSS und sogar CSS im Kopf gibt, ist Inline der Weg, dies zu tun. Außerdem – und davon haben Sie sicher schon einmal gehört – muss das Template mit TABLEs und nicht mit DIVs erstellt werden. Noch einmal, das ist bedauerlich, aber es ist der richtige Weg. Da E-Mails insgesamt nicht so groß sind, ist das Design und die Erstellung nicht schwer – es ist nur langweilig im Vergleich zum Web- oder Mobildesign.

Das Design

 Empfohlen für Sie: Wie können Sie Ihren Designprozess mit modernen CSS-Frameworks beschleunigen?

Die Struktur

Fügen Sie im Hauptteil der HTML-Seite den folgenden Code ein. Wenn Sie sich einfach den Code ansehen, können Sie feststellen, dass an der Struktur dieser E-Mail nicht viel dran ist. Das ist eigentlich eine sehr gute Sache, da E-Mails niemals komplex sein sollten. Bisher gibt es auch nur eine winzige Menge an Styling, die die Gesamtbreite der Tabelle angibt, und dass zwischen den Zellen der Tabelle nichts ist.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Der Style

Okay, jetzt fügen wir etwas CSS in den Inhalt des Dokuments ein. Es ist überhaupt nichts Besonderes, nur ein Reset und eine Definition der Linkfarbe und des Stils. Ich wäre sehr vorsichtig mit dem CSS, das Sie hier eingeben, da es von E-Mail-Clients oft ignoriert wird.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

Der Inhalt

Es ist an der Zeit, die Tabellen mit Inhalt zu füllen. Sie finden die Bilder in der oben für Sie bereitgestellten Datei – am Anfang dieses Tutorials. Jetzt sollten Sie alle Texte und Bilder ausfüllen, die in dieser E-Mail enthalten sein sollen. Bitte beachten Sie, dass Sie die Hyperlinks im Tutorial nicht wirklich mit irgendetwas verknüpfen müssen und es Ihnen freisteht, auch Ihre eigenen Bilder zu verwenden. Bisher habe ich im Code die Breite für alle drei Bilder definiert, nur um sicherzustellen, dass ihre Größe festgelegt ist.

Es gibt etwas, dessen Sie sich unbedingt bewusst sein müssen: Bilder eignen sich hervorragend für E-Mails, solange sie a: klein sind und b: ein Alt-Tag haben, das sie gut beschreibt. Ich bin sicher, Sie wissen, dass der Empfänger dieser E-Mail das Erscheinen der Bilder zulassen muss, damit Bilder in einer E-Mail erscheinen. Wenn sie dies nicht tun, gibt es nichts, was ihnen sagen könnte, was sie erwarten sollten. Es ist auch ein Zugänglichkeitsproblem, wenn Sie keine Beschreibung für blinde Benutzer bereitstellen. Das ist jedoch eine andere Geschichte. Die Lektion lautet also: Verwenden Sie immer ein kleines Bild mit einem Alt-Tag!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Der Inline-Stil

Als allerletztes werden wir das Inline-CSS-Styling für diese HTML-E-Mail-Vorlage bereitstellen. Es macht das Aussehen der E-Mail aus, wie Sie sehen können, hat diese E-Mail bisher überhaupt nicht so hübsch ausgesehen. Ich werde diesen Teil in kleine Stücke zerlegen, damit es nicht zu überwältigend wird.

 Das könnte Ihnen auch gefallen: 7 nützliche Tipps, um Ihre E-Mail-Betreffzeile klickbarer zu machen.

Körper

Lassen Sie uns zunächst die Hintergrundfarbe der gesamten E-Mail-Seite sowie die Standardschriftgröße und -farbe festlegen.

 <body bgcolor="#f7d973" ></body>

Tisch

Als nächstes müssen Sie den Inhalt der E-Mail zentrieren und ihm auch eine eigene Hintergrundfarbe geben, damit er auffällt.

Erste Zeile – Kopfzeile

In der Zelle der ersten Reihe gehen viele Dinge vor sich. Bitte beachten Sie, dass sich der Inline-Stil auf dem <td> befindet, nicht auf dem <tr>. Was wir hier machen, ist eine neue Hintergrundfarbe, die der des Logos entspricht. Darüber hinaus gibt es auch etwas Polsterung und Ausrichtung. Jetzt ändere ich die Farbe des Textes in Weiß, da der Alt-Text standardmäßig schwarz ist. Sie werden es auf diesem Hintergrund nicht sehen können, also stelle ich sicher, dass Sie dies können, indem Sie die Farbe des Textes ändern. Es mag Ihnen nutzlos erscheinen, aber wie ich schon sagte, ist dies sehr wichtig für Leute, die standardmäßig keine Bilder zugelassen haben.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Zweite Reihe

Innerhalb der Zeile gibt es wiederum nur eine Zelle, die sich über zwei Spalten erstreckt. Diese Zelle wird leicht manipuliert, indem ihr etwas Polsterung und eine Trennlinie am unteren Rand hinzugefügt wird, um ihren Inhalt von der darunter liegenden Zeile zu trennen. Wir haben auch eine große Überschrift, die durch die Ränder etwas Platz bekommt. Und das war es für diese Reihe.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Dritte Reihe

Für beide Zellen hier stellen wir Breite und Polsterung ein. Sie sind genau gleich, sodass die Zellen gleichmäßig in zwei Hälften geteilt werden. Abgesehen davon gibt es nichts anderes, da die Zellen mit einem Bild und etwas Text darüber gefüllt sind.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Vierte Reihe

Dies ist bei weitem der am stärksten stilisierte Abschnitt dieser HTML-E-Mail-Vorlage. Wie Sie anhand des Codes unten sehen können, ist eine Menge los. Zuerst bekommt die ganze Zeile eine neue Hintergrund- und Textfarbe, um sicherzustellen, dass der Text sichtbar ist – genau wie in der Kopfzeile. Sowohl die erste als auch die zweite Zelle und ihr Inhalt erhalten genau die gleichen Stiländerungen. Zuerst erhält die Zelle selbst einen neuen Hintergrund und eine neue Textfarbe. Dann wird der Link innerhalb seiner Überschrift gelb. Schließlich wird der letzte Absatz unterstrichen und um eine gewisse Trennung hinzuzufügen, wird auch ein Rand hinzugefügt. Wie gesagt, die zweite Zelle und ihr Inhalt erhalten genau die gleiche Stilisierung.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider">