HTML -E -Mail -Entwicklung -Workflow: Ein praktischer Leitfaden zur Verbesserung der Effizienz

Jeder Webentwickler hat seine eigene einzigartige Arbeitsweise: Bevorzugte Redakteure, Hilfstools, pers?nliche Projektprozesse und mehr. Für gro?e oder komplexe Projekte ist ein klarer Entwicklungspfad von entscheidender Bedeutung, was Zeit spart und Fehler minimiert.

Dies ist in meiner Erfahrung in HTML -E -Mail -Projekten besonders wichtig. E -Mail erfordert viele sich wiederholende Aufgaben, die an sich nicht besonders komplex sind (zumindest nicht immer), aber aufgrund der gro?en Anzahl von Elementen und Aufgaben, die überprüft werden müssen, schwierig werden.

Hier werde ich versuchen, meinen pers?nlichen HTML -E -Mail -Entwicklungs -Workflow zu erkl?ren. Ich hoffe, Sie k?nnen die Abschnitte aussuchen, die Sie von ihnen m?gen.

Schlüsselpunkte

• Der Autor betont die Bedeutung eines klaren Entwicklungspfads in HTML -E -Mail -Projekten, um Zeit zu sparen und Fehler zu minimieren, die durch eine gro?e Anzahl von sich wiederholenden Aufgaben verursacht werden.
• Die Verwendung von Pr?prozessoren wie Jade für HTML und weniger für CSS kann den Entwicklungsprozess vereinfachen, indem die Notwendigkeit eines langen Codes, insbesondere in Bezug auf verschachtelte Tabellen, reduziert wird. Es wird empfohlen, Tools wie Codekit und Coda zu verwenden, um Dateien zu kompilieren und die Arbeit in Echtzeit voranzutreiben.
• Es wird empfohlen, das Gulp -E -Mail -Builder -Paket zu verwenden, um die letzten wenigen Schritte des Workflows zu automatisieren, einschlie?lich des Einbrennens oder Einbaus von CSS -Dateien, dem Testen mit der Lackmus -API und dem Senden zus?tzlicher Test -E -Mails.
• Ein guter Workflow für HTML -E -Mail -Entwicklung kann die Produktivit?t erheblich erh?hen. Der Workflow des Autors umfasst die Erstellung der lokalen Tests, CSS -Inline und automatisierte Tests mit Gulp -E -Mail -Builder. Das Anpassen dieser Schritte wird dazu ermutigt, Ihren pers?nlichen Vorlieben und Bedürfnissen gerecht zu werden.

Typische E -Mail -Entwicklung Workflow

Der klassische Workflow der E -Mail -Entwicklung besteht aus drei Hauptschritten:

• Sch?pfung (Vorl?ufige lokale Tests durchführen)
• CSS inline
• Test

Der endgültige Test (unter Verwendung von Inline-CSS) ist der zeitaufw?ndigste Schritt, da wir ihn m?glicherweise mehrmals wiederholen müssen. Die Aufgaben "CSS Inline" und "Test" erfordern zus?tzliche Arbeit und Aufmerksamkeit: Erstens müssen Sie darauf achten, die ursprüngliche Arbeitskopie von der Inline -Kopie zu unterscheiden. Der endgültige Test erfordert au?erdem, dass Sie die Inline -HTML an verschiedene Konten senden, um Ihr Design mit verschiedenen E -Mail -Clients zu überprüfen.

code per E -Mail senden ist etwas schwierig, da die meisten Clients Sie nicht erlauben, E -Mails zu komponieren, indem Sie den HTML -Code in den K?rper einfügen (der einzige, von dem ich wei?, dass er Thunderbird ist). Für jeden Test müssen jedoch viele Vorg?nge E -Mails, Inline -CSS, einfügen Code usw. einfügen.

Wenn Sie über ein Testbettkonto (Lackmus, E -Mail auf S?ure, Kampagnenmonitor oder andere) verfügen Post. In der Vergangenheit habe ich ein kleines PHP -Skript verwendet, um Test -E -Mails zu senden, die einige Zeit gespeichert, aber dennoch eine Wiederholung bestimmter Aufgaben erforderte.

