0
J'ai créé un e-mail HTML qui présente un problème de mise en page particulier lorsqu'il est affiché dans Gmail sur un navigateur Web et sur l'application Android (Gmail). Jusqu'à présent, je n'ai pas réussi à retrouver le code incriminé et je n'arrive pas à comprendre pourquoi Gmail divise l'e-mail HTML en deux points et place le contenu dans deux colonnes distinctes.Eclatement de la mise en page HTML électronique dans Gmail
Si quelqu'un peut vous aider à suggérer une solution ou quelle est la cause du problème, avec une solution potentielle alors ce serait très apprécié.
HTML visible ici:
https://jsfiddle.net/59bd2z0L/
Captures d'écran de problème ici (navigateur Web Gmail):
Captures d'écran de problème ici (Gmail Android App):
Source HTML ici:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
map area {outline:none;}
</style>
<title>Lorem Ipsum</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<font style="font-size:13px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">Header goes here Lorem ipsum dolor sit amet, consectetur.<media><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a style="color:#000000;" href="&&&">click here</a>.</font><br /><br />
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><a style="color:#000000;" href="">Lorem Ipsum</a></font><br />
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%"><tr><td></td><td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>
<!-- Image Section -->
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/gold-te-header.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a></center>
<!-- End Image Section -->
<!-- Image Section -->
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-logo.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a></center>
<!-- End Image Section -->
</td></tr>
<tr><td height="10" style="font-size: 1px; line-height: 10px;"> </td></tr>
<!-- Menu Section -->
<tr><td><center><table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-top.jpg" width="100%" style="max-width:121px;" alt="Women" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-top.jpg" width="100%" style="max-width:81px;" alt="Men" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-top.jpg" width="100%" style="max-width:116px;" alt="Unisex" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-top.jpg" width="100%" style="max-width:165px;" alt="Footwear" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/clear-top.jpg" width="100%" style="max-width:157px;" alt="Clearance" border="0" /></a></td>
</tr></table></center></td></tr>
<!-- End Menu Section -->
<tr><td height="10" style="font-size: 1px; line-height: 10px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork1.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork2.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork3.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Large Live Text Section -->
<tr><td>
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Size 19 Live text:</strong> et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque deserunt mollitia animi, id est laborum.</strong>
</font>
</center>
</td></tr>
<!-- End Large Live Text Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork4cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork5.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork6cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Letter Text Section -->
<tr><td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="3%"></td><td width="94%">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td><td width="3%"></td></tr></table>
</td></tr>
<!-- End Letter Text Section -->
<tr><td height="30" style="font-size: 1px; line-height: 30px;"> </td></tr>
<!-- Grey Background Section -->
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<tr><td bgcolor="#eff0f2">
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Lorem ipsum dolor sit amet, consectetur</strong><br /><br /><br />
</font>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Lorem ipsum dolor sit amet, consectetur.
</font>
</center>
</td></tr>
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- End Grey Background Section -->
<tr><td height="30" style="font-size: 1px; line-height: 30px;"> </td></tr>
<!-- Double Banner -->
<tr><td><center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/email-ecat.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-banner-r.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a></center></td></tr>
<!-- End Double Banner -->
<!-- USP Section -->
<tr><td><center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-locator.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-size.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-care.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-returns.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a></center></td></tr>
<!-- End USP Section -->
<!-- Social Section -->
<tr><td><center><table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-fbook.jpg" width="100%" style="max-width:196px;" alt="Facebook" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-pin.jpg" width="100%" style="max-width:78px;" alt="Pinterest" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-twi.jpg" width="100%" style="max-width:77px;" alt="Twitter" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-google.jpg" width="100%" style="max-width:96px;" alt="Google+" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-blog.jpg" width="100%" style="max-width:192px;" alt="Blog" border="0" /></a></td>
</tr></table></center></td></tr>
<!-- End Social Section -->
<!-- Bottom Menu -->
<tr><td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-viewmore.jpg" width="100%" style="max-width:639px;" alt="View More" /></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-bot.jpg" width="100%" style="max-width:639px;" alt="Women" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-bot.jpg" width="100%" style="max-width:639px;" alt="Men" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-bot.jpg" width="100%" style="max-width:639px;" alt="Unisex" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-bot.jpg" width="100%" style="max-width:639px;" alt="Footwear" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-security.jpg" width="100%" style="max-width:639px;" alt="Clearance" border="0" /></a></center>
</td></tr>
<!-- End Bottom Menu -->
<!-- Security Banners -->
<tr><td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-1.jpg" width="100%" style="max-width:639px;" alt="Security" /></center>
</td></tr>
<!-- End Security Banners -->
<!-- T&Cs -->
<tr><td>
<center>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td></tr>
<!-- End T&Cs -->
</table>
</td><td></td></tr></table>
</center>
</body>
</html>
S'il vous plaît vérifier votre code d'abord, il y a beaucoup de problèmes avec elle; https://validator.w3.org/check. Aussi, je préfère toujours Zurb Ink pour les thèmes de mail HTML; http://foundation.zurb.com/emails.html – dutchsociety
Les violations W3C sont dues à la création de code de courrier électronique HTML pour le support des clients plus âgés. Malheureusement, en raison de contraintes au travail, le luxe d'utiliser Foundation for Emails, mais je vous remercie pour vos recommandations. – user1554264