Share
In diesem Tutorial werfen wir einen ersten Blick auf das Fundament für E-Mails von ZURB. Wir werden das Setup einrichten, erklären, was im Paket enthalten ist, und dann eine einfache, reaktionsfähige E-Mail erstellen.
Wir haben einen umfassenden Leitfaden erstellt, der Sie beim Erlernen der Grundlagen unterstützen soll, unabhängig davon, ob Sie gerade erst anfangen oder fortgeschrittenere Themen kennenlernen möchten Lernen Sie die Stiftung.
Im letzten halben Jahr habe ich ein paar kennengelernt Rahmenbedingungen und Heizplatten zum Erstellen von HTML-E-Mails. Vor diesen Tools war die eigentliche Entwicklung immer schwierig zu testen und zu beheben, ganz zu schweigen von der Reaktionsfähigkeit der E-Mails.
Das Verschlüsseln von HTML-E-Mails unterscheidet sich wesentlich von der Erstellung einer normalen Webseite. Es ist wie eine Zeitreise in das Jahr 1999. Wir müssen tabellenbasierte Layouts und Inline-Styles verwenden und Clients wie Desktop-Apps (Thunderbird, Outlook) und Webmails (Gmail, Yahoo) beherbergen..
Um dieses Rätsel zu lösen und zuverlässige Ergebnisse zu erzielen, haben wir zwei Möglichkeiten:
In diesem Tutorial werden wir uns offensichtlich für die zweite Option entscheiden.
Die ZURB E-Mail Stapel bietet eine Komplettlösung für das Erstellen von E-Mails.
Es besteht aus:
Foundation for Emails überwacht, wie Sie kodieren, kompilieren, einbetten und dann das Ergebnis für die Produktion minimieren. Es wurde in vielen Desktop- und mobilen Apps umfassend getestet. Eine vollständige Liste der unterstützten Funktionen finden Sie im Abschnitt zur Kompatibilität. Sie können auch auf den offiziellen Leitfaden verweisen, wenn Sie mit dem Framework beginnen.
Für diesen gesamten Prozess verwende ich Windows 10, die 64-Bit-Version. Wenn Sie ein anderes System verwenden, können Sie immer noch folgen.
Der Stack arbeitet mit Node.js und seinem Paketmanager npm. Um Foundation für E-Mails zu installieren, öffnen wir unser Terminal und verwenden dann den Befehl:
npm install --global foundation-cli
Dann ändern wir das Verzeichnis in ein Projektverzeichnis (wo auch immer Sie dieses Projekt ausführen möchten) cd [Projektordnerpfad]. Im Projektverzeichnis sollte der nächste Befehl lauten:
neue E-Mails für das Framework erstellen
Sie werden gefragt: Wie heißt das Projekt? (keine Leerzeichen) “, an diesem Punkt geben Sie einen Projektnamen ein, drücken Sie die Eingabetaste und lehnen Sie sich einen Moment zurück, während die Projektabhängigkeiten installiert werden.
Jetzt werden alle Projektdateien eingerichtet, die Knotenmodule installiert und die Bower-Komponenten installiert. Um das Framework und den Server zu starten, wechseln Sie in den Projektordner und verwenden Sie den Befehl:
Fundamentuhr
Die Standard-Webadresse (normalerweise http: // localhost: 3000 /) wird direkt in Ihrem Browser geöffnet, sobald Sie dies tun. Sie sehen eine brandneue E-Mail-Vorlage, die sofort einsatzbereit ist:
In Ihrem Projektordner finden Sie (ua) a src Mappe. In diesem Ordner finden Sie:
Accentsconagua
Vermögenswerte, Stile und BilderLayouts, Wrapper-LayoutsSeiten, Basis-HTML-Codespartials, wiederverwendbare HTML-TeileDie Indexseite finden Sie hier: src / pages / index.html
Hinweis: Wenn Sie mit Node.js nicht vertraut sind, sollten Sie unseren Anfängerleitfaden lesen, um zu verdeutlichen, was wir tun:
Die Stiftung verwendet ein zwölfspaltiges Gitter. Es ist erwähnenswert, dass der horizontale Platz in einer E-Mail normalerweise eng ist, zumal so viele E-Mails auf das Handy verschoben wurden. Daher ist es ratsam, nur eine oder zwei Spalten zu verwenden. Weitere Best Practices finden Sie in der folgenden Anleitung:
Foundation for Emails verwendet Inky, seine eigene neue Templatiersprache, mit der das komplexe Markup entfernt werden soll, das Tabellen unweigerlich verursachen. Dies sind die Inky-Tags, die uns beim Markieren der Gitter helfen:
|
Wir können auch die Größe des Gitters mit den Attributen angeben klein und groß.
Dies ist ein Abschnitt mit einer Spalte.
|
Spalte eins
Dieses einfache Markup gibt uns beim Kompilieren Folgendes:
|
Dieses separate Beispiel ist eine zweispaltige Zeile (jede Spalte wird an kleinen Haltepunkten auf 12 cm reduziert und bleibt für 6 cm breit)..
|
Spalte eins Spalte zwei
Im Wesentlichen verwenden wir eine
Jetzt verstehen wir die grundlegende Verwendung von Inky. Ändern wir den E-Mail-Betreff. Im pages / index.html Wir können die folgenden Details am Kopf des Dokuments ändern. Wenn Sie YAML verwendet haben, sind Sie möglicherweise mit dieser Form von "Front Matter" vertraut:
--- Betreff: Cake Poker Summer Tournament ---
Zum Einfügen eines Logobildes verwenden wir Standard-HTML
Ich fügte dann ein paar weitere Zeilen innerhalb der hinzu
|
Unser lieber Pokerfan! Wir haben Neuigkeiten für Sie: Die Sommermeisterschaft steht vor der Tür. Wenn Sie teilnehmen möchten, registrieren Sie sich bitte vor dem 5. Juni!
|
Der Hauptpreis ist 1 Million Euro und Lebensdauer 10% Online-Rakeback!
Ich habe ein weiteres Bild über die Turnierstadt hinzugefügt, wieder relativ zum Dokument.
Beachten Sie die
Der Detailbereich ist etwas ausführlicher und enthält weitere Informationen zur Veranstaltung. Für diesen Abschnitt habe ich zwei Spalten pro Zeile verwendet, von denen jede einen bestimmten Teil erläutert. Auf mobilen Bildschirmen wird jede Hälfte wieder zu einer Spalte zusammengefasst.
|
Details zum Turnier
|
London, königliche Halle der Spieler
Der perfekte Ort für eine moderne Pokermeisterschaft.
|
Markuee Hotel
Nahe gelegene 4-Sterne-****-Unterkunft mit vollem Service und gutem Essen.
|
Massage
Ein kostenloser Service für alle Turnierspieler.
|
Buy-In
500 + 50 GBP
Schließlich fügte ich hinzu: a Registrieren Taste zur Anmeldung. Ich habe das zur Verfügung gestellt Komponente, zentrieren Sie es mit der
Beim Erstellen und Ändern von Elementen wird Ihr Projekt im Browser ständig aktualisiert. Den kompilierten Code finden Sie im Projekt dist Verzeichnis, wobei die Hauptdateien sind index.html und css / app.css.
Wenn wir mit dem, was wir haben, zufrieden sind, können wir diesen Befehl verwenden, um den Code in Stile zu integrieren und das Ganze zu komprimieren:
npm run build
Nach dem Erstellungsprozess finden Sie das, was Sie in der dist Der Ordner ist eine fertige Version, die für die Produktion geeignet ist, aber sicherlich nicht für die Bearbeitung geeignet ist!
Sie haben Ihre erste Sitzung abgeschlossen und eine responsive HTML-E-Mail mit dem Foundation for Emails-Framework erstellt! Wir haben ein einfaches Layout mit ein- und zweispaltigen Zeilen, Bildern, Rich Text und einem erstellt Registrieren Taste am Ende.
Schauen Sie sich die E-Mail-Vorlagen auf Envato Market an. Vielleicht entwerfen, bauen und dann selbst einreichen!
