Leitfaden für HTML-E-Mail-Design

Der vollständige Leitfaden zum E-Mail-Design

Vielleicht wissen Sie bereits, wie man eine moderne und zugängliche Website erstellt. Sie kennen die Regeln, die neuesten Optionen usw. Aber können Sie wirklich all dieses Wissen nehmen und es für die Gestaltung von E-Mails verwenden? Die kurze Antwort ist nein. Aufgrund der Vielfalt der E-Mail-Clients und der begrenzten Unterstützung von CSS gibt es einige sehr spezifische Regeln & Dos/Don'ts, wenn es um die Gestaltung von E-Mails geht. Dieser Leitfaden wird Ihnen helfen, die vielen Punkte zu erklären, die Sie beachten sollten, wenn Sie Ihr eigenes HTML verwenden, um eine E-Mail so zu erstellen, dass sie richtig angezeigt wird. 

Bevor wir beginnen, ist es wichtig zu beachten, dass E-Mail-Design nicht dasselbe ist wie Webdesign. Wenn Sie sich für W3C-Standards interessieren oder das Neueste in CSS verwenden, müssen Sie all das vergessen, wenn Sie sich dem E-Mail-Design nähern. Im Grunde kann man so denken, als wäre es das Jahr 2000.

Gestaltung

  • 650px oder weniger Designbreite
    Die allgemeine Regel für die Größe von E-Mails ist, dass sie 650px oder weniger breit sein müssen. Dadurch kann die E-Mail in den meisten E-Mail-Clients und Anzeigekonfigurationen (insgesamt) korrekt angezeigt werden.
  • Einfache Layouts sind am besten
    Mit E-Mail-Design ist einfach besser. Wenn Sie versuchen, ein kompliziertes Design zu entwerfen, werden Sie auf eine Menge Probleme beim Testen und Debuggen von E-Mail-Clients stoßen. Wenn Sie einen fortgeschritteneren Entwurf fertigstellen wollen, sollten Sie bereit sein, viele Tabellen zu verwenden und eine gute Menge Zeit für Tests vorzusehen.
  • Benutzen Sie einfache HTML-Tabellen 
    Um das Gesamtlayout zu erstellen, müssen Sie Standard-HTML-Tabellen verwenden. CSS-Floating und Layout-Techniken werden nicht in allen E-Mail-Clients korrekt dargestellt.
  • Vorsicht bei der Polsterung von Tischzellen
    Outlook nimmt die Füllung von jeder Zelle in einer Zeile und wendet sie auf alle Zellen in der Zeile an. Dies könnte zu einigen visuellen Änderungen führen, die Sie nicht wünschen. Sie sollten versuchen, entweder für alle Zellen in einer Zeile die gleiche Auffüllung anzuwenden ODER eine innere Teilung oder Tabelle (die Auffüllung hat) innerhalb der Zelle zu platzieren, die Sie auffüllen möchten. (Weitere Informationen)
  • Mit colspans="" in Ihren Tabellen vermeiden
    Einige E-Mail-Clients unterstützen diese nicht vollständig, und andere haben Anzeigeprobleme für die anderen Zellen, wenn Sie eine Spalte haben.

CSS

  • Verwenden Sie keine externen Stylesheets
    Sie werden in vielen E-Mail-Clients nicht funktionieren und Sie sollten Ihr gesamtes CSS mit Inline-CSS in Ihr HTML einbinden. 
  • keine CSS-Klassen verwenden - immer Inline-CSS  verwenden
    Viele E-Mail-Clients unterstützen keine CSS-Klassen. Anstatt CSS-Klassen zu deklarieren, sollten Sie Inline-CSS verwenden. Ein Beispiel wäre <div style="color:#cccccccc;">content</div> anstelle von <div class="cssclassa">content</div> 
  • Verwenden Sie keine CSS-Kürzel
    Mit CSS können Sie Eigenschaften normalerweise in Gruppen festlegen. Zum Beispiel style="Schriftart: 12px, Arial" Anstatt solche Attribute zu gruppieren, sollten Sie jeden Teil einzeln einstellen. Zum Beispiel style="font-size:12px; Schriftfamilie:Arial" 
  • Vermeiden Sie die Verwendung von CSS-Float- oder Positionsoptionen
    Einige E-Mail-Clients ignorieren sowohl die Float- als auch die Positions-CSS-Optionen. Versuchen Sie, stattdessen Tabellen zu verwenden.

