- PVSM.RU - https://www.pvsm.ru -
Не для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.
Сразу хочу выделить несколько из основных и важных моментов:
Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.
В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:
Разметку здесь можно представить следующим образом:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<!--header line statrs-->
<tr>
<td><img ... /></td>
<td><img ... /></td>
<td><img ... /></td>
</tr>
<!--header line end-->
<!--content statrs-->
<tr>
<td colspan="3" align="center">
<table width="540" cellpadding="0" cellspacing="0" border="0" style="border: solid 1px #000; border-collapse: collapse;">
<tr>
<td>content</td>
</tr>
</table>
</td>
</tr>
<!--content end-->
</table>
<!--footer img starts-->
<table width="660" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<tr>
<td><img ... /></td>
</tr>
</table>
<!--footer img end-->
</td>
</tr>
</table>
Что здесь важно?
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<td align="center">
style="text-align: center;"
либо тегом <center></center>
Если требуется сделать вертикальное расстояние между таблицами или табличными строками, не используйте margin и padding. Рекомендую делать распорки в такой конструкции:
<tr>
<td height="10">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="...indent.gif" border="0" width="1" height="1"
style="display: block;" alt="" />
</div>
</td>
</tr>
где высота варьируется значением height для ячейки таблицы. В качестве заполнения ячейки используется прозрачный .gif. Реальный его размер не должен быть 1х1px, лучше сделать немного больше (например 20x20px) и сжать с помощью атрибутов weight или height. Таким образом вы избавитесь от визуального дефекта при просмотре письма без подгруженных изображений и обезопасите себя от попадания письма в junk box. Не стоит так же забывать и о атрибутах таблицы cellpadding и cellspacing. Они прекрасно везде работают, но обойтись только их помощью не всегда получается.
Тут дела обстоят более или менее хорошо. Практически все CSS-свойства из спецификации 2.1 поддерживаются.
div, p, span, strong, b, em, i, a, li, td {
-webkit-text-size-adjust: none;
}
<a href="#" target="_blank" style="color: #267f00 !important; text-decoration: underline;"><span style="color: #267f00;">link</span></a>
Повторное оборачивание ссылки в span и задания цвета нужно для Outlook, т.к. он не понимает приоритет !important, а без него Яндекс.Почта будет перекрашивать вашу ссылку в красный цвет при событии hover.
Атрибут target="_blank" необходим только в том случае, если в вашем письме имеется ссылка на web-версию письма, чтобы ссылки в этой версии открывались в новых вкладках. А так, все почтовые клиенты делают это уже самостоятельно.
Если в одной ячейке находится только одно изображение и вы хотите, чтобы вокруг него не появлялось лишнее пространство, то возьмите за привычку прописывать для него display: block (к примеру, в Gmail этот недочет уже существует не один год).
В Outlook 2013 имеется и свой недочет для изображений, высота которых меньше 20px, у них появляется 8px пространства сверху, которые весьма ощутимо могут сказаться на внешнем виде макета, если это не предусмотреть. Решается это заданием свойства line-height для родительского блока, значение которого менее или равно величине высоты изображения. Его можно указать как для ячейки td, так и для оборачиваемого элемента:
<div style="margin: 0; padding: 0; line-height: 15px;">
<img src="..." border="0" width="600" height="15" style="display: block;" alt="" />
</div>
border-radius в настоящее время поддерживает большинство самых популярных почтовых клиентов, но не MS Outlook 07/10/13, доля использования которых составляет ~18%. По поводу того как можно сделать скругленные углы в письмах можно привести ни один пример реализации верстки. Я же покажу вариант, который я использовал в приведенном выше макете:
<tr>
<td align="left" valign="top" style="background-color: #0BB40B;">
<img src="round_l.png" /></td>
<td style="background-color: #0BB40B;">
<img ... /></td>
<td align="right" valign="top" style="background-color: #0BB40B;">
<img src="round_r.png" /></td>
</tr>
В качестве изображений для скругления я использовал два изображения с прозрачностью, которые поместил в боковые ячейки.
Этот способ хорош тем, что в последующем, если вы решите изменить фоновый цвет, потребуется всего лишь поменять значение background-color. Недостаток же заключается в том, что фоновый цвет родительского блока должен совпадать с цветом, заданным в изображении (в моем случае – это белый).
Здесь хотел бы написать немного о том, как уменьшить вероятность попадания ваших писем в спам-ящик. Спам-фильтров сейчас очень много и каждый работает на разных алгоритмах. Сделать письмо, которое будет одновременно идеально для всех фильтров — практически невозможно, всегда будет процент попадания в спам, но насколько высоким, зависит во многом от вас. Конечно все спам-фильтры большое внимание уделяют содержанию текста в subject line и теле письма, но HTML-проверка тоже не последний критерий.
Самый наинадежнейший способ — это убедить получателя добавить ваш электронный адрес, с которого делаются рассылки, в свою адресную книгу. Но вы никогда не узнаете, сделал это получатель или нет, поэтому соблюдайте самые простые советы при верстке электронных писем:
В конце ещё раз хочу отметить, что хорошая верстка электронных писем дает весомое преимущество в вашем маркетинге. Создавайте аккуратные и привлекательные открытки. Спасибо за внимание!
Автор: Khripunov
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/pesochnitsa/34522
Ссылки в тексте:
[1] Источник: http://habrahabr.ru/post/180013/
Нажмите здесь для печати.