Ob Sie sie lieben oder hassen, HTML-E-Mails sind ein äußerst beliebtes Marketing-Tool, und Sie werden fast definitiv auf Kunden stoßen, die möchten, dass Sie sie erstellen.
Wenn Sie nichts über HTML-E-Mails wissen, ist es ärgerlich, alle Regeln, die Sie jemals als Webdesigner gelernt haben, zu entwickeln und zu brechen. Die Möglichkeit, sie zu codieren, ist jedoch eine wertvolle Fähigkeit. Heute sehen wir uns zehn schnelle und einfache Tipps an, um Anfängern den Einstieg in die Erstellung schöner und funktionaler E-Mails zu erleichtern.
# 1 Verwenden Sie Tabellen
Warte was? Haben wir nicht vor Jahrhunderten nicht-semantische Tabellenentwürfe aufgegeben? Ja, und jetzt können Sie die Freude noch einmal erleben. Leider unterstützen die meisten E-Mail-Clients kein einfaches altes CSS-Layout, wie Sie es gewohnt sind. Stattdessen geht es zurück in die 90er Jahre und um sich mit dem Cellspacing vertraut zu machen.
Wenn Sie mit tabellenbasierten Layouts nicht vertraut sind, finden Sie hier ein einfaches Beispiel.
Jede Tabelle ist in Zeilen mit Zellen unterteilt. Jede Zeile wird durch dargestellt
Das obige Snippet zeigt Ihnen die grundlegende Syntax für Inline-CSS. Wie Sie sehen, ist der Code im Wesentlichen derselbe. Sie können ihn einfach direkt in den Code Ihres HTML-Codes einbetten, anstatt mit einem anderen Dokument zu verknüpfen.
Inline-CSS-Tools
Wenn Sie während der Entwicklung lieber ein externes Stylesheet verwenden, konvertieren Sie es mit einem der folgenden Tools in Inline-Styling, sobald Sie fertig sind.
- Premailer: Konvertiert CSS in Inline-Stile und überprüft Ihren Code anhand der E-Mail-Standards
- HTML Inline Styler: Konvertiert CSS-Regeln in Inline-Stilattribute
# 3 Schachteln Sie Ihre Tische
Eine weitere Besonderheit in Bezug auf E-Mail-Clients besteht darin, dass sie bei der Interpretation von Margen und Padding ziemlich uneinheitlich sind. Verwenden Sie nach Möglichkeit geschachtelte Tabellen, um dieses Problem zu beheben. Der Code ist etwas unordentlich, aber Sie haben allgemein eine weitaus höhere Compliance.
Nisten? Ein Tisch bedeutet einfach, einen Tisch in einen anderen zu legen. Sie können mehrere Tische verschachteln, Sie müssen nur vorsichtig sein und ein großes Durcheinander schaffen. Einige E-Mail-Clients werden um acht Nester herum fehlerhaft, aber Sie sollten in der Lage sein, bei den meisten Ihrer Designs weit unter dieser Anzahl zu liegen.
# 4 Achte auf deine Breite
Mehrere E-Mail-Clients sind in ihrer Breite ziemlich begrenzt. Betrachten Sie beispielsweise den Online-Google Mail-Client. Wenn Sie eine Webseite in normaler Größe erstellen und diese dann im winzigen Google Mail-Fenster anzeigen, wird der Benutzer gezwungen, ein unbeholfenes horizontales Scrollen durchzuführen.
Für jedes Szenario gibt es zu viele mögliche Kunden- und Bildschirmgrößen, um zu codieren. Daher besteht der Konsens in der Web-Community in der Regel nur aus E-Mails. Als Faustregel gilt, dass Sie bei jedem E-Mail-Design, das Sie erstellen, eine Breite von weniger als 600 Pixel einhalten.
# 5 Seien Sie vorsichtig mit Bildern
Bei der Verwendung von Bildern in HTML-E-Mails müssen mehrere Komplikationen berücksichtigt werden. Erstens unterstützen manche Kunden keine Hintergrundbilder, andere unterstützen sie, werden sie jedoch standardmäßig deaktiviert. Dies ist keinesfalls ein Argument, dass Sie in Ihrem Design keine Bilder verwenden sollten. Der größte Verkaufsargument von HTML-E-Mails besteht darin, dass sie die Qualität und die Möglichkeiten des in den meisten E-Mail-Clients verfügbaren Rich Textes übertreffen. Durch das Eliminieren von Bildern können die Vorteile wirklich reduziert werden.
Stellen Sie sicher, dass Ihre Nachricht ohne sie vollständig funktioniert. Verwenden Sie Hintergrundfarben als Fallback, damit Text lesbar bleibt und testen Sie Ihr Layout mit deaktivierten Bildern.
Eine andere Sache, die Sie bei Bildern beachten müssen, ist, dass Sie sie nicht in die E-Mail einbetten können (oder nicht sollten). Stattdessen müssen Sie sie langfristig auf einem zuverlässigen Server hosten und dann in Ihrem Code darauf verlinken.
Vergewissern Sie sich schließlich, dass Sie die Ladezeiten beachten. Die Leute sind es gewohnt, auf eine E-Mail zu klicken und den Inhalt zu sehen, und warten nicht auf das Laden von Bildern. Wenn Sie mich lange Ladezeiten überstehen lassen, werde ich schneller löschen, als Sie erklären können, warum sich das Warten lohnt.
# 6 Einfache Abmeldung ermöglichen
HTML-E-Mails sind meistens Teil eines Newsletters-Streams, den ein Benutzer abonniert hat. Oft melden sich Benutzer für einen Dienst an und erkennen nicht einmal, dass sie einen Newsletter erhalten. Andere Male entscheiden sie sich bewusst, sich anzumelden, ändern jedoch später ihre Meinung.
In jedem Fall sollte die Abmeldung ein schmerzfreier Prozess sein, den praktisch jeder, der die E-Mail betrachtet, herausfinden kann. Um dies zu erreichen, fügen Sie einen Link zum Abbestellen hinzu und stellen Sie sicher, dass er leicht zu erkennen ist. Designer und Vermarkter, die versuchen, diesen Link zu verbergen, haben keine Integrität und keinen Respekt vor ihrem Publikum.
Wenn die Person Ihre E-Mail nicht möchte, liest sie sie sowieso nicht. Es hat keinen Wert, 10.000 E-Mails an Spam-Ordner auf der ganzen Welt zu senden. Es ist viel besser zu wissen, dass diejenigen, die Ihren Newsletter erhalten, tatsächlich interessiert sind.
# 7 Betrachten Sie Ihren Inhalt sorgfältig
Vermarkter und Geschäftsinhaber sehen in einem E-Mail-Newsletter häufig die einzige Quelle für den beständigen Kontakt mit ihrem Kundenstamm. Sie sind daher oft versucht, es mit möglichst vielen Inhalten und Informationen zu füllen. Helfen Sie ihnen als Designer, diesem Drang zu widerstehen, indem Sie eine Vorlage entwerfen, in der einige Informationen sehr gut und nicht sehr viele Informationen dargestellt werden.
Der Schlüssel hier ist Qualität über Quantität. Keiner liest mehr als tausend Worte aus Marketing-E-Mails. Im besten Fall haben Sie 3-5 Sekunden, um die Aufmerksamkeit des Durchschnittslesers auf sich zu ziehen, bevor sie auf "Löschen" klicken. Ermöglichen Sie dies mit schnellem Laden, attraktiven Grafiken, präziser Kopie und klaren beschreibenden Kopfzeilen.
# 8 Andere Anzeigeoptionen einschließen
Neben der Option zum Abbestellen der Option sollten Sie mindestens zwei alternative Methoden zum Anzeigen der E-Mail-Adresse für alle Personen vorlegen, die ihre bevorzugte Erfahrung nicht erhalten. Für die Minimalisten ist eine einfache Textversion am besten.Es gibt eine Menge Leute, die denken, dass E-Mails einfach bleiben sollten und einfach nicht die Aufmerksamkeit auf Ihre Grafiken sehen wollen.
Am anderen Ende des Spektrums befinden sich Benutzer, die die volle, reichhaltige Erfahrung wünschen, jedoch von einem fehlerhaften E-Mail-Client zurückgehalten werden. Für diese Benutzer gibt es einen ziemlich prominenten Link (häufig oben), über den sie die E-Mail in einem Browser anzeigen können. Da Browser für die Anzeige von HTML und CSS unendlich viel besser sind, können Sie die browserbasierte Version sogar verbessern, indem Sie sie eher wie eine normale Webseite codieren (oder einfach die ursprüngliche Version des Browsers anzeigen lassen).
# 9 Teste gründlich
Beim Entwerfen einer Webseite sind Cross-Browser-Tests einer der lästigsten Prozesse, die Sie durchlaufen müssen. Dieser Prozess beinhaltet normalerweise das Testen auf Webkit, Mozilla, IE und möglicherweise sogar Opera, wenn Sie wirklich engagiert sind. Wenn Sie es glauben können, ist das Design für E-Mail-Clients noch schlimmer!
Es gibt mehr als 30 beliebte E-Mail-Clients mit jeweils eigenen Standards und unterschiedlicher Unterstützung für verschiedene Befehle. Testen Sie zunächst die E-Mail-Clients, die Sie zur Hand haben. Melden Sie sich für Konten bei beliebten Webmail-Clients wie Google Mail, AOL und Yahoo an. Testen Sie außerdem die Standard-Apps für Macs und PCs.
Natürlich können Sie nicht jeden Client testen. Wenn Sie das Budget haben, melden Sie sich während der Testphase für einen Monat Service wie Litmus an. Auf diese Weise können Sie sich auf 33 verschiedenen E-Mail-Clients schnell eine Vorschau des fertigen Produkts anzeigen lassen. Dies ist eine der besten Möglichkeiten, um sicherzustellen, dass alle Benutzer abgedeckt sind.
Schauen Sie sich während der Entwurfsphase unbedingt das Email Standards Project an. Dies ist eine der besten verfügbaren Quellen für detaillierte Berichte darüber, was von verschiedenen E-Mail-Clients unterstützt wird und nicht.
# 10 Verwenden Sie eine Vorlage
Die beste Methode, die ich für den Entwurf Ihrer ersten HTML-E-Mail gefunden habe, ist das Erstellen einer Vorlage. Selbst wenn Sie ein sehr spezifisches Design vor Augen haben, können Sie durch das Ändern einer professionell entwickelten Vorlage, anstatt bei Null zu beginnen, unzählige Stunden bei der Fehlerbehebung einsparen.
Auf diese Weise erhalten Sie auch einen guten Überblick darüber, wie andere Entwickler ihre Tabellen strukturieren und gestalten. Denken Sie daran, dass Sie, wenn Sie eine E-Mail-Vorlage als Stock-Art-Kunst verkaufen oder verkaufen möchten, nicht die Arbeit von jemand anderem stehlen sollten! In diesen Fällen sollten Sie wirklich wissen, was Sie tun, und Ihre eigene Struktur von Grund auf entwickeln.
Kostenlose E-Mail-Vorlagen
Glücklicherweise müssen Sie keinen Cent zahlen, um einige kostenlose Vorlagen für den Designprozess zu erhalten. Die meisten Premium-E-Mail-Dienste bieten kostenlose Downloads zum Einstieg, oft ohne Anmeldung. Schauen Sie sich die folgenden Ressourcen an:
- Kampagnenmonitor: 30 Vorlagen
- Mail Chimp: 4 Vorlagen
- CakeMail: 21 Vorlagen
Fazit
Zusammenfassend kann gesagt werden, dass beim Erstellen von E-Mail-Vorlagen mit einer guten Basisvorlage begonnen wird. Code, den Ihr Vater vor einem Jahrzehnt gemacht hat. Halten Sie Ihre Inhalte sowohl konzeptuell als auch physisch schlank (weniger als 600 Pixel breit) und teste wie verrückt.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, ob Sie den Artikel hilfreich fanden. Vergewissern Sie sich außerdem, dass Sie Ihre Weisheit mit auf den Weg geben, um HTML-E-Mails zu entwerfen.