среда, 30 ноября 2016 г.

Верстка писем. Полная версия


Любой интернет-проект, или компания, представленная в глобальной сети рано или поздно сталкивается с задачей разработки собственной емайл-рассылки. Это могут быть как обычные уведомления о сделанном заказе или смене пароля так и сложные цепочки писем, призванные выстроить доверительное отношение с подписчиком. И каким бы интересным ни был дизайн, насколько актуальна ни была бы предлагаемая тема, в конечном итоге пользователь видит результат верстки письма, и от того насколько качественно она выполнена зависит восприятие подписчиком рассылки и компании в целом.
Предлагаю рассмотреть все тонкости и нюансы верстки html-писем – от простых шаблоных решений, до современных адаптивных подходов.
В отличие от обычной верстки, корректное отображение которой необходимо обеспечить в различных браузерах, html-письмо может быть открыто как через веб-интерфейс почтового провайдера, так и через почтовый клиент, разнообразие которых накладывает ряд ограничений при создании письма.
В России большинство интернет-пользователей используют почту:
  • mail.ru (bk.ru, list.ru, inbox.ru)
  • yandex.ru
  • gmail.com
  • rambler.ru
  • outlook.com
  • yahoo.com
А из почтовых клиентов наиболее популярны:
  • Mozilla Thunderbird
  • MS Outlook 2003/2007/2010/2013
  • Apple Mail

ВАЖНЫЕ ОСОБЕННОСТИ

