Как создать html письмо для рассылки: Как отправить HTML-письмо: 4 простых способа | Блог UniSender

Содержание

Как создать 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 письмо

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

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

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

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

Как вы уже заметили, я задал cellpadding=»40″ для таблицы-обертки.

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

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

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

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

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

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

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

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

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

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

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

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

            <td></td>  

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

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

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td>
               <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 cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td valign="top">
     <img src="https://smartlanding. biz/wp-content/uploads/2014/10/utm-metki.png" />
    </td> 

    <td></td> 

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

    <td></td> 

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

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

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

    <td></td>  

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

    <td></td>  

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

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

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

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

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

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

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

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

Инструкция по HTML верстке писем email рассылки

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

Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют конструкторы HTML писем, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов.

В этой статье мы расскажем, как создать HTML письмо, которое пользователи оценят по достоинству.

Создание HTML письма: Базовые знания

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

  • Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте 🙂
  • Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

А теперь давайте разбираться детальнее в такой сложной, но интересной теме как верстка email писем.

Один из самых распространенных вопросов среди новичков: Где писать код шаблона HTML письма? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код HTML письма и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью.

Cкачайте софт для массовых Email рассылок бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.

Формат шаблона html-писем

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

Чаще всего одноколоночный макет включает в себя:

  1. Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
  2. Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
  3. Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

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

Как сверстать HTML шаблон письма: Создание документа

HTML код любого email сообщения состоит из двух частей:

  1. Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
  2. Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.

Создание HTML письма начинается с создания документа типа XHTML:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www. w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5. <title>Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6. </head>
7. </html>

<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.

<meta http-equiv=»Content-Type» /> указывает, как обрабатывать текст и специальные символы в вашем письме.
«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.

<meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.

Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.

Верстка тела email писем. Создание таблицы

Общая структура письма создается с использованием тега <body>.

Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.

Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.

Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.

Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=»1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».

1. <body>
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>

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

(наличие рамки – результат работы тега border=»1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!»

1. <table border="1" cellspacing="0" cellpadding="0" align="center">
2. <tbody>
3. <tr>
4. <td>Привет!</td>
5. </tr>
6. </tbody>
7. </table>

Теперь письмо выглядит вот так:

Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.

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

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

1. <tr>
2. <td>
3. Привет!
4. </td>
5. </tr>

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

Должно получиться следующее:

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td>
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td>
14.Строка 3
15. </td>
16. </tr>
17. </table>

Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td bgcolor="#ffa500">
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td bgcolor="#ffffff">
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td bgcolor="#1e90ff">
14. Строка 3
15. </td>
16. </tr>
17. </table>

Сосредоточимся на первой строке – это будет хедер письма.

Строка 1. Верстка хедера HTML писем

В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding>.

Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.

Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.

Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.

В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом &nbsp; внутри), но с четко установленной высотой или шириной.

Например:

<tr><td>&nbsp;</td></tr>

Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо.

В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>.

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

Пример кода Строки 1 с вставленным изображением:

1. <td align="center" bgcolor="#ffa500">
2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img. png">
3. </td>

Визуально:

Строка 2. Работа с контентом в HTML шаблоне письма

Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉

Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

  • одна – для заголовка,
  • вторая – для краткого описания статьи,
  • третья – для строки с двумя столбцами.

Поехали!

Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.

Код Строки 2 с вложенной таблицей:

1. <td bgcolor="#ffffff">
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Строка 1
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Строка 2
11. </td>
12. </tr>
13. <tr>
14. <td>
15. Строка 3
16. </td>
17. </tr>
18. </table>
19. </td>

Визуально:

Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.

Вложенная таблица с текстом:

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.
11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.
12. </td>
13. </tr>
14. <tr>
15. <td>
16. Строка 3
17. </td>
18. </tr>
19. </tbody>
20. </table>

Визуально:

Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.

Давайте по порядку.

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

Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.

*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.

Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.

Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.

1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td valign="top">
4. Колонка 1
5. </td>
6. <td>
7. &nbsp;
8. </td>
9. <td valign="top">
10. Колонка 3
11. </td>
12. </tr>
13. </table>

Визуально:

Добавляем изображения и контент.

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

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td valign="top">
5. <table border="1" cellspacing="0" cellpadding="0">
6. <tbody>
7. <tr><td>&nbsp;
8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td>
9. </tr>
10. <tr>
11. <td>
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
13. </td>
14. </tr>
15. </tbody> </table>
16. </td>
17. <td>
18. &nbsp;
19. </td>
20. <td valign="top">
21. <table border="1" cellspacing="0" cellpadding="0">
22. <tbody> <tr>
23. <td>
24. &nbsp;
25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg"> </td>
26. </tr>
27. <tr>
28. <td>
29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
30. </td>
31. </tr>
32. </tbody> </table>
33. </td>
34. </tr>
35. </tbody> </table>

Визуально:

Строка 3. Создание кода футера HMTL письма

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.

Чтобы не забыть, сначала добавим отступы, а после – таблицы.

Отступы:

