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

Als Designer und Entwickler wird Ihr Kunde Sie eines Tages um eine E-Mail-Vorlage für eine Art Newsletter bitten. Ich muss sagen, dass E-Mail-Vorlagen einfach deshalb nicht so aufregend sind, weil es eine große Lücke bei der Unterstützung von HTML und CSS gibt. Man könnte meinen, dass dies heutzutage nicht mehr der Fall wäre, da wir HTML5 und CSS3 vorantreiben. Allerdings muss ich leider sagen, dass dies beim Rendern 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 erfolgen sollten. Ansonsten ist das ein absolutes Tabu. Da es jedoch nur sehr wenig Unterstützung für externes CSS und sogar CSS im Kopf gibt, ist Inline der richtige Weg, dies zu tun. Darüber hinaus – und ich bin sicher, Sie haben davon schon einmal gehört – muss die Vorlage mit TABLEs und nicht mit DIVs erstellt werden. Auch das ist bedauerlich, aber es ist der richtige Weg. Angesichts der Tatsache, dass E-Mails insgesamt nicht so groß sind, ist das Entwerfen und Erstellen von E-Mails nicht schwer – im Vergleich zum Web- oder Mobildesign ist es einfach langweilig.

Das Design

 Für Sie empfohlen: Wie beschleunigen Sie Ihren Designprozess mit modernen CSS-Frameworks?

Die Struktur

Fügen Sie im Hauptteil der HTML-Seite den folgenden Code ein. Wenn Sie sich einfach den Code ansehen, können Sie erkennen, 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 einen winzigen Stil, der die Gesamtbreite der Tabelle angibt und nichts zwischen den Zellen der Tabelle enthält.

 <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 dem Inhalt des Dokuments etwas CSS hinzu. Es ist überhaupt nichts Besonderes, nur ein Zurücksetzen und eine Definition der Linkfarbe und des Linkstils. Ich würde sehr vorsichtig sein, welches CSS Sie hier einfügen, 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 im Tutorial die Hyperlinks nicht unbedingt mit irgendetwas verknüpfen müssen und dass Sie auch Ihre eigenen Bilder verwenden können. Bisher habe ich im Code die Breite für alle drei Bilder definiert, um sicherzustellen, dass ihre Größe festgelegt ist.

Ich muss Ihnen eines unbedingt bewusst sein: Bilder eignen sich hervorragend für E-Mails, solange sie a: klein sind und b: einen Alt-Tag haben, der sie gut beschreibt. Sie wissen sicher, dass der Empfänger dieser E-Mail die Anzeige der Bilder zulassen muss, damit Bilder in einer E-Mail angezeigt werden. Wenn sie dies nicht tun, gibt es keinen Hinweis darauf, was sie zu erwarten haben. Es stellt auch ein Problem der Barrierefreiheit dar, 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 letztes werden wir das Inline-CSS-Design für diese HTML-E-Mail-Vorlage bereitstellen. Es ist das, was das Erscheinungsbild der E-Mail ausmacht, wie Sie sehen können, sieht diese E-Mail bisher überhaupt nicht so hübsch aus. Ich werde diesen Teil in kleine Stücke aufteilen, damit es nicht zu überwältigend wird.

 Vielleicht gefällt Ihnen auch Folgendes: 7 nützliche Tipps, um die Anklickbarkeit Ihrer E-Mail-Betreffzeile zu verbessern.

Körper

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

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

Tisch

Als nächstes zentrieren Sie den Inhalt der E-Mail und versehen ihn zusätzlich mit einer eigenen Hintergrundfarbe, damit er hervorsticht.

Erste Zeile – Kopfzeile

In der Zelle der ersten Reihe passieren viele Dinge. Bitte beachten Sie, dass sich der Inline-Stil auf dem <td> und nicht auf dem <tr> befindet. Was wir hier tun, 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 Alternativtext standardmäßig schwarz ist. Sie werden es auf diesem Hintergrund nicht sehen können, also stelle ich sicher, dass Sie es sehen können, indem ich die Farbe des Textes ändere. Für Sie mag es nutzlos erscheinen, aber wie gesagt ist es sehr wichtig für Leute, die keine Bilder standardmäßig zulassen.

 <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 etwas Polsterung und eine Trennlinie am unteren Rand hinzugefügt werden, um ihren Inhalt von der Zeile darunter zu trennen. Wir haben auch eine große Schlagzeile, die durch die Ränder etwas Platz bekommt. Und das ist 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 stellen wir hier sowohl die Breite als auch den Abstand ein. Sie sind genau gleich, so dass die Zellen gleichmäßig in zwei Hälften geteilt sind. Ansonsten gibt es nichts anderes, da die Zellen mit einem Bild und etwas Text dazu 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. Zunächst erhält die gesamte Zeile eine neue Hintergrundfarbe 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 erfahren genau die gleichen Stiländerungen. Zunächst erhält die Zelle selbst eine neue Hintergrund- und Textfarbe. Anschließend wird der Link in der Überschrift in Gelb geändert. Zuletzt wird der letzte Absatz unterstrichen und zur besseren Trennung auch ein Rand eingefü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> <plwptoc12">Fifth Row – Footer <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> <plwptoc12">Fifth Row – Footer
 Und schließlich die Fußzeile. Hier ist sehr wenig los; Nur etwas Abstand durch Polsterung und das wars!






<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Letzte Worte

Dieses Tutorial ist etwas langwierig, aber ich hoffe, dass Sie jetzt verstehen, was es braucht, um eine HTML-E-Mail-Vorlage von Grund auf zu erstellen. Es ist kein kompliziertes Konzept, kann aber mühsam sein. Jetzt sind Sie an der Reihe und beginnen mit der Erstellung fantastisch aussehender, hochwertiger E-Mails! Sie können mehrere Techniken zum Erstellen einer E-Mail-Vorlage kombinieren, um sie einzigartiger zu gestalten.
Dieser Artikel wurde von Hannah Butler geschrieben. Sie arbeitet als Webentwicklerin und Designerin. Außerdem teilt sie ihre Erfahrungen gerne in Form von Artikeln. In diesem Fall hat sie ihren eigenen Bereich auf der Website WriteMyPaper4Me.co. In Zukunft wird sie einen Blog schreiben, um anderen ihre Arbeitsweise zu beschreiben.