Для обеспечения корректного отображения письма во всем разнообразии почтовых клиентов и веб-интерфейсов применяется табличный подход.
При создании письма следует учитывать, что многие почтовые клиенты по-умолчанию не загружают изображения, то есть необходимо обеспечить приемлемое отображение без изображений, используя цвет фона, альтернативный текст для изображений(alt) и т.д.
Большинство веб-интерфейсов вырезают все стили, указанные между <head> и </head>, а также обладают лишь ограниченной поддержкой стилей CSS. Нельзя использовать сокращенную форму, типа: border: 1px solid #000000:
Корректный вариант:
border-width:1px;border-style:solid;border-color:#000000;
Да, код цвета тоже сокращать нельзя (запись #fff будет некорректна).
И еще один момент, он, правда, очевиден, но озвучить его стоит – отсутствует поддержка стандартных интерактивных средств веб-программирования. В их число входят: JavaScript, Flash, Формы. Письма, содержащие данные элементы, скорее всего даже не дойдут до адресата, так как будут распознаны как спам.
«Размер имеет значение» - веб интерфейсы gmail и yahoo обрезают письмо, число символов превышает в котором определенную величину (102Кб и 100 Кб соответственно), так что старайтесь максимально сократить ваш код.

РАЗРАБОТКА ПРОСТОГО HTML-ШАБЛОНА ПИСЬМА

Все-таки верстка – это больше практика, чем теория, поэтому предлагаю рассмотреть конкретный пример.

ОБЩИЙ МАКЕТ ПИСЬМА

Ширина письма не должна превышать 700px, так как в большинстве веб-итерфейсов тело письма занимает не более 50% от общей ширины активной области, а появление горизонтального скроллинга сильно ухудшит юзабилити, да и просто впечатление о письме.
Цвет фона веб-интерфейса, где будут просматривать нашу верстку, может быть различным, поэтому необходимо все обернуть в таблицу с желаемым цветом фона, даже если он белый.
И так, общим макет письма примет следующий вид:
<!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='#ffffff'>
  
   <table width='600' border='0' cellspacing='0' cellpadding='0'>
    <tr><td align='center'>
     <!--mail body -->
    </td></tr>
   </table>  
  
  </td></tr>
 </table>
</body>
</html>
Как было отмечено выше для верстки писем используется табличной подход. При этом, следует использовать максимально простую структуру таблиц. Старайтесь избегать объединения ячеек (colspan, rowspan). Сложные таблицы не всегда верно воспроизводятся Outlook. Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.
Значение атрибутов CELLPADDING и CELLSPACING следует установить как “0” и не используйте никаких значений атрибута BORDER кроме “0” у table, так как не все почтовые клиенты корректно интерпретируют другие значения.

ВЕРТИКАЛЬНЫЕ И ГОРИЗОНТАЛЬНЫЕ ОТСТУПЫ

Достаточно сложно создать емейл, в котором интервалы отображались бы адекватно на всех платформах, поскольку они по-разному работают с вертикальными и горизонтальными отступами. Например, в начале 2013 года Outlook.com (бывший Hotmail) начал вырезать отступы margin из кода емейлов.
В результате, для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов (padding). Еще более осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding, а отступы margin – поддерживает.
В связи с этим лучше отказаться от использования как padding так и margin. Горизонтальный отступ можно сделать с помощью пустой ячейки (В которую поместить символ неразрывного пробела &bsp;), а чтобы задать отступ справа и слева – можно создать вложенную таблицу меньших размеров.
Вертикальный отступ можно задать следующим образом:
<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
Или же используя border цвета фона.
Outlook 2013 имеет еще одну интересную особенность - при создании ячейки(<td>) меньше 19 пикселей в высоту он растянется до 19 пикселей. Во избежание этого, вы можете добавить параметр line-height при описании стиля ячейки.

ТЕКСТ И ССЫЛКИ

Оформление текста следует производить тегами – span. Для родительской ячейки (или блока) указать line-height.  Стоит отметить что outlook.com игнорирует параметр line-height.
При верстке писем следует использовать стандартные шрифты (Arial, Verdana, Tahoma, Times New Roman и т.д.).
Специальные текстовые символы всегда должны применяться с использованием соответствующих кодов спецсимволов, чтобы получатели могли видеть адекватно отображенный текст на любой платформе.
«Пример» - &laquo;Пример&raquo;
И так, учитывая все вышеуказанные рекомендации, оформление текста будет выглядеть следующим образом:
<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; line-height: 14px;">
 Текст
</span>
У ссылок необходимо указывать атрибут target=”_blank”, чтобы избежать возможных проблем с открытием страницы в текущем окне.
<a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;text-decoration:none;">
 Ссылка
</a>
Часто необходимо, чтобы, например, предлог не был оторван от слова, чтобы это гарантировать используйте символ неразрывного пробела:
Только в&nbsp;этом году!
А если необходимо перенести слово, воспользуйтесь символом &shy; Это бывает полезно, например, для длинных ссылок, которые могут «разрывать» шаблон.
Про ссылки сказать вот еще что: некоторые веб-интерфейсы и почтовые клиенты (особенно мобильные), если находят нечто похожее на номер телефона, заменяют его ссылкой, при этом используются цвета по-умолчанию. Чтобы этого избежать есть 2 вариант: либо сделать так, чтобы номер не распознавался как номер телефона, либо сразу сделать его ссылкой. В первом случае, можно добавить непечатный символ, а чтобы исключить проблем в Android 2.3(где символ отображается), обнулим размер шрифта.
+7920<span style=”font-size:0;”>&zwnj;</span>9209292
Во втором случае, Необходимо прописать ссылку вида: href="tel:+79876543210"
Аналогично первому варианту можно избежать замены адресов в веб-интерфейсе yandex.
Избегайте использования в качестве отображаемого текста ссылок url. Дело в том, что если включено отслеживание кликов, то ссылки преобразуются (например, ссылка виде http://yandex.ru станет иметь вид: http://click.domen.ru/list1/sfsdfkjkjnas90lkmmqadsplzxcwumfidqlwsdafokqvzz ). Тоесть получается что вы выводите одну ссылку, а ссылаетесь на другую - это может быть воспринято за фишинг, а письмо может быть признано мошенническим (и следовательно попадет в спам или вообще не дойдет до получаетля)

ИЗОБРАЖЕНИЯ И ФОН

Создавая html-письма нельзя обойтись без использования изображений, но следует помнить о ряде особенностей. Как отмечалось ранее, многие почтовые клиенты по-умолчанию не загружают изображения, поэтому если оно несет в себе какую-то смысловую нагрузку (помимо эстетической), необходимо указать атрибут alt. (Атрибут alt в любом случае должен присутствовать, но он может быть и пустым alt=””). А чтобы оформление альтернативного текста соответствовало дизайну и лучше читалось, изображение можно обернуть как текстовый фрагмент, рассмотренный ранее.
У изображений необходимо всегда указывать значение высоты и ширины.
Чтобы избежать проблем отображения изображений в ряде веб-интерфейсов, они должны быть представлены как блочные элементы:
<img src=”images/image.png” width=”150” height=”30” border="0" style=”display:block;”>
Так же как и с текстом, стоит помнить про особенность outlook 2013 – если высота изображения не превышает 19px, то у родительской ячейки необходимо указать стилевой параметр line-height.
Не все емейл-клиенты поддерживают фоновые изображения (особенно это касается Outlook), поэтому их нужно использовать с осторожностью или избегать вовсе. Не забудьте указать подходящее значение фонового цвета BGCOLOR, чтобы текст, наложенный на изображение в определенном разделе, был виден даже тем пользователям, у кого фоновые изображения не отображаются и/или все изображения отключены.
Фоновое изображение, указанное у body, будет отображено в том числе и в outlook, но значительно повышается шанс попадания такого письма в спам. Для отображения фона в outlook 2007-2013 используйте следующую структуру:
<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
Еще одно важное замечание: Outlook 2007/2010/2013 использует текстовый движок для обработки html писем (по сути - MS Word), поэтому в случае "длинных" таблиц в этих почтовиках могут появляться разрывы страниц (они выглядят как белое пространство, разрывающее таблицу). Чтобы избежать их появления - старайтесь чтобы таблицы не превышали 1800px в высоту.
Подводя итог, составим шаблон письма, содержащий прехедер, хэдер, контентную часть и футер.
<!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;">&nbsp;</div>
 <table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr><td width="400" align="left" valign="middle" style="line-height:15px;">
   <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;line-height:15px;">
    Ваш экземпляр &laquo;Programmatic: теория с примерами&raquo;
   </span>
  </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;">
    Отписаться
   </a>
  </td></tr>
 </table>
 <!-- padding --><div style="height: 8px; line-height:8px; font-size:6px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">
     <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>
      &nbsp;&nbsp;
      <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">События</font></a>
      &nbsp;&nbsp;
      <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">Проекты</font></a>
     </span>
    </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;"  >
       <img src="/img/soc1.png" width="36" height="36" alt="f" border="0" style="display: block;" /></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;" >
       <img src="/img/soc2.png" width="36" height="36" alt="t" border="0" style="display: block;" /></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;"  >
       <img src="/img/soc3.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></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;"  >
       <img src="/img/soc4.png" width="36" height="36" alt="in" border="0" style="display: block;" /></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;"  >
       <img src="/img/soc5.png" width="36" height="36" alt="s" border="0" style="display: block;" /></a>
      </td></tr>
     </table>
     </div>
     <!--social END-->
    </td></tr>
   </table>
  </td></tr>
 </table>
 <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</div>
    <!--hello -->
    <div style="line-height:24px;">
     <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
      <strong>Добрый день!</strong><br /><br />
      Ваш экземпляр <strong>&laquo;Programmatic: теория с примерами&raquo;</strong> в PDF-формате доступен для скачивания.
     </span>
    </div>
    <!--hello END-->
    <!-- padding --><div style="height: 25px; line-height:25px; font-size:23px;">&nbsp;</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;">
      <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;line-height:24px;">
       Персональная для каждого пользователя коммуникация, программируемый маркетинг, процесс настройки кампании и другие трюки.
      </span>
      <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</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;" >
        <img src="/img/button.png" width="217" height="39" alt="Получить PDF" border="0" style="display: block;" /></a>
       </td></tr>
      </table>
      <!--Button End-->
     </td></tr>
    </table>   
    <!-- padding --><div style="height: 50px; line-height:50px; font-size:45px;">&nbsp;</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;">&nbsp;</td></tr>
  </table>
  <!--sep END-->
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 

  <table width="490" border="0" cellspacing="0" cellpadding="0">
   <tr><td align="left" valign="middle" style="line-height:24px;">
    <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;line-height:24px;">
     Спасибо за проявленный интерес к нашей компании!<br /><br />
     Хотите быть в курсе последних событий компании iAGE, получать от нас интересные материалы, статьи и презентации?<br />
     Подпишитесь на нашу рассылку! 
    </span>
    <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</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;" >
      <img src="/img/button1.png" width="217" height="39" alt="Да, я с вами!" border="0" style="display: block;" /></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;">&nbsp;</div> 

 </td></tr>
 <!--content END-->
 <!--footer -->
 <tr><td align="center" bgcolor="#282f37">
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr><td width="340" align="left" valign="top" style="line-height:15px;">
    <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#929ca8;line-height:15px;">
     &copy; ООО &laquo;АйЭйдж&raquo; 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 />
    </span>
   </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;"  >
      <img src="/img/soc6.png" width="36" height="36" alt="f" border="0" style="display: block;" /></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;"  >
      <img src="/img/soc7.png" width="36" height="36" alt="t" border="0" style="display: block;" /></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;"  >
      <img src="/img/soc8.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></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;"  >
      <img src="/img/soc9.png" width="36" height="36" alt="in" border="0" style="display: block;" /></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;"  >
      <img src="/img/soc10.png" width="36" height="36" alt="s" border="0" style="display: block;" /></a>
     </td></tr>
    </table>
    <!--social END-->
   </td></tr>
  </table>
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 
 </td></tr>
 <!--footer END-->
</table>

</td></tr>
</table>
   
</body>
</html>

АДАПТИВНАЯ ВЕРСТКА ПИСЕМ

При создании профессиональных email-рассылок следует учитывать особенности своей аудитории. Как показывает статистика, чем она моложе, тем больший процент открытий писем осуществляется с мобильных устройств. В среднем, около 30% всех подписчиков используют мобильные устройства для просмотра своей корреспонденции (данный показатель может сильно варьироваться в зависимости от специфики бизнеса). Чтобы не быть голословным, приведу показатели компании «Белый ветер» (digital.ru) на начало 2014 года:
Для начала следует отметить, как себя ведут обычные письма на экранах мобильников: на устройствах под управлением iOS все письмо масштабируется, чтобы оно полностью уместилось на экран (поэтому письма становятся нечитабельным и требуют ручного масштабирования).
Устройства же на Android отображают письмо в масштабе 100%, в связи с чем, мы видим лишь небольшой фрагмент письма и не можем в полной мере оценить ни дизайна, ни контента, что значительно снижает процент кликов (CLR).
Многие пользователи отказываются взаимодействовать с неадаптивным письмом, открывая его на своем мобильном телефоне, то есть не учитывая специфику аудитории, вы можете терять до 30% своей прибыли с email-канала.
Адаптивные письма обеспечивают корректное отображение на любых устройствах, тем самым повышая лояльность подписчиков, и как следствие – у таких писем выше CLR. Из недостатков можно отметить лишь то, что на разработку дизайна и верстку адаптивных писем требуется больше времени – то есть выше их себестоимость.

ВИДЫ МОБИЛЬНОЙ АДАПТАЦИИ

Существует несколько подходов адаптации писем для мобильных устройств:
  • мобильная верстка;
  • резиновая верстка;
  • применение медиа-запросов;
  • комбинирование нескольких подходов.

МОБИЛЬНАЯ ВЕРСТКА

Данный подход применяется только если порядка 70% всех открытий производится с мобильных устройств.
От обычной(не адаптивной) верстки он отличается только шириной макета – 320px. На экране мобильного телефона такое письмо будет выглядеть отлично, стоимость его разработки не будет превышать стоимость обычного, но, вот, на мониторе компьютера оно будет выглядеть по меньшей мере странно =)

РЕЗИНОВАЯ ВЕРСТКА

Подход почти противоположен вышеизложенному. В «чистом» виде применяется довольно редко.
Состоит он в следующем: используются лишь относительные размеры всех блоков и изображений (в процентах). За счет чего письмо занимает всю площадь экрана, вне зависимости от его размера. Данный подход имеет ряд ограничений по структуре расположения объектов.

ПРИМЕНЕНИЕ МЕДИА-ЗАПРОСОВ

Как это видно из названия, основан на использовании медиа-запросов CSS3. Обеспечивает наилучшее отображение письма на экране любого размера, позволяет менять параметры отображения текста, расположения блоков и т.д. Почти что полная свобода =)
«В чем подвох?» Основной недостаток данного подхода в том, что адаптироваться письма будут только в приложениях, поддерживающих медиа-запросы – это стандартное приложение на iOS «Mail» и стандартное приложение на Android «Почта» (до версии Android 5.0). Пользователи мобильных приложений gmail, mail.ru, yandex и т.д. увидят простое (не адаптивное) письмо.
Отображение на мониторе компьютера, приложении Mail на iOS и в проложении gmail на Android 

