So verwenden Sie das Foundation for Emails Framework, um responsive E-Mail-Designs zu erstellen

Es gibt viele Marketing-Tools, mit denen Sie mit Leichtigkeit responsive E-Mail-Designs erstellen können. Die Sache ist die, Sie könnten es vorziehen, mehr Kontrolle darüber zu haben, wie Ihre E-Mails aussehen, und der beste Weg, dies zu tun, besteht darin, sie von Grund auf neu zu gestalten. Die Verwendung eines Frameworks wie Foundation for Emails bietet Ihnen einen hervorragenden Kompromiss. Sie müssen nicht jede einzelne Komponente von Grund auf neu entwerfen, aber Sie haben die volle Kontrolle darüber, wie, wann und wo sie verwendet werden.

In diesem Artikel erklären wir zunächst, was E-Mail-Frameworks sind und wie sie Ihnen helfen können. Anschließend besprechen wir Foundation for Emails und wie Sie damit Ihre eigenen benutzerdefinierten, responsiven E-Mail-Kampagnen erstellen können. Lass uns zur Arbeit gehen!

Was E-Mail-Frameworks sind (und wie sie Ihnen helfen können, bessere E-Mails zu erstellen)

Frameworks erfordern immer noch einige Codierung, aber der Prozess ist für E-Mails sehr einfach.

Im Allgemeinen ist ein Framework eine Zusammenstellung von Praktiken, Dateien und Code, die bei der Entwicklung bestimmter Produkttypen helfen sollen. Betrachten Sie sie als Bausteine ​​des Codes, mit denen Sie komplexe Projekte schneller erstellen können, da Sie das Rad nicht jedes Mal neu erfinden müssen.

Es gibt auch Frameworks für E-Mail, und darüber werden wir in diesem Artikel sprechen. Lassen Sie uns einige der Vorteile untersuchen:

• Vorgefertigte Elemente helfen Ihnen, E-Mails schneller zu gestalten. Heutzutage enthalten die meisten E-Mails Elemente, die über Bilder und Text hinausgehen, wie Schaltflächen und Menüs. Das Einbinden dieser Elemente kann zeitaufwändig sein, aber ein Framework ermöglicht es Ihnen, sie sofort einzufügen und anzupassen.
• Responsive out of the box. Da immer mehr Menschen mobile Geräte verwenden, müssen Sie sicherstellen, dass Ihre E-Mails auf ihren Bildschirmen gut angezeigt werden. Die meisten modernen Frameworks reagieren standardmäßig, was bedeutet, dass Sie sich um eine Sache weniger kümmern müssen.
• Vorlagen können Ihnen dabei helfen, Ihre Designs anzukurbeln. Viele moderne E-Mail-Frameworks enthalten eine Vielzahl von Vorlagen, mit denen Sie Kampagnen schnell erstellen können.

Wie Sie sehen, ist das gemeinsame Thema hier, dass Sie mit Frameworks Zeit sparen können. Es gibt viele Fälle, in denen Sie Ihre Projekte von Grund auf neu programmieren möchten, aber es lohnt sich, ein Framework zu verwenden, mit dem Sie Dinge schneller und in höherer Qualität erledigen können.

Eine Einführung in das Foundation for Emails Framework

Bevor Sie fortfahren, ist es wichtig zu beachten, dass zwei Foundation-Frameworks online verfügbar sind – Foundation for Sites und Foundation for Emails – und wir werden uns in diesem Artikel auf Letzteres konzentrieren. Das Hauptverkaufsargument ist das reaktionsschnelle Raster. Diese Art von System ist nicht revolutionär, aber die Popularität von Foundation basiert auf seiner Benutzerfreundlichkeit.

Der Einstieg in das Framework ist recht einfach (auch wenn Sie keine Programmiererfahrung haben) und Sie können zwischen zwei Versionen wählen – eine basierend auf Cascading Stylesheets (CSS) und die andere auf Sass. Natürlich können Sie die Sass - Version noch mehr Zeit sparen , indem die Notwendigkeit beseitigt CSS Stylings zu wiederholen, aber es hat eine gewisse Vertrautheit erfordern mit Node.js.

Schließlich bietet Ihnen Foundation for Email auch viele 'Muster' wie Schaltflächen und Menüs, um Ihre Arbeit noch einfacher zu machen. Um mehr Zeit zu sparen, können Sie sogar eine Vorlage verwenden, anstatt ein Layout von Grund auf neu zu entwerfen.

Hauptmerkmale:

