Der Aufbau von E-Mail-Vorlagen ist nicht schwer. Responsive E-Mails zu erstellen ist noch schwieriger.

Glücklicherweise haben die freundlichen Leute in Zurb ein fantastisches Framework entwickelt, das den Prozess der Erstellung von Responsive-E-Mails einfacher macht als je zuvor.

Grundlage für E-Mails (früher Ink) ist ein Framework, das für einen modernen Designer / Entwickler geeignet ist, der die Werkzeuge und Technologien von heute nutzen möchte, um Responsive E-Mail-Vorlagen für morgen zu erstellen.

Die Zahlen lügen nicht

Nach Angaben von Zurb werden 54% der E-Mails auf einem Mobilgerät geöffnet und diese Zahl wird voraussichtlich steigen. Mit dieser Zahl ist die Notwendigkeit einer Responsive E-Mail-Vorlage ein Muss. Darüber hinaus gibt Zurb an, dass 75% der Google Mail-Nutzer von ihrem Mobilgerät aus auf ihr Konto zugreifen.

Egal, welche Art von E-Mail gesendet wurde, Sie haben die Möglichkeit, sich für E-Mails zu registrieren. Sobald Sie den handlichen Projekt-Builder starten, werden Sie mit Beispielvorlagen begrüßt, die Sie entweder nachschlagen oder nach Herzenslust anpassen können.

Anfangen

In diesem Artikel zeige ich Ihnen, wie Sie mit Foundation for E-Mails eine benutzerdefinierte Vorlage erstellen, die ich für meine eigene kleine Branding-Agentur entworfen habe. Wie bei jedem Framework ist es unerlässlich, dass Sie auf die Dokumentation . Ich werde nicht jedes Detail als Zurb durchgehen hat schon aber dieser Führer wird genug sein, damit du den Boden rennst.

Quellcode

Sie können den endgültigen Quellcode zu diesem Projekt finden GitHub .

Installation

Um zu beginnen, können Sie sich dafür entscheiden, traditionell zu verwenden CSS oder Sass . Ich werde Gebrauch machen Sass .

Es gibt viele Gründe, warum ich diese Route im Gegensatz zu traditionellen empfehlen CSS . Diese Gründe umfassen:

  • Mehr Kontrolle über die visuellen Stile des Frameworks
  • Ein vollständiger Build-Prozess mit Sass-Kompilierung und Bildkomprimierung
  • Eine Gewohnheit HTML Sprache, die als Inky bekannt ist, was bedeutet, dass Sie Tabellen-basierte Layouts nicht von Hand schreiben müssen.
  • Ein integrierter Inliner zum Verteilen Ihres CSS als Inline-CSS
  • Live-Nachladen
  • Lenker Templating

Hinweis - Die Sass Version benötigt Node.js zu rennen. Stellen Sie sicher, dass Sie es installieren, bevor Sie fortfahren.

Installieren Sie das Foundation CLI und erstellen Sie ein neues Projekt

Der Installationsprozess verwendet das Foundation CLI. Um es zu verwenden, öffnen Sie das gewünschte Befehlszeilenprogramm und geben Sie Folgendes ein:

Bash $ npm install --global foundation-cli

Wenn Sie auf Berechtigungsfehler stoßen, versuchen Sie, denselben Befehl mit sudo zu versehen . Sie werden aufgefordert, Ihr Systempasswort einzugeben.

Wenn die Foundation CLI installiert ist, können Sie jetzt ein leeres Foundation for Emails-Projekt erstellen. Stellen Sie sicher, dass Sie in den Ordner ( cdinto ) wechseln, in dem Sie das Projekt installieren möchten, und führen Sie dann den folgenden Befehl aus:

Bash $ foundation new --framework emails

Das CLI sollte Sie nach einem Projektnamen fragen (ich nannte meinen Newsletter ). Dieser Name ist der Ordner, in dem das gesamte Projekt als bezeichnet wird. Danach wird eine Reihe von Abhängigkeiten installiert. (Das Herunterladen kann einige Zeit dauern.)

