Mein aktueller HTML -E -Mail -Entwicklungs -Workflow

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

hinzufügen

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.

<code class="language-html"><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>></code>

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

<code class="language-jade">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</code>

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.

Mit

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:

<code class="language-html"><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>></code>

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

<code class="language-html"><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>></code>

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.

Wo ist die CSS -Datei?

E -Mail -Builder vereinfacht diese Aufgabe wirklich. Sie können sie verwalten, indem Sie Links oder Style -Tags einfach Datenattribute hinzufügen:

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!