So erstellen Sie eine benutzerdefinierte E-Mail mit Foundation for Emails

Das Erstellen von E-Mail-Vorlagen ist sehr schwierig. Noch schwieriger ist es, reaktionsfähige E-Mails zu erstellen. Glücklicherweise haben die netten Leute von Zurb ein fantastisches Framework entwickelt, das den Prozess der Erstellung responsiver E-Mails einfacher als je zuvor macht.

Grundlage für E-Mails (ehemals Ink) ist ein maßgeschneidertes Framework für moderne Designer/Entwickler, die die Tools und Technologien von heute nutzen möchten, um reaktionsfähige E-Mail-Vorlagen für morgen zu erstellen.

Die Zahlen lügen nicht

Laut Zurb werden 54 % der E-Mails auf einem mobilen Gerät geöffnet, und diese Zahl wird wahrscheinlich noch steigen. Angesichts dieser Zahl ist die Notwendigkeit einer responsiven E-Mail-Vorlage ein Muss. Zurb gibt außerdem an, dass 75 % der Gmail-Nutzer über ihr Mobilgerät auf ihr Konto zugreifen. Unabhängig von der Art der gesendeten E-Mail ist Foundation for Emails für Sie da. Sobald Sie den praktischen Projekt-Builder starten, werden Sie tatsächlich mit Beispielvorlagen begrüßt, auf die Sie entweder verweisen oder die Sie nach Herzenslust anpassen können.

Erste Schritte

In diesem Artikel werde ich Ihnen zeigen, wie Sie Foundation for Emails mithilfe einer benutzerdefinierten Vorlage, die ich für meine eigene kleine Markenagentur entworfen habe, zum Laufen bringen. Wie bei jedem Framework ist es unbedingt erforderlich, dass Sie darauf verweisen Dokumentation. Ich werde als Zurb nicht jedes Detail durchgehen hat schon Aber dieser Leitfaden wird ausreichen, damit Sie sofort durchstarten können.

Quellcode

Den endgültigen Quellcode für dieses Projekt finden Sie unter GitHub.

Installation

Zunächst können Sie sich für die Verwendung von herkömmlichem CSS oder Sass entscheiden. Ich werde Sass nutzen. Es gibt viele Gründe, warum ich diesen Weg im Gegensatz zu herkömmlichem CSS empfehle. Zu diesen Gründen gehören:

  • Mehr Kontrolle über die visuellen Stile des Frameworks
  • Ein vollständiger Build-Prozess einschließlich Sass-Kompilierung und Bildkomprimierung
  • Eine benutzerdefinierte HTML-Sprache namens Inky, die bedeutet, dass Sie tabellenbasierte Layouts nicht von Hand schreiben müssen.
  • Ein integrierter Inliner zum Verteilen Ihres CSS als Inline-CSS
  • Live-Nachladen
  • Lenkerschablonen

Notiz – Die Sass-Version erfordert Node.js laufen. Stellen Sie sicher, dass Sie es installieren, bevor Sie fortfahren.

Installieren Sie die Foundation CLI und erstellen Sie ein neues Projekt

Der Installationsprozess nutzt die Foundation CLI. Um es zu nutzen, öffnen Sie das Befehlszeilenprogramm Ihrer Wahl und geben Sie Folgendes ein: Bash $ npm install –globalfoundation-cli Wenn Sie auf Berechtigungsfehler stoßen, versuchen Sie, dem gleichen Befehl das Präfix voranzustellen Sudo. Sie werden aufgefordert, Ihr Systemkennwort einzugeben. Wenn die Foundation CLI installiert ist, können Sie jetzt ein leeres Foundation for Emails-Projekt erstellen. Stellen Sie sicher, dass Sie nach ( wechseln)cdinto) den Ordner, in dem Sie das Projekt installieren möchten, und führen Sie dann den folgenden Befehl aus: Bash $foundation new –framework emails Die CLI sollte Sie nach einem Projektnamen fragen (ich habe meinen genannt). Newsletter). Dieser Name ist der Ordner, als der das gesamte Projekt bezeichnet wird. Nachdem dies festgelegt wurde, werden eine Reihe von Abhängigkeiten installiert. (Der Download kann eine Weile dauern.) Sobald der Download abgeschlossen ist, sollte Folgendes angezeigt werden: Bash Du bist fertig! ✓ Neuer Projektordner erstellt. ✓ Knotenmodule installiert. ✓ Bower-Komponenten installiert. Führen Sie nun Foundation Watch aus, während Sie sich im Ordner befinden.