Zurück zu CSS müssen Sie m?glicherweise an zwei Dateien arbeiten: eine für Inline und eine zum Einbettung (für Clients, die Medienfragen unterstützen).

Sie müssen das CSS direkt in die HTML -Datei bearbeiten, dann das Inline -Tool (z. B. das MailChimp -Inline -Tool) starten und schlie?lich das zweite CSS in die Inline -Datei einbetten (es fühlt sich ?rgerlich an, es einfach auszuschreiben!)

Wir k?nnen jetzt unseren Workflow -Plan genauer überprüfen:

Um einen wirklich effizienten Workflow zu erhalten, bleiben viele Probleme ungel?st, mit wesentlichen wiederholteren Schritten als kreative Schritte, was selten zu guten Ergebnissen führt.

Zum Glück haben wir noch einige M?glichkeiten zu verwenden: Pr?prozessor und Aufgabenl?ufer.

HTML- und CSS -Pr?prozessor

Als ich anfing, Pr?prozessoren zu verwenden, wurde mir sofort klar, wie nützlich sie für die E -Mail -Entwicklung sind. Sowohl für HTML als auch für CSS k?nnen Pr?prozessoren den Bedarf an langem Code (insbesondere HTML) leicht vereinfachen.

Ich benutze JADE haupts?chlich für HTML und weniger für CSS, aber Sie k?nnen die Technologie ausw?hlen, die Ihnen gef?llt. Jade ist sehr nützlich, wenn Sie mit doppelten und verwirrenden Code wie verschachtelten Tabellen umgehen. Bitte beachten Sie die folgenden zweischichtigen Tabellenbeispiele.

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Der Jade -Code, der denselben Code erzeugt, lautet wie folgt:

