Den gesamten Blogartikel, finden Sie hier: https://www.mailjet.de/blog/news/gestalten-sie-responsive-e-mails-fur-alle-mail-clients/?utm_source=slideshare&utm_campaign=für-alle-email-clients-optimieren&utm_medium=presentation Ob Apple, Gmail, Outlook oder Google Android, es gibt unzählige E-Mail Clients, die für E-Mail Marketer und Entwickler oft eine große Herausforderung darstellen. Immer mehr E-Mails werden mobil gelesen und die Anpassungsfähigkeit dieser, ist heutzutage einer der entscheidenen Faktoren im E-Mail Marketing. Wie Sie die Hürden der unterschiedlichen E-Mail Clients überwinden und Ihre Kampagnen für alle Clients optimieren, erfahren Sie in unserem Blogartikel.

1. So optimieren Sie Ihre
Kampagnen für alle
E-Mail Clients

2. 01 Gründe warum auch bei responsiven
Layouts Probleme auftreten
Verschiedene E-Mail Clients &
deren Charakteristiken02Inhalt
03 Empfehlungen zur Gestaltung einer
E-Mail Kampagne

3. Lesen Sie hier den ganzen Artikel:
So optimieren Sie Ihre
Kampagnen für alle E-Mail Clients

4. Gründe warum auch
bei responsiven
Layouts Probleme
auftreten
01

5. Gründe warum auch bei responsiven Layouts
Probleme auftreten
• Unterschiedliche Bildschirmgrößen
Verschiedene Größen von Smartphones & Tablets
lassen das Layout nicht bei allen E-Mails einheitlich erscheinen.
01
• Verschiedene Betriebssysteme, Browser & E-Mail Clients
Die Kombination ergibt eine Vielzahl an Darstellungsmöglichkeiten
einer E-Mail.
• Technische Unterstützung durch den E-Mail Client
Einige Clients blockieren beispielsweise Bilder oder andere
Inhalte.
Tipp: Um responsive E-Mails zu
entwerfen und zu formatieren,
bietet sich Media Queries und
CSS an. Dies ist zur Zeit die
einfachste Methode
E-Mails so zu strukturieren, dass
Sie sich automatisch an
verschiedene Geräte anpassen.

6. Verschiedene
E-Mail Clients & ihre
Charakteristiken
02

7. Verschiedene E-Mail Clients & ihre Charakteristiken02
Dies sind die beliebtesten
E-Mail Programme am Markt.
Im Folgenden stellen wir die fünf
meist verwendeten E-Mail
Clients vor.

8. Apple iPhone

9. Apple iPhone
Verschiedene E-Mail Clients & ihre Charakteristiken02
Funktionen Probleme
iOS10 besitzt eine einfache Abmeldefunktion Teilweise vergrößerte und verzerrte Darstellung
Unterstützung von HTML5 Videos & Media
Queries
Keine Unterstützung von <iframes>
• deaktivieren Sie die automatische Skalierung vollständig
• berücksichtigen Sie die Bildschirmbreite
So sehen Ihre E-Mails trotzdem gut aus:

10. Gmail

11. Gmail
Verschiedene E-Mail Clients & ihre Charakteristiken02
Funktionen
Einfache Abmeldefunktion
Unterstützung von Embeddet Styles,Media Queries & Display
Ausblendung des Preheader-Textes möglich
Einbettung von CSS im E-Mail Header
Googlemail hat Ende 2016 seine Baustellen beseitigt und ist in kürzester
Zeit zum beliebtesten E-Mail Client geworden.

12. Lesen Sie hier den ganzen Artikel:
So optimieren Sie Ihre
Kampagnen für alle E-Mail Clients

13. Apple iPad

14. Apple iPad
Die Bildschirmgröße ist groß genug, um die meisten Designs fehlerfrei darzustellen.
Verschiedene E-Mail Clients & ihre Charakteristiken02
Funktionen
Verwendung des Darstellungsprogramms WebKit
Unterstützung von Hintergrundbildern, Videos & ansprechenden Designs
Sehr ähnliche Technik wie Apple iPhone

15. Outlook 2013

16. Outlook 2013
Die Verwendung von ALT-Text bei den Bildern ist unabdingbar, sodass der Empfänger
den Sinn der Nachricht auch versteht.
02 Verschiedene E-Mail Clients & ihre Charakteristiken
Funktionen Probleme
Unterstützung von HTML5 Videos,
Styled ALT-Text, animierte GIFs &
Emoji in der Betreffzeile
Blockiert Bilder standardmäßig, bei Absendern,
die vom Benutzer nicht als sicher markiert
worden sind

17. Apple Mail

18. Lesen Sie hier den ganzen Artikel:
So optimieren Sie Ihre
Kampagnen für alle E-Mail Clients

19. Apple Mail
Ist als eines der stabilsten und gängigsten E-Mail Programme bekannt.
02 Verschiedene E-Mail Clients & ihre Charakteristiken
Funktionen
Verwendung des Darstellungsprogramms WebKit
Unterstützung von Google Chrome & Apple Safari

20. Empfehlung zur
Gestaltung Ihrer
E-Mail Kampagne
03

21. Die unterschiedlichen Clients, Browser und Betriebssysteme ermöglichen kein
einheitliches E-Mail Design, auch bei responsiven E-Mails gibt es keine Garantie für eine
optimale Darstellung!
Empfehlung zur Gestaltung Ihrer E-Mail Kampagne03
Tipp: Halten Sie sich an die
80/20 Regel und wählen Sie
die Top 3 (ca. 80%) E-Mail
Programme aus Ihrem
Statistikbereich aus, die von
Ihren Kunden am meisten
genutzt werden. Optimieren
Sie Ihre E-Mails speziell auf
diese Clients.

22. Layout

23. Für alle Formate gelten die gleichen Regeln:
03 Empfehlung zur Gestaltung Ihrer E-Mail Kampagne
1. Gestalten Sie Ihr Layout so einfach wie möglich, mit HTML oder MJML.
2. Verwenden Sie einspaltige Layouts für E-Mails, die auf mobilen
Endgeräten geöffnet werden.
3. Verwenden Sie ein responsives E-Mail Design bei zwei- oder
dreispaltigen E-Mails.
4. Beachten Sie die Reihenfolge der Inhalte und stellen Sie die
wichtigsten Informationen an den Anfang.
5. Erstellen Sie einige E-Mail Vorlagen, die Sie für regelmäßige
Kampagnen anpassen und wiederverwenden.
6. Behalten Sie neuste Techniken, wie Smartwatches und Wearables für
die Zukunft im Hinterkopf.

24. Text

25. So passen Sie Ihren Text optimal an:
03 Empfehlung zur Gestaltung Ihrer E-Mail Kampagne
1. Verwenden Sie kürzere Texte und brechen Sie lange
Abschnitte.
2. Geben Sie Ihren Lesern ausschließlich eine Kostprobe Ihrer
Inhalte und fügen Sie einen weiterleitenden Link ein.
3. Arbeiten Sie mit Abstandshaltern.
4. Lassen Sie über, unter und neben Ihren Texten immer
ausreichend Platz.
5. Versuchen Sie Ihre Betreffzeile und Ihren Absendernamen
möglichst kurz zu halten.

26. Lesen Sie hier den ganzen Artikel:
So optimieren Sie Ihre
Kampagnen für alle E-Mail Clients

27. Bilder

28. Hinsichtlich der E-Mail Optimierung spielt die Bildgröße eine zentrale Rolle.
Empfehlung zur Gestaltung Ihrer E-Mail Kampagne03
Zu große Bilder verlangsamen die Ladezeit der E-Mails erheblich und es
besteht ein hohes Risiko, dass Ihre E-Mails nicht gelesen oder vom E-Mail
Client blockiert werden.
Zu kleine Bilder dagegen sind nicht gut erkennbar und nicht
benutzerfreundlich.
Verwenden Sie daher möglichst einfache Grafiken oder Fotos mit einem Hauptmotiv!

29. Was tun wenn der E-Mail Client Ihre Bilder standardmäßig unterdrückt?
Empfehlung zur Gestaltung Ihrer E-Mail Kampagne03
Damit keine Informationen verloren gehen, arbeiten Sie mit Alternativtexten (ALT-Texten) und testen Sie Ihre E-Mail vor
dem Versand mit deaktivierten Bildern!

30. Call-to-Action

31. Beim Call-to-Action gelten ähnlichen Regeln wie beim Text:
03 Empfehlung zur Gestaltung Ihrer E-Mail Kampagne
Gestalten Sie Ihre Buttons als formatierte Textlinks anstatt als Bild und lassen Sie um Ihren
Link herum ausreichend Platz.

32. Mailjet Deutschland
Hat Ihnen unsere Präsentation gefallen?
Lesen Sie hier den ganzen Blogartikel dazu.