HTML-почта выглядит по-другому в приложении Gmail
Я не очень привык делать электронные письма в формате html. Конечно, я должен начать делать отзывчивый в двух версиях одного и того же письма. Когда я подумал, что это сделано для большинства клиентов, я понял, что приложение gmail для Android и iOS дало электронному письму третий вид. Я прочитал разделы заголовков gmail, но даже если я попытаюсь стилизовать его, встроенное приложение gmail все равно создает третий вид. Ссылки на изображения в комментариях ниже показывают, как должно выглядеть мобильное устройство и приложение gmail. Беда в том, что у меня есть три столбца, которые должны превратиться в один, перемещая изображение влево, а заголовок и текст справа (например, мобильное изображение). Приложение Gmail показывает изображение, заголовок и текст на каждой их строке. Он должен - в лучшем случае - выглядеть как мобильный или, по крайней мере, выглядеть как настольная версия.
Любая помощь приветствуется.
Спасибо
Код:
<!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>
1 ответ
Когда вы используете align="left" на таблицах это как плавающий левый в CSS. Это то, что делает Gmail, он перемещает вашу текстовую таблицу, вызывая ее переполнение (всплывающее) под таблицей изображений.
Если вы хотите, чтобы ваш текст в таблицах был выровнен, поместите его в <td> в этих таблицах вместо.
Обновить:
Для отклика в html-письме попробуйте использовать display:block; техника переключения:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
@media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="switch" width="50%">
<img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td class="switch" width="50%" valign="top" style="padding:30px;">
Text here...
</td>
</tr>
</table>
</body></html>
Gmail будет игнорировать это, поскольку удаляет тег стиля, оставляя макет по умолчанию без ответа.