Es gibt zwei Gebiete auf die man sich vorerst konzentrieren sollte wenn man E-Mail Newsletter erstellt: Die Struktur und den Inhalt. Es gibt einige wichtige Regeln, die Sie jeweils beachten sollten.

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.

Weitere Infos finden Sie hier.