<td bgcolor="#1e90ff ">
Строка 3
</td>

Визуально:

Разделяем строку на две колонки с помощью дополнительной таблицы.

1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Колонка 1
5. </td>
6. <td>
7. Колонка 2
8. </td>
9. </tr>
10.</table>

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

Дополнительная таблица с информацией футера:

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody><tr>
3. <td>
4. <p>Компания ePochta<br>
5. [email protected]</p>
6. </td>
7. <td align="right">
8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже.
9. </td>
10. </tr>
11. </tbody></table>

Визуально:

Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=»right» для тега <td>.

Шаблон готов!

Верстка дизайна шаблона email рассылки

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

Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.

Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:

1. <td><p align="center">
2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах
3. </p></td>

Посмотрите, как изменился текст:

Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на тег border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.

При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:

<table align="center" cellspacing="0" cellpadding="0">

Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0">
2. <tbody>><tr>
3. <td>

А теперь – проба пера: отправляем письмо на тестовый email адрес.

Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения.

Вот так созданный шаблон выглядит в Gmail

Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте.

И пусть клиенты с удовольствием читают ваши рассылки!

Создаем html шаблон для email рассылки

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

Эта статья поведает о том, как создать html шаблон для email рассылки, который выглядит привлекательно и эффективно. Итак, начнем…

Email-шаблон – это продолжение вашего сайта

Он предназначен для узнаваемости, поэтому должен наследовать (но не дублировать) стилистику сайта. Используйте ту же цветовую гамму, шрифт. Стиль должен четко отслеживаться.

 

И сайт, и рассылка Coral Travel оформлены в едином стиле. Есть узнаваемый логотип, основной цвет — синий. Шрифт и там, и там без засечек.

Советы по созданию html-шаблона

Несколько рекомендаций о том, как сделать html-шаблон письма:

  • Нежелательно подключать нестандартные шрифты. Если у получателя не окажется установленного шрифта, произойдет автоподмена, и вы рискуете получить неожиданный результат в виде поехавшей верстки. Список “безопасных” шрифтов, которые корректно отображаются всеми без исключения почтовыми клиентами: Arial, Arial Black, Bookman Old Style, Comic Sans MS, Courier, Courier New, Garamond, Georgia, Impact, MS Sans Serif, MS Serif, Tahoma, Times New Roman, Trebuchet MS, Verdana.

    Текст набран простым классическим шрифтом, который точно правильно отобразится у всех пользователей
  • Не каждую дизайнерскую задумку, применимую к сайту, можно реализовать для письма. К примеру, невозможно наложить элементы друг на друга или сделать анимацию на кнопке.
  • Оптимальная ширина письма — 600 пикселей. Если она будет больше, то на некоторых устройствах может появиться горизонтальная полоса прокрутки. Это сильно испортит вид и юзабилити письма.
  • Правильная структура. Классическое письмо состоит из таких частей: прехедер, хедер (шапка), тело, футер (подвал).

    Письмо с классической структурой
  • Лучше применять технологию верстки блоками. Верстка таблицами считается устаревшим решением.
  • Разместите в прехедере название вашего бренда или логотип. Также можно вшить ссылку для быстрого перехода на ваш сайт.

    Название магазина в прехедере письма
  • В конце первого экрана обязательно расположите кнопку с призывом к действию.

    В конце первого экрана расположена кнопка с надписью “Discover the list” — “Ознакомиться со списком”. При нажатии пользователь попадет на страницу, на которой представлен ассортимент.
  • Единственный вариант анимации в письме — GIF. CSS- и Flash-анимации не поддерживаются. Продумайте анимацию так, чтобы первый ее слайд был наиболее информативным. Если она не загрузится полностью (например, при медленном интернете), то получатель увидит только первую картинку.
  • Нельзя скомпоновать e-mail только из изображений. Текст — обязательная составляющая. Иначе письмо улетит в “Спам”.