Sobald der Download abgeschlossen ist, sollten Sie Folgendes sehen:

Bash You’re all set!✓ New project folder created.✓ Node modules installed.✓ Bower components installed.Now run foundation watch while inside the  folder.

Wechseln Sie in Ihren Projektordner, indem Sie cd newsletter eingeben. Ihr Projektname kann im Vergleich zu meinem abweichen, aber wenn Sie mitkommen, sollten Sie sich auf den Weg machen.

Ausführen des Servers und Kompilieren von Assets

Führen Sie im Terminal den Befehl aus:

bash $ npm start

Dies wird den bereits erwähnten Build-Prozess auslösen. Der Build-Prozess wird HTML analysieren, Sass kompilieren, Bilder komprimieren und einen Server starten. Ihr Standardbrowser sollte einen neuen Tab öffnen, der Ihre index.html Datei von der Adresse von localhost: 3000 zeigt . Auf dieser Seite können Sie die Beispielvorlagen Foundation for Emails besuchen, die mit der Installation gebündelt sind.

Beurteilung des Designs

Mit Foundation for Emails und unserem Projekt, das auf dem vom Framework bereitgestellten Server ausgeführt wird, sind wir bereit, ein wenig tiefer in das unten gezeigte Design einzusteigen.

Co-E-Mails

Zum größten Teil ist das Design minimal mit Platzhalterinhalt für eine Newsletter-E-Mail. In Zukunft werden wir Elemente in der Vorlage ändern, um Änderungen vorzunehmen. Es ist ein bisschen mehr Hände als ein WYSIWYG-E-Mail-Builder wie die Standard-MailChimp Vorlagen zum Beispiel, aber aus Gründen der benutzerdefinierten Branding, ist es die Zeit wert. Ich denke, die meisten Benutzer würden zustimmen. Sie könnten dies sicherlich erweitern, um den Editor in Mailchimp zu verwenden, aber das ist ein Thema für ein anderes Mal.

Frisch starten

Vorausgesetzt, Sie verwenden die Sass- Version, wird Foundation for Emails mit Inky-HTML ausgeliefert, das eine eigene Kreation ist. Dieser HTML-Code ist dafür verantwortlich, das Schreiben von Tabellen und erweiterten Tabellenlayouts zum Kinderspiel zu machen.

Das Dokumentation for Foundation for E-Mails ist der beste Ort, um alles über das benutzerdefinierte Inky-HTML zu erfahren, das Sie in Ihren eigenen Projekten verwenden können. Achten Sie darauf, sich oft darauf zu beziehen.

Wir werden innerhalb der arbeiten src Ordner in unserem Projektordner. Diese Dateien werden über gulp.js und einige enthaltene Plugins angesehen. Wenn Änderungen an unserem Vorlagencode und / oder -stilen vorgenommen werden, werden alle Dateien im Ordner " dist " entsprechend aktualisiert. Ich werde nicht vertiefen, wie das alles funktioniert, aber ich erinnere mich, als ich neu war, schien es wie Magie!

Index

Die angezeigte Indexseite befindet sich in src / layouts / index-layout.html . Grundlage für E-Mails nutzt Lenker Das erlaubt Ihnen Templating innerhalb von Basic HTML Seiten. Zum Beispiel können Sie eine partielle erstellen HTML Datei, die dynamisch in eine andere Datei eingebunden wird.

Beachten Sie das Tag {{> body}} . Der gesamte Inhalt wird im Endeffekt dank des im Framework verfügbaren HTML-Parsers importiert.

Seiten

Jede Seite, die Sie in src / pages / sehen, wird zuerst angezeigt, wenn Sie $ npm start zum ersten Mal ausführen. Jede Seite ist eine Beispielvorlage von Zurb.

Kopieren Sie den Inhalt von newsletter.html und erstellen Sie eine neue Datei namens branded-newsletter.html . Fügen Sie den Inhalt hinein. In dieser Datei werden wir die Markenvorlage erstellen, die ich zuvor geteilt habe.