КОМБИНИРОВАНИЕ НЕСКОЛЬКИХ ПОДХОДОВ

Подход использования медиа-запросов, несомненно хорош тем, что позволяет обеспечить наилучшее отображение, но, к сожалению, дает небольшой охват мобильной аудитории. Поэтому я предлагаю взять на вооружение сразу несколько подходов, а именно – резиновая верстка + применение медиа-запросов.
Такое сочетание обеспечивает хорошее отображение письма на любых устройствах и в любых приложениях, вне зависимости от поддержки медиа-запросов.
В дальнейшем буду описывать именно этот подход.

РАЗРАБОТКА ОБЩЕГО МАКЕТА АДАПТИВНОГО ПИСЬМА

Необходимо понимать, что наше письмо должно корректно отображаться как на мобильных устройствах, так и в десктопный почтовых клиентах и веб-интерфейсах. Поэтому к тем приемам и ограничениям что были описаны ранее при адаптивной верстке добавляются новые =)
Во-первых, ширина письма: будем ориентироваться на ширину мобильного телефона 320px – подавляющее большинство устройств этого класса имеет именно эту ширину. Поэтому для перестроения, например, 2х колонок (при просмотре на компьютере) в одну (при просмотре на телефоне) оптимальной шириной будет 640px или чуть меньше 600px.
Это лишь рекомендуемая ширина письма, а не какое-то жесткое ограничение, можно сделать как больше, так и меньше – главное помнить, что максимальная ширина блока, который может поместиться на экран 320px.
И так, общий шаблон адаптивного письма будет иметь вид:
<!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" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - </title>
<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (min-device-width: 660px) {
 .table660{
  width:660px !important;
 }
}
@-ms-viewport{width:device-width}
@media only screen and (max-device-width: 660px), only screen and (max-width: 660px) { 
 table[class="table660"]{
  width: 100% !important;
 }
}
.table660{
 width:660px;
}
.preheader{
 display:none !important;
}
</style>
</head>