• Verwendet ein responsives Raster, um moderne E-Mail-Kampagnen zu erstellen.
• Bietet entweder eine CSS- oder Sass-Version des Frameworks.
• Ermöglicht es Ihnen, Muster zu nutzen, um Ihren E-Mails schnell gemeinsame Elemente hinzuzufügen.
• Verwendet Layouts, um den E-Mail-Erstellungsprozess noch weiter zu rationalisieren.

Preis: Kostenlos | Mehr Informationen

So verwenden Sie Foundation for E-Mails, um moderne Designs zu erstellen (in 4 Schritten)

Wie bereits erwähnt, gibt es zwei Versionen von Foundation for Emails. Für diesen Abschnitt verwenden wir die CSS-Variante, da die Einrichtung weniger Arbeit erfordert. Außerdem sollten die Endergebnisse gleich aussehen – alles, was sich ändert, ist, wie Sie dorthin gelangen.

Wenn Sie die Sass-Version in Aktion sehen oder mehr über ihre Verwendung erfahren möchten, können Sie mit diesem großartigen Tutorial beginnen.

Schritt 1: Laden Sie die Foundation für E-Mail-Dateien herunter

Rufen Sie zunächst die Seite Foundation for Email Getting Started auf und klicken Sie auf die Schaltfläche Download Starter Kit unter der Unterüberschrift CSS-Version :

Sobald Sie die Datei erhalten haben, entpacken Sie sie und extrahieren Sie ihren Inhalt in einen neuen Ordner. Zu diesem Zeitpunkt sollte Ihr Ordner eine index.html- Datei und zwei Unterordner enthalten – einen für Ihr CSS und einen für Ihre Vorlagen.

Führen Sie zunächst Ihren bevorzugten Texteditor aus und öffnen Sie damit die Datei index.html . Es sollte ziemlich kahl sein, aber wir werden das gleich beheben.

Schritt #2: Machen Sie sich mit dem Grid-System vertraut

Die Reaktionsfähigkeit von Foundation for Email basiert auf seinem flexiblen Grid-System. Wenn Sie eine E-Mail von Grund auf neu zusammenstellen, sollten Sie Ihr eigenes Raster erstellen, um die Abschnitte Ihrer E-Mail zu segmentieren. Dazu verwenden wir drei verschiedene Komponenten: Container, Zeilen und Spalten.

Öffnen Sie Ihre Stiftung Datei index.html in Ihrem Texteditor und scrollen Sie zum Körperabschnitt:

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

Wie Sie sehen, enthält der Text Ihrer E-Mail eine voreingestellte Tabelle, auf die wir nicht eingehen werden. Stattdessen fügen wir einfach unsere eigenen Rasterelemente zu dem Abschnitt hinzu, in dem es steht <!– Ihr Raster geht hier –> . Beginnen wir mit dem Code, den Sie für Ihre Container verwenden müssen:

<table class="container">
<tr>
<td></td>
</tr>
</table>

Nun fügen wir dort eine Zeile hinzu:

<table class="row"> <tr> <th></th> </tr> </table> 

Schließlich können wir diese Zeile in Spalten aufteilen:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Beachten Sie, dass jede Zeile aus bis zu 12 Spalten besteht. Der obige Code teilt Ihrem E-Mail-Client mit, dass er Ihren Inhalt mit den vollen 12 Spalten auf kleinen Bildschirmen wie mobilen Geräten ( klein-12 ) anzeigen soll, aber nur sechs auf Desktops ( groß-6 ).

Das Problem ist, wenn Ihre E-Mail auf einem großen Bildschirm angezeigt wird, gibt es sechs leere Spalten, daher müssen wir eine zweite Tabelle hinzufügen, um das Problem zu beheben:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

Wie Sie sehen können, sind beide Spalten im Grunde gleich. Sie haben jedoch zwei verschiedene Klassen, erste Spalten und letzte Spalten . Diese teilen Ihrem E-Mail-Client mit, welche die erste und letzte Spalte in Ihrer Zeile sind, und alle Spalten dazwischen müssen sie nicht verwenden.

Wenn Sie jetzt Ihre index.html- Datei in einem Browser öffnen würden, sehen Sie Folgendes:

Es ist ziemlich kahl, ja, aber die Mechanik sollte zu diesem Zeitpunkt offensichtlich sein. Jede E-Mail kann so viele Zeilen haben, wie Sie möchten, und Sie können bis zu 12 Spalten für jede Zeile haben. Spielen Sie vorerst mit dem Rastersystem herum, bis Sie ein Layout gefunden haben, das Ihnen gefällt, und verwenden Sie Textplatzhalter, um sie zu identifizieren, bis Sie mit dem Hinzufügen von Elementen beginnen.

Schritt #3: Komponenten zu Ihren E-Mails hinzufügen

Grundlage für E-Mail-Pakete sind viele Komponenten, und die am häufigsten verwendeten sind Schaltflächen, Hintergrundbilder und Unterüberschriften. Sie sind ziemlich einfach, also gehen wir sie der Reihe nach durch. Um Schaltflächen hinzuzufügen, müssen Sie den folgenden Code in einer oder mehreren Ihrer Spalten verwenden:

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

Dieser Code fügt Ihrer E-Mail eine einfache kleine Schaltfläche mit grünem Hintergrund hinzu. Die Schlüsselelemente sind hier die Klassen Tiny und Success . Der erste bestimmt die Größe Ihres Buttons und der zweite seine Farbe. Anstatt alle verfügbaren Klassen hier hinzuzufügen, verlinken wir Sie zu den offiziellen Ressourcen der Foundation zu Schaltflächen, wo Sie sie in Ruhe durchlesen können.

Kommen wir nun zu den Hintergrundbildern. Diese sind etwas kniffliger, da Sie die Wrapper- Klasse verwenden müssen, damit sie die gesamte Breite Ihrer Zeile einnehmen und ihnen mithilfe von CSS einen bestimmten Hintergrund zuweisen:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

Lassen Sie uns zu guter Letzt über Zwischenüberschriften sprechen. Dies sind die einfachsten von allen – alles, was Sie tun müssen, ist, Ihren Text in die erforderlichen Tags einzufügen:

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

So einfach geht's! Die Verwendung dieser drei Elemente reicht aus, um einige gut aussehende E-Mails zu erstellen. Das Geheimnis besteht natürlich darin, sie nach Herzenslust mit CSS zu stylen, was uns zum letzten Schritt bringt.

Schritt #4: Gestalten Sie Ihre E-Mail mit CSS

Einige E-Mail-Clients (wie Microsoft Outlook) entfernen einige der Style-Tags aus Ihren HTML-Dateien. Dies geschieht, damit E-Mails problemlos gerendert werden und potenzielle Sicherheitsbedrohungen entfernt werden. Das Ergebnis ist jedoch, dass Ihre E-Mails ziemlich langweilig aussehen, es sei denn, Sie fügen Ihr CSS direkt in Ihren HTML-Code ein (oder inline ).

Auf diese Weise werden sowohl Ihr Inhalt als auch sein Stil als eine einzige Datei geladen und sollten auf den meisten modernen E-Mail-Clients perfekt funktionieren. So sieht ein HTML-Element mit eingebettetem CSS aus:

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Dies kann etwas chaotisch werden, daher empfehlen wir Ihnen, Ihre HTML- und CSS-Dateien separat zu bearbeiten und sie dann mit einem Tool wie dem Foundation Inliner für Sie zu kombinieren. Fügen Sie einfach Ihren Code ein, klicken Sie auf eine Schaltfläche und alles andere wird für Sie erledigt.

Sobald Sie Ihre eingebettete HTML-Datei haben, können Sie sie mit einem E-Mail-Marketing-Tool testen, was immer eine gute Idee ist, bevor Sie sie an Ihre Abonnenten senden.

Abschluss

Es gibt viele Möglichkeiten, funktionale und reaktionsschnelle E-Mails zu erstellen. Die Verwendung eines Frameworks wie Foundation for Emails ist jedoch eine großartige Option, wenn Sie nach Flexibilität suchen. Es ermöglicht Ihnen, E-Mails entweder von Grund auf mit vorgefertigten Komponenten zu entwerfen oder den Prozess mithilfe von Vorlagen zu beschleunigen. Unabhängig davon, wofür Sie sich entscheiden, sollte es Ihre Zeit für das Erstellen von E-Mails drastisch reduzieren.

Um es noch einmal zusammenzufassen, hier sind die vier Schritte, die Sie zum Erstellen moderner E-Mails mit Foundation for Emails benötigen:

1. Laden Sie die Dateien des Frameworks herunter.
2. Machen Sie sich mit dem Rastersystem vertraut.
3. Verwenden Sie Komponenten für Ihre E-Mails.
4. Gestalten Sie Ihre E-Mails mit CSS.

Haben Sie Fragen zur Verwendung des Foundation for Emails-Frameworks? Fragen Sie in den Kommentaren unten!

Miniaturansicht des Artikels von Faberr Ink / shutterstock.com.