Innerhalb der Datei sollten Sie viele fremd aussehende HTML-Tags sehen. Diese sind Teil von Inky HTML. Im Wesentlichen, indem Sie sie verwenden, können Sie damit kommen, Tabellenlayouts nie physisch zu kodieren. (Sie können divs nicht innerhalb von E-Mails verwenden, wie Sie es bei Webseiten tun würden; dasselbe gilt für viele CSS Eigenschaften.)

Nachfolgend finden Sie einen kurzen Überblick über Tags, die wir am meisten nutzen werden:

  • - Ein Umhüllungselement, das eine festgelegte Breite hat.
  • - notwendig für das Umbrechen von Inhaltsspalten, die einem Floated Grid auf Websites ähneln.
  • - Wo die meisten Ihrer Inhalte leben werden. Diese können mithilfe eines 12-Spalten-Layouts angepasst werden. Sie verhalten sich wie ein schwebendes oder gebeugtes Div aber beziehen Tabellen ein.
  • - Erstellen Sie ein Menü innerhalb einer HTML-E-Mail mit Tabellen.
  • - vertikaler Abstand für E-Mail-Vorlagen. Viele E-Mail-Clients respektieren die Marge oder das Auffüllen über CSS nicht. Dies ist eine großartige 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üstbau der Newsletter-Vorlage

Der Kürze halber fasse ich den Codierungsprozess zusammen und zeige Ihnen das gesamte HTML, bevor ich es style. Dies ermöglicht mir, ein Gerüst von Arten für die Vorlage zu erstellen und sich später um Stile Gedanken zu machen. Unten ist das HTML Ich bin für das Design gelandet. Diese Vorlage lebt mit dem Seitenverzeichnis und wird in die Datei layouts / index-layout.html aufgenommen, in der das Tag {{> body}} angezeigt wird.

html

  

Email not displaying correctly? https://coupleofcreatives.com" class=logo>

KÜRZLICHE ARBEIT BLOG YOUTUBE ARBEITE MIT UNS

MARCH 29, 2017 AUSGABE # 100 29. März 2017

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


Jüngste Fallstudie

Screenshot einer Fallstudie für Wildwood Family Dentistry von einem Paar Kreativen

Wildwood Familienzahnheilkunde

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

Von dem Blog

Dies ist eine Überschrift zu einer externen Verbindung

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

Donec id elit nicht mi porta gravida bei eget metus.

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

Dies ist eine Überschrift zu einer externen Verbindung

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


Sehen Sie sich unser letztes Video an

Ein Standbild von ein paar Motiven während eines Videodrehs

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


Folge uns auf Instagram

Instragram-Fotos eines Paares von Motiven

Brauchen Sie Marketing? Mieten Sie dieses kreative Duo

Du hast diese E-Mail erhalten, weil du angemeldet bist, um Updates von uns zu erhalten. Klicken Sie zum Abbestellen hier.

Innerhalb der HTML Sie werden eine Menge der zuvor erwähnten benutzerdefinierten Tags sehen. Das spacer Zum Beispiel verwende ich viel, um vertikale Abstände zu erzeugen. Ich tue dies einfach, weil nicht alle E-Mail-Clients Rand und Auffüllen respektieren. Um den Aufwand zu sparen, hilft das Spacer-Element enorm.

Hinzufügen der Stile

Da ich die Sass-Version von Foundation for Emails nutze, kann ich Partials erstellen und diese in die Master- App.scss- Datei importieren , die im Gegenzug als app.css in den Dist- Ordner kompiliert wird .

Ich benutze eine Schriftart namens Ideale Sans . Leider kann ich es nur auf meiner angegebenen Domain verwenden, was bedeutet, dass Sie es nicht für die Überschriften an Ihrem Ende verwenden können. Wenn Sie den Überschriften folgen, wird Arial als Fallback für die Basisschriftart verwendet.

Die meisten Anpassungen, die Sie an den im Framework enthaltenen Stilen vornehmen können, finden Sie in der assets/scss/_settings.scss . Diese Datei enthält eine Vielzahl von Variablen, die so angepasst werden können, dass sie zu Ihrem eigenen Branding passen.