Что писать?

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

  • Избегайте крайностей, контрастных цветов (например, ярко-синего #0000FF, ярко-красного #FF0000, желтого #FFFF00, зеленого #00FF00 и так далее)
  • Не набирайте текст с использованием “CAPS LOCK”
  • Избегайте большого количества восклицательных знаков !!!!, как бы вам ни хотелось выделить фразу таким образом. В таких случаях для акцентирования лучше используйте жирный текст либо курсив.
  • Не злоупотребляйте призывами к действию, особенно в теме письма. Не создавайте обещаний, далеких от реальности. Например, “Заработай миллион за 1 час”.
  • Обязательно задавайте атрибуты ширины и высоты картинки, которые соответствуют фактическому ее размеру.

Неужели это на один раз?

Не надо пытаться в одном сообщении вываливать на получателя всю информацию о вас: прайсы, новости, описание вашей деятельности, ссылки на смежные статьи. Сделайте умнее – постройте свою email стратегию таким образом, чтобы получатель видел интересующий его контент в первую очередь. Разделите данные на несколько рассылок. Высылайте только актуальные прайсы и предложения.

А давайте добавим видео

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

При нажатии на кнопку Play человек попадает на видео на вашем Ютуб канале

Комфорт получателя превыше всего

Как корпоративная, так и личная почта все чаще просматривается получателями на экранах мобильных устройств. А это значит, что, во-первых, html-шаблоны должны быть адаптивными, а, во-вторых, суть письма должна быть представлена в первых 27-41 символах. Именно это количество символов видит получатель на экране смартфона в первые секунды открытия письма.

Кроме того, чтобы email выглядел одинаково хорошо на любом устройстве, используйте такие приемы:

  • Расположите блоки в одну колонку. Если вы хотите добавить актуальные новости в рассылку, сделайте это лучше внизу письма. Не следует выводить их параллельно основному контенту. На телефоне это будет смотреться нечитабельно.
  • Разместите по два товара в ряд, а не три и более. Так при масштабировании и пропорциональном уменьшении текста он останется более читабельным.
  • Используйте большие кнопки. Не заставляйте получателя пытаться попасть по мелким ссылкам – не у всех из них железное терпение.

Адаптированный под все размеры экранов шаблон для email рассылки

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

Также мы предлагаем шаблоны, встроенные в саму программу. Чтобы найти их, запустите ePochta Mailer. Нажмите Файл – Новое сообщение из шаблонов. Дальше вы можете выбрать любой шаблон из списка:

Приятных и продуктивных вам рассылок!

25 советов по созданию html email рассылки

Разработка HTML шаблона письма — один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.

Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет как такового, так как фильтры и триггеры могут заблокировать письмо.

Поэтому сегодня хочу дать вам 20 советов как избежать наиболее частых ошибок при создании email шаблонов. Данные советы не претендуют на звание HTML справочника для email маркетологов, но, думаю, вам пригодятся.

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

ФОРМАТИРОВАНИЕ

    1. Создавайте письма вручную.

Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные «WYSIWYG» (What You See Is What You Get) редакторы полны недостатков. Практически все из них вставляют лишний html код (особенно FrontPage), который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.

    1. Избегайте вложенных таблиц
    2. Не используйте фоновых рисунков, практически во всех email клиентах они не отображаются
    3. Располагайте картинки на своем сервере, вместо включения их в письмо

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

    1. Избегайте использования картинок 1х1 пикселей (для подгона размера элементов таблиц).
    2. Не используйте CSS

CSS значительно упрощает работу со стилями для вебсайтов, но в случае HTMLписем это может повлиять на корректное отображение письма. Не используйте стили из отдельно прикрепленного файла. Наилучший вариант включить стили в headerчасть письма.

    1. Не делайте ширину сообщений более 650 пикселей в ширину

В некоторых почтовых программах пользователям придется использовать горизонтальный скроллинг для чтения письма.

    1. Размер сообщения должен быть не более 100 кб

USABILITY

    1. Проверяйте HTML код на корректность. Для этого существует масса всевозможных отдельных утилит, встроенные чекеры в программах для работы с HTML и, естественно, W3C Validator.
    2. Не используйте скрипты в письмах.

Письма могут быть заблокированы фильтрами.

    1. Вставляйте в письмо ссылку на Web версию сообщения

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

    1. Используйте alt теги для изображений.

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

    1. Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
    2. Используйте горизонтальное расположение текста, не используйте вертикальное
    3. Объедините в письме текст и HTML, лучше использовать цвета и стили вместо картинок.

ФУНКЦИОНАЛЬНОСТЬ

    1. Вставляйте большое количество ссылок на информацию на вашем сайте.
    2. Навигация по вашему email сообщению должна совпадать с типом навигации на вашем сайте.
    3. Вставляйте функциональность вроде «Отправить другу» с осторожностью

Многие email программы могут некорректно отображать формы. Лучше использоваться ссылку на страницу вашего сайта, где находится форма «Отправить другу».

    1. Добавьте возможность управления подпиской в письмо

Об этом я уже неоднократно писала.

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

Многие получатели могут не иметь соответствующего ПО, поддерживающего данные форматы

ОФОРМЛЕНИЕ

    1. Используйте в оформлении html письма корпоративные цвета.

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

    1. Уделите внимание тому, чтобы стиль письма отражал суть бизнеса

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

    1. Подбирайте максимально удобные для чтения шрифты

Желательно, чтобы кегель был 12-14 размера. Например, Verdana 12, Calibri 14.

    1. Отредактируйте текст письма: выравнивание основного текста по ширине или левому краю, заголовков — по центру; подзаголовки выделяйте полужирным шрифтом и выравнивайте по левому краю; следите, чтобы между абзацами была пустая строка.
    2. Не забывайте делать акценты на ключевых моментах письма

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

Для создания и отправки email рассылки рекомендую использовать ePochta Mailer, который обладает собственным WYSIWYG редактором, возможностью ручного редактирования HTML кода и просмотра полученного результата с помощью встроенного браузера.

7 шагов для создания шаблона для электронного письма HTML: просто и быстро

От автора: лучший способ понять любой процесс — это выполнить его с нуля. Сегодня мы собираемся сделать это для дизайна электронного письма, создав HTML шаблон письма с нуля.

Что мы создаем

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

Начинаем с HTML-документа

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Теперь, как мы уже писали в предыдущем руководстве, вам нужно начать HTML-документ электронного письма с XHTML-документа:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»//www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Demystifying Email Design</title> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″/> </head> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd»>

<html xmlns=»//www.w3.org/1999/xhtml»>

<head>

  <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />

  <title>Demystifying Email Design</title>

  <meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>

</head>

</html>

После этого мы можем приступить к созданию остальной части конструкции.

Создайте раздел body и основную таблицу

Сначала мы добавим общую структуру для электронного письма, начиная с тега body. Мы установим для полей и отступов тега body ноль, чтобы избежать неожиданного пустого пространства.

Мы также добавим таблицу шириной 100%. Он выполняет роль тега body для нашего электронного письма, поскольку стилизация тега body не поддерживается полностью. Если вы хотите добавить цвет фона к «телу» электронного письма, вам нужно вместо этого применить его к этой большой таблице.

Установите для cellpadding и cellspacing ноль, чтобы избежать неожиданных пустых пространств в таблице.

Примечание: мы собираемся оставить border=»1″ для всей таблицы, чтобы мы могли видеть скелет макета. Мы удалим его в конце с помощью простого поиска и замены.

<body> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Hello! </td> </tr> </table> </body>

<body>

<table border=»1″ cellpadding=»0″ cellspacing=»0″>

  <tr>

   <td>

    Hello!

   </td>

  </tr>

</table>

</body>

«Если в HTML существует атрибут, используйте его вместо CSS»

Теперь поместите центрированную таблицу шириной 600 пикселей внутри таблицы контейнера. 600 пикселей — это максимальная безопасная ширина, чтобы ваши электронные письма могли комфортно отображаться на большинстве настольных компьютеров и клиентов веб-почты на большинстве разрешений экрана.

Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML электронных писем: если в HTML существует атрибут, используйте его вместо CSS. Мы заменим наше маленькое приветствие «Hello!» этой таблицей:

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Hello! </td> </tr> </table>

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″>

<tr>

  <td>

   Hello!

  </td>

</tr>

</table>

Мы также добавили свойство встроенного стиля, которое устанавливает для свойства border-collapse значение collapse. Если мы этого не сделаем, более новые версии Outlook добавят небольшое пространство между нашей таблицей и обводкой.

Создайте структуру и заголовок

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

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″>

<tr>

  <td>

   Row 1

  </td>

</tr>

<tr>

  <td>

   Row 2

  </td>

</tr>

<tr>

  <td>

   Row 3

  </td>

</tr>

</table>

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

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td bgcolor=»#70bbd9″> Row 1 </td> </tr> <tr> <td bgcolor=»#ffffff»> Row 2 </td> </tr> <tr> <td bgcolor=»#ee4c50″> Row 3 </td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″>

<tr>

  <td bgcolor=»#70bbd9″>

   Row 1

  </td>

</tr>

<tr>

  <td bgcolor=»#ffffff»>

   Row 2

  </td>

</tr>

<tr>

  <td bgcolor=»#ee4c50″>

   Row 3

  </td>

</tr>

</table>

Хорошо, далее мы собираемся сосредоточиться на строке 1. Мы хотим настроить заполнение ячейки, а затем вставить изображение.

Использование отступов

При использовании отступов в электронном письме вы всегда должны указывать каждое отдельное значение (верхнее, правое, нижнее и левое), в противном случае вы можете получить непредсказуемые результаты. Я считаю, что вы можете использовать сокращенную запись, то есть padding: 10px 10px 8px 5px;, но если у вас возникли проблемы вы можете использовать полную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Если у вас возникают еще большие проблемы с отступами (например, если платформа отправки удаляет ваш CSS), не используйте их вообще. Просто создайте пустые ячейки, чтобы задать пространство. Нет необходимости использовать пустые GIF, просто убедитесь, что вы добавляете style=»line-height: 0; font-size: 0;» для ячейки, размещаете внутри нее &nbsp; и задаете ей явную высоту или ширину. Вот пример:

<tr><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td></tr>

Также обратите внимание, что использование тегов TD безопасно, а тегов P или DIV — нет. Они ведут себя намного более непредсказуемо.

Итак, мы будем использовать некоторые встроенные CSS для добавления отступов ячейки. Затем мы вставим изображение, добавив альтернативный текст и указав style=»display:block;», что является обычным исправлением, которое не дает некоторым почтовым клиентам, добавлять пробелы под изображениями. Мы разместим изображение по центру, добавив align=»center» к тегу td. Мы также добавим тег alt, который важен для начальной загрузки электронного письма, которая в большинстве случаев будет отключена.

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

<td align=»center» bgcolor=»#70bbd9″> <img src=»images/h2. gif» alt=»Creating Email Magic» /> </td>

<td align=»center» bgcolor=»#70bbd9″>

<img src=»images/h2.gif» alt=»Creating Email Magic» />

</td>

Создайте область контента

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

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

<td bgcolor=»#ffffff»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table> </td>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<td bgcolor=»#ffffff»>

<table border=»1″ cellpadding=»0″ cellspacing=»0″>

  <tr>

   <td>

    Row 1

   </td>

  </tr>

  <tr>

   <td>

    Row 2

   </td>

  </tr>

  <tr>

   <td>

    Row 3

   </td>

  </tr>

</table>

</td>

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

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> <tr> <td> Row 3 </td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<table border=»1″ cellpadding=»0″ cellspacing=»0″>

<tr>

  <td>

   Lorem ipsum dolor sit amet!

  </td>

</tr>

<tr>

  <td>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

  </td>

</tr>

<tr>

  <td>

   Row 3

  </td>

</tr>

</table>

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

Как бы мне ни хотелось придерживаться процентов, когда у вас есть контент, который имеет определенный размер, может быть сложно преобразовать его в проценты (в этом примере столбцы могут составлять 48,1%, что может привести к путанице). По этой причине, поскольку наши два изображения имеют ширину 260px, мы создадим столбцы, которые также имеют ширину 260px, с ячейкой отступа 20px в середине. (Это составит 540px, что дает ширину 600px нашей таблицы минус отступ 30px с обеих сторон. ) Обязательно обнулите размер шрифта и высоту строки и добавьте неразрывный пробел &nbsp; в ячейку поля.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Мы также установили top для valign обоих элементов, так что они будут вертикально выравниваться по верху, даже если один столбец имеет больше текста, чем другой. Вертикальное выравнивание по умолчанию middle.

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td valign=»top»> Column 1 </td> <td> &nbsp; </td> <td valign=»top»> Column 2 </td> </tr> </table>

<table border=»1″ cellpadding=»0″ cellspacing=»0″>

<tr>

  <td valign=»top»>

   Column 1

  </td>

  <td>

   &nbsp;

  </td>

  <td valign=»top»>

   Column 2

  </td>

</tr>

</table>

Теперь давайте добавим изображения и контент в эти столбцы. Поскольку нам нужно несколько строк, мы вложим еще одну таблицу, потому что мы не можем использовать ни тег colspan, ни rowspan. Мы также добавим несколько отступов между изображением и текстом в каждом столбце.

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td valign=»top»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> <img src=»images/left.gif» alt=»» /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> <td> &nbsp; </td> <td valign=»top»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> <img src=»images/right. gif» alt=»» /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<table border=»1″ cellpadding=»0″ cellspacing=»0″>

<tr>

  <td valign=»top»>

   <table border=»1″ cellpadding=»0″ cellspacing=»0″>

    <tr>

     <td>

      <img src=»images/left. gif» alt=»» />

     </td>

    </tr>

    <tr>

     <td>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

     </td>

    </tr>

   </table>

  </td>

  <td>

   &nbsp;

  </td>

  <td valign=»top»>

   <table border=»1″ cellpadding=»0″ cellspacing=»0″>

    <tr>

     <td>

      <img src=»images/right.gif» alt=»» />

     </td>

    </tr>

    <tr>

     <td>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

     </td>

    </tr>

   </table>

  </td>

</tr>

</table>

Здесь мы с использованием HTML установили ширину изображений 100% ширины столбца. Опять же, если мы сделаем электронное письмо адаптивным, нам нужно будет использовать только медиа-запросы для изменения ширины родительского элемента. Нам придется переопределить высоту в пикселях, потому что использование style=»height: auto» сейчас не будет работать везде (кхе-кхе, Outlook). Итак, мы установим его, используя пиксели. Это означает, что нам с помощью медиа-запросов нужно установить height: auto!important для этих изображений, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Поскольку мы устанавливаем ширину в процентах, нам не нужно это переопределять. Чем меньше вещей нужно переопределить, тем лучше.

Стили футера

Теперь мы добавим отступ в строку футера.

HTML в email. Как создать и отправить HTML письмо?

Польза HTML-писем и рассылок

Email-маркетинг — это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией. Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

Путём несложных вычислений, было выявлено, что такие письма реализуются, как и обычные веб-страницы, с использованием HTML и CSS. Следственно, чтобы создать такое письмо, необходимо сделать маленькую узкую страничку со всеми необходимыми ссылками. То есть, для начала, можно вообще закрыть почту и погрузиться в фотошоп и редактор кодов, а вернуться только тогда, когда во вкладке браузера будет отображаться готовый мини-сайт.

С чего начать и как создать?

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

Создание HTML-письма по шаблону

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

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

Как отправить HTML-письмо?

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

В открывшемся коде, перед нами сразу предстанет строчка body, кликнув по котрой правой клавишей, необходимо выбрать пункт «Edit As HTML».

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

Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

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

Также, советую почитать мою статью про актуальность SEO-оптимизации сайта при новых поисковых алгоритмах.



Как создать список рассылки

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

При поиске в Google инструкций по созданию списка рассылки почти все результаты фокусируются на операциях, предоставляемых Gmail или другими поставщиками электронной почты.

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

Список рассылки компании намного сложнее. Это постоянно развивающийся организм , который должен развиваться со временем, стремясь к расширению .

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

Что такое список рассылки?

Список рассылки — это не более чем набор из адресов электронной почты , которые получают сообщения электронной почты из домена отправителя, в котором они зарегистрированы.

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

Все о GDPR: новости, обязательства и возможности

Еще несколько лет назад список рассылки задумывался как единый контейнер адресов получателей , на которые отправитель отправлял одно и то же электронное письмо.Это подход , который американцы называют , один размер подходит всем , и (теоретически) мы должны считать устаревшим .

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

Вот как мы можем резюмировать изменение:

Список рассылки → Список сегментов

Элементы для создания списка контактов

Некоторые из них уже будут, другие нет:

  • Professional платформа подачи заявок
  • Веб-сайт
  • База контактов (даже если небольшая)
  • Инструмент для создания базы данных
  • Стратегический подход

Как создать список контактов

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

1. Выберите платформу для отправки.

Это deus ex machina для любой деятельности по электронному маркетингу и использованию списков рассылки. Существует трех типов преимуществ (одно дополняет все остальные), предлагаемых отправляющей платформой:

  1. Производительность
    Профессиональная инфраструктура обеспечивает высокую скорость доставки и гарантирует отправителям необходимую защиту от возможных спама и фишинговых помех, а также в целом от любого мошенничества с использованием электронной почты.Все это благодаря сертификации и постоянному мониторингу рассылок.
  2. Функции
    См. В пункте 3. Платформа отправки содержит множество инструментов, ориентированных на различные действия, связанные с почтовым маркетингом: от автоматизации до отслеживания результатов и создания базы данных, что мы вскоре увидим.
  3. Творчество
    Представьте, что вы отправляете текстовую рассылку по электронной почте в ваш список рассылки или, с другой стороны, визуальное электронное письмо. Это большая разница. Платформа отправки предоставляет вам редактор с перетаскиванием, в котором вы можете создавать электронные письма и информационные бюллетени с профессиональным дизайном, оптимизированным для мобильных устройств, и с несколькими простыми операциями перетаскивания.Редактор автоматически напишет HTML-код за вас.

Платформа MailUp поддерживает все это и многое другое. Это доступно через 30-дневную бесплатную пробную версию. Начни с взгляда.

2. Загрузите свой список рассылки: создайте списки и группы

Первый шаг состоит из загрузки почтового сообщения контактов списка внутри платформы, независимо от его размера. Вы можете сделать это вручную, импортировав каждый адрес электронной почты или загрузив файлы CSV / text, Excel или XML.

После загрузки у вас будет , созданный ваш первый список , который представляет собой не что иное, как независимый набор сообщений, получателей, настроек, статистики и т. Д.

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

Примеры?

  • Группа потенциальных клиентов
  • Группа лучший потенциал клиентов
  • Группа информационный бюллетень
  • Группа рекламных акций
  • Группа неактивных получателей
  • Группа иностранных получателей
  • Группа иностранных получателей Группа
  • Группа Рынок B2B

3.Разработка стратегии построения базы данных

После создания списка рассылки необходимо реализовать одну или несколько стратегий , которые постоянно пополняют список новыми получателями . Это одно из золотых правил электронного маркетинга: база данных — это постоянно меняющийся и обновляющийся организм, стремящийся к расширению.

Чтобы сделать эту деятельность систематической, в MailUp есть несколько специальных инструментов . Каждый инструмент ориентирован на конкретную точку контакта с пользователем.Они позволяют преобразовать пользователя в получателя в зависимости от того, приближается ли пользователь к вашей реальности через социальную сеть, веб-сайт, на ярмарках, мероприятиях или даже в магазинах. Давайте посмотрим:

Форма регистрации и многоканальное всплывающее окно

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

Убедитесь, что ваш сайт предлагает возможность подписаться на информационный бюллетень с домашней страницы или на определенных страницах (возможно, наиболее посещаемых). С помощью MailUp вы можете создать двух типов форматов для запроса регистрации:

  • Детально настраиваемые формы подписки: заголовок, поля, раскрывающиеся меню, кнопки и флажки. Всего за несколько операций перетаскивания вы получите URL-адрес, который будет ссылаться на призыв к действию на вашем сайте.
  • Всплывающее окно для многоканальной подписки: вам даже не нужны простые операции перетаскивания. Всего за несколько щелчков мыши определите стиль всплывающего окна с помощью цвета, местоположения, языка и заголовка. Создав всплывающее окно, вы можете получить код для добавления на сайт, в блог или на страницу любого другого типа. Получателю просто нужен флажок в соответствующем поле, чтобы автоматически вставить поле электронной почты или SMS (или и то, и другое). Вот как мы использовали его для нашего сайта:
MailUp и Facebook Lead Ads

Facebook Lead Ads — это тип рекламы, который позволяет собирать подписок на информационные бюллетени, события или запросы цен.Короче говоря, все, что передается из формы прямо в Facebook.

Коннектор LeadsBridge позволяет автоматически преобразовывать каждого нового лида, приходящего с Facebook, в нового подписчика списка рассылки. Интеграция перехватывает новое лидерство, которое было создано для платформы MailUp, избегая ручной передачи файлов с одной платформы на другую.

Как превратить посетителей в заинтересованных потенциальных клиентов

Приложение Facebook

Социальные сети необходимы для расширения списка рассылки, и Facebook , несомненно, является катализатором увеличения трафика.Благодаря приложению вы можете вставить форму заявки на свою страницу в Facebook.

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

Приложение Jade для iPad

Зачем создавать форму подписки на iPad ? Это сделано для того, чтобы постоянно пополнять список рассылки, даже если offline , e.г. на выставках , мероприятиях или даже в магазине. Все это места, которые могут преобразовать возможности в создание базы данных.

Приложение называется Jade и создает персонализированную форму подписки на iPad, связанную с учетной записью MailUp. Это фундаментальный инструмент для оцифровки всего процесса сбора контактов , позволяющий избежать транскрипции имен и адресов с бумажных форм на платформу.

4. Установите двойную подписку.

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

По сути, это работает так: после заполнения формы пользователь должен нажать кнопку в электронном письме с подтверждением, которое было автоматически отправлено ему / ей. Этот метод гарантирует, что введенный адрес электронной почты действителен и действительно принадлежит пользователю .

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

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

5. Назначьте человека для управления списком рассылки

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

Это не означает, что администратор — единственный человек, который имеет право голоса по поводу создания текстов и выбора изображений и графики. Очень полезным инструментом в этом отношении является Collaboration, инструмент, который упрощает совместное использование и одобрение проектов, связанных с электронной почтой , командой .

По сути, это работает так:

  1. Создайте кампанию
  2. Поделитесь ею с желающими
  3. Ваши соавторы добавляют заметки и комментарии, щелкая по любому графическому или текстовому элементу.Каждый комментарий порождает упорядоченную цепочку, на которую легко следить, которую можно разрешить, когда все согласятся.

Узнайте, что вы можете делать с Collaboration

Подведение итогов

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

Это не говоря уже об управленческой части. Фактически, MailUp автоматически обрабатывает адреса электронной почты для индивидуализации:

  • Bounce
    Выявленные и классифицированные по типу ошибки.
  • Без подписки
    Выделено и проигнорировано в следующем письме.
  • Двойные адреса
    Удаляются при импорте.
  • Неверные адреса
    Отображается для дальнейшего контроля.

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

Андреа Сервенти

Редактор

Я родился в 1986 году в Милане, где получил диплом по современной литературе и начал писать для интернет-газет, журналов и новостных телепрограмм. Перейдя на маркетинг и цифровой мир, я работаю редактором контента в MailUp: читаю, слушаю, собираю идеи и пишу о том, что такое электронный маркетинг и как его использовать в стратегических целях.

Вам понравилась эта статья? У нас есть для вас гораздо больше.

Подпишитесь, чтобы получать последние новости о маркетинге по электронной почте и SMS.

HTML-списки


Списки HTML позволяют веб-разработчикам группировать набор связанных элементов в списки.


Пример

Упорядоченный список HTML:

  1. Первая позиция
  2. Второй предмет
  3. Третий элемент
  4. Четвертый элемент
Попробуй сам »

Неупорядоченный список HTML

Неупорядоченный список начинается с тега

    . Каждый элемент списка начинается с
  • тег.

    По умолчанию элементы списка будут отмечены кружками (маленькими черными кружками):


    Упорядоченный список HTML

    Упорядоченный список начинается с тега

      . Каждый элемент списка начинается с тега
    1. .

      По умолчанию элементы списка будут отмечены цифрами:


      Списки описаний HTML

      HTML также поддерживает списки описаний.

      Список описаний — это список терминов с описанием каждого термина.

      Тег

      определяет список описаний, тег
      определяет термин (имя), а тег
      тег описывает каждый термин:

      Пример


      Кофе

      — черный горячий напиток

      Молоко

      — белый холодный напиток

      Попробуй сам »

      Теги списка HTML

      Тег Описание
      Определяет неупорядоченный список
      Определяет упорядоченный список
    2. Определяет элемент списка
      Определяет список описаний
      Определяет термин в списке описания
      Описывает термин в списке описания


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

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

      Почтовые клиенты без стандартов

      При кодировании веб-страницы инженер принимает во внимание следующие факторы:

      • операционная система
      • тип браузера
      • размер экрана

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

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

      Конечно, почтовым клиентам было бы намного проще поддерживать универсальный набор стандартов, а разработчикам — соблюдать. Но, к сожалению, у нас их нет. Каждый почтовый клиент играет по своим правилам. Вот почему отрисовка CSS различными почтовыми клиентами может значительно отличаться.

      Топ-10 почтовых клиентов в 2018 году

      В июне 2018 года Litmus опубликовал отчет о доле рынка почтовых клиентов, основанный на данных об открытии электронных писем 1,04 миллиарда, собранных ими по всему миру. Чтобы получить представление об основных игроках рынка и их долях в этой сфере, можно просмотреть этот отчет.

      Доля рынка почтовых клиентов, 2018

      Узнайте, какие почтовые клиенты предпочитает ваша целевая аудитория

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

      В Mailtrap мы используем Mailchimp и Sendgrid для отправки кампаний электронной почты в формате HTML. Оба инструмента предоставляют доступ к ведущим клиентам электронной почты

      Создание электронного письма в формате HTML и создание шаблона с нуля

      Если вы создавали веб-сайты достаточно долго, чтобы вспомнить славные дни GeoCities и Angelfire, вы, вероятно, создали свои первые веб-сайты, используя таблицы для макетов.Создание электронного письма в формате HTML сегодня вернет вас в те бурные времена, хотя и с меньшим использованием тега


      .

      Установите закладку в этом разделе, потому что вам захочется возвращаться к ней каждый раз, когда вы начинаете создавать новый шаблон электронной почты. Мы расскажем о советах и ​​приемах, которые позволят достичь хороших результатов для как можно большего числа ваших или ваших клиентов читателей.

      Единственный клиент, который все еще нуждается в таблицах HTML, — это Outlook для рабочего стола Windows, поэтому, пока он не станет устаревшим, вам нужно будет понимать, как почтовые клиенты обрабатывают таблицы, даже если это просто откат к макетам таблиц для Outlook.

      Но сначала важно знать, кому вы отправляете.

      Определите зрительские привычки вашей аудитории.

      Первый шаг в создании успешного электронного письма в формате HTML — это знать, как его будут читать. Если, например, все подписчики будут читать вашу электронную почту в своей корпоративной электронной почте Outlook, это может указать вам на использование открытого текста.

      В большинстве случаев используется несколько почтовых клиентов, но есть несколько способов выяснить это. Campaign Monitor публикует некоторую общую статистику использования почтового клиента, которая дает общий обзор, хотя и с некоторыми ограничениями.Или вы можете взглянуть на сайт электронной почты Litmus Market Share.

      Однако нет гарантии, что они отражают вашу аудиторию. Campaign Monitor и ряд других поставщиков услуг электронной почты предоставят вам отчет по каждой кампании, в котором будет указан почтовый клиент для каждого подписчика, если таковой имеется.

      В этих отчетах вы ищете наименьший общий знаменатель. Если, например, 30% пользователей используют Lotus Notes 7, вам необходимо убедиться, что вы специально протестируете этот клиент перед отправкой.Определенная версия почтового клиента может быть актуальной — Outlook 2003 доставит вам гораздо меньше головной боли, чем Outlook 2007, и в некоторых случаях в вашем списке может использоваться только одна версия.

      Если вы никогда раньше не попадали в этот список, возможно, вам просто нужно протестировать каждого клиента, которого вы сможете найти, и сделать некоторые обоснованные предположения о том, с какой аудиторией вы имеете дело. Скорее всего, они будут использовать мобильные телефоны для чтения электронной почты или заблокировать корпоративные серверы? Возможно, все они используют Outlook.com и Yahoo, которые, по крайней мере, легко проверить. Что бы вы ни знали о своей аудитории, сделайте себе несколько заметок о том, какие почтовые клиенты вы хотите проверять больше всего при каждой отправке.

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

      Положитесь на таблицы — и не только на данные.

      Самый важный принцип для электронных писем HTML — это то, что макет CSS просто не работает. Основные почтовые клиенты либо не предлагают поддержки вообще, либо искажают ее множеством разочаровывающих способов.

      Использование CSS вместо таблиц было боевым кличем войны веб-стандартов, но кодирование электронных писем в формате HTML означает поднять белый флаг и сдаться. Если только вы не создаете чрезвычайно простое электронное письмо или вся ваша аудитория не использует более современное чтение электронной почты инструмент, он вернулся ко всем тегам

      .

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

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

      1. Установите ширину в каждой ячейке, а не в таблице.

      Комбинация ширины таблицы, ширины ячеек, полей и отступов HTML, а также полей и отступов CSS может быть хаотичной. Упростите свой код и свою жизнь, установив только для каждой ячейки:

        

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

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

      2. Размещение таблиц для обеспечения равномерного расстояния.

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

      3. Установите цвет фона для таблицы контейнера.

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

      4. Пробелы имеют значение.

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

      Использовать встроенный CSS.

      Здесь пригодится C для каскадного в CSS. Применение стиля в строке дает ему приоритет над удаленными стилями (такими как стили клиента веб-почты), а также работает с почтовыми клиентами, которые удаляют CSS из заголовка или внешних файлов CSS.

      В настоящее время единственным крупным почтовым клиентом, который удаляет все другие типы CSS, встроенные теги