<body style="padding:0px;margin:0px;">

<div id="mailsub" class="notification" align="center" style="word-break:normal;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;line-height: normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="line-height: normal;"><tr><td align="center" bgcolor="#ffffff">

<!--[if (gte mso 9)|(IE)]>
<table width="660" border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
<div style="max-width:660px;">
<table border="0" cellspacing="0" cellpadding="0" class="table660" width="100%" style="max-width: 660px;min-width:300px;">
<!--head-->
<tr><td align="center">
 <!--[if !mso]><!-->
 <div class="preheader" style="font-size:0px;color:transparent;opacity:0;"> 
  Скрытый прехэдер
 </div>
 <!--<![endif]-->
</td></tr>
<!--head END-->
<!--main -->
<tr><td align="center">

 
</td></tr> 
<!--main END-->
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->

</td></tr></table> 
</div> 

</body>
</html>
Тут нужно пояснить: некоторые мобильные приложения, в том числе стандартное Mail на iOS по-умолчанию увеличивают шрифт в письме (который меньше 13px), чтобы этого избежать необходимо добавить стиль:
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;
Чтобы добиться эффекта «резиновости», но при этом ограничить максимальную ширину, задается таблица с ограничением максимальной ширины, однако outlook игнорирует данный параметр, поэтому специально для него, а также почтового клиента Lotus, с помощью условных комментариев задана еще одна таблица с точным описанием ширины. А чтобы избежать проблем в некоторых других почтовых клиентов, необходимо прописать ширину родительской таблицы через класс, описанный в шапке, а также вставить вспомогательный блок с ограничением максимальной ширины. Также можно указать минимальную ширину письма.
При описании стилей, в качестве селекторов следует использовать атрибуты – это делается для того, чтобы избежать проблем в веб интерфейсе yahoo, который некорректно их интерпретирует.
Про тест и ссылки здесь нечего нового сказать нельзя, руководствуемся правилами, описанными выше.

