9 Tricks zur Gestaltung des Perfect HTML-Newsletters

Ein E-Mail-Newsletter ist der perfekte Weg, um mit Ihren Kunden oder Followern in Kontakt zu bleiben. In Ihrem Unternehmen oder auf Ihrer Website finden Sie häufig zahlreiche Produktaktualisierungen oder möglicherweise bevorstehende Ereignisse, die Sie mit anderen teilen möchten. Es ist immer möglich, neue Informationen in Ihrem Blog oder Ihren Social-Media-Streams zu veröffentlichen, aber Ihr Publikum kann nur so weit gehen, um Sie zu erreichen. In diesem Fall ist E-Mail sicherlich keine tote Technologie, sondern ein ungenutztes Potenzial.

Das Erstellen und Versenden eines Newsletters ist viel einfacher als man denkt, aber eine eigene Vorlage zu entwerfen und eigenen Code zu erstellen, kann etwas länger dauern.

Wir haben einige fantastische Tipps zusammengestellt, mit denen Sie qualitativ hochwertige HTML-Newsletter gestalten können, wie Sie sie noch nie zuvor gesehen haben. Selbst wenn Sie ein Neuling dieses Themas sind, werden Sie sicherlich einige unschätzbare Informationen finden, um den Einstieg in den E-Mail-Marketingprozess zu erleichtern.

Ziele eines Newsletters

Bevor wir uns mit den Designaspekten beschäftigen, sollten wir Ihren Zweck zum Erstellen eines Newsletters klären. Je nach Art der Website, die Sie betreiben, können die in Ihrem Newsletter enthaltenen Informationen erheblich von den anderen abweichen, jedoch der Kernzweck eines Newsletters ist es, bequeme Updates direkt in den Posteingang Ihres Lesers zu bringen.

Starke Internetnutzer checken ihre E-Mails wahrscheinlich mehr als zweimal am Tag. Sogar diejenigen, die ständig beschäftigt sind, werden sich mindestens einmal am Tag Zeit nehmen, ihre Botschaften durchzugehen. Dies ist die perfekte Zeit dazu Aufmerksamkeit erregen auch ohne Besuch Ihrer Website. Auch wenn niemand durch Ihre Links klickt, ist dies die Information noch erhalten, Das ist großartig, um einen Markennamen aufzubauen.

Berücksichtigen Sie einige der Themen, die Sie in Ihrem Design anbieten müssen. Enthalten Sie Links, um sich für Ihren Dienst anzumelden? möglicherweise Blog-Links oder kürzlich veröffentlichte Artikel auf Ihrer Website? Das Layout Ihres Newsletters zeigt, wie Sie von Ihren Lesern eine Antwort wünschen, aber letztendlich möchten Sie Interesse wecken und interessante Informationen an die breite Masse weitergeben.

1. Verwenden Sie Tabellen in Ihren Layouts

Dies scheint ein wenig widersprüchlich zu den heutigen modernen Webstandards zu sein, aber E-Mails sind in ihren Rendering-Engines immer noch archaisch, daher müssen Sie auf ältere Modelle aufbauen. Tische sind leider der einfachste Weg Damit alles unter den verschiedenen E-Mail-Clients funktioniert. Abhängig von Ihrem Wissen über das Erstellen tabellenbasierter Layouts kann dies tatsächlich eine gute Nachricht sein!

Sie fragen sich vielleicht auch warum div und andere Blockelemente sind keine so gute Idee. Die meisten E-Mail-Clients sind gebaut, um alle überflüssigen CSS zu entfernen Inhalt. Dies bedeutet, dass Sie außer für nichts viel verwenden können Inline-CSS (und sogar die volle Unterstützung ist mager). Kunden wie Microsoft Outlook 2007 und Google Gmail unterstützen Floating-Elemente und direkte Positionierung nur sehr schlecht.

