Mit Brevo erstellte E-Mail-Kampagnen und -Vorlagen sind so konzipiert, dass sie in allen E-Mail-Clients optimal angezeigt werden. Es kann jedoch zu Abweichungen kommen, wenn der Inhalt nicht genau dem Erscheinungsbild des Editors entspricht. E-Mail-Clients haben eigene Rendering-Regeln, weshalb Ihre E-Mails möglicherweise etwas anders dargestellt werden. Trotz Ihrer Bemühungen um das Design sind diese Abweichungen auf die Rendering-Engines zurückzuführen, die von verschiedenen E-Mail-Clients verwendet werden.
Gut zu wissen
- Wenn Sie Outlook verwenden, um E-Mails an Empfänger:innen zu senden, empfehlen wir Ihnen auch unseren entsprechenden Artikel Meine E-Mail wird in Outlook anders angezeigt, der eine ausführlichere Erklärung der Outlook-Rendering-Probleme bietet.
Die häufigsten Rendering-Probleme
Um Sie zu unterstützen, haben wir eine Liste mit unterstützten und nicht unterstützten Funktionen gängiger E-Mail-Clients für Desktop, Mobilgeräte und Web erstellt. Sie wird Ihnen helfen, sich in ihren Nuancen zurechtzufinden und fundierte Designentscheidungen zu treffen.
Rahmenlinien | Schaltflächen | Hintergrundbilder | Reihen in voller Breite | Geringe Zeilenhöhe | Zeichenabstand | Rahmenlinien-Radius | Trennlinienform (gestrichelt, gepunktet, doppelt) | Schriftarten | Social-Media-Symbole | |||
Standard-Schriftarten | Google-Schriftarten | Benutzerdefinierte Schriftarten | ||||||||||
Outlook 365 Webmail | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2019 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2016 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2013 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2011 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Outlook 2010 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2007 | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook 2003 | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Thunderbird | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ |
Thunderbird 60 | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ |
IBM Notes 10 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
IBM Notes 9 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Apple Mail 10 |
✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Apple Mail 12 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Apple Mail 13 |
✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Rahmenlinien | Schaltflächen | Hintergrundbilder | Reihen in voller Breite | Geringe Zeilenhöhe | Zeichenabstand | Rahmenlinien-Radius | Trennlinienform (gestrichelt, gepunktet, doppelt) | Schriftarten | Social-Media-Symbole | |||
Standard-Schriftarten | Google-Schriftarten | Benutzerdefinierte Schriftarten | ||||||||||
Gmail-App | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
Gmail-App für iOS | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
IOS 10 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
IOS 11 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPad Pro | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPad mini | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Microsoft Outlook | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
iPad Pro (12.9") | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPhone X | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPhone 7 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
iPhone 8 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ |
Pixel Gmail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
Samsung-App | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ |
Rahmenlinien | Schaltflächen | Hintergrundbilder | Reihen in voller Breite | Geringe Zeilenhöhe | Zeichenabstand | Rahmenlinien-Radius | Trennlinienform (gestrichelt, gepunktet, doppelt) | Schriftarten | Social-Media-Symbole | |||
Standard-Schriftarten | Google-Schriftarten | Benutzerdefinierte Schriftarten | ||||||||||
AOL Mail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Freenet.de | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Comcast | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Gmail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
GMX.de | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
GSuite | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Outlook.com | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
t-online.de | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Yahoo! Mail | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Web.de | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ |
Wie lassen sich diese Rendering-Probleme lösen?
↩️ Fallback-Optionen integrieren
Fügen Sie eine Fallback-Hintergrundfarbe hinter dem Originalbild ein, falls das Bild nicht gerendert wird, und verwenden Sie Fallback-Schriftarten, wenn Sie Google und benutzerdefinierte Schriftarten in Ihren E-Mails einsetzen. Auf diese Weise können Sie auch dann steuern, was Ihre Empfänger:innen sehen, wenn Probleme auftreten.
🔗 Integrieren Sie einen "Im Browser ansehen"-Link in Ihre E-Mails
Integrieren Sie stets einen "Im Browser ansehen"-Link in Ihre E-Mails. Ein solcher Link ermöglicht es den Leser:innen, Ihre E-Mail-Kampagne in einem Web-Browser aufzurufen, falls sie in ihrem Postfach nicht korrekt angezeigt wird.
🧪 E-Mails testen
Der beste Weg, um festzustellen, ob die bevorzugten Geräte und E-Mail-Clients Ihrer Kontakte den Inhalt Ihrer E-Mail unterstützen, ist es, ein Tool wie Litmus oder Email on Acid zu verwenden. So können Sie eine Vorschau Ihrer E-Mails anzeigen und sehen, wie sie in verschiedenen Umgebungen dargestellt werden. Dann können Sie Änderungen an Ihrem Design vornehmen und Probleme lösen, bevor Sie Ihre E-Mail versenden.
🤔 Sie haben eine Frage?
Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.
Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit dem richtigen zertifizierten Brevo-Expertenpartner zusammenbringen.