Как создать красивое html письмо для рассылки

Создание html письмаВсем привет. На днях решил разобраться с тем, как верстаются html письма. Провел несколько часов в интернете, перечитал десятки статей на эту тематику и пришел к выводу, что это очень нелегкая задача.

Но желание - есть, поэтому стал копаться дальше. Может быть и на блоге, скоро заменю подписку по email от feedburner (под статьями) на какую-нибудь другую, где можно сделать ее более симпатичной. Главное учесть все нюансы верстки под почтовые клиенты, а их поверьте не мало.

Актуальность создания html писем для почтовой рассылки

Почтовая рассылка один из самых эффективных способов продать товар, донести новости до клиентов, рассказать об акциях и дополнительных услугах. Кроме того, когда у вас есть база клиентов, вы можете вернуть “старых” покупателей и осуществить еще одну продажу.

Можно разослать материал о дополнительных услугах, которые, возможно, стали интересны вашим клиентам после первой покупки.

Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!

Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка. Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.

И существует масса проблем для верстальщиков, которые занимаются созданием html писем.

Но сегодня я постараюсь рассказать вам о том, как создать html письмо, которое бы открывалось одинаково хорошо во всех браузерах (в том числе мобильных) и почтовых программах, для того, чтобы ваши письма выглядели привлекательно, и вы не теряли клиентов. Это не последний пост, если возникнут проблемы с отображением, то позже либо поправлю этот, либо напишу продолжение. Так же буду признателен всем, кто поможет протестировать и выявить проблемы.

Проблемы при верстке html писем

Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи <style></style>, а именно inline, для каждого элемента отдельно.

Некоторые разработчики почтовых программ вообще отключили поддержку таблиц стилей и стилей как таковых, способом, описанным выше. Аргументируя это тем, что письма нужны именно для текста. Так что придется писать стили для каждого элемента отдельно.

Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.

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

Как написали на одном из сайтов:

Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan

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

Если у вас нет привычки прописывать alt для изображений, придется ее выработать для верстки писем, так как у некоторых почтовых клиентов, по умолчанию, выключено отображение картинок, и если в письме их у вас много, то пользователь увидит пустые рамки, а так в них будет текст.

Еще, для меня стало проблемой то, что приходится постоянно обнулять многие значения, например, border у картинок, если она задана как ссылка.

Пока - всё! Если что-то еще всплывет, то опишу по ходу. А сейчас я хочу показать вам, что у меня получилось пока, без добавления стилей оформления, таких как шрифт, цвет, размер текста и т.д. Это только элементы в нужных местах. В следующей статье я опишу процесс тестирования в разных почтовых сервиса и правки, которые пришлось внести.

как создать html письмо

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

Как создать html письмо

Для начала, я создал каркас-таблицу для всего содержимого письма, шириной в 100% и голубым фоном. В нем разместил две дочерние  таблицы. Одну для шапки (id="header"), вторую для контента (id="content"):


<!doctype html>
<html>
      <head>
         <meta charset="utf-8"/>
         <title>Рассылка новостей от Smartlanding.biz</title>
      </head>
<body>
      <table width="100%" cellpadding="40" cellspacing="0" align="center" bgcolor="cee5f1">
         <tr>
            <td>
               <table id="header" cellpadding="20" cellspacing="0" width="600" align="center" bgcolor="ffffff">

               </table><!-- header -->
        
               <table id="content" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">

               </table><!-- content -->
            </td>
         </tr>
      </table>
</body>
</html>

Как вы уже заметили, я задал cellpadding="40" для таблицы-обертки. Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше...

Теперь необходимо разделить шапку на 2 части. В одной расположить логотип, а в другой создаю еще одну табличку с 3 столбцами и помещаю туда ссылки на социальные сети.


<tr>
   <td width="260"><img src="http://smartlanding.biz/wp-content/themes/simply-vision/images/mail-logo.png" alt="логотип" width="84" height="84"/>
   </td>

   <td width="260">
      <table id="sotial" cellpadding="0" cellspacing="0" align="right">
         <tr>
            <td align="right"><a href="https://twitter.com/smartlanding" target="_blank" title="Твиттер"><img src="http://smartlanding.biz/wp-content/themes/simply-vision/images/twitter1.png" width="60" height="59" alt="Я в Твиттере"/></a>
            </td>

            <td align="right"><a href="https://plus.google.com/104541820587912901962" target="_blank" title="Твиттер"><img src="http://smartlanding.biz/wp-content/themes/simply-vision/images/googlePlus.png" width="60" height="59" alt="Я в Google+"/></a>
            </td>

            <td align="right"><a href="http://vk.com/smartlanding_biz" target="_blank" title="Твиттер"><img src="http://smartlanding.biz/wp-content/themes/simply-vision/images/vk.png" width="60" height="59" alt="Я во Вконтакте"/></a>
            </td>
         </tr>
      </table><!-- social -->
   </td>
</tr>