ИЗОБРАЖЕНИЯ

Основные моменты были описаны ранее, здесь добавлю лишь то, что относится непосредственно к адаптивной верстке.
«Retina» - экраны, вернее сказать экраны с повышенной плотностью пикселей характерны именно для мобильных устройств, поэтому ваше письмо может выглядеть немного размытым на экране, например iPhone. Чтобы этого избежать используйте изображения в 2 раза больших размеров. Например вместо иконки 40х40, используйте иконку 80х80, прописав размеры как 40х40.
Подобный «блур» эффект может наблюдаться именно на иконках (социальные сети, логотип и т.д.) на фотографических изображениях обычно этот эффект слабо заметен.
Эффект плавающего изображения (чтобы текст обтекал изображение справа или слева) можно добиться следующим образом:
<table width="104" border="0" cellspacing="0" align="left" cellpadding="0" style="float:left;mso-table-rspace:5pt;border-collapse:collapse;">
    <tr><td height="95" width="104" align="left" valign="top">
        <a href="#" target="_blank"><img src="/img/image.png" width="93" height="89" alt="" border="0" style="display: block;" /></a>
    </td></tr>
</table>

УСЛОВНЫЕ КОММЕНТАРИИ OUTLOOK

Вскользь данный прием уже упоминался, но думаю, стоит еще раз о нем сказать. Используя условные комментарии, можно заставить почтовый клиент Outlook 2003-2013 отображать или не отображать определенный фрагмент кода. Делается это следующим образом:
<!--[if gte mso 9]>
 Код, только для Outlook 2007-2013
