Das Hinzufügen von Hintergrundbildern ist wohl der einfachste Weg, um E-Mails sowohl atemberaubend als auch funktionaler zu gestalten. Aber unterstützen alle E-Mail-Clients diese Funktion?
Unterstützung von Hintergrundbildern
Das Hauptproblem beim Hinzufügen von Hintergrundbildern in E-Mails ist, dass sie aus Sicherheits- oder anderen Gründen nicht von allen E-Mail-Clients unterstützt werden.
Webmail: Kein Ärger
Die Anzeige von Hintergrundbildern in Webmail-Clients ist das am wenigsten problematische Unterfangen: Alle wichtigen Plattformen unterstützen diese Funktion. Die einzige Ausnahme ist Yahoo! Mail, das Schrägstrich-Syntaxwerte entfernt und den Wert ungültig macht.
Gemischte Handytasche
Etwa die Hälfte der gängigen E-Mail-Anwendungen kann Hintergrundbilder anzeigen, und die übrigen bieten zumindest teilweise Unterstützung. Das häufigste Problem ist die fehlende Unterstützung für die CSS-Eigenschaft "background-attachment: fixed".
Desktop bedeutet Ärger
Desktop-basierte E-Mail-Clients haben am meisten mit Hintergrundbildern zu kämpfen. Derzeit sind nur Apple Mail 10, Outlook für Mac und Thunderbird vollständig kompatibel, während der Rest der Desktop-Clients nur teilweise oder gar nicht unterstützt wird.
In der nachstehenden Tabelle finden Sie eine detailliertere Übersicht über die Hintergrundunterstützung der verschiedenen E-Mail-Clients.
Hintergrundbild Vorteile
Ein großer Vorteil von Hintergrundbildern ist, dass Sie zusätzliche HTML-Inhalte darauf platzieren können. Denn im Gegensatz zu normalen Bildern können Hintergrundbilder zusätzliche Informationsebenen enthalten. Sie können zum Beispiel zusätzliche Bilder, Text oder Handlungsaufforderungen im selben Raum unterbringen.
Werfen Sie einen Blick auf die Werbe-E-Mail von Salesforce, um das Layering in Aktion zu sehen:
Ein weiterer Vorteil der Verwendung von Hintergrundbildern anstelle von Text im Bild selbst ist, dass der HTML-Inhalt über dem Bild auch dann lesbar bleibt, wenn die Bilder vom E-Mail-Client deaktiviert werden. Mit anderen Worten: Hintergrundbilder sind eine großartige Möglichkeit, Ihre E-Mails leichter zugänglich zu machen.
Codierung von Hintergrundbildern in E-Mails
Es gibt zwei Hauptmethoden, um ein Hintergrundbild in E-Mail-Inhalte einzufügen:
- Setzen von HTML-Attributen für eine Tabelle oder eine Tabellenzelle (table- bzw. td-Elemente)
- Hinzufügen von CSS-Styling zu Tabellen- oder Zellenelementen
HTML-Tabellenattribute verwenden
Die Verwendung des Hintergrundattributs in einer Tabelle oder Tabellenzelle ist die älteste Methode zur Implementierung von Hintergrundbildfunktionen. Obwohl diese Methode von den Entwicklern inzwischen als veraltet und veraltet angesehen wird, funktioniert sie aufgrund der Abwärtskompatibilität von HTML immer noch. Im Grunde geben Sie dem E-Mail-Client vor, ein Hintergrundbild zu rendern, das unter der angegebenen URL gespeichert ist. Hier ist ein Code-Beispiel:
Eines der nützlichsten Hintergrundattribute ist background-size, mit dem Sie angeben können, wie groß das Bild in Bezug auf den verfügbaren Platz sein soll. Dies ist sehr nützlich auf mobilen Geräten mit begrenztem Platz. Anstatt das Gerät das Bild verkleinern zu lassen (dies ist oft das Standardverhalten), können Sie Werte wie cover oder contain verwenden, um das Bild anmutiger anzuzeigen.
Hinzufügen von CSS-Eigenschaften
Eine modernere und flexiblere Methode ist die Verwendung der CSS-Eigenschaft background-image inline in einem div- oder td-Container. Die Eigenschaft "background-image" verwendet wiederum eine URL als Quelle für ein Hintergrundbild.
Es ist wichtig zu wissen, dass Sie unabhängig von der gewählten Methode (HTML-Attribute oder CSS-Eigenschaften) nicht in der Lage sein werden, die Abmessungen zu bearbeiten oder die Position des Hintergrundbildes zu ändern. Außerdem, wenn die Abmessungen des
Container größer ist als das Bild selbst, würde sich das Bild wiederholen. Sie können diese Situationen jedoch vermeiden, indem Sie:
- Verhinderung der Wiederholung des Hintergrundbildes (Eigenschaft background-repeat:no-repeat),
- Angabe der Hintergrundposition (Eigenschaft background-position)
Die Codierung von E-Mail-Inhalten in HTML ist natürlich nicht jedermanns Sache. Deshalb haben wir die Konfiguration des Hintergrundbildes direkt in die JungleMail Schnittstelle. Wählen Sie einfach einen Inhaltsbereich aus, aktivieren Sie das Hintergrundbild des Abschnitts auf der rechten Seite, wählen Sie ein Bild aus, markieren Sie einige Kästchen für ein besseres Layout, und schon können Sie loslegen.
Mitbringsel
- Bei der E-Mail-Codierung ist es im Allgemeinen ratsam, Eigenschaften zu verwenden, die schon seit langem bekannt sind. Je älter die HTML- oder CSS-Regel ist, desto wahrscheinlicher ist es, dass sie funktioniert. Mit dieser Richtlinie im Hinterkopf ist es keine Überraschung, dass das Hintergrundattribut einer Tabelle von allen E-Mail-Clients am besten unterstützt wird.
- Um auf der sicheren Seite zu sein, ist es immer gut, einen ALT-Text für Ihre Bilder zu haben. Geben Sie auch die Breite und Größe Ihres Bildes an: So erhält Ihr ALT-Text einen Anzeigecontainer, wenn Bilder deaktiviert sind. Wenn Sie die Abmessungen nicht angeben, klappen einige E-Mail-Clients diesen Bereich zusammen mit dem ALT-Text zu.
- Wir empfehlen auch die Angabe einer Ersatzfarbe mit dem Attribut bgcolor. Dadurch wird sichergestellt, dass der Inhalt Ihrer E-Mail auch dann lesbar ist, wenn das Hintergrundbild nicht angezeigt wird, da es sich um eine Ersatzfarbe handelt.
Bringen Sie Ihre interne Kommunikation auf ein neues Niveau
Testen Sie das JungleMail Newsletter-Tool kostenlos!
Start Frei