Zum Hauptinhalt springen

Verstehen Sie die Grundlagen von E-Mail-HTML

Erfahren Sie mehr über E-Mail-Design und bewährte HTML-Codierungspraktiken

Verfasst von Paulius

Dieser Leitfaden beschreibt die Codierungs- und Designstandards für benutzerdefinierte HTML-E-Mails in Omnisend. Verwenden Sie diese Best Practices, um sicherzustellen, dass Ihre E-Mails korrekt in Gmail, Outlook, Apple Mail und auf mobilen Geräten angezeigt werden.

⚡ Wichtige Ressourcen:

E-Mail-HTML-Codierungsstandards

Die E-Mail-Clients (insbesondere Outlook 2007–2010) verwenden eingeschränkte Rendering-Engines. Befolgen Sie diese Regeln, um die Kompatibilität sicherzustellen.

Layout & Tabellen

  • Verwenden Sie <table> für alle Layouts.Verschachteln Sie Tabellen, um komplexe Strukturen zu erstellen.

  • Setzen Sie Dimensionen mit Elementattributen (cellpadding, align, width) anstelle von CSS. Dies erzwingt eine Box-Modell-Struktur.

  • Vermeiden Sie <div>, <span> und CSS-Positionierung (float, position, clear). Die E-Mail-Clients entfernen oder ignorieren diese.

CSS & Styling

  • Verwenden Sie nur Inline-CSS. Omnisend-Vorlagen enthalten automatisch Inline-CSS.

  • Halten Sie CSS einfach:

    • Vermeiden Sie Kurzschreibweisen (#000 → verwenden Sie #000000)

    • Vermeiden Sie zusammengesetzte Deklarationen (font:#000 12px Arial → in separate Eigenschaften aufteilen)

    • Vermeiden Sie komplexe Selektoren (Nachfahren, Kinder, Pseudo-Elemente)

Bilder, Schaltflächen & Links

  • Fügen Sie allen Bildern Alt-Text hinzu. Die meisten E-Mail-Clients blockieren Bilder standardmäßig. Alt-Text hilft, Ihre Nachricht zu kommunizieren, selbst wenn Bilder nicht geladen werden.

  • Verwenden Sie ausfallsichere Schaltflächen (mit HTML/CSS codiert) anstelle von Bildschaltflächen. E-Mail-Clients können Bilder blockieren, wodurch bildbasierte Schaltflächen unsichtbar werden.

  • Hosten Sie Bilder auf einem zuverlässigen Server mit absoluten URLs (https://yourserver.com/image.jpg). Vermeiden Sie relative Pfade.

Mobil & Interaktivität

  • Gestalten Sie E-Mails mobilfreundlich. Verwenden Sie Media Queries, um die Schriftgröße auf kleinen Bildschirmen zu erhöhen und sicherzustellen, dass die Antippziele mindestens 46x46px groß sind.

  • Vermeiden Sie Flash und JavaScript. Verwenden Sie animierte GIFs, wenn Sie Bewegung benötigen.

Testen

Testen Sie immer vor dem Versenden:

  • Verwenden Sie Omnisend's Vorschaufunktion, um Desktop- und mobile Ansichten zu überprüfen.

  • Versenden Sie Test-E-Mails an sich selbst über Gmail, Outlook und Apple Mail.

  • Berücksichtigen Sie E-Mail-Testdienste wie Litmus zur plattformübergreifenden Validierung.

Hinweis: E-Mail-HTML unterscheidet sich von Web-HTML; viele moderne CSS-Eigenschaften werden in E-Mail-Clients wie Outlook nicht unterstützt.

Best Practices für das E-Mail-Design

Befolgen Sie diese Designrichtlinien, um die Zustellbarkeit und Benutzererfahrung zu verbessern.

Layout & Breite

  • Maximale Breite: 600–800px (600px empfohlen). Dies stellt sicher, dass E-Mails korrekt in Vorschaufenstern angezeigt werden.

  • Verwenden Sie einfache, rasterbasierte Layouts. Vermeiden Sie komplexe Elemente, die Floats oder absolute Positionierung erfordern.

Bilder & Text

  • Gehen Sie davon aus, dass Bilder blockiert werden. Gestalten Sie E-Mails so, dass Ihre Botschaft auch ohne geladene Bilder kommuniziert wird.

  • Vermeiden Sie E-Mails, die nur aus Bildern bestehen. Ein niedriges Verhältnis von Text zu Bildern löst Spam-Filter aus. Zerteilte Bilder werden auch inkonsistent in verschiedenen E-Mail-Clients dargestellt.

Schriften

Mobiles Design

  • Überprüfen Sie die Lesbarkeit auf kleinen Bildschirmen. Können Benutzer Ihre E-Mail in Armlänge auf einem Telefon lesen?

  • Optimieren Sie die Bildgrößen, um langsame Ladezeiten zu vermeiden.

  • Gestalten Sie Links fingerfreundlich. Stellen Sie sicher, dass Schaltflächen und Links leicht antippbar sind.

⚡ Tipp: Über 50 % der E-Mails werden auf mobilen Geräten geöffnet. Bevor Sie senden, vorschau Ihre E-Mail auf dem Handy und senden Sie eine Testkampagne an sich selbst auf Ihr Handy. Überprüfen Sie die Schriftgröße, die Größe der Antippziele (Schaltflächen/Links) und die Ladezeiten der Bilder.

Häufig gestellte Fragen

Warum sieht meine E-Mail in Outlook kaputt aus, aber in Gmail gut aus?
Outlook verwendet die Rendering-Engine von Microsoft Word, die im Vergleich zur browserbasierten Engine von Gmail sehr eingeschränkte HTML/CSS-Unterstützung hat. Um die Kompatibilität sicherzustellen:

  • Halten Sie die E-Mail-Breite bei 600px (maximal 650px).

  • Verwenden Sie einfache, tabellenbasierte Layouts (einzelne Spalte).

  • Vermeiden Sie Hintergrundbilder, border-radius, box-shadow und flexbox.

  • Verwenden Sie nur Inline-CSS (keine <style>-Blöcke).

  • Testen Sie immer in echten Outlook-Postfächern, bevor Sie senden.

Kann ich steuern, wie meine E-Mail im Dunkelmodus aussieht?

Nein. Der Dunkelmodus wird von den E-Mail-Clients und den Geräteeinstellungen Ihrer Abonnenten (Gmail, Apple Mail, Outlook usw.) und nicht vom Absender gesteuert. Die E-Mail-Clients entscheiden, wie die Farbinversion angewendet wird. Erfahren Sie, wie Sie E-Mails für den Dunkelmodus in der Vorschau anzeigen und optimieren.

⚡ Best Practices:

  • Verwenden Sie Omnisend's Dunkelmodus-Vorschau vor dem Versenden (Vorschau → Schalter "Vorschau im Dunkelmodus").

  • Gestalten Sie für sowohl helle als auch dunkle Themen – testen Sie im Voll- und Teilinversionsmodus.

  • Optimieren Sie Logos und Bilder: Fügen Sie farbige Hintergründe oder helle Umrisse hinzu, um das Verschwinden von Elementen zu verhindern.

  • Halten Sie den Text einfach: Schwarzer Text auf weißen Hintergründen invertiert sauber.

Um weitere Unterstützung zu erhalten, wenden Sie sich bitte über den In-App-Chat oder per E-Mail an unser preisgekröntes Support-Team unter [email protected].

Verwandte Artikel
Hat dies deine Frage beantwortet?