Wie teste ich am besten einen Newsletter und seine Responsiveness?
Wir haben einen Litmus Account, hier empfiehlt es sich für jeden Kunden den generierten HTML Code hinein zu kopieren und jedesmal ALLE Previews anzusehen um etwaige Details noch für unterschiedliche Clients zu verbessern.
Hinweis: Apfel+s –> generiert automatisch einen neuen Render Durchgang.
Hinweis: Hinzufügen einer zusätzlichen TEST-Email-Adresse ist einfach möglich unter manage users, einen read only user anlegen, dieser ist kostenlos und kann dann einfach mit dem Button “Send Email” als Test beschickt werden.
Ein Beispiel für Problemzonen:
MediaQueries sind in der Gmail App besonders behandelt. Mit dem BEISPIEL CODE weiter unten funktioniert es aber.
Nachdem die Email gerendert wurde für Online Version im Newslettertool-FSO kann man den Code einfach kopieren.
Rechte Maustaste und dann “Source” anzeigen. in Litmus erstellt man eine neue Email und fügt diesen Code ein. Hier kann man gegebenenfalls noch “direkt” code editieren und Anpassungen machen.
Dann rechts oben auf den Button “Run Email Preview ” nun sieht man eigentlich bereits schnell das bei Android 6.0 oder 4.4 der Header in unserem Beispiel NICHT ausgeblendet wird.
Wenn man in der Struktur im HEAD explizit einen eigenen Style angibt innerhalb des HEAD dann entfernt Gmail diesen nicht.
!!! Achtung !!!
Ich habe festgestellt das dieser Code als Einzeiler bei Anrdoid 6.0 nicht funktioniert.
Zusätzlich darf nach dem Selector (in unserem Fall #bird_header) kein Lerzeichen stehen, sonst klappt es NICHT mehr bei android 6.0.
Und zu guter letzt muss nach einem Attribut ein Leerzeichen stehen sonst klappt es NICHT mehr in Adroid 4.4.
Der Code wie hier abgebildet funktioniert auch für Android.
<style>
@media only screen and (max-width: 480px) {
#bird_header{display: none !important;}
}
</style>Beispiel für einen minimal Test direkt versende Test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
FS-Online E-Mail Editor
</title>
<style>
@media (max-width:1200px) {
table.desktop-view{display:none !important;}
}
@media (min-width:1000px) {
table.mobile-view{display:none !important;}
}
</style>
</head>
<body>
<p> irgendwas immer angezeigt </p>
<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
<tr>
<td> mobile content here </td>
</tr>
</table>
<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td> desktop content here </td>
</tr>
</table>
</body>
</html>
- Fonts und Headers:
Manchmal änder gmail seltsamerweise die Fonts und vergrößert dieser z.B um 50%
Workarounds:
Hinzufügen von display: none
<div style="display: none; line-height: 0; color: #ffffff;">
Hello World!
</div>
Hinzufügen von white-space: nowrap
<div style="white-space: nowrap; line-height: 0; color: #ffffff;">
Hello World!
</div>mehr zu den Schriftenproblem hier
Weiterführende Links
Sehr umfangreiche Infos
https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81
https://emailmonks.com/blog/email-coding/html-email-hacks-gmail