Die beste Lösung wäre zu Verschachteln Sie mehrere Tabellen ineinander. Abstand und Ränder werden zwischen vielen E-Mail-Clients nicht auf einen bestimmten Maßstab festgelegt. Dies ist ein Grund zur Verwendung width = "value" auf allen Tabellenzellenelementen. Diese zeigen immer dieselbe Breite an, unabhängig davon, welchen E-Mail-Client Ihre Leser verwenden. Es ist also viel sicherer und konsistenter Füllung und Ränder mit leeren Tabellenzellen festlegen.

2. Positionierung mit fester Breite

Beim Erstellen der Entwürfe für das Newsletter-Layout haben Sie einige Optionen. Die beste Option ist jedoch, zu folgen Feste Breiten für Ihre Tabelle festlegen. Es gibt viele unterschiedliche Monitorauflösungen - Sie werden nicht allen gefallen können. Wenn Sie keine bestimmten Elemente mit statischen Breiten haben, können Sie immer verwenden width = "100%" auf deinem enthaltenden Tisch. Dadurch können Ihre Inhalte die gesamte Breite aller E-Mail-Clients ausfüllen.

Für viele ist diese Methode jedoch etwas zu lasch. Konstruktive Newsletter In den meisten Fällen ist eine feste Breite erforderlich, insbesondere wenn Sie Banner und Bilder mit einer bestimmten Größe verwenden. Ich empfehle die Arbeit mit 500px - 600px maximale Dokumentenbreite. Die horizontale Bildschirmgröße des iPhones und einiger BlackBerry-Modelle ist auf 320px begrenzt, sodass Ihre E-Mail-Vorlage sogar bei 500px liegt verkleinert, um richtig zu passen.

In Anbetracht der Tatsache, dass viele mobile Benutzer E-Mails sowieso ohne HTML anzeigen, sollte dies kein großes Problem sein. Benutzer von Desktop- und Webmail-Clients werden wahrscheinlich unabhängig vom verwendeten Betriebssystem ein ähnliches Setup durchführen. Im Zweifel Erstellen Sie einige Vorlagenentwürfe und Wählen Sie die aus, die Ihnen am besten gefällt!

3. Pixeleinheiten

Wenn Sie in Ihrem Newsletter keine fließenden Elemente verwenden, müssen Sie wahrscheinlich einige Größen bestimmen. Versuchen Sie es in sich zu behalten Pixel (px) anstatt in einer anderen Art von Einheit. Prozentsätze können leicht mit den vielen Webmail-Clients und Software-Fenstern vermischt werden. Mit weniger Seitenelementen können flüssige Layouts unbeschadet ausgegeben werden, wenn auch mit einigen Fehlern.

Pixel sind jedoch immer eine sichere Sache. Wenn Sie innerhalb der maximalen Breite von 600px arbeiten, können Sie tatsächlich eine Menge Inhalt hineinpassen. Die Belichtung ist einfacher, wenn Sie Ihre Layouts in zwei oder drei Spalten aufteilen und Ihre Größe immer in Pixel schreiben. Die einzige Ausnahme kann zu sein Schriftgrößen woher ems kann deine Leser besser unterstützen, aber em Die Größenunterschiede würden sich in ähnlicher Weise unterscheiden - so Halten Sie sich der Einfachheit halber an pixelbasierte Ausrichtungen.

4. Die Möglichkeiten mit CSS

Es kann den Anschein haben, als ob E-Mail-Design die Verwendung von CSS-Stilen zerstört. Obwohl es viele nicht unterstützte Funktionen gibt, ist CSS in vielen Fällen noch völlig akzeptabel. Campaign Monitor verfügt über eine schöne Tabelle mit unterstützten CSS-Eigenschaften, die vom E-Mail-Client aufgelistet werden. Alle werden die Grundlagen gerne unterstützen Schriftfamilie und Schriftstil, so können Sie die überspringen Tag, wenn Sie möchten.