table(width="100%" )
  tbody
    tr
      td(width="100%")
        table( align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

Wie Sie sehen, gibt es kein Problem mehr mit nicht abgestellten Tags, der Code ist leicht zu lesen.

Mit JADE k?nnen Sie komplexe Vorlagen erstellen und Ihre eigene Bibliothek von Code -Snippets erstellen, um Code in weiteren Projekten wiederzuverwenden. Für weniger oder Sass k?nnen Sie dasselbe tun.

Sie k?nnen Dateien mit Gulp oder Grunzen kompilieren, aber für eine kurze Vorschau Ihrer Arbeit habe ich festgestellt, dass Coda und Codekit die besten L?sungen bieten.

Die Aufgabe "Lokale Test" in unserem Workflow gibt uns ein erstes Feedback zur Arbeit und erfordert entscheidend keine anderen Aktionen.

Codekit kompiliert unsere Jade und weniger Dateien auf Speichern und kann Ihr Projekt in Echtzeit vorschauen. Mit Coda k?nnen Sie dagegen Dateien bearbeiten und kompilierte Dateien automatisch in einem separaten Fenster aktualisiert:

Alle diese Schritte sind vollst?ndig automatisiert, und Sie k?nnen Ihre Arbeit auf Design und nicht die weniger lustigen, sich wiederholenden Aufgaben konzentrieren.

Jetzt haben wir JADE und weniger Dateien für die Erstellung sowie HTML- und CSS -Dateien für die Vorschau zusammengestellt. Der n?chste Schritt besteht darin, alles für endgültige Tests zusammenzustellen.

Schneller Test mit Gulp

Ich habe mir viele Schlupf- oder Grunzkripte angesehen, um die letzten Schritte des Workflows zu automatisieren. NPM bietet viele L?sungen, aber am Ende habe ich das Gulp -E -Mail -Builder -Paket gew?hlt. Dieses Paket ist die Gulp -Version eines gr??eren Projekts und hat auch eine Grunzversion, wenn Sie es vorziehen.

E -Mail -Builder k?nnen Sie CSS -Dateien inline oder einbetten, mithilfe der Lackmus -API testen und zus?tzliche Test -E -Mails senden.

Um den E -Mail -Builder zu verwenden, müssen Sie natürlich Gulp installieren. Ich habe dies in meinem Beitrag "Anpassung von Bootstrap -Symbolen mit Schluck" behandelt, damit Sie den Beitrag für Hilfe überprüfen k?nnen. Darüber hinaus k?nnen Sie den Artikel von Etienne Margraff über Gulp und Grunzwerkflows lesen.

Zus?tzlich zum E-Mail-Builder verwenden wir das Gulp-Replace-Paket, sodass Sie es auch installieren müssen.

Wie bei jeder Gulp -Aufgabe müssen wir gulpfile.js festlegen:

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Erstens enthalten wir alle erforderlichen Pakete und setzen vier Variablen:

• current_date ist eine Zeichenfolge, die das aktuelle Datum darstellt.
• E -Mail_Subject
• remote_imgs_basepath ist die URL des Remote -Ordners, das unser Bild enth?lt. Ich verwende es, um lokale Tests durchzuführen, indem ich relative Pfade für das Bild festlegt (damit ich leicht alle erforderlichen ?nderungen vornehmen kann), aber der endgültige Test (und sendete die Aufgabe), dass das Bild in den Remote -Ordner hochgeladen werden soll. Daher verwende ich daher Gulp ersetzen Sie, damit alle SRC -Eigenschaften in Remote_IMGS_BASEPATH
?ndert
• E -Mail_Builder_Options ist ein Objekt, mit dem E -Mail -Builder
konfiguriert werden kann

In diesem Beispiel verfügt das Objekt EMAIMAL_BUILDER_OPTIONS drei Elemente und Sie k?nnen die Seite "E-Mail-Builder-Core" nach einer vollst?ndigen Liste aller verfügbaren Optionen überprüfen.

Das erste Element -EncodespecialChars stellt sicher, dass alle Sonderzeichen in ihre numerische HTML -Form codiert werden.

E -MailTest -Element wird zum Einrichten von E -Mail -Tests verwendet. Es erfordert einige Parameter:

• E -Mail: Komma getrennte E -Mail -Adressen, an die wir Test -E -Mails senden. Ich habe ein Konto für jeden E -Mail -Dienst, der getestet werden muss (Google Mail, Outlook, Yahoo usw.), um sie schnell auf ihren Web -Mail -Seiten und mobilen Apps zu überprüfen.
• Betreff: Das Thema der E -Mail (Beachten Sie, dass ich die Variable Current_Date hinzugefügt habe, um schnell zu identifizieren, an welcher Version ich arbeite).
• Transport: Der Absender muss den Parameter
durchführen

Wenn Sie Google Mail als Transportparameter verwenden, müssen Sie in Ihren Google -Kontoeinstellungen "weniger sichere Apps zulassen" aktivieren, da die Sendungsaufgabe ansonsten fehlschl?gt (es ist besser, Ihr pers?nliches Konto dafür nicht zu verwenden):

Mit dem dritten Parameter k?nnen Sie Tests auf der Lackmus -Plattform einrichten (Sie ben?tigen natürlich ein Lackmuskonto). Sie müssen Ihre Kontoparameter, optionale Themen (die für gruppierte Tests verwendet werden, wenn Sie mehrere Tests durchführen) und eine Liste von E -Mail -Clients zum Testen verwendet werden.

Um einen Client hinzuzufügen, müssen Sie seinen verwenden, um den Anwendungscode zu testen. Sie k?nnen diesen Code aus dem Feld application_code der https://litmus.com/emails/clients.xml -Datei abrufen (beachten Sie, dass Sie angemeldet sein müssen, um auf diese Datei zuzugreifen).

im obigen Beispiel die Zeile

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Sagen Sie Litums, unsere E -Mails mit der Google Mail -App (Android), Google Mail (Explorer) und iPhone 5S (iOS7) zu testen.

Die Ergebnisse k?nnen auf Lackmus betrachtet werden, genau wie handgefertigte:

Wenn Sie nur E -Mail -Tests durchführen m?chten, k?nnen Sie den Lackmus -Parameter aus E -Mail_Builder_Options entfernen.

Die letzten paar Zeilen der Schlupffile erledigen alle Arbeiten:

• Wir haben Gulp zuerst mitgeteilt, dass wir unsere Arbeit mit der Datei explore_and_taste.html erledigen sollen (dies ist die von Codekit aus unserer Jade -Datei generierte HTML, die wir gerade für die erste Vorschau verwendet haben)
• Verwenden des Moduls Ersetzen Sie . Alle lokalen Pfade werden durch den Remote -Pfad ersetzt, den wir früher gesetzt haben
Führen Sie schlie?lich die E-Mail-Builder-Aufgabe aus, senden Sie den Test an Lackmus und E-Mail-Adresse und registrieren Sie die Datei für die sendende Sendung.

Links oder Style -Tags ohne Datenattribute werden
• eingeführt
• Wenn sie ein Daten-Emb-Attribut haben, werden die CSS-Regeln eingebettet
• Schlie?lich erm?glicht es Ihnen mit datenembedinterem Ignore einige CSS-Regeln nur für Entwicklungszwecke (sie werden bei der Verarbeitung ignoriert).

In ?hnlicher Weise vereinfacht Coda die Gulp -Verarbeitung und erm?glicht es Ihnen, die interne Anschlussanwendung zu verwenden:

Schlussfolgerung

Jetzt k?nnen wir endlich unseren Workflow verschieben:

Sie k?nnen jeden Schritt entsprechend Ihren Anforderungen anpassen, einen anderen Editor anstelle von Codekit verwenden, Grunzen anstelle von Gulp verwenden, Sass anstelle von weniger und mehr verwenden. Egal für welche Technologie Sie sich entscheiden, ein solcher Workflow kann Ihre Produktivit?t wirklich steigern.

Wenn Sie einen eigenen HTML -E -Mail -Workflow haben und wie er sich von denen unterscheidet, die in diesem Tutorial behandelt werden, lassen Sie es mich bitte in den Kommentaren wissen.

H?ufig gestellte Fragen zur HTML -E -Mail -Entwicklung

Was sind die Best Practices für die HTML -E -Mail -Entwicklung?

HTML-E-Mail-Entwicklung ist ein komplexer Prozess, der ein ausreichendes Verst?ndnis der Codierungs- und Designprinzipien erfordert. Zu den besten Verfahren geh?ren die Verwendung von Inline -CSS, um sicherzustellen, dass Ihr Stil korrekt angewendet wird. Verwenden von Tabellen zum Layout, um die Kompatibilit?t mit allen E -Mail -Clients zu gew?hrleisten, und das Testen Ihrer E -Mails auf mehreren Plattformen und Ger?ten, um sicherzustellen, dass sie überall alle gut aussehen. Darüber hinaus ist es wichtig, den Code pr?zise und ordentlich zu halten, Alt -Tags für Bilder zu verwenden und eine einfache Textversion der E -Mail für Benutzer hinzuzufügen, die HTML -E -Mails nicht anzeigen k?nnen oder nicht.

Wie lerne ich HTML -E -Mail -Entwicklung?

Es stehen viele Ressourcen zum Erlernen von HTML -E -Mail -Entwicklung zur Verfügung. Online -Kurse von Udemy und Skillshare k?nnen eine umfassende Einführung in das Thema bieten. Darüber hinaus k?nnen Blogs und Artikel auf SitePoint und E -Mail über S?ure wertvolle Tipps und Erkenntnisse bieten. Praxis ist auch kritisch - versuchen Sie, Ihre eigene E -Mail von Grund auf neu zu erstellen, um den Prozess zu verstehen.

Welche HTML -E -Mail -Entwicklungstools brauche ich?

HTML -E -Mail -Entwicklung erfordert einen Texteditor zum Schreiben von Code, einen E -Mail -Client zum Testen von E -Mails und m?glicherweise ein Design -Tool zum Erstellen von E -Mail -Layouts. Für diese Tools stehen viele kostenlose und bezahlte Optionen zur Verfügung, sodass Sie die ausw?hlen k?nnen, die Ihren Anforderungen und Ihrem Budget am besten entspricht.

Wie kann ich meine HTML -E -Mail -E -Mail reagieren?

Machen Sie Ihr HTML -E -Mail -Reaktionsmittel. Die Verwendung von Medienabfragen zum Anpassen Ihres Layouts basierend auf der Bildschirmgr??e des Ger?ts, das Sie Ihre E -Mail anzeigen. Dies kann das ?ndern der Bildgr??e, das Anpassen des Layouts der Tabelle usw. umfassen. Es sind viele Ressourcen online verfügbar, die Sie durch den Prozess führen.

Was sind einige h?ufige Herausforderungen in der HTML -E -Mail -Entwicklung?

Einige h?ufige Herausforderungen in der HTML -E -Mail -Entwicklung umfassen die Behandlung von Inkonsistenzen zwischen verschiedenen E -Mail -Kunden, um sicherzustellen, dass Ihre E -Mails auf einer Vielzahl von Ger?ten hervorragend aussehen und Ihren Code pr?zise und ordentlich halten. Darüber hinaus kann es schwierig sein, eine attraktive Designanforderung mit den Einschr?nkungen der E -Mail -Codierung auszubilden.

Wie teste ich meine HTML -E -Mail?

Testen Ihrer HTML -E -Mail ist ein wichtiger Bestandteil des Entwicklungsprozesses. Dies kann durch Senden einer E -Mail an sich selbst und anzeigen und auf verschiedenen Ger?ten und E -Mail -Clients angezeigt werden. Es gibt auch einige Online -Tools, mit denen verschiedene Ger?te und E -Mail -Clients für Sie simulieren k?nnen.

Wie verwendet ich Formulare in der HTML -E -Mail -Entwicklung?

Tabellen sind ein wichtiges Tool in der HTML -E -Mail -Entwicklung, da sie eine M?glichkeit bieten, Layouts zu erstellen, die mit allen E -Mail -Clients kompatibel sind. Dies beinhaltet das Erstellen einer gitterartigen Struktur für Ihre E-Mail mithilfe von HTML-Tabellen-Tags und dann Ihre Inhalte in dieser Struktur.

Wie verwendet ich Inline -CSS in der HTML -E -Mail -Entwicklung?

Inline CSS beinhaltet die Einfügung Ihrer CSS -Stile direkt in HTML -Tags und nicht in ein separates Stylesheet. Dies ist wichtig in der HTML -E -Mail -Entwicklung, da einige E -Mail -Kunden externe Stylesheets nicht unterstützen. Um Inline -CSS zu verwenden, fügen Sie einfach Ihren Stil in die Eigenschaft "Stil" des HTML -Tags auf.

Wie fügen Sie Bilder in meine HTML -E -Mail auf?

Bilder k?nnen in HTML -E -Mails aufgenommen werden, indem die URL des Bildes mit dem Tag "IMG" und des "SRC" -attributs angegeben wird. Es ist auch wichtig, ein "Alt" -Tribut hinzuzufügen, um Benutzern, die es nicht anzeigen k?nnen oder nicht m?chten, eine Textbeschreibung des Bildes bereitzustellen.

Wie erstelle ich eine einfache Textversion von HTML -E -Mail?

Erstellen einer einfachen Textversion einer HTML -E -Mail enth?lt das Entfernen aller HTML -Tags und das Verlassen von nur Textinhalten. Dies kann manuell erfolgen oder es gibt einige Online -Tools, die dies für Sie tun k?nnen. Klartextversionen, die E -Mails enthalten, sind wichtig für Benutzer, die es vorziehen, HTML -E -Mails nicht anzuzeigen.

Das obige ist der detaillierte Inhalt vonMein aktueller HTML -E -Mail -Entwicklungs -Workflow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!