Lesen:  So erstellen Sie eine Börsen-Website, um ein Publikum anzusprechen

CD in Ihren Projektordner durch Eingabe CD-Newsletter. Der Name Ihres Projekts unterscheidet sich möglicherweise von meinem, aber wenn Sie mitmachen, sollten Sie startklar sein.

Ausführen des Servers und Kompilieren von Assets

Führen Sie im Terminal den folgenden Befehl aus: bash $ npm start Dadurch wird der zuvor erwähnte Build-Prozess gestartet. Der Build-Prozess analysiert HTML, kompiliert Sass, komprimiert Bilder und startet einen Server. Ihr Standardbrowser sollte einen neuen Tab öffnen index.html Datei von der Adresse von localhost:3000. Auf dieser Seite können Sie die Beispielvorlagen von Foundation for Emails besuchen, die mit der Installation gebündelt sind.

Beurteilung des Entwurfs

Nachdem Foundation for Emails installiert ist und unser Projekt auf dem vom Framework bereitgestellten Server ausgeführt wird, sind wir bereit, etwas tiefer in die Handhabung des unten gezeigten Designs einzutauchen.

Das Design ist größtenteils minimalistisch und enthält Platzhalterinhalte für eine E-Mail im Newsletter-Stil. In Zukunft werden wir Elemente innerhalb der Vorlage modifizieren, um Änderungen vorzunehmen. Es ist etwas praktischer als ein WYSIWYG-E-Mail-Builder wie zum Beispiel die Standard-MailChimp-Vorlagen, aber für ein individuelles Branding ist es die Zeit durchaus wert. Ich denke, die meisten Benutzer würden dem zustimmen. Sie könnten dies sicherlich erweitern, um den Editor in Mailchimp zu nutzen, aber das ist ein Thema für ein anderes Mal.

Frisch anfangen

Vorausgesetzt, Sie verwenden das Sass In der Version von Foundation for Emails ist Inky HTML im Lieferumfang enthalten, eine eigene Entwicklung. Dieser HTML-Code ist dafür verantwortlich, dass das Schreiben von Tabellen und erweiterten Tabellenlayouts zum Kinderspiel wird. Der Dokumentation für Foundation fro Emails ist der beste Ort, um alles über das benutzerdefinierte Inky-HTML zu erfahren, das Sie in Ihren eigenen Projekten verwenden können. Stellen Sie sicher, dass Sie häufig darauf zurückgreifen. Wir werden im Inneren arbeiten src Ordner in unserem Projektordner. Diese Dateien werden über angesehen gulp.js und einige enthaltene Plugins. Wenn Änderungen an unserem Vorlagencode und/oder Stilen vorgenommen werden, werden alle Dateien in der dist Ordner werden entsprechend aktualisiert. Ich werde nicht näher darauf eingehen, wie das alles funktioniert, aber ich erinnere mich, dass es mir wie Magie vorkam, als ich neu darin war!

Index

Die angezeigte Indexseite befindet sich darin src/layouts/index-layout.html. Stiftung für E-Mails nutzt Lenker Dadurch können Sie Vorlagen in einfachen HTML-Seiten erstellen. Sie können beispielsweise eine teilweise HTML-Datei erstellen, die dynamisch in eine andere Datei eingefügt wird. Beachten Sie das {{>Körper}} Etikett. Dank der im Framework verfügbaren HTML-Analyse wird letztendlich der gesamte Inhalt hier importiert.

Seiten

