Содержание

    Верстка писем: инсайды, особенности и тонкости

    Чем верстка писем отличается от верстки веб-страниц

    В отличие верстки веб-страниц, корректное отображение которых необходимо обеспечить только в браузерах, верстка писем может быть открыто как через веб-интерфейс почтового провайдера, так и через почтовый клиент, разнообразие которых накладывает ряд ограничений при создании верстки письма.

    По данным компании «ExpertSender Россия» на сентябрь 2014 г., в России распределение пользователей электронной почты по провайдерам выглядит так:

    • mail.ru (bk.ru, list.ru, inbox.ru) — 54,77 %,
    • yandex.ru — 20,07 %,
    • gmail.com — 13,69 %,
    • rambler.ru — 6,33 %,
    • yahoo.com — 1,65 %,
    • outlook.com — 1,37 %.

    А из почтовых клиентов (согласно моим наблюдениям) наиболее популярны:

    • MS Outlook 2003/2007/2010/2013,
    • Mozilla Thunderbird,
    • The Bat,
    • Apple Mail.

    Для начала отметим, что

    1. Привычная для веб-страниц блочная верстка не используется в письмах из-за ограниченной поддержки стилей рядом почтовых клиентов и веб-интерфейсов. Для обеспечения корректного отображения письма во всем разнообразии почтовых клиентов и веб-интерфейсов применяется табличный подход.
    2. Режим отключенных изображений по-прежнему важен. Несмотря на то, что в начале 2014 года Gmail стал показывать картинки по умолчанию, большинство почтовых клиентов этого не делает. Есть варианты неотображения картинок и в веб-интерфейсах: Outlook.com показывает письма без картинок, если отправитель не «доверенный» (есть такое понятие), а в Gmail по умолчанию скрыты картинки в письмах, контент которых предназначен только для взрослых. Поэтому необходимо обеспечить приемлемое отображение письма без изображений, используя цвет фона, альтернативный текст для изображений (alt) и т.д.
    3. Размер имеет значение. Веб-интерфейсы Gmail и Yahoo обрезают письмо, размер которого превышает 102 Кб и 100 Кб соответственно, так что старайтесь максимально сократить длину кода.
    4. Отсутствует поддержка стандартных интерактивных средств веб-программирования: JavaScript, Flash, формы. Не включайте данные элементы в код писем, иначе они, скорее всего, даже не дойдут до адресата, так как будут распознаны как спам или потенциально опасные.
    5. Большинство веб-интерфейсов вырезают все стили, указанные между <head> и </head>, в связи с этим все стили следует прописывать как инлайновые в атрибуте style.
    6. Поддержка стилей CSS ограничена, поэтому нельзя использовать сокращенную форму типа border: 1px solid #000000:. Корректный вариант: border-width:1px;border-style:solid;border-color:#000000;. Да, код цвета тоже сокращать нельзя (запись #fff будет некорректна).

    Остальное рассмотрим на конкретном примере.

    Разработка простого html-шаблона и верстка писем. Общий макет письма.

    Ширина письма не должна превышать 700 px (пусть будет 600 px), так как в большинстве веб-интерфейсов тело письма занимает не более 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>
    

    Используйте максимально простую структуру таблиц. Сложные таблицы не всегда верно воспроизводит Outlook. Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.

    Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER, кроме «0», у table, так как не все почтовые клиенты корректно интерпретируют другие значения. Да, согласны, верстка писем — дело не простое.

    Вертикальные и горизонтальные отступы

    Достаточно сложно создать емейл, в котором интервалы отображались бы адекватно везде, поскольку платформы по-разному работают с вертикальными и горизонтальными отступами. Например, в начале 2013 года Outlook.com (бывший Hotmail) начал вырезать отступы margin из кода емейлов. В результате, для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов (padding). Еще более осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding, а отступы margin — поддерживает. В связи с этим лучше отказаться от использования как padding, так и margin. Горизонтальный отступ можно сделать с помощью пустой ячейки (в которую поместить символ неразрывного пробела ). Чтобы задать отступ справа и слева, можно создать вложенную таблицу меньших размеров. Вертикальный отступ можно задать следующим образом:

    <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
    

    Или же используя border цвета фона.

    Outlook 2013 имеет еще одну интересную особенность: при создании ячейки (<td>) меньше 19 пикселей в высоту он растянется до 19 пикселей. Во избежание этого, вы можете добавить параметр line-height при описании стиля ячейки.

    Текст и ссылки

    Оформление текста следует производить сразу двумя тегами — font и span. Для родительской ячейки указать line-height (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook.com игнорирует параметр line-height, указанный у ячейки (<td>), так что следует указать его также и у span.

    При верстке писем следует использовать стандартные шрифты (Arial, Verdana, Tahoma, Times New Roman и т.д.). Специальные текстовые символы всегда должны применяться с использованием соответствующих кодов спецсимволов, чтобы получатели могли видеть адекватно отображенный текст на любой платформе.

    «Пример» - &laquo;Пример&raquo;	
    

    Итак, учитывая все вышеуказанные рекомендации, оформление текста будет выглядеть следующим образом:

    <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#000000" style="font-size:12px;">
    <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; line-height: 14px;">
    	Текст
    </span></font>
    

    У ссылок необходимо указывать атрибут target="_blank", чтобы избежать возможных проблем с открытием страницы в текущем окне.

    <a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;text-decoration:none;">
    <font face="Tahoma, Arial, Helvetica, sans-serif" style="font-size:14px;" size="3" color="#000000">
    	Ссылка
    </font></a>
    

    Часто необходимо, чтобы, например, предлог не был оторван от слова. Чтобы это гарантировать, используйте символ неразрывного пробела:

    Только в nbsp;этом году!
    

    А если необходимо перенести слово, воспользуйтесь символом &shy;. Это бывает полезно, например, для длинных ссылок, которые могут «разрывать» шаблон. Про ссылки следует сказать вот еще что: некоторые веб-интерфейсы и почтовые клиенты (особенно мобильные), если находят нечто похожее на номер телефона, заменяют его ссылкой, при этом используются цвета по умолчанию. Чтобы этого избежать, есть два варианта: либо сделать так, чтобы номер не распознавался как номер телефона, либо сразу сделать его ссылкой или прописать стиль отображения ссылок для этого блока. В первом случае, необходимо разделить отдельные части, используя <span>.

    +7<span>987<span><span>654<span><span>32<span><span>10<span>
    

    Во втором случае необходимо прописать ссылку вида: href="tel:79876543210".

    Аналогично первому варианту можно избежать замены адресов в веб-интерфейсе Yandex.

    Изображения и фон

    Многие почтовые клиенты по умолчанию не загружают изображения, поэтому, если оно несет в себе какую-то смысловую нагрузку (помимо эстетической), необходимо указать атрибут alt (атрибут alt в любом случае должен присутствовать, но он может быть и пустым alt=""). А чтобы оформление альтернативного текста соответствовало дизайну и лучше читалось, изображение можно обернуть как текстовый фрагмент, рассмотренный ранее.

    У изображений необходимо всегда указывать значение высоты и ширины. Чтобы избежать проблем отображения изображений в ряде веб-интерфейсов (в том числе Gmail), они должны быть представлены как блочные элементы:

    <img src="images/image.png" width="150" height="30" style="display:block;">
    

    Еще стоит помнить про особенность Outlook 2013 — если высота изображения не превышает 19 px, то у родительской ячейки необходимо указать стилевой параметр 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>
    

    Еще одно важное замечание: Outlook 2007/2010/2013 использует текстовый движок для обработки html-писем (по сути — MS Word), поэтому в случае «длинных» таблиц в этих почтовиках могут появляться разрывы страниц (они выглядят как белое пространство, разрывающее таблицу). Чтобы избежать их появления, старайтесь, чтобы таблицы не превышали 1800 px в высоту.

    Подводя итог, составим шаблон письма, содержащий прехедер, хедер, контентную часть и футер.

    <!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;">
             <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;">
                Ваш экземпляр &laquo;Programmatic: теория с примерами&raquo;
             </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;">&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;">
                   <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>
                      &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></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;">&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;">
                   <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>&laquo;Programmatic: теория с примерами&raquo;</strong> в PDF-формате доступен для скачивания.
                   </span></font>
                </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;">
                      <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;">&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/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;">&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;">
                <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;">&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-->
             </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;">
                <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;">
                   &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 />
                   тел. +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;">&nbsp;</div>   
       </td></tr>
       <!--footer END-->
    </table>
    
    </td></tr>
    </table>
             
    </body>
    </html>
    
    Понравился кейс?
    Мы поможем реализовать его и у вас!
    Напишите нам.
    Отправляя заявку, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфеденциальности
    Поделиться статьёй
    Подписаться на рассылку