Основы верстки html писем
Любой веб-разработчик рано или поздно сталкивается с необходимостью верстки писем для рассылок и уведомлений с сайта. Это касается не только интернет-магазинов, где имеется острая необходимость в создании удобных и, желательно, красивых писем-уведомлений о статусе заказа, но также и других сайтов, имеющих возможность регистрации или подписки на новости.
Как показала практика, в русском сегменте интернета развернутых статей на эту тему не так уж и много, - в основном приводятся весьма обобщенные рекомендации. А так как я с недавних пор занялся этой тематикой, не могу упустить возможность немного рассказать об этом своим читателям =)
Здесь мы будет говорить про обычные письма.
Основные задачи:
1) добиться корректного отображения письма в почтовых клиентах (MS Outlook 2003/2007/2010/2013, Mozilla thunderbird, The Bat)
2) добиться корректного отображения в веб-интерфейсах основных почтовых сервисов (mail.ru, yandex, gmail, outlook.com, yahoo)
Существует довольно много нюансов, которые следует учитывать.
1. Doctype:
Письмо должно иметь данный doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
с кодировкой могут быть варианты, но лучше использовать utf-8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2. Табличная верстка:
Используйте табличную верстку.
При этом, следует использовать максимально простую структуру таблиц. старайтесь избегать объединения ячеек (colspan, rowspan). Сложные таблицы не всегда верно воспроизводятся Outlook. Поэтому лучше используйте вложенные таблицы.
Все письмо следует обернуть в таблицу с шириной 100% и белым фоновым цветом (bgcolor="#ffffff") (либо цветом фона, соответствующим дизайну вашего письма)
И не забывайте указывать align и valign у ячеек.
Outlook 2007/2010/2013 использует текстовый движок для обработки html писем (по сути - MS Word), поэтому в случае "длинных" таблиц в этих почтовиках могут появляться разрывы страниц (они выглядят как белое пространство, разрывающее таблицу). Чтобы избежать их появления - старайтесь чтобы высота таблицы не превышала 1800px.
3. Текст и ссылки:
Оформление текста следует производить тегами - span. Для родительской ячейки необходимо указать line-height (это принципиально для Outlook 2013 и некоторых веб-интерфейсов). Если же в ячейке присутствует текст разного размера, то каждый блок текста следует обернуть в <div> с прописанным line-height (к слову сказать - веб-интерфейс outlook.com игнорирует line-height прописанный у td).
вот так должен выглядеть абзац текста для html письма:
<div style="line-height:18px;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#000000;">
Мы работаем над курсом для путешественников, и хотим предусмотреть в нем ВСЕ ситуации, в которых тебе может быть затруднительно и не комфортно общаться на английском.
</span>
</div>
<span> может быть изменен на <strong> или <em>. При этом <p>, <h1..6> использовать не рекомендуется.
При оформлении текста следует все спецсимволы заменить на соответствующий код:
«Пример» - «Пример»
При оформлении ссылок необходимо всегда указывать параметр target="_blank"
Корректно оформленная одиночная ссылка выглядит так:
<a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;text-decoration:none;"> Все игрушки </a>
Говоря про оформление текста, часто сталкиваются с проблемой висячих предлогов. Чтобы ее решить, используйте символ неразрывного пробела:
путешествие из Петербурга в Москву
И не забывайте про символ мягкого переноса ­ , если, вдруг, необходимо перенести слово. Это особенно полезно для очень длинных ссылок, которые могут разрывать шаблон.
4. Изображения:
Нельзя использовать однопиксельные изображения - письмо может быть распознано как спам. Верстая письма, лучше взять за правило - минимальное изображение 10х10px.
Необходимо указывать размеры width и height для изображения, а также не стоит забывать про alt (почтовые клиенты не грузят изображения по-умолчанию, также как и некоторые веб-интерфейсы в определенных случаях).
Для каждой картинки стоит указать style="display: block;" дабы избежать проблем (нежелательных отступов) в gmail и ряде других веб-интерфейсов.
если изображение имеет малую высоту (меньше 19px) то следует указывать line-height для родительской ячейки. (это позволит избежать проблем в Outlook 2013).
Пример корректно оформленного изображения:
<img src="/main/img01.jpg" width="225" height="335" alt="" border="0" style="display: block;" />
Следует всегда учитывать. что изображения пользователь загружает не всегда, поэтому оформление письма без картинок тоже немаловажно. Всегда смотрите на то, как будет выглядеть ваше письмо в режиме отключенных изображений.
5. Фоновые изображения:
Старайтесь избегать фоновых изображений, так как Outlook 2007/2010/2013 их не поддерживают. Да, фон прописанный в body будет отображен в Outlook, НО, как показывает практика, шанс попадания письма в спам значительно возрастает. Также некоторые почтовые клиенты и веб-интерфейсы игнорируют параметры background-posiiton и background-repeat. Если же есть такая необходимость, то указывайте параметры (для ячейки)
bgcolor="#cccccc" background="img/bg.png" style="background-image:url(img/bg.png)"
А чтобы заставить Outlook отображать бэкграунд, используйте следующую структуру:
<table width="120" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#7bceeb" height="120" background="image.jpg" style="background-image:url(image.jpg);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:120px;">
<v:fill type="tile" src="image.jpg" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="120" border="0" cellspacing="0" cellpadding="0">
<tr><td height="120">
содержимое блока с фоновым изображением.
</td></tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td></tr>
</table>
Существует удобный сервис, которым может вам в этом помочь: http://tools.emailmatrix.ru/
6. Стили и CSS:
В шапке указывать стили не следует, т.к. почти все веб интерфейсы их игнорируют. Их следует прописывать как инлайновые в параметре style. При этом нельзя использовать сокращенную форму, типа: border: 1px solid #000000:
Корректный вариант это:
border-width:1px;border-style:solid;border-color:#000000;
Да, цвета тоже сокращать нельзя (запись #fff будет неверна).
Вертикальные и горизонтальные отступы
Достаточно сложно создать емейл, в котором интервалы отображались бы адекватно везде, поскольку платформы по-разному работают с вертикальными и горизонтальными отступами. Например, в начале 2013 года Outlook.com (бывший Hotmail) начал вырезать отступы margin из кода емейлов. В результате, для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов (padding). Еще более осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding, а отступы margin — поддерживает. В связи с этим лучше отказаться от использования как padding, так и margin. Горизонтальный отступ можно сделать с помощью пустой ячейки (в которую поместить символ неразрывного пробела ). Чтобы задать отступ справа и слева, можно создать вложенную таблицу меньших размеров. Вертикальный отступ можно задать следующим образом:
<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;"> </div>
Или же используя border цвета фона.
Outlook 2013 имеет еще одну интересную особенность: при создании ячейки () меньше 19 пикселей в высоту он растянется до 19 пикселей. Во избежание этого, вы можете добавить параметр line-height при описании стиля ячейки.(о чем уже шла речь, когда рассматривали особенности использования изображений)
7. Разработка шаблона письма
Подводя итог, составим шаблон письма:
<!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> </head> <body style="padding:0px;margin:0px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" bgcolor="#282f37"> <table border="0" cellspacing="0" cellpadding="0" width="600" style="min-width:600px;"> <!--preheader --> <tr><td> <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;"> </div> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr><td width="400" align="left" valign="middle" style="line-height:15px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#ffffff" style="font-size:13px;"> <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;line-height:15px;"> Ваш экземпляр «Programmatic: теория с примерами» </span></font> </td><td align="right" valign="middle" style="line-height:15px;"> <a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;text-decoration:underline;line-height:15px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" style="font-size:13px;" size="2" color="#ffffff"> Отписаться </font></a> </td></tr> </table> <!-- padding --><div style="height: 8px; line-height:8px; font-size:6px;"> </div> </td></tr> <!--preheader END--> <!--header --> <tr><td align="center" bgcolor="#ffffff" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#282f37;"> <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;"> </div> <table width="540" border="0" cellspacing="0" cellpadding="0"> <tr><td width="210" align="left" valign="top"> <!-- padding --><div style="height: 15px; line-height:15px; font-size:13px;"> </div> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 18px;" > <font face="Arial, Helvetica, sans-serif; font-size: 18px;" size="4" color="#596167"> <img src="/img/logo.png" width="210" height="45" alt="iAge" border="0" style="display: block;" /></font></a> <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;"> </div> </td> <td align="right" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr><td align="right" height="33" valign="top" style="line-height:14px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#282f37" style="font-size:12px;"> <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#282f37;line-height:14px;"> <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">О компании</font></a> <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">События</font></a> <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">Проекты</font></a> </span></font> </td></tr> <tr><td align="right"> <!--social --> <div style="width:208px;"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc1.png" width="36" height="36" alt="f" border="0" style="display: block;" /></font></a> </td><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc2.png" width="36" height="36" alt="t" border="0" style="display: block;" /></font></a> </td><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc3.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></font></a> </td><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc4.png" width="36" height="36" alt="in" border="0" style="display: block;" /></font></a> </td><td width="36" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc5.png" width="36" height="36" alt="s" border="0" style="display: block;" /></font></a> </td></tr> </table> </div> <!--social END--> </td></tr> </table> </td></tr> </table> <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;"> </div> </td></tr> <!--header END--> <!--content --> <tr><td align="center" bgcolor="#ffffff" style="border-top-width:1px;border-top-style:solid;border-top-color:#ffffff;"> <!--sep --> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr><td height="14" bgcolor="#f27071" style="height:14px;line-height:14px;font-size:10px;"> </td></tr> </table> <!--sep END--> <table width="490" border="0" cellspacing="0" cellpadding="0"> <tr><td align="left"> <!-- padding --><div style="height: 45px; line-height:45px; font-size:40px;"> </div> <!--hello --> <div style="line-height:24px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;"> <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;"> <strong>Добрый день!</strong><br /><br /> Ваш экземпляр <strong>«Programmatic: теория с примерами»</strong> в PDF-формате доступен для скачивания. </span></font> </div> <!--hello END--> <!-- padding --><div style="height: 25px; line-height:25px; font-size:23px;"> </div> <table width="490" border="0" cellspacing="0" cellpadding="0"> <tr><td width="210" align="left" valign="top"><img src="/img/ico1.png" width="180" height="180" alt="" border="0" style="display: block;" /></td> <td align="left" valign="middle" style="line-height:24px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;"> <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;line-height:24px;"> Персональная для каждого пользователя коммуникация, программируемый маркетинг, процесс настройки кампании и другие трюки. </span></font> <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;"> </div> <!--Button Begin--> <table border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" width="217" height="39" bgcolor="#f27071" style="line-height: 39px;"> <a href="#" target="_blank" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;text-decoration:none;" > <font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff"> <img src="/img/button.png" width="217" height="39" alt="Получить PDF" border="0" style="display: block;" /></font></a> </td></tr> </table> <!--Button End--> </td></tr> </table> <!-- padding --><div style="height: 50px; line-height:50px; font-size:45px;"> </div> </td></tr> </table> <!--sep --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td height="10" style="line-height:10px;font-size:8px;border-top-width:2px;border-top-style:solid;border-top-color:#282f37;"> </td></tr> </table> <!--sep END--> <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;"> </div> <table width="490" border="0" cellspacing="0" cellpadding="0"> <tr><td align="left" valign="middle" style="line-height:24px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;"> <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;line-height:24px;"> Спасибо за проявленный интерес к нашей компании!<br /><br /> Хотите быть в курсе последних событий компании iAGE, получать от нас интересные материалы, статьи и презентации?<br /> Подпишитесь на нашу рассылку! </span></font> <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;"> </div> <!--Button Begin--> <table border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" width="217" height="39" bgcolor="#f27071" style="line-height: 39px;"> <a href="#" target="_blank" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;text-decoration:none;" > <font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff"> <img src="/img/button1.png" width="217" height="39" alt="Да, я с вами!" border="0" style="display: block;" /></font></a> </td></tr> </table> <!--Button End--> </td><td width="210" align="right" valign="top"><img src="/img/ico2.jpg" width="180" height="180" alt="" border="0" style="display: block;" /></td></tr> </table> <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;"> </div> </td></tr> <!--content END--> <!--footer --> <tr><td align="center" bgcolor="#282f37"> <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;"> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td width="340" align="left" valign="top" style="line-height:15px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#929ca8" style="font-size:13px;"> <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#929ca8;line-height:15px;"> © ООО «АйЭйдж» 2003 - 2014 All rights reserved.<br /> <a href="http://www.iage.net" target="_blank" style="color:#929ca8;text-decoration:none;"><font color="#929ca8">www.iage.net</font></a><br /><br /> 127051, Москва, ул. Трубная, д. 21,<br /> тел. +7(495) 649-4219 390037<br /><br /> г. Рязань, ул. Советской армии, д. 19, корп.2, тел. +7(4912) 901-002 </span></font> </td><td align="right" valign="top"> <!--social --> <table border="0" cellspacing="0" cellpadding="0"> <tr><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc6.png" width="36" height="36" alt="f" border="0" style="display: block;" /></font></a> </td><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc7.png" width="36" height="36" alt="t" border="0" style="display: block;" /></font></a> </td><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc8.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></font></a> </td><td width="43" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc9.png" width="36" height="36" alt="in" border="0" style="display: block;" /></font></a> </td><td width="36" align="left" style="line-height:36px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" > <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="/img/soc10.png" width="36" height="36" alt="s" border="0" style="display: block;" /></font></a> </td></tr> </table> <!--social END--> </td></tr> </table> <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;"> </div> </td></tr> <!--footer END--> </table> </td></tr> </table> </body> </html>
Комментарии
Подобный сбор баз емейлов противоречит правилам почтовых провайдеров, а также может попасть под административну ю и уголовную ответственность в соответствии с законом РФ "О рекламе".
Могу порекомендовать:
emailmatrix.ru/.../...
emailslab.ru/