Zusätzlich zum Anpassen dieser Einstellungen habe ich einige eigene Teiltöne erstellt. Ich habe diese Dateien in die app.scss- Datei importiert.

Responsive E-Mails

Foundation for E-Mails bietet Support für E-Mails, die sofort einsatzbereit sind. Das gebündelte verwenden , und Tags können Sie im Wesentlichen die gleiche praktische Arbeit wie im Browser tun. Innerhalb von Spalten können Sie bestimmte Klassen angeben, um ein 12-Spalten-Raster zu erstellen. Zum Beispiel, wenn ich ein zweispaltiges Raster haben wollte, würde ich schreiben:

html    Column 1   Column 2   

Basierend auf der Bildschirmgröße des Benutzers werden diese Spalten bei größeren Bildschirmen mit 50% Breite und bei kleineren Bildschirmen mit 100% Breite angezeigt. Wenn Sie mit gängigen CSS-Frameworks wie Bootstrap oder Foundation vertraut sind, sollte das ziemlich einfach zu verstehen sein.

Verwenden von Bildern in E-Mails

Bilder müssen von einem Webserver unter Verwendung von absoluten URL-Pfaden geladen werden und vorzugsweise von der gleichen Domäne wie die E-Mail der Person, die sie sendet. Also wenn ich eine E-Mail von senden würde [E-Mail geschützt] {$lang_domain} Für meine Abonnenten müssten die Bilder unter dem gleichen leben {$lang_domain} Domainname.

Dadurch entfällt die Wahrscheinlichkeit, dass Ihre E-Mail-Adresse in einen Spam-Ordner verschoben wird, und es erscheint auch professioneller.

Alt Tags sind ein Muss

Wenn Sie normalerweise nicht alt-Tags verwenden (ich weiß nicht, warum Sie das nicht tun würden), müssen Sie das in E-Mails tun. Viele E-Mail-Clients laden Bilder standardmäßig nicht, und es liegt beim Benutzer. Mithilfe von Alt-Tags kann das Bild beschrieben werden, bevor der Benutzer es überhaupt sieht. Dies ist sowohl für die Barrierefreiheit als auch für den Fallback geeignet, wenn Sie keine Bilder in die E-Mails laden möchten.

Erstellen von Produktionsdateien und Testen

Bei produktionsbasierten E-Mails muss das CSS inline sein. Inlining ist der Prozess des Definierens der Stile auf dem Element selbst, anstatt von einem externen Stylesheet zu verknüpfen. Foundation for E-Mails hat eine praktische Build-Funktion, die das für Sie erledigt. Die endgültigen Dateien werden im Ordner " dist " kompiliert und minimiert.

Um Produktionsdateien zu erstellen, sollten Sie alle bereits laufenden Server beenden , indem Sie in Ihrem Terminalprogramm ctrl + c eingeben. Von dort geben Sie ein:

Bash $ npm run build

Wenn die E-Mail im Browser geöffnet wird, sollten Sie dasselbe sehen wie zuvor. Aber, wenn Sie die Quelle der Seite genau betrachten, sehen Sie eine Verwirrung des Codes. Dies ist das Ergebnis des Build-Prozesses und vorausgesetzt, alles sieht gut aus, ist bereit, in freier Wildbahn zu verwenden.

verkleinerter Code

Testen

Ich kann nicht genug betonen, wie wichtig es ist, auf so vielen E-Mail-Plattformen zu testen, wie Sie können. Ihr Design wird wahrscheinlich bei allen unterschiedlich aussehen, aber das Ziel besteht darin, eine Lösung zu erstellen, die auf den meisten Plattformen zumindest konsistent und lesbar aussieht.

Sie können ein Werkzeug namens aufrufen 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 an Kollegen senden. Stellen Sie sicher, diesen Schritt zu tun. E-Mails, die offensichtlich gesendet werden, können nicht nachträglich bearbeitet werden.

Nützliche Links