Jede Seite, die Sie darin sehen src/pages/ wird beim Ausführen zunächst angezeigt $ npm Start zum ersten Mal. Jede Seite ist eine Beispielvorlage von Zurb. Kopieren Sie den Inhalt von Newsletter.html und erstellen Sie eine neue Datei mit dem Namen branded-newsletter.html. Fügen Sie den Inhalt ein. Innerhalb dieser Datei erstellen wir die Markenvorlage, die ich zuvor geteilt habe. In der Datei sollten Sie viele fremdartig aussehende HTML-Tags sehen. Diese sind Teil von Inky HTML. Wenn Sie sie verwenden, müssen Sie Tabellenlayouts im Wesentlichen nicht mehr physisch codieren. (Sie können nicht verwenden divs innerhalb von E-Mails, wie Sie es auch auf Webseiten tun würden; Das Gleiche gilt für viele CSS-Eigenschaften.) Nachfolgend finden Sie eine kurze Übersicht über Tags, die wir am häufigsten verwenden werden:

  • – Ein Umhüllungselement mit einer festgelegten Breite.
  • – erforderlich zum Umschließen von Inhaltsspalten ähnlich einem schwebenden Raster auf Websites.
  • – wo die meisten Ihrer Inhalte gespeichert werden. Diese können mithilfe eines 12-Spalten-Layouts individuell angepasst werden. Sie verhalten sich wie ein schwebendes oder flexibles Div, beinhalten aber Tabellen.
  • – Erstellen Sie mithilfe von Tabellen ein Menü in einer HTML-E-Mail.
  • – Vertikaler Abstand für E-Mail-Vorlagen. Viele E-Mail-Clients berücksichtigen keine Ränder oder Auffüllungen über CSS. Das ist eine tolle Lösung dafür. Legen Sie eine beliebige Größe fest, indem Sie das Attribut wie folgt hinzufügen: .
  • – Erstellen Sie eine Schaltfläche mit Tabellen.

Zusätzlich zu diesen Tags gibt es zusätzliche CSS-Klassen, die Sie über Sass hinzufügen, anpassen und erweitern können.

Gerüst für die Newsletter-Vorlage

Der Kürze halber fasse ich den Codierungsprozess zusammen und zeige Ihnen den gesamten HTML-Code, bevor ich ihn formatiere. Dadurch kann ich eine Art Grundgerüst für die Vorlage erstellen und mich später um Stile kümmern. Unten ist der HTML-Code, den ich für das Design erhalten habe. Diese Vorlage lebt mit dem Seiten Verzeichnis und wird in das aufgenommen layouts/index-layout.html Datei, in der Sie die sehen {{> Körper}} Etikett.

html

E-Mail wird nicht richtig angezeigt? Klicken Sie hier

AKTUELLE ARBEITEN BLOG YOUTUBE< /item> ARBEITEN SIE MIT UNS

AUSGABE #100 29. MÄRZ 2017

Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.


Aktuelle Fallstudie

Wildwood Family Dentistry

Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Aus dem Blog

Dies ist eine Überschrift zu einem externen Link

Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec id elit non mi porta gravida at eget metus. < p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dies ist eine Überschrift zu einem externen Link

Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Sehen Sie sich unser neuestes Video an

Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Folgen Sie uns auf Instagram


Benötigen Sie Marketing? Stellen Sie dieses kreative Duo ein

Sie haben diese E-Mail erhalten, weil Sie sich für den Erhalt von Updates angemeldet haben von uns. Klicken Sie hier, um sich abzumelden.

Im HTML-Code sehen Sie viele der zuvor erwähnten benutzerdefinierten Tags. Das Abstandselement zum Beispiel nutze ich häufig, um vertikale Abstände zu schaffen. Ich mache das einfach, weil nicht alle E-Mail-Clients Margin und Padding berücksichtigen. Um den Aufwand zu sparen, hilft das Abstandselement ungemein.

Hinzufügen der Stile

Da ich die Sass-Version von Foundation for Emails verwende, kann ich Teildateien erstellen und diese in den Master importieren app.scss Datei, die im Gegenzug in die Datei kompiliert wird dist Ordner als app.css. Ich verwende eine Schriftart namens Ideal Sans. Leider kann ich es nur auf meiner angegebenen Domain verwenden, was bedeutet, dass Sie es nicht für die Überschriften auf Ihrer Seite verwenden können. Wenn Sie den Überschriften folgen, wird Arial als Ersatzschriftart für die Basisschrift verwendet. Die meisten Anpassungen, die Sie an den im Framework gebündelten Stilen vornehmen können, finden Sie in der Datei „assets/scss/_settings.scss“. Diese Datei verfügt über eine Vielzahl von Variablen, die Sie an Ihr eigenes Branding anpassen können. Zusätzlich zum Anpassen dieser Einstellungen habe ich einige eigene Teiltöne erstellt. Ich habe diese Dateien in die importiert app.scss Datei.