Bilder und Video

  • Absolute Bildquellen-URLs  verwenden
    Anstatt ein Bild wie (<img src="img.gif">) einzufügen, müssen Sie die absolute URL zu der Datei angeben, wie (<img src="http://site.com/img.gif">) 
  • Immer Alt-Tags verwenden (<img src="http://site.com/img.gif" alt="Firma ABC">) 
    Die meisten E-Mail-Clients deaktivieren Bilder standardmäßig. Wenn Sie also keine Alt-Tags haben, sehen Ihre Abonnenten nur ein leeres Kästchen. Mit einem alt-Tag sehen Ihre Abonnenten den Text, den Sie in den Tag eingegeben haben. 
  • Keine Videos und/oder Flash einbetten
    Es ist keine gute Idee, Videos direkt und/oder als Flash in Ihre E-Mail einzubetten. Viele E-Mail-Clients unterstützen einen solchen Code nicht, und viele Spam- und Virenerkennungsprogramme kennzeichnen Ihre E-Mail als Spam/bösartig. Anstatt Ihr Video/Flash in Ihre E-Mail einzubetten, machen Sie einen Screenshot davon, wie das Video des Flash-Players aussieht, und betten Sie es ein. Wenn sie darauf klicken, können Sie das Video/Flash in ihrem Browser öffnen lassen. 
  • Animierte GIFs werden nicht vollständig unterstützt
    Fragen Sie sich, ob Sie wirklich eine Animation in Ihrer E-Mail benötigen. Während die meisten E-Mail-Clients animierte GIFs unterstützen, unterstützt Outlook 2007 keine animierten GIFs. E-Mail-Clients, die animierte GIFs nicht unterstützen, zeigen wahrscheinlich das erste Bild Ihrer Animationssequenz an. 
  • Vorsicht bei gespleißten Bildern
    Wenn Sie ein größeres Bild haben, das mit Hilfe von Tabellenzellen oder img-Tags direkt nebeneinander gespleißt und in Ihren HTML-Code eingefügt wird, müssen Sie es gründlich testen. Einige E-Mail-Clients fügen möglicherweise zusätzlichen Platz zwischen Ihren Bildern hinzu und lassen Ihre E-Mail schlecht aussehen.
  • Vermeiden Sie die Verwendung von Bildern als Hilfe für Ihr Layout
    Einige Leute verwenden 1- oder 2-Pixel-Bilder, um Elemente innerhalb ihres Layouts auszurichten. Einige E-Mail-Clients/Filter halten das für ein potenziell lesbares/offenes Tracking-Bild und bestrafen die E-Mail dafür.
  • Testen Sie Ihre E-Mail mit deaktivierten Bildern
    Da die meisten E-Mail-Clients E-Mails mit standardmäßig deaktivierten Bildern anzeigen, ist es sehr wichtig, dass Sie überprüfen, wie Ihre E-Mail mit deaktivierten Bildern aussieht.
  • Überwachen Sie Ihre Dateigrößen
    Genau wie beim regulären Webdesign möchten Sie die Dateigrößen der Bilddateien für Ihre E-Mails beachten. Versuchen Sie, sie niedrig zu halten, um sicherzustellen, dass sie für Ihre Abonnenten schnell heruntergeladen werden können.

Hintergrund

  • Hintergrundbilder werden nicht vollständig unterstützt
    Wenn Sie ein Hintergrundbild verwenden, denken Sie daran, dass einige E-Mail-Clients diese nicht anzeigen. Wenn Sie dennoch ein Hintergrundbild verwenden möchten, verwenden Sie die HTML-Hintergrundoptionen anstelle von CSS, um einen Hintergrund zu deklarieren.
  • Ganzkörper-Hintergrundfarben 
    Viele E-Mail-Clients (z. B. Google Mail) zeigen keine Hintergrundfarbe an, die Sie für den Hauptteil (<body> tag) festgelegt haben. Wenn Sie eine Hintergrundfarbe im body-Tag festlegen, empfehlen wir, auch ein wrapping div mit einer Hintergrundfarbe zu verwenden, die Ihren Inhalt umgibt. Auf diese Weise wird selbst dann, wenn die Hintergrundfarbe des Körpers nicht unterstützt wird, etwas ziemlich Ähnliches angezeigt.

Verschiedenes

  • Setzen Sie nichts über das öffnende <body>-Tag
    Alles, was Sie über dem Body-Tag anbringen, wird wahrscheinlich abgestreift und nicht verwendet.
  • Javascript nicht einschließen
    Es ist wahrscheinlich, dass es in den meisten E-Mail-Clients entfernt wird, und einige Spam-Filter könnten es als bösartigen Code erkennen.
  • Microsoft Office wie die Pest beseitigen 
    Das generierte HTML wird Probleme nahezu garantieren. Außerdem werden Sie beim Kopieren und Einfügen aus Office deren Formatierung einfügen und wahrscheinlich Designprobleme haben. 
War dieser Beitrag hilfreich?
3 von 4 fanden dies hilfreich

Have more questions? Submit a request

Direkt loslegen