El correo electrónico HTML se ve diferente en la aplicación Gmail
Realmente no estoy acostumbrado a hacer correos electrónicos html. Por supuesto, tengo que comenzar haciendo una respuesta en básicamente dos versiones del mismo correo electrónico. Cuando pensé que lo había hecho para la mayoría de los clientes, me di cuenta de que la aplicación de Gmail para Android e iOS le dio al correo electrónico un tercer vistazo. He leído las tiras de gmail en la sección de encabezado, pero incluso si trato de darle estilo, la aplicación de Gmail en línea todavía da el tercer vistazo. Los enlaces a las imágenes en el comentario a continuación muestran cómo debería verse el móvil y la aplicación de Gmail. El problema es donde tengo tres columnas que deberían convertirse en una moviendo la imagen a la izquierda y el encabezado y el texto a la derecha (como imagen móvil). La aplicación Gmail muestra la imagen, el encabezado y el texto en cada línea. En el mejor de los casos, debería parecerse al móvil o al menos a la versión de escritorio.
Cualquier ayuda es apreciada.
Gracias
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
table td { border-collapse: collapse; }
h2, p {margin: 0;}
h2 {padding-top: 15px;}
.img, .text {display: block;}
body .deviceWidth {width: 680px}
@media only screen and (max-width: 640px) {
body .deviceWidth {width: 440px!important; padding:0;}
body .center {text-align: center!important;}
table.triplet {width: 99% !important; padding-bottom: 20px !important;}
.noPadding {padding-left: 0!important;}
.img, .text {width: 50%;}
.text p {padding-right: 20px;}
h2 {padding-top: 0!important;}
}
@media only screen and (max-width: 479px) {
body .deviceWidth {width: 300px!important; padding:0;}
body .center {text-align: center!important;}
.img img {width: 140px;}
}
</style>
<!-- Targeting Windows Mobile -->
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="font-family: Georgia, Times, serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;">
<table class="container deviceWidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="deviceWidth">
<img src="http://placehold.it/680x300" class="deviceWidth" border="0" alt="">
<h1 align="left">Header 1</h1>
<p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding: 0;" width="700">
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 1</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 2</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 3</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>