Reaktionsfähige E-Mails

Foundation for Emails bietet standardmäßige Unterstützung für responsive E-Mails. Verwendung des Pakets , Und Mit Tags können Sie im Wesentlichen die gleiche praktische Arbeit erledigen wie im Browser. Innerhalb Säulen Sie können bestimmte Klassen angeben, um ein 12-Spalten-Raster zu erstellen. Wenn ich zum Beispiel ein zweispaltiges Raster haben wollte, würde ich schreiben: html Column 1 Spalte 2 Basierend auf der Bildschirmgröße des Benutzers werden diese Spalten auf größeren Bildschirmen mit 50 % Breite und auf kleineren Bildschirmen mit 100 % Breite angezeigt. Wenn Sie mit gängigen CSS-Frameworks wie Bootstrap oder Foundation vertraut sind, sollte dies ziemlich einfach zu verstehen sein.

Verwendung von Bildern in E-Mails

Bilder müssen von einem Webserver unter Verwendung absoluter URL-Pfade und vorzugsweise von derselben Domäne geladen werden wie die E-Mail-Adresse der Person, die sie sendet. Wenn ich also eine E-Mail senden würde von [email protected] Für meine Abonnenten müssten die Bilder unter demselben Domainnamen webdesignerdepot.com leben. Dadurch wird die Wahrscheinlichkeit eliminiert, dass Ihre E-Mail fälschlicherweise in einen Spam-Ordner weitergeleitet wird, und es wirkt außerdem professioneller.

Alt-Tags sind ein Muss

Wenn Sie normalerweise keine Alt-Tags verwenden (ich weiß nicht, warum Sie das nicht tun würden), sind Sie sicher brauchen an in E-Mails. Viele E-Mail-Clients laden standardmäßig keine Bilder und die Entscheidung liegt beim Benutzer. Alt-Tags können helfen, das Bild zu beschreiben, bevor der Benutzer es überhaupt sieht. Dies ist sowohl großartig für die Zugänglichkeit als auch eine elegante Alternative für diejenigen, die kein Interesse daran haben, Bilder in die E-Mails zu laden, die sie erhalten.

Erstellung von Produktionsdateien und Tests

Bei produktionsbasierten E-Mails muss das CSS inline sein. Beim Inlining handelt es sich um den Prozess, bei dem die Stile auf dem Element selbst definiert werden, anstatt von einem externen Stylesheet aus zu verlinken. Foundation for Emails verfügt über eine praktische Build-Funktion, die dies für Sie erledigt. Die endgültigen Dateien werden im kompiliert und minimiert dist Ordner. Um Produktionsdateien zu erstellen, müssen Sie alle bereits laufenden Server durch Eingabe beenden Strg + C in Ihrem Terminalprogramm. Geben Sie dort Folgendes ein: Bash $ npm run build Wenn die E-Mail im Browser geöffnet wird, sollten Sie dasselbe sehen wie zuvor. Wenn Sie sich jedoch die Quelle der Seite genau ansehen, werden Sie ein Durcheinander von Code erkennen. Dies ist das Ergebnis des Build-Prozesses und, vorausgesetzt, alles sieht gut aus, ist es einsatzbereit.

Testen

Ich kann nicht genug betonen, wie wichtig es ist, auf so vielen E-Mail-Plattformen wie möglich zu testen. Ihr Design wird wahrscheinlich auf allen unterschiedlich aussehen, aber das Ziel besteht darin, eine Lösung zu schaffen, die auf den meisten Plattformen zumindest konsistent und lesbar aussieht. Sie können ein Tool namens verwenden Lackmus für diesen Test. Da ist ein kostenlose Version des Tools Damit können Sie Ihren Code kopieren und einfügen und eine E-Mail an sich selbst oder einen Kollegen senden. Führen Sie diesen Schritt unbedingt durch. Versendete E-Mails können natürlich nicht nachträglich bearbeitet werden.

Nützliche Links

Aktuelle Artikel:

Empfohlen