Не выяснил, пока что, обязательно ли указывать размеры картинок, поэтому в этом плане пока хаос. Где-то - ставлю, где-то - нет. После тестов наведу порядок. Или уберу совсем, чтоб сократить код, или придется везде дописать, если будет некорректно отображаться в каком-то из почтовиков.

Этим кодом я добавляю строку с одним столбцом, в таблицу "content" и помещаю в него картинку, с надписью "Smartlanding":


<tr>
   <td>
      <img src="http://smartlanding.biz/wp-content/themes/simply-vision/images/mail-banner.png" width="570" height="132" alt="smartlanding" />
   </td>
</tr>

Сейчас письмо выглядит так:

html верстка писем

Идем дальше. Сейчас нам нужно реализовать такую структуру:

как  сделать html письмо

Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:


<tr>
   <td>
      <table id="slogan" cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td width="150" valign="top">
               <table cellpadding="0" cellspacing="0">
                  <tr>
                     <td bgcolor="d0d0d0"><img src="http://smartlanding.biz/wp-content/uploads/2014/09/skrytie-ssylki-javascript.jpg" width="150" height="150" /></td>
                  </tr>
                </table>
            </td>  

            <td width="15"></td>  

            <td width="405" valign="top">
               <h2><a href="#">Как закрыть внешние ссылки от индексации</a></h2>
            </td>
         </tr>
      </table><!-- Slogan -->
   </td>
</tr>

Теперь необходимо реализовать анонс статьи, делается это достаточно просто. 1 строка, 1 столбец и текст в нем:

<tr>
   <td>
      <table id="textBody" cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td width="570">
               <p>Привет ребята. Сегодня речь пойдет о том, как надежно закрыть внешние ссылки на своем лендинг пейдж для того, чтобы с нее не передавался вес, а оставался на вашей странице. Как вы, наверное, знаете, теперь, даже если вы закрыли ссылку атрибутом rel="nofollow", статический вес все равно передается, а следовательно убывает с вашей страницы.</p>
<a href="#" title="читать продолжение на smartlanding">Читать дальше</a>
            </td>
         </tr>
      </table><!-- TextBody -->
    </td>
</tr>

Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 - для того, чтобы задать отступ между ними (60px).

<tr>
 <td>
  <table id="pageImages" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="150" valign="top">
     <img src="http://smartlanding.biz/wp-content/uploads/2014/10/utm-metki.png" />
    </td> 

    <td width="60"></td> 

    <td width="150" valign="top">
     <img src="http://smartlanding.biz/wp-content/uploads/2014/10/smart-novosti.png" />
    </td> 

    <td width="60"></td> 

    <td width="150" valign="top">
     <img src="http://smartlanding.biz/wp-content/uploads/2014/10/script-dlya-ab-testirovaniya.png" />
    </td>
   </tr>
  </table><!-- pageImages -->
 </td>
</tr>

Точно такую же разметку делаю для текста, заголовков:

<tr>
 <td>
  <table id="pageText" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="150" valign="top">
     <a href="#"> Как сделать UTM метки и для чего они нужны</a>
    </td>  

    <td width="60"></td>  

    <td width="150" valign="top">
     <a href="#"> Обновления на блоге и мини-отчет об оптимизации</a>
    </td>  

    <td width="60"></td>  

    <td width="150" valign="top">
     <a href="#"> Скрипт для АБ тестирования</a>
    </td>
   </tr>
  </table><!-- pageText -->
 </td>
</tr>

И теперь остается последний шаг, сделать footer. Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:

<tr bgcolor="797979">
 <td>
   <p align="center"><a href="http://smartlanding.biz" title="Smartlanding">Smartlanding</a> | 2014</p>
 </td>
</tr>

Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:

  • gmail
  • yandex
  • rambler
  • mail
  • mozilla thunderbird
  • outlook 2007
  • outlook 2013
  • the bat

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

Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки. Буду вам очень признателен. А на сегодня - все. Пока!

(Ознакомиться с предварительными тестами html письма в разных поисковых системах можно здесь)

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

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

  1. Павел

    спасибо за статью)

  2. netpicse

    Натолкнуло на мысль создать шаблон для своей почты, отличная идея сделать в стилистике сайта , и как раньше не думал об этом , спасибо

  3. Артем

    Одного понять не могу, а куда html-код вставлять потом, чтоб отправить?

    • dimadv7

      Если ваш почтовый клиент позволяет отправлять письма, составленные в формате html, то в тело письма… Например, еще сервисы для email рассылок позволяют, но там, как правило уже есть десятки готовых шаблонов.

  4. GiBOtheciak

    Проcто уникальный продuкt в0 Bсех отнoшeниях. Ограниченноe пpедложeние B качeствe подaрка к бoльшим праздникaм. вы пoлучите качестBeнный, cенсациoнный звук. И все эtо бeз учactия ваших pук.
    Пp0верено уже мн0гими mеломанaми!
    Подр0бноcти т0лькo здeсь

Добавить комментарий