Wie designe ich einen E-Mail Newsletter?
Regel Nr. 1: die Größe
Erstellen Sie HTML E-Mails mit einer maximalen Breite von 768 Pixeln, so dass sie auch in der Vorschau von E-Mail Clients optimal dargestellt werden. Begrenzen Sie die Speichergröße Ihrer E-Mails auf 150 kb, inklusive Bildern. Das verhindert lange Ladezeiten.
Regel Nr. 2: Benutzen Sie eine Tabelle für Ihr Layout
E-Mail Clients, wie Gmail und Outlook 2007, unterstützen HTML Tags wie Float, Margin und Padding nur schlecht, so dass Tabellen am besten als Grundgerüst für eine E-Mail dienen. Für das beste Ergebnis, behalten Sie folgende Punkte im Sinn, wenn Sie die Tabellenstruktur festlegen.
Legen Sie die Breite in jeder Zelle fest, nicht in der Tabelle
Nutzen Sie eine Container Tabelle, um Hintergrundfarben festzulegen
Vermeiden Sie unnötige Leerzeichen in den Zellen
Regel Nr. 3: Nutzen Sie Inline CSS und allgemeine Schriftart Formatierungen
Gmail ist der hier ein besonderes "Sorgenkind". Seit Gmail CSS aus dem Head und Body jeder E-Mail herausfiltert, muss CSS inline sein. Die gute Nachricht ist, dass Sie diesen Vorgang fast automatisieren können. Es gibt einige Anbieter wie Premailer, die Ihr CSS mit einem Knopfdruck inline platzieren. Wenn Sie solch ein Tool benutzen, können Sie diesen Schritt ganz zum Schluss machen um alle Vorteile von CSS nutzen zu können.
Regel Nr. 4: Die oberen 300 Pixel sind die Wichtigsten
Die überzeugendsten Inhalte sollten in den ersten 300 Pixel enthalten sein, damit sie auch in den kleinen Vorschaufenstern, der vielen E-Mail Clients gesehen werden können.
Regel Nr. 5: Gehen Sie nicht davon aus, dass Bilder dargestellt werden
Viele E-Mail Clients haben „Bilder blockieren“ in der Voreinstellung:
Legen Sie die Höhe und Breite Ihrer Bilder fest. So stellen Sie sicher, dass Ihr Layout erhalten bleibt, auch wenn die Bilder nicht angezeigt werden.
Nutzen Sie niemals Bilder für wichtige Inhalte, wie Headlines, Links und Aktionsaufrufe
Nutzen Sie Alternativtexte und geben Sie immer Höhe und Breite der Bilder an, damit deren Platzhalter Ihr Design nicht auf den Kopf stellen, wenn Bilder deaktiviert sind.
Testen Sie Ihr Design im Vorschaufenster und im Vollbildmodus, mit Bildern und mit deaktivierten Bildern und gestalten Sie den Aufbau entsprechend.
Regel Nr. 6: Fügen Sie immer eine reine Textversion hinzu
Es hilft schlichtweg bei der Zustellung. Wenn Sie nur vorhaben eine HTML Version zu senden, dann sollten Sie wenigstens Text und Bilder benutzen, nicht nur Bilder. So haben die Empfänger die Möglichkeit die Nachricht zu lesen, auch wenn die Bilder blockiert werden.
Mehr Tipps zu Bildern
Bilder sollten im .gif oder .jpg Format sein (niemals .png) mit definierter Höhe und Breite, damit die Größe immer gleich bleibt.
Nutzen Sie Alternativtexte für Ihre Bilder, sodass die Empfänger die Darstellung nicht zulassen müssen um über den ganzen Inhalt Bescheid zu wissen.
Geben Sie immer die Maße Ihrer Bilder an
Für Ihre Abonnenten von Gmail ist es wichtig nicht zu vergessen, dass der Text am Anfang Ihrer Nachricht gleich nach der Betreffzeile angezeigt wird. Wenn die E-Mail ein Bild am Anfang beinhaltet, wird Gmail im Posteingang den Alternativtext dafür anzeigen.
Nutzen Sie Hintergrundfarben im Body als auch in der Tabelle, um sicherzugehen, dass die Farben in den einzelnen E-Mail Clients angezeigt werden. Manche E-Mail Clients ignorieren die Hintergrundfarbe im Body. Nachrichten werden aber dennoch korrekt dargestellt, wenn die Farbe auch in der Tabelle definiert wird.
Outlook 2007 toleriert keine Hintergrundbilder. Wenn Sie ein Hintergrundbild in Ihrem Design verwenden, geben Sie auch immer eine Hintergrundfarbe an, worauf Ihr E-Mail Client zurückgreifen kann. Dies löst in gleicher Weise das Problem der blockierten Bilder und das Problem mit Outlook 2007.
Verwenden Sie keine aufwendigen Grafiken, da sie nicht vollständig über alle E-Mail Clients hinweg unterstützt werden.
Tipps zum HTML-Code
Überprüfen Sie den kompletten HTML-Code, um sicherzugehen, dass der Code richtig ist und dass alle Tags geschlossen sind.
Vermeiden Sie CSS, da viele E-Mail Clients den CSS Code ignorieren oder überschreiben. Verwenden Sie kein Java, JavaScript, Frames, ActiveX, ASP, PHP, Cache Busters oder dynamischen HTML Code, da die meisten E-Mail Clients diese nicht unterstützen.
Verwenden Sie keine Formulare oder Ähnliches, da sie von der Nachricht entfernt werden können und keine Daten von E-Mail Clients gesammelt werden.
Betten Sie nicht Flash oder andere Multimedia Dateien und Videos in Ihrer Nachricht ein. Stattdessen sollte Ihre Mail mit einem Link auf eine Landing-Page verweisen, die diese Dateien enthält.
Nutzen Sie p-Tags statt div-Tags für Ausrichtungen und br-Tags, um Absätze zu trennen.
Seien Sie vorsichtig mit body-Tags, da Sie entfernt oder ignoriert werden können.
Entfernen Sie Meta Tags vom Code, da diese nicht von E-Mail Clients gelesen werden. Sie sind Fremdkörper im Code und somit unbrauchbar.
Überprüfen Sie Ihre HTML auf unnötigen Extra-Code mit Programmen wie Dreamweaver oder anderen WYSIWYG Editoren.
Falls vorhanden, überprüfen Sie die Personalisierungs-Tags und den dynamischen Inhalt. Falls der Code inkorrekt ist, werden Empfänger falsche Benachrichtigungen erhalten.
Verwenden Sie Title Tags in Link URLs für bessere Lesbarkeit.
Ein Video in einer E-Mail
Ohne Unterstützung für JavaScript oder Object-Tags, wird die Möglichkeit, Videos zu integrieren, auf animierte .gif-Dateien begrenzt. Jedoch könnte dies das HTML5 Video-Tag in E-Mails ändern. HTML5-Video funktioniert derzeit in vielen E-Mail Clients, wie Apple Mail, Entourage 2008, MobileMe und Iphone. Verwenden Sie aber dennoch Fallback-Inhalte, wie animierte .gif-Dateien oder klickbare Bilder, welche auf das Video im Browser linken.
Erstellen Sie HTML E-Mails mit einer maximalen Breite von 768 Pixeln, so dass sie auch in der Vorschau von E-Mail Clients optimal dargestellt werden. Begrenzen Sie die Speichergröße Ihrer E-Mails auf 150 kb, inklusive Bildern. Das verhindert lange Ladezeiten.
Regel Nr. 2: Benutzen Sie eine Tabelle für Ihr Layout
E-Mail Clients, wie Gmail und Outlook 2007, unterstützen HTML Tags wie Float, Margin und Padding nur schlecht, so dass Tabellen am besten als Grundgerüst für eine E-Mail dienen. Für das beste Ergebnis, behalten Sie folgende Punkte im Sinn, wenn Sie die Tabellenstruktur festlegen.
Legen Sie die Breite in jeder Zelle fest, nicht in der Tabelle
Nutzen Sie eine Container Tabelle, um Hintergrundfarben festzulegen
Vermeiden Sie unnötige Leerzeichen in den Zellen
Regel Nr. 3: Nutzen Sie Inline CSS und allgemeine Schriftart Formatierungen
Gmail ist der hier ein besonderes "Sorgenkind". Seit Gmail CSS aus dem Head und Body jeder E-Mail herausfiltert, muss CSS inline sein. Die gute Nachricht ist, dass Sie diesen Vorgang fast automatisieren können. Es gibt einige Anbieter wie Premailer, die Ihr CSS mit einem Knopfdruck inline platzieren. Wenn Sie solch ein Tool benutzen, können Sie diesen Schritt ganz zum Schluss machen um alle Vorteile von CSS nutzen zu können.
Regel Nr. 4: Die oberen 300 Pixel sind die Wichtigsten
Die überzeugendsten Inhalte sollten in den ersten 300 Pixel enthalten sein, damit sie auch in den kleinen Vorschaufenstern, der vielen E-Mail Clients gesehen werden können.
Regel Nr. 5: Gehen Sie nicht davon aus, dass Bilder dargestellt werden
Viele E-Mail Clients haben „Bilder blockieren“ in der Voreinstellung:
Legen Sie die Höhe und Breite Ihrer Bilder fest. So stellen Sie sicher, dass Ihr Layout erhalten bleibt, auch wenn die Bilder nicht angezeigt werden.
Nutzen Sie niemals Bilder für wichtige Inhalte, wie Headlines, Links und Aktionsaufrufe
Nutzen Sie Alternativtexte und geben Sie immer Höhe und Breite der Bilder an, damit deren Platzhalter Ihr Design nicht auf den Kopf stellen, wenn Bilder deaktiviert sind.
Testen Sie Ihr Design im Vorschaufenster und im Vollbildmodus, mit Bildern und mit deaktivierten Bildern und gestalten Sie den Aufbau entsprechend.
Regel Nr. 6: Fügen Sie immer eine reine Textversion hinzu
Es hilft schlichtweg bei der Zustellung. Wenn Sie nur vorhaben eine HTML Version zu senden, dann sollten Sie wenigstens Text und Bilder benutzen, nicht nur Bilder. So haben die Empfänger die Möglichkeit die Nachricht zu lesen, auch wenn die Bilder blockiert werden.
Mehr Tipps zu Bildern
Bilder sollten im .gif oder .jpg Format sein (niemals .png) mit definierter Höhe und Breite, damit die Größe immer gleich bleibt.
Nutzen Sie Alternativtexte für Ihre Bilder, sodass die Empfänger die Darstellung nicht zulassen müssen um über den ganzen Inhalt Bescheid zu wissen.
Geben Sie immer die Maße Ihrer Bilder an
Für Ihre Abonnenten von Gmail ist es wichtig nicht zu vergessen, dass der Text am Anfang Ihrer Nachricht gleich nach der Betreffzeile angezeigt wird. Wenn die E-Mail ein Bild am Anfang beinhaltet, wird Gmail im Posteingang den Alternativtext dafür anzeigen.
Nutzen Sie Hintergrundfarben im Body als auch in der Tabelle, um sicherzugehen, dass die Farben in den einzelnen E-Mail Clients angezeigt werden. Manche E-Mail Clients ignorieren die Hintergrundfarbe im Body. Nachrichten werden aber dennoch korrekt dargestellt, wenn die Farbe auch in der Tabelle definiert wird.
Outlook 2007 toleriert keine Hintergrundbilder. Wenn Sie ein Hintergrundbild in Ihrem Design verwenden, geben Sie auch immer eine Hintergrundfarbe an, worauf Ihr E-Mail Client zurückgreifen kann. Dies löst in gleicher Weise das Problem der blockierten Bilder und das Problem mit Outlook 2007.
Verwenden Sie keine aufwendigen Grafiken, da sie nicht vollständig über alle E-Mail Clients hinweg unterstützt werden.
Tipps zum HTML-Code
Überprüfen Sie den kompletten HTML-Code, um sicherzugehen, dass der Code richtig ist und dass alle Tags geschlossen sind.
Vermeiden Sie CSS, da viele E-Mail Clients den CSS Code ignorieren oder überschreiben. Verwenden Sie kein Java, JavaScript, Frames, ActiveX, ASP, PHP, Cache Busters oder dynamischen HTML Code, da die meisten E-Mail Clients diese nicht unterstützen.
Verwenden Sie keine Formulare oder Ähnliches, da sie von der Nachricht entfernt werden können und keine Daten von E-Mail Clients gesammelt werden.
Betten Sie nicht Flash oder andere Multimedia Dateien und Videos in Ihrer Nachricht ein. Stattdessen sollte Ihre Mail mit einem Link auf eine Landing-Page verweisen, die diese Dateien enthält.
Nutzen Sie p-Tags statt div-Tags für Ausrichtungen und br-Tags, um Absätze zu trennen.
Seien Sie vorsichtig mit body-Tags, da Sie entfernt oder ignoriert werden können.
Entfernen Sie Meta Tags vom Code, da diese nicht von E-Mail Clients gelesen werden. Sie sind Fremdkörper im Code und somit unbrauchbar.
Überprüfen Sie Ihre HTML auf unnötigen Extra-Code mit Programmen wie Dreamweaver oder anderen WYSIWYG Editoren.
Falls vorhanden, überprüfen Sie die Personalisierungs-Tags und den dynamischen Inhalt. Falls der Code inkorrekt ist, werden Empfänger falsche Benachrichtigungen erhalten.
Verwenden Sie Title Tags in Link URLs für bessere Lesbarkeit.
Ein Video in einer E-Mail
Ohne Unterstützung für JavaScript oder Object-Tags, wird die Möglichkeit, Videos zu integrieren, auf animierte .gif-Dateien begrenzt. Jedoch könnte dies das HTML5 Video-Tag in E-Mails ändern. HTML5-Video funktioniert derzeit in vielen E-Mail Clients, wie Apple Mail, Entourage 2008, MobileMe und Iphone. Verwenden Sie aber dennoch Fallback-Inhalte, wie animierte .gif-Dateien oder klickbare Bilder, welche auf das Video im Browser linken.