<![endif]-->
Или же наоборот – фрагмент кода, который outlook проигнорирует:
<!--[if !mso]><!-->
Код не для Outlook 2007-2013 
<!--<![endif]-->

ПРИЕМЫ ПРИ СОЗДАНИИ АДАПТИВНОГО ПИСЬМА

Для обеспечения кроссплатформенности приходится использовать различные приемы, о которых я бы хотел остановиться отдельно.

БЛОЧНАЯ АДАПТАЦИЯ

Перестроение блоков на мобильных устройствах друг под друга.
Реализуется это следующим образом:
<!--[if gte mso 9]> 
<table width="600" border="0" cellspacing="0" cellpadding="0"> 
<tr><td> <![endif]--> 
Блок1 
<!--[if gte mso 9]> 
</td><td> 
<![endif]-->
Блок2 
<!--[if gte mso 9]> 
</td></tr> 
</table>
<![endif]-->
Где каждый их блоков описывается следующей структурой:
<div style="float: left; display: inline-block;vertical-align:top; width:150px;"> 
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" >       
   <tr><td align="left" valign="middle"> 
          Содержимое блока
    </td></tr>
</table></div>
Плавающие блоки не поддерживает outlook 2007-2013, поэтому они помещаются в табличную структуру, которая строится в условных комментариях. Свойство display:inline-block используется для корректного отображения структуры в веб-интерфейсе outlook.com, который вырезает свойство float.

Применим теперь полученные знания на практике и адаптируем письмо, что мы делали раньше для мобильных устройств.
<!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" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - </title>
<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (min-device-width: 660px) {
 .table660{
  width:660px !important;
 }
}
@-ms-viewport{width:device-width}
@media only screen and (max-device-width: 660px), only screen and (max-width: 660px) { 
 table[class="table660"]{
  width: 100% !important;
 }
 table[class="mob_100"], div[class="mob_100"], td[class="mob_100"]{
  width:100% !important;
 }
 td[class="mob_center"]{
  text-align: center !important;
 }
 div[class="mob_center_bl"]{
  float:none !important;
  display: block !important;
  margin: 0 auto;
 }
 div[class="mob_hidden"], td[class="mob_hidden"]{
  display:none !important;
 }
}
.mob_link a{
 text-decoration:none;
 color:#b1bac3;
}
.table660{
 width:660px;
}
.preheader{
 display:none !important;
}
</style>
</head>

<body style="padding:0px;margin:0px;">

<div id="mailsub" class="notification" align="center" style="word-break:normal;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;line-height: normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="line-height: normal;"><tr><td align="center" bgcolor="#282f37">

