HTML-E-Mail: Tabellen oder Divs?

78

Muss das HTML / CSS für einen HTML-E-Mail-Newsletter im Tabellenformat vorliegen, oder kann ich DIVs mit der gleichen Sicherheit verwenden, dass es gut über E-Mail-Clients hinweg angezeigt wird? Ich habe eine Reihe von Vorlagen heruntergeladen, um zu sehen, wie sie gemacht werden, auf denen ich meine eigenen aufbauen kann, und alle scheinen Tabellen zu verwenden.

Jeder Einblick sehr geschätzt, danke!

html html-email HandiworkNYC.com
quelle
2
Dies ist unglaublich umfassend: http://mailchimp.com/resources/guides/email-marketing-field-guide
HandiworkNYC.com
Sehr hilfreich. Einbetten von CSS in das Body-Tag. Wer hätte gedacht!
aaandre
URL hat sich geändert: mailchimp.com/resources/guides/email-marketing-field-guide
JasonB
Die schnelle allgemeine Antwort: Webmail-Clients möchten nicht, dass Ihr CSS mit ihrer Seite in Konflikt gerät, daher beschränken sie diese (stellen Sie sich vor, Sie verwenden sie position:fixed;in Google Mail). In Tabellen können Sie zusätzliche HTML-Elemente verwenden, die mit divs nicht verfügbar (oder inkonsistent) sind. Außerdem verwendet Outlook die Microsoft Word-Engine, um die E-Mail-HTML zu rendern und sie mit vielen Mistdivs usw. zu versehen. Tabellen helfen dabei, Ihre E-Mail-Struktur beizubehalten, sobald Outlook den Mist dort hineinwirft.
John

Antworten:

136

Beachten Sie beim E-Mail-HTML, dass alle Best Practices aus der Webentwicklung aus dem Fenster verschwinden. Um das Erscheinungsbild einheitlich zu gestalten, sollten Sie:

  1. Verwenden Sie tabellenbasierte Layouts
  2. Verwenden Sie das Attribut-Styling der alten Schule für Tabellen
  3. Verwenden Sie NUR Inline-Stile und nur sehr einfache wie z. <style>-Tags werden von vielen Clients verworfen.
  4. Weiter mit <html>, <head>und <body>- Sie werden ohnehin von den meisten Clients verworfen werden.
  5. Wenn Sie Bilder einbetten, stellen Sie sicher, dass die E-Mail auch dann anständig aussieht, wenn keine Bilder geladen sind. Bei vielen Clients muss der Benutzer die E-Mail vor dem Anzeigen von Bildern als "sicher" markieren.

Sie können detailliertere Versionen der oben genannten Punkte hier lesen:

PatrikAkerstrand
quelle
3
Das ist so wahr. Outlook 2007 ist eines der schlimmsten von allen (und die meisten sind ziemlich schlecht ...).
Max
3
Diese Regeln sind beim Erstellen von HTML / CSS-E-Mails rein GOLD. Vielen Dank.
Miloš Đakonović
1
Wenn Sie E-Mails erstellen möchten, sollten Sie sich gulp-inline-css ansehen , mit dem Sie Ihre E-Mails mithilfe von CSS-Blöcken erstellen, aber alles in Inline-Stile kompilieren können.
Fjdumont
Sind Sie sicher, dass HTML und Body verworfen werden sollten? Sowohl ZenDesk als auch dieses Tutorial empfehlen es? webdesign.tutsplus.com/articles/…
Jakob Alexander Eichler
1
Habe ich diese Aussage 2017 noch wahr? Ich frage mich nur, weil der größte Teil des E-Mail-Client-Marktes von Desktop zu Mobile gewechselt ist und es auch neuere Versionen der Desktop-Clients gibt. Zumindest Inline-CSS scheint, soweit ich das beurteilen kann, keine Notwendigkeit mehr zu sein (Google Mail hat gerade Unterstützung hinzugefügt und es war der letzte große E-Mail-Client, dem dies fehlte).
Torsten Engelbrecht
9

Wie jeder hier gesagt hat, verwenden Sie Tabellen und integrieren Sie alle Ihre CSS ... aber es gibt ein Ökosystem von E-Mail-Apps, mit denen Sie E-Mails erstellen können.

Ich habe Mailrox ( https://www.mailrox.com/ ) in letzter Zeit für die meisten meiner E-Mail-Builds verwendet, und es scheint verdammt gut zu sein und perfekte HTML-E-Mails auszugeben, selbst wenn Sie eine aus einem Design erstellen obwohl es in der Beta ist.

Sie können auch vorgefertigte Vorlagen von Mailchimp oder Campaign Monitor ausprobieren , aber es scheint, als hätten Sie ein Design für Ihre E-Mail, sodass Mailrox möglicherweise am besten geeignet ist.

Wenn Sie wirklich E-Mails erstellen möchten, vergessen Sie das meiste, was Sie über modernes Webdesign und Master-Tabellenlayouts wissen, und verwenden Sie die Links von PatrikAkerstrand.

Lackmus eignet sich auch hervorragend zum Testen Ihrer handcodierten Designs. Sie geben Ihnen eine Vorschau Ihrer E-Mail in (so ziemlich) allen E-Mail-Clients.

Hoffe das hilft.

MintDeparture
quelle
4

Viele E-Mail-Clients können CSS nicht rendern. Ich würde Tabellen verwenden, um Ihre E-Mails zu formatieren und Bilder für alles andere zu verwenden.

fb55
quelle
1
Sie können standardmäßig keine Bilder in E-Mails verwenden. Mail-Clients blockieren sie, bis der Benutzer den Absender als sicher markiert. Fast alle gängigen Clients unterstützen eingeschränktes Inline-CSS.
Rex M
Ältere Kunden tun dies nicht und viele Geschäftsanwender verwenden sie immer noch. Und nein, nicht jeder Kunde zeigt keine Bilder. Dies ist nur ein Schritt für zusätzliche Sicherheit, aber Clients wie das iPhone haben keinen Grund, Bilder zu blockieren.
fb55
Google Mail zeigt jetzt Bilder :-)
rds
1

Wie bereits erwähnt, sollten Ihre HTML-E-Mails mit Tabellen (und nicht mit Divs) erstellt werden. Sie können auch CSS hinzufügen - beide mithilfe eines externen Stylesheets. Dies wird jedoch nicht von allen E-Mail-Clients übernommen. Daher ist es zuverlässiger, Ihr CSS inline hinzuzufügen. Selbst wenn Sie dies tun, werden einige Attribute möglicherweise von bestimmten E-Mail-Clients ignoriert. Daher verwenden Sie am besten immer noch HTML-Attribute, wenn diese verfügbar sind. "Sie müssen dies tun, da einige Clients, z. B. Google Mail, Ihre Tag-Inhalte ignorieren oder entfernen oder ignorieren." Quelle: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

Abgesehen davon habe ich auch durch Ausprobieren gelernt, dass sogar Bilder auf die exakte Größe zugeschnitten werden müssen, die in Ihrer E-Mail angezeigt werden soll. Outlook ist schrecklich, wenn es darum geht, HTML-Attribute für Breite / Höhe für Bilder zu erfassen, und ich habe ein paar böse gestreckte E-Mails gesehen, nur weil diese Attribute ignoriert wurden und die Bilder in voller Größe angezeigt wurden.

Alexandra
quelle