Отзывчивые письма с подтверждением заказа для мобильных устройств?
Я никогда не видел замечательного письма с подтверждением заказа/счета-фактуры. Даже лучшие веб-сайты html5 отправляют страшные письма с подтверждением заказа (иногда в виде простого текста). Я считаю, что это связано с тем, что в счет-фактуре обычно требуется использование таблиц для показа приобретенных товаров, которые чрезвычайно сложно реализовать на мобильных устройствах.
Я нашел несколько трюков, чтобы сделать таблицы более управляемыми на мобильных телефонах:
http://css-tricks.com/examples/ResponsiveTables/responsive.php, но для электронного письма с подтверждением заказа этот подход не подходит для таблицы счетов.
Есть ли альтернативы тому, чтобы письмо с подтверждением заказа выглядело хорошо на мобильных устройствах? и когда вы делаете письмо с подтверждением заказа, вы должны держаться подальше от таблиц?
Ответы
Ответ 1
Вы можете использовать макет жидкости, чтобы установить всю ширину и быть в процентах.
Я также рассмотрю макеты сетки или макеты столбцов.
До сих пор большинство крупных сайтов, таких как eBay Google и т.д., все еще используют таблицы для отправки своих писем.
Таблицы по-прежнему полезны и широко используются, но с новыми таблицами css3, такими как flex, column-count, grid. Таблицы, вероятно, будут обесцениваться в будущем.
Опять новые функции CSS3 все еще находятся в тестировании, поэтому не совместимы со всеми браузерами.
http://www.w3schools.com/css/css3_multiple_columns.asp
http://www.w3schools.com/cssref/css3_pr_box-flex.asp
Ответ 2
Как насчет чего-то подобного? Это использует метод жидкости/жидкости, который работает на всех основных клиентах, включая те, которые не поддерживают медиа-запросы (Gmail и т.д.):
<!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">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
table td {border-collapse: collapse;}
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#CCCCCC" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 24px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
Invoice
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="70%" align="left" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-right:0;">
Item
</td>
<td width="30%" align="right" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-left:0;">
Price
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Nike Shoes
</td>
<td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$100
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Spy Sunglasses
</td>
<td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$120
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Buffalo Jeans
</td>
<td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$80
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Seiko Watch
</td>
<td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$260
</td>
</tr>
<tr>
<td width="70%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
<b>TOTAL</b>
</td>
<td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
<b>$560</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 14px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
Thanks for shopping with us! <!-- using will prevent orphan words -->
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>
Просто помните, что этот шаблон не действует при изменении размера вашего окна браузера. Однако он работает на всех основных почтовых клиентах.