<!--[if (gte mso 9)|(IE)]>
<table width="660" border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
<div style="max-width:660px;">
<table border="0" cellspacing="0" cellpadding="0" class="table660" width="100%" style="max-width: 660px;min-width:300px;">
<tr><td align="center">

<table border="0" cellspacing="0" cellpadding="0" width="91%" style="min-width:300px;">
 <!--preheader -->
 <tr><td>
 <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td align="right" valign="middle" height="16">
   <div style="line-height:14px;">
    <a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;text-decoration:underline;">
     Отписаться
    </a>
   </div>
  </td>
  </tr>
 </table>
 <!-- padding --><div style="height: 8px; line-height:8px; font-size:6px;">&nbsp;</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;">&nbsp;</div>
 <table width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr><td align="left"><!-- 

   Item --><div style="float: left; display: inline-block; min-width:210px;width: 55%;">
    <table width="210" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
     <tr><td align="left" valign="middle">
      <!-- padding --><div style="height: 15px; line-height:15px; font-size:13px;">&nbsp;</div>
      <table width="210" border="0" cellspacing="0" cellpadding="0" >
       <tr><td align="left" valign="top">
        <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 18px;"  >
        <img src="/img/logo.png" width="210" height="45" alt="iAge" border="0" style="display: block;" /></a>
       </td></tr>
      </table>
      <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
     </td></tr>
    </table></div><!-- Item END--><!--[if gte mso 10]>
    </td>
    <td align="left" width="240">
   <![endif]--><!-- 

   Item --><div style="float: left; display: inline-block; width:240px;">
    <table width="240" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;">
     <tr><td align="right" valign="middle">
      
      <table width="100%" border="0" cellspacing="0" cellpadding="0" >
       <tr><td class="mob_center" align="right" height="33" valign="top" style="line-height:14px;">
        <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#282f37;">
         <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">О компании</font></a>
         &nbsp;&nbsp;
         <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">События</font></a>
         &nbsp;&nbsp;
         <a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">Проекты</font></a>
        </span>
       </td></tr>
       <tr><td align="right">
        <!--social -->
        <div class="mob_center_bl" 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;"  >
          <img src="/img/soc1.png" width="36" height="36" alt="f" border="0" style="display: block;" /></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;"  >
          <img src="/img/soc2.png" width="36" height="36" alt="t" border="0" style="display: block;" /></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;"  >
          <img src="/img/soc3.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></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;"  >
          <img src="/img/soc4.png" width="36" height="36" alt="in" border="0" style="display: block;" /></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;"  >
          <img src="/img/soc5.png" width="36" height="36" alt="s" border="0" style="display: block;" /></a>
         </td></tr>
        </table>
        </div>
        <!--social END-->
       </td></tr>
      </table>
     </td></tr>
    </table></div><!-- Item END--></td>
  </tr>
 </table>
 <!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</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="100%" border="0" cellspacing="0" cellpadding="0">
   <tr><td height="14" bgcolor="#f27071" style="height:14px;line-height:14px;font-size:10px;">&nbsp;</td></tr>
  </table>
  <!--sep END-->
  
  <table width="82%" border="0" cellspacing="0" cellpadding="0">
   <tr><td align="left">
    <!-- padding --><div style="height: 45px; line-height:45px; font-size:40px;">&nbsp;</div>
    <!--hello -->
    <div style="line-height:24px;">
     <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
      <strong>Добрый день, Анна!</strong><br /><br />
      Ваш экземпляр <strong>&laquo;Programmatic: теория с примерами&raquo;</strong> в PDF-формате доступен для скачивания.
     </span>
    </div>
    <!--hello END-->
    <!-- padding --><div style="height: 25px; line-height:25px; font-size:23px;">&nbsp;</div>
   </td></tr>
  </table>
  
  
  <!--item -->
  <table width="90%" border="0" cellspacing="0" cellpadding="0">
   <tr><td align="center"><!-- 

   Item --><div style="display: inline-block; width:260px;">
    <table width="260" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
     <tr><td align="left" valign="middle">
     <div style="">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" >
       <tr><td align="center" valign="top">
        <img src="/img/ico1.png" width="180" height="180" alt="" border="0" style="display: block;" />
       </td></tr>
      </table>
      <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
     </div></td></tr>
    </table></div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
    </td>
    <td >
   <![endif]--><!-- 

   Item --><div style="display: inline-block; width:260px;">
    <table class="mob_100" width="230" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
     <tr><td align="left" valign="middle">
      <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
      <table width="100%" border="0" cellspacing="0" cellpadding="0" >
       <tr><td align="left" valign="top" 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;">
         Персональная для каждого пользователя коммуникация, программируемый маркетинг, процесс настройки кампании и другие трюки.
        </span></font>
        <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</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;" >
          <img src="/img/button.png" width="217" height="39" alt="Получить PDF" border="0" style="display: block;" /></a>
         </td></tr>
        </table>
        <!--Button End-->
       </td></tr>
      </table>
     </td></tr>
    </table></div><!-- Item END--></td>
   </tr>
  </table>
  <!--item END-->
  
  <!-- padding --><div style="height: 50px; line-height:50px; font-size:45px;">&nbsp;</div> 

  
  <!--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;">&nbsp;</td></tr>
  </table>
  <!--sep END-->
  
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 
  
  <table border="0" cellspacing="0" cellpadding="0" width="90%">
  <tr><td dir="rtl" align="center"><!--[if (gte mso 9)|(IE)]>
   <table border="0" cellspacing="0" cellpadding="0" width="100%">
   <tr><td width="300" dir="rtl">
   <![endif]--><!-- 

   Item --><div style="display: inline-block; vertical-align: top; width: 260px;">
   <table width="100%" cellpadding="0" cellspacing="0" border="0" dir="ltr">
    <tr><td align="center">
     <img src="/img/ico2.jpg" width="180" height="180" alt="" border="0" style="display: block;" />
    </td></tr>
   </table>
   </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
   </td><td width="300">
   <![endif]--><!-- 

   Item --><div style="display: inline-block; vertical-align: top; width: 260px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" dir="ltr">
    <tr><td align="left">
     <div style="line-height:24px;">
      <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
       Спасибо за проявленный интерес к нашей компании!<br /><br />Хотите быть в курсе последних событий компании iAGE, получать от нас интересные материалы, статьи и презентации?<br />Подпишитесь на нашу рассылку!
      </span>
      <!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</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-->
     </div>
    </td></tr>
   </table>
   </div><!--[if (gte mso 9)|(IE)]>
   </td></tr>
   </table>
   <![endif]--></td>
  </tr>
  </table>
  
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 
  
 </td></tr>
 <!--content END-->
 <!--footer -->
 <tr><td class="iage_footer" align="center" bgcolor="#282f37">
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 
  
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr><td align="left"><!-- 

    Item --><div style="float: left; display: inline-block; width:65%;min-width:280px;">
     <table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
      <tr><td align="left" valign="middle">

       
       <table width="100%" border="0" cellspacing="0" cellpadding="0" >
        <tr><td 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;">
          &copy; ООО &laquo;АйЭйдж&raquo; 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 />
         </span></font>
         <!-- padding --><div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
        </td></tr>
       </table>
       
      </td></tr>
     </table></div><!-- Item END--><!--[if gte mso 10]>
     </td>
     <td valign="top">
    <![endif]--><!-- 

    Item --><div style="float: left; display: inline-block; width:208px;">
     <table width="208" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;">
      <tr><td align="left" valign="middle">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" >
        <tr><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>
       
      </td></tr>
     </table></div><!-- Item END--></td>
     
   </tr>
  </table>
  
  <!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div> 
 </td></tr>
 <!--footer END-->
</table>


</td></tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->

</td></tr></table> 
</div> 

</body>
</html>

ТЕСТИРОВАНИЕ

Существуют отличные инструменты для предварительного просмотра емейлов на разных платформах, но самым качественным методом по-прежнему остается ручная проверка отображения писем на основных емейл-платформах. Я рекомендую проверять отображение в веб-интерфейсе Yandex.ru, gmail.com, mail.ru, rambler.ru, а также проверять качество отображения писем в Outlook. Если верстка адаптивная, то необходимо проверить отображение в стандартных приложениях «Mail» на iOS и «Почта» на Android, а также в приложении gmail.

Источник: здесь
By -
Ярлыки: ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)