Seien Sie vorsichtig bei Ihren Schriftstilen, um die Grenzen nicht zu weit zu verschieben. Wenn Sie sich mit Inline-Stilen unwohl fühlen, ist es immer möglich, das HTML-Font-Tag zu verwenden, obwohl es veraltet ist. Wenn Sie ein CSS-Designer sind, müssen Sie das System nicht beenden, aber die Kürzel-CSS-Codierung kann zu fehlerhaften Designs führen. Als Beispiel das Schrift: 12px / 14px Arial, serifenlos; Die Abkürzung kann viel Speicherplatz sparen, wird jedoch für das E-Mail-Design nicht vollständig akzeptiert, selbst wenn es mit Inline-Styles verwendet wird.

Sogar Ihre Farbauswahl sollte lange geschrieben werden. Hex-Farben wie #ccc oder # e3f muss als vollständig geschrieben werden #cccccc oder # ee33ff, beziehungsweise. Wenn Sie das, was Sie benötigen, ohne CSS aufbauen können, würde ich diesen Pfad empfehlen, aber scheuen Sie sich bei E-Mail-Designs nicht vollständig vor CSS, da dies entgegen der landläufigen Meinung in den meisten Fällen unterstützt wird.

5. Best Practices für Ankerverbindungen

Sie möchten sicherlich einige Links in Ihren Newsletter aufnehmen. Dies können ausgehende Links zu anderen Seiten im Internet sein oder Links zu den beliebtesten Seiten Ihrer Website. Zusätzlich enthalten die meisten Fußzeilen einen Link zum Abbestellen, über den Ihre Leser den E-Mail-Prozess abbestellen können. Wie sollten Sie jedoch mit all diesen Links in Ihrem Design umgehen??

Nun, es sollte zuerst angemerkt werden, dass E-Mail-Clients mit ihren Designs sehr wählerisch sind. Viele werden Ihre Linkstile auch mit Inline-CSS überschreiben. Ein ordentlicher Trick ist zu Sie können sowohl Inline-Farbe als auch eine zusätzliche Bereichsmarkierung im Ankerelement enthalten. Wenn die Farbe und das Styling Ihrer Links für das Gesamtdesign von Bedeutung sind, sollten Sie zusätzliche Vorsichtsmaßnahmen treffen. Ich habe unten ein kleines Codebeispiel hinzugefügt:

etwas Linktext

Hover-Effekte sind wird nicht in Outlook 2007/2010, Gmail, iOS oder Android unterstützt. Möglicherweise möchten Sie noch die a: schweben für alle unterstützenden Clients: Outlook 2000/2003, Hotmail, Apple Mail und Yahoo! Mail, aber persönlich sehe ich keinen großen Nutzen in der partiellen Benutzererfahrung, da die Ankerselektoren nicht stark unterstützt werden, empfehle ich bietet nur 2-3 Verbindungsfarben an während Ihres Designs verwenden.

Vermutlich erwarten Benutzer auch, dass Ihre Links in einem neuen Tab oder Fenster geöffnet werden. Idealerweise die target = "_ blank" Das Attribut sollte für alle Browser ausreichen, um diese Funktionalität zu erkennen. Die Aufnahme dieses Attributs in Ihre Anker-Links sollte E-Mail-Software wie Lotus Notes oder Outlook nicht beeinträchtigen.

6. Testen Sie in allen wichtigen Clients

Eine kürzlich durchgeführte Studie der beliebtesten E-Mail-Clients (durchgeführt von Campaign Monitor) zeigt zehn der beliebtesten E-Mail-Clients des vergangenen Jahres. Es mag ein wenig langweilig erscheinen, aber Designer sollten sich daran gewöhnen, ihre Newsletter auf allen großen E-Mail-Clients abzufragen, Zumindest auf einigen der häufigsten Kunden wie Google Mail, Hotmail oder Yahoo! Mail.

Dies gilt nicht nur für Webmail, sondern auch für Betriebssysteme unter Mac OS X und Windows. Auch nach ihrem Diagramm iOS Mail und Android haben beide in den letzten Jahren in die Top-10-Liste aufgestiegen. Tatsächlich rangieren iPhone, iPod Touch und iPad Mail direkt unter Outlook auf Platz 2! Leider gibt es keine Möglichkeit, diese zu testen, ohne eines der Geräte zu besitzen. Sie müssen sich also mit anderen Optionen einigen.

