Technische Frage: Problem bei der Darstellung von HTML-Emails im Onlineportal
9 years ago
Sehr geehrte Damen und Herren vom Support,
ich hätte an dieser Stelle eine rein technische Fragestellung an Sie. Es geht dabei um folgendes:
Im Rahmen meiner Firmentätigkeit verschicke ich täglich mehrere hundert Mails, wovon ein signifikanter Anteil auch an Kunden mit T-Online Konto geht. In letzter Zeit häufen sich jedoch die Beschwerden darüber, dass die Mails im Onlineportal von T-Online nicht lesbar sind. Dieses Aufkommen von Beschwerden erfolgte erst nach der kürzlichen Umstellung auf HTML E-Mails. Die Problematik die sich hierbei nun ergibt ist die, dass die selben Mails in nahezu allen Clients vollkommen korrekt angezeigt werden, darunter Thunderbird, Outlook (in allen Versionen) und Apple Mail (aber auch weitere wurden erfolgreich getestet). Die Ausnahme bildet hierbei das Onlineportal von T-Online.
Hier ist der Code einer der Mails:
<!DOCTYPE html>
<html style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<head style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<meta name="viewport" content="width=device-width" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<title style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">Initiativbewerbung für die Mitarbeit in Ihrer Einrichtung</title>
<style type="text/css">@media screen and (max-width: 600px) {
a[class="btn"] {
display:block!important;
margin-bottom:10px!important;
background-image:none!important;
margin-right:0!important;
}
table.column {
width: 100% !important;
}
table.main {
width: 100% !important;
}
table.main-half-left {
width: 100% !important;
}
table.main-half-right {
width: 100% !important;
}
div.outer-wrap {
width: 100% !important;
}
table.side {
width: 100% !important;
}
td.btn-wrapper-small {
width: 100% !important;
}
}</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100%!important; height: 100%; line-height: 120%; font-size: 12px; color: #4B4234; background: rgb(203,203,203);">
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<div width="600" style="margin: 0 auto !important;width: 600px;display: block;">
<![endif]-->
<!--[if !mso] -->
<div class="outer-wrap" style="margin: 0 auto !important; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 600px !important; width: 600px; display: block;">
<!-- <![endif]-->
<!-- HEADER -->
<table class="head-wrap" style="margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; width: 100%; max-width: 600px;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<td width="600" style="width: 600px;margin:0 auto;clear:both;">
<![endif]-->
<!--[if !mso] -->
<td class="container" style="margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; display: block; width: 100%; max-width: 600px; clear: both;">
<!-- <![endif]-->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<div>
<![endif]-->
<!--[if !mso] -->
<div class="content" id="head-header" style="margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 600px; display: block; margin-top: 0;">
<!-- <![endif]-->
<table id="head-table" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; max-width: 600px; width: 100%; background: #FFFFFF; padding-top: 0; margin-top: 0;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<td><img style="display: block;" src="http://www.xyz.de/new_mail_logo_scaled.png" alt="XYZ Logo" /></td>
<![endif]--><!--[if !mso] --><td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><img id="header-logo" style="display: block; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 300px; margin-bottom: 5px; height: auto; margin-top: -10px;" src="http://www.xyz.de/wia_logo_new_claim.png" alt="XYZ Logo"></td>
<!-- <![endif]-->
</tr></table>
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</div>
<![endif]--><!--[if !mso] -->
</div>
<!-- <![endif]-->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</td>
<![endif]-->
<!--[if !mso] -->
</td>
<!-- <![endif]-->
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
</tr></table>
<!-- HEADER --><!-- FOOTER --><table class="footer-wrap" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; margin-top: 0; width: 100%; max-width: 600px;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<td width="600" style="width: 600px;margin:0 auto;clear:both;">
<![endif]-->
<!-- content -->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<div>
<![endif]-->
<!--[if !mso] -->
<div class="content" id="footer-foot" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 600px; display: block;">
<!-- <![endif]-->
<!-- social & contact -->
<table class="social" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; padding-top: 20px; background-color: #FFFFFF; max-width: 600px; width: 100%;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<td class="socialdata" align="center" style="margin: 0; padding: 0; font-family: Arial,sans-serif; color: #80827f; font-size: 12px; text-align: center;">
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<hr style="height: 2px;background: #F4F4F4;border: 0;margin-top: 20px;margin-bottom:30px;" align="center" width="95%">
<![endif]-->
<!--[if !mso] -->
<hr class="line" id="socialline" align="center" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 580px; height: 2px; background: #F4F4F4; margin-left: 15px; margin-right: 15px; border: 0; margin-bottom: 30px; margin-top: 20px;">
<!-- <![endif]--><p class="" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<strong style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">Folgen Sie uns auf:</strong>
</p>
<div class="footer_image_wrapper" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<a href="http://www.facebook.com/" title="Facebook" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/facebook-png-mailing.png" alt="Facebook" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
<a href="https://plus.google.com/" title="Google+" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/google-png-mailing.png" alt="Google+" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
<a href="http://twitter.com" title="Twitter" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/twitter-png-mailing.png" alt="Twitter" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
<a href="https://www.xing.com/" title="Xing" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/xing-png-mailing.png" alt="Xing" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
</div>
<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><font class="impressum" style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #505050; line-height: 150%; font-size: 12px; text-align: left;">
<font class="impressum_head" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">HABEN SIE FRAGEN?</font><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
Schreiben Sie eine Email an unseren Kundenservice: <a href="mailto:kundenservice@xyz.de" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">kundenservice@xyz.de</a><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
oder rufen Sie uns an unter <font class="impressum_phone" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">0123456</font>
</font>
<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><font class="impressum" style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #505050; line-height: 150%; font-size: 12px; text-align: left;">
XYZ GmbH, Geschäftsführung: Testperson<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
Adressdummy
</font>
<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
</td>
</tr></table>
<!-- /social & contact --><!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</div>
<![endif]--><!--[if !mso] -->
</div>
<!-- <![endif]--><!-- /content -->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</td>
<![endif]-->
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
</tr></table>
<!-- /FOOTER --><!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</div>
<![endif]--><!--[if !mso] -->
</div>
<!-- <![endif]-->
</body>
</html>Den eigentlichen Inhalt habe ich weggelassen. So sollte jetzt eigentlich noch der Header und der Footer der Mail angezeigt werden. Tatsächlich wird jedoch nur noch der Header angezeigt, sowie zwei horizontale Linien (bedingt durch die <hr>-Tags.
Ich hoffe Sie können mir bei dieser Problemstellung helfen. Für Rückfragen stehe ich Ihnen gerne zur Verfügung.
Mit freundlichen Grüßen,
Alexander Keller
Note:
This post has been closed.
Note:
This post is no longer open for answers or comments and is no longer visible to community members.
1011
0
This could help you too
Solved
in
771
0
1
Solved
in
3254
0
5
Solved
285
0
4
5 years ago
in
293
0
2
9 years ago
Ich habe einmal direkt bei den Kollegen nachgefragt.
Diese haben mir folgende Infos zukommen lassen.
Sie verwenden das E-Mail Center und können eine E-Mail dort nicht öffnen? Sie versenden selber E-Mali (z.B. Newsletter) an Empfänger mit der Endung @wafel und diese können nur Ihre E-Mails im E-Mail Center nicht öffnen? Rufen die Empfänger aber mit dem Smartphone oder einem E-Mail Programm ab, ist die Mail Problemlos zu öffnen?
Wenn eine Mail erzeugt wird, wird im Header festgelegt um was für einen Inhalt es sich in der Mail handelt und in welcher Kodierung dieser dargestellt wird. Mit einigen Kodierungen (z. B.: Content-Transfer-Encoding: quoted-printable) hat das E-Mail Center zur Zeit Probleme. Diese Probleme werden sicherlich mit einem der nächsten Updates des E-Mail Centers behoben werden.
Wenn Sie Versender solcher Mails sind, können Sie kurzfristige für eine Lösung des Fehler sorgen in dem Sie die Kodierung ändern. Beste Ergebnisse konnten wir mit
Content-Type: text/html; charset = "utf-8" Content-Transfer-Encoding: base64 feststellen.
Viele Grüße
Raphaela T.
0