/ / Wie bekomme ich den HTML-Code, den ich in E-Mails senden soll? - zurb-foundation, html-email, zurb-foundation-6, zurb-ink

Wie bekomme ich den HTML-Code, den ich in E-Mails senden soll? - zurb-foundation, html-email, zurb-foundation-6, zurb-ink

Ich habe gerade angefangen, die Zurb Foundation (SASS) zu verwenden, um Responsive E-Mails zu erstellen. ich folgte dieses Tutorial um eine Test-E-Mail zu erstellen. Wie im Tutorial zu sehen ist, sieht die Test-E-Mail im Browser ansprechend aus und sieht gut aus.

Die Standardkesselplatte, die ich für die Test-E-Mail verwende:

<!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" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{> body}}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</body>
</html>

Der Text der Test-E-Mail:

---
layout: index-layout
subject: My Email Templates
---
<container>

<row class="gray collapse">
<columns>
<center><img src="/images/http://unsplash.it/800/200"></center>
</columns>
</row>

<row class="gray">
<columns>
<h2 class="text-center">Responsive columns below</h2>
</columns>
</row>
<row class="gray">
<columns small="12" large="4">
<p>Column 1</p>
</columns small="12" large="4">
<columns>
<p>Column 2</p>
</columns small="12" large="4">
<columns>
<p>Column 3</p>
</columns>
</row>
</container>

So sieht die resultierende Quelle aus "Quelle anzeigen" in Chrome aus:

<!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" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>My Email Templates</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src="/browser-sync/browser-sync-client.js?v=2.23.6"></script>".replace("HOST", location.hostname));
//]]></script>

<span class="preheader"></span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center data-parsed="">

<table align="center" class="container float-center"><tbody><tr><td>

<table class="row gray collapse"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<center data-parsed=""><img src="/images/http://unsplash.it/800/200" align="center" class="float-center"></center>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>

<table class="row gray"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<h2 class="text-center">Responsive columns below</h2>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-4 columns first"><table><tr><th>
<p>Column 1</p>
</th></tr></table></th>
<th class="small-12 large-4 columns"><table><tr><th>
<p>Column 2</p>
</th></tr></table></th>
<th class="small-12 large-4 columns last"><table><tr><th>
<p>Column 3</p>
</th></tr></table></th>
</tr></tbody></table>


</td></tr></tbody></table>

</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</body>
</html>

Ich habe die Test-E-Mail mit gmail an mich geschicktprüfen Sie. Dazu wurde die oben gezeigte Quelle kopiert und mit "HTML einfügen" über die HTML-Erweiterung für Google Mail in Chrome eingefügt. Das Ergebnis war schrecklich - keine Reaktion und es sah hässlich aus.

Wie soll ich die Test-E-Mail nutzen?das habe ich erstellt? Ist es sogar die Quelle von "Quelle anzeigen" in Chrome, die ich in einer E-Mail senden soll? Ist es sogar möglich, die Test-E-Mail über Google Mail zu senden, oder muss ich z. B. mailchimp oder sendgrid verwenden?

Antworten:

0 für die Antwort № 1

Putsmail ist die beste Wahl für das schnelle Testen einer einzelnen Vorlage. Sie können einfach Ihren HTML-Code einfügen und Ihre Google Mail-Adresse (oder andere) hinzufügen


0 für die Antwort № 2

Die SASS-Version der Zurb-Foundation für Email 2.0 wird über den Terminalemulator gesteuert. Ich gehe davon aus, dass Sie Zurb bereits mit einem installiert haben. Was du verpasst, sind ein paar Befehle.

Zu Beginn navigieren Sie mit dem Terminal zu dem Verzeichnis, in dem Sie Zurb installiert haben. Der Befehl ist npm start oder foundation watch. Dadurch wird die Ausführung von Zurb in einem Modus gestartet, in dem Sie Ihre Änderungen anzeigen können, bevor ein Befehl ausgeführt wird, um den Code einzubinden.

Um den Code einzufügen, geben Sie ein foundation build oder npm run build. Dadurch erhalten Sie eine E-Mail mit dem erforderlichen css-Code, der für die Erstellung der endgültigen E-Mail benötigt wird.

Zurb Befehle

Einige andere Zurb-Befehle, die Sie nützlich finden könnten, sind:

  • npm install --global foundation-cli - (Installiere npm)
  • foundation new --framework emails - (eine neue Installation von zurb)
  • npm start - (Starten Sie die Anwendung)
  • foundation watch - (Starten Sie die Anwendung)
  • foundation build - (Führen Sie einen Inliner für die entsprechende CSS)
  • npm run build - (Führen Sie einen Inliner für die entsprechende CSS)
  • npm cache clean - (lösche den Cache)
  • npm update - (Installiere die neuesten Updates)

Wenn nichts davon Sinn macht, besuchen Sie bitte eines der folgenden, um bessere Tutorials zu erhalten, die Sie hoffentlich über die Funktionsweise von Zurb informieren. Es ist kompliziert, aber es macht großartige E-Mails.

Mehr Informationen

Viel Glück.