Ein Problem mit der mobilen Unterstützung gibt es in vielen iPhone- und Android-Modellen. Mobiles E-Mail-Rendering wird häufig ausgeführt Ändern Sie die Größe des Textes in Ihrer Vorlage. Dies hat möglicherweise keinen großen Einfluss auf Ihr Design, kann jedoch für einige Leser ärgerlich sein. CSS verwenden -Webkit-Textgröße anpassen: keine;, werden Stellen Sie eine gleichmäßige Standardgröße für alle Parsing-Engines sicher ohne es testen zu müssen.

Wenn Sie Freunde oder Kollegen kennen, die alternative Software verwenden, möchten Sie dies vielleicht Bitten Sie um Hilfe beim Testen des Newsletters. Du kannst entweder Senden Sie ihnen eine Kopie der E-Mail auf ihrem Gerät überprüfen oder das Gerät ausleihen Codierungsfehler aktiv beseitigen. Glücklicherweise bietet Outlook eine Mac-Installationsversion an, sodass Sie für diese Optimierungen keinen Windows-Benutzer ausfindig machen müssen. Wenn es sich jedoch um Lotus Notes oder Windows Mail handelt, haben Sie möglicherweise kein Glück.

Die Alternative ist zu für eine Lösung bezahlen wie Preview my E-mail, leider bieten sie keine kostenlosen Demokonten an, aber ihr Service ist bekannt dafür, dass Sie tolle Vorschauen Ihres Designs anbieten können. E-Mail auf Acid ist ein ähnlicher Dienst, der ein kostenloses Konto anbietet, Sie jedoch nicht bei allen Kunden testen kann, welche Art von Zweck der Zweck ist. Online-Rendering-Dienste sollten nützlich sein, wenn Sie viele Newsletter-Vorlagen langfristig ohne die Verwendung alternativer Computer testen müssen. Dies ist jedoch nicht von grundlegender Bedeutung Stress nicht wenn Sie nicht alle testen können!

7. Bieten Sie immer webbasierte Ansichten an

Leser sind nicht immer in der Lage (oder wollen), Ihre E-Mail nativ anzuzeigen. Eine andere Version irgendwo im Web anbieten wird ein Gefühl von Leichtigkeit und Kompatibilität geben. Dieser Prozess kann nicht vollständig automatisiert werden, es sei denn, Sie möchten ein Klartext Ausführung.

Auf diese Weise würdest du Alle HTML-Tags entfernen aus dem Newsletter-Layout. Sie können keine Links oder Stile für etwas hinzufügen. Alle Inhalte würden einfach als reine Textdatei angelegt sein für Leser ohne Rendering-Funktionen. Dies ist sicherlich eine gute Alternative, wenn Sie jedoch eine vollständige Webversion desselben Newsletters anbieten entfernt den durch einen Rendering-Fehler verursachten Schaden. Die meisten Leser werden einen aktuellen Webbrowser verwenden, in den Sie Ihren Newsletter stylen und darauf aufbauen und ihn perfektionieren können.

Wie Sie die Seite einrichten, ist ganz nach deiner Wahl. Einige Websites werden es tun widmen Sie einen gesamten Blogeintrag dazu, den Inhalt der E-Mail zu duplizieren, vielleicht mit einigen zusätzliche Information. Andere werden es tun Erstellen Sie eine separate Seite der Hauptwebsite ohne direkte Links in der Navigation. Diese Methode kann von Vorteil sein, da die Leser nicht durch Ihre Hauptvorlage oder den Inhalt der Seitenleiste abgelenkt werden.

8. Bildinhalt hinzufügen

Bilder sind ein weiterer Grund, Ihren Lesern eine webbasierte Lösung anzubieten. Standardmäßig E-Mail-Clients sind so eingestellt, dass Bilder aus dem Inhalt entfernt werden. Wenn Ihre Adresse einer sicheren Liste hinzugefügt wird, werden standardmäßig alle Bilder außer dem Benutzer angezeigt muss dieses Setup akzeptieren es ist also sicherlich keine garantie. Gerade Stellen Sie sicher, dass keine Bilder als Teil des Hauptinhalts erforderlich sind, aber als zusätzliche Ergänzung für die Seitenästhetik enthalten.

Nachdem Sie Grafiken exportiert haben, gibt es einige Tipps zum Erstellen von Bildern speziell für E-Mail. Du wirst es immer wollen Setzen Sie sowohl die Breiten- als auch die Höhenattribute in Ihrem img Stichworte. Ohne diese Angaben in Ordnung, Einige Kunden verzerren den Bildinhalt. Ein alt Das Tag wird sich auch als nützlich erweisen, so dass Besucher wissen, was der Bildinhalt enthält, bevor er geladen wird.

Wie bereits erwähnt, kann das Positionieren der Bilder in Ihrer E-Mail schwierig werden. Vermeiden Sie die Verwendung von Schwimmern um jeden Preis! Das Bild align = "left" Attribut funktioniert viel besser oder alternativ exakte Tabellenzellen zuordnen So passen Sie Ihre Bilder oben, links oder rechts in Ihrem Newsletter an. Sie werden nicht in der Lage sein, mit so vielen Kunden (insbesondere mobilen Kunden) perfekt zusammenzupassen, aber Optimieren Sie Ihre Bilder und Halten Sie die Dateigrößen für optimale Ergebnisse klein.

Als Bildspeicherung wird empfohlen, dass Sie Bewahren Sie alle Dateien auf Ihrem eigenen Webserver auf. Dies ist die bessere Option, anstatt einen anderen Image-Host zu verwenden oder die Dateien in einen Online-Newsletter-Service hochzuladen. Zusätzlich solltest du Trennen Sie den Inhalt Ihres Newsletters in einer Ordnerstruktur vom Rest Ihrer Bilder wie so / img / email oder / img / email / 2011.

9. Vermeiden Sie den Spam-Ordner!

Das kann schwer zu hören sein, aber Nicht alle E-Mail-Clients sind freundlich zu Newslettern. Täglich werden Milliarden von E-Mails gesendet, und die Mehrheit enthält Spam oder schädliche Inhalte. Diese Sicherheitsmaßnahmen sind daher in den Posteingang integriert, um Sicherheitsvorkehrungen zu treffen.

Wenn es jedoch um Internet-Marketing geht, können Sie leicht davon abgehalten werden, Ihren neuesten Newsletter mit dem Müll zu beenden. Um dies zu vermeiden, sollten Sie dies tun Bereinigen Sie Ihr Design der Einfachheit halber. Machen Sie keine nervigen Bilder oder sprengen Sie Ihren Titeltext mit Hunderten von Schlüsselwörtern.

Versuchen Sie es auch Halten Sie Ihre Inhalte kurz und themenbezogen. Sie müssen nicht den gesamten Inhalt für alle Ihre Artikel oder Seiten angeben. Fügen Sie ein oder zwei Sätze hinzu und fügen Sie statt einer langen Auflistung einen alternativen Link zu Ihrer Website hinzu. Das Je kleiner Ihre E-Mail aussieht, desto wahrscheinlicher wird sie die Spam-Prüfung bestehen.

Newsletter Design Gallery

Was für ein Spaß wäre ein E-Mail-Newsletter ohne fantastische Beispiele? Es gibt unzählige Designs und Vorlagen für E-Mail-Newsletter, die Sie in Google auschecken können. HTML E-Mail Gallery ist eine sehr beliebte Quelle für Inspiration.

Im Folgenden habe ich Screenshots aus den vielen Newslettern in der Galerie von Campaign Monitor hinzugefügt. Hoffentlich können Ihnen diese großartigen Layouts einige großartige Ideen für Ihre eigenen Entwürfe liefern.

Viel Spaß beim Gestalten Ihrer idealen Newsletter!

Wachsam für das Geschäft