Разное

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

16.10.2019

Содержание

Инструкция по 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 вы можете прочитать на нашем сайте.

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

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 кода и просмотра полученного результата с помощью встроенного браузера.

Как верстать html письма с нуля + примеры и исходники шаблона

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

Как верстать html письма: основные правила


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

Правило №1

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

Правило №2

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

Правило №3

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

Создания шаблона HTML письма

Для отправки сообщения по почте не обязательно создавать отдельный документ, достаточно написать текст и воспользоваться функцией php mail, но иногда требуется добавить графику и применить стили, чтобы текст выглядел более представительно. В данном случае необходимо начинать разработку с dom объектов или, проще говоря, html-теги. Каждый документ имеет начальную структуру.

Важно: обратите внимание на meta-tag с именем viewport, он нужен, чтобы подогнать экран под смартфоны. В стилях прописано media, где в условиях указано, при каких обстоятельствах уменьшится размер шрифта. В нашем случае шрифт станет 16px при разрешении экрана 600px.

Дальше нужно составить структуру из таблиц. Каждый tag table будет отвечать за один блок с контентом. В целом табличная верстка указана на следующем скриншоте.

В тэге center мы поместим основной код. В качестве примера будет приведен видеокурс одного популярного движка unreal engine. Результат письма можно видеть на изображение. Анонс видеокурса пришел по почте и отобразился как надо.

Понятно, что уведомление о новом курсе, состоит из картинки и текста, разбитого на две колонки, где описано сравнение преимущества движка Unreal Engine перед Unity. Кажется, все просто, но на самом деле понадобится прописать большое количество тэгов и почти к каждому привязать стили. Полная структура будет находиться между тегами center. Почтовое сообщение состоит из пяти таблиц.

  1. Заголовок – у нас видеокурс по разработке игр на движке. Поэтому название, будет соответствующее “Создание игр на Unreal Engine 4”.
  2. Картинка – как и товар в интернет-магазине, видеокурс нуждается в оформлении скриншотом, поэтому потребуется добавить одну картинку. Там есть свои нюансы, как это сделать, об этом чуть ниже.
  3. Вопрос. Чтобы сконцентрировать внимание клиента задаем вопрос. Клиент захочет узнать ответ и прочитает сравнительные характеристики.
  4. Сравнение – здесь пользователь узнает, почему unreal engine лучше unity.
  5. Ссылка – узнав о бесплатных возможностях движка, пользователь может захотеть купить видеокурс и соответственно ему понадобиться кнопка, “Заказать сейчас”.

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

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

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

Внимания: ситуации бывают, разные я не берусь утверждать, что мой вариант единственно правильный, но так получилось, что Google и Yandex смогли получить <img> картинку, а вот mail.ru пошел в отказ, после многочисленных попыток было принято решение использовать другой вариант.

Я покажу оба варианта.

Первый:

Второй, загружать изображение в “td” через атрибут style. Отлично работает на mail.ru.

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

Не стоит пугаться такого объема кода, в основном он повторяется, стоит обратить внимание на такой параметр как font-family, он отвечает за шрифт.

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

Пример шрифтов, которые точно работают.

Отправляем тестовое письмо и смотрим результат

Протестируем наш готовый шаблон и посмотрим, что получилось. Есть много разных сервисов, чтобы это сделать, но мы воспользуемся старым способом функцией mail от php.  Для отправки обычного сообщения достаточно составить краткое описание и передать в один из параметров функции mail. Когда дело касается html-кода, здесь добавляем полностью целиком document.

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

Специальная функция file_get_contents может решить проблему и получить наш готовый шаблон. Она способна считывать страницу сайта. Просто добавьте в неё url ссылку и сделайте присвоение к переменной, например, к message.

Внимание: все параметры в php файле замените на свои: email, название отправляемого письма, сообщение, header (последний пункт функции mail) и url-адрес, где находится html-файл.

Сервис для быстрой верстки писем

В интернете существует немало ресурсов для создания красивого макета письма. Один из таких является makemail.ru. Основное преимущество заключается в том, что инструмент бесплатный. Визуальный редактор позволяет создавать письма любой сложности, полученный результат выводится в отдельном поле в качестве кода, который можно скопировать и добавить в файл html.  Это вариант подойдет для быстрой верстки.

Чтобы начать работать с сайтом нужно перейти и нажать на эту кнопку.

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

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

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


Завершив редактирование, нажимаем на зеленую кнопочку в углу экрана “Далее”. Появится сообщение “html генерируется”, ждем отсчет времени. Потом появится сгенерированный cod рассылки и его можно скопировать и вставить в файл. Размер кода, достаточно большой несколько десятков килобайт.

Внимание: старайтесь избегать чрезмерно больших документов, 30-40 кб, это нормально, но если больше ста, то почтовики не смогут его загрузить. Например, Google обрезает документ и его можно отобразить, только нажав на кнопку “Показать полностью”. Пользователи редко нажимают на эту кнопку.

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

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

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

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

Простой HTML шаблон электронного письма, HTML e-mail + простое редактирование.

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

 

 

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

    <head>

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

        

<title>HTML LETTER</title>

        

<style type=»text/css»>

        @media only screen and (min-device-width: 601px) {. content {width: 600px !important;}}

body[yahoo] .class {}

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}

.button a {color: #ffffff!important; text-decoration: none;}

.button a:hover {text-decoration: underline;}

 

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {}

body[yahoo] .buttonwrapper {background-color: transparent!important;}

body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}

        </style>

    </head>

    <body yahoo bgcolor=»#f6f8f1″>

     <!—[if (gte mso 9)|(IE)]>

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

    <tr> <td><![endif]—>

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

<!—Header—>

                        <tr>                        

                             <td bgcolor=»#c7d8a7″>

  

   <!—LOGO—>

   <table align=»left» border=»0″ cellpadding=»0″ cellspacing=»0″>

<tr>

<td>

<!—ТУТ ССЫЛКА НА ЛОГО—>

<img src=»http:/site. com/image/logo.png»  border=»0″ alt=»» / >

</td>

</tr>

</table><!—END-LOGO—>

<!—Заглавие—>

<!—[if (gte mso 9)|(IE)]>

<table align=»left» cellpadding=»0″ cellspacing=»0″ border=»0″>

<tr>

<td>

<![endif]—>

          

<table align=»left» border=»0″ cellpadding=»0″>

<tr>

<td>

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

<tr>

<td>

SubHEADER

</td>

</tr>

<tr>

<td>

HEADER

</td>

</tr>

</table>

</td>

</tr>

</table>

<!—[if (gte mso 9)|(IE)]>

</td>

</tr>

</table>

<![endif]—><!—END-ЗАГЛАВИЕ—>

 

</td>

</tr>

 

 

<!—ТЕЛО ПИСЬМА—>

<tr>

<td bgcolor=»#ffffff»>

  

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

<!—ВСТУПЛЕНИЕ—>

<tr>

<td>

Dear Mr.   !

</td>

</tr><!—/ВСТУПЛЕНИЕ—>

<!—НАЧАЛО—>

<tr>

<td>

   <p>Lorem ipsum dolor sit amet, est dico eleifend ei, mea ne velit referrentur necessitatibus. Novum sonet eum no, mel eu fastidii abhorreant. Qui ex periculis appellantur, ne amet invenire voluptatum has, et repudiare definitionem mel. At alterum postulant dissentias eam. Est ubique legere tamquam ei, rebum semper qualisque vel ad.</p>

  

   <!—КНОПКА Button—>

<table bgcolor=»#e05443″ border=»0″ cellspacing=»0″ cellpadding=»0″>

  <tr>

<td>

<!—ТЕКСТ И ССЫЛКА КНОПКИ—>

  <a href=»http:/site.com»>Register now!</a>

</td>

  </tr>

</table><!—/Button—>

  

</td>

</tr><!—/НАЧАЛО—>

  <!—КАРТИНКА—>

<tr>

<td>

<img src=»http:/site. com/image/image.png» border=»0″ alt=»» />

</td>

</tr><!—/КАРТИНКА—>

<!—ОКОНЧАНИЕ ПИСЬМА—>

<tr>

<td>

   <p>Best regards, <br />

   <strong>Boss</strong></p>

</td>

</tr><!—/ОКОНЧАНИЕ ПИСЬМА—>

</table>

                            </td>

</tr>

<!—Footer—>

         <tr>

<td bgcolor=»#44525f»>

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

<tr>

<td align=»center»>

&reg;All rights reserved<br/>

<a href=»www.site.com.ua»>www.site.com.ua</a>

</td>

</tr>

<tr>

<td align=»center»>

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

<tr>

<td>

<a href=»LINK_TO_FB»>

<img src=»https://stepfor.top/images/fb1.png» alt=»Facebook» border=»0″ />

</a>

</td>

<td>

<a href=»LINK_TO_VK»>

<img src=»https://stepfor.top/images/vk1.png» alt=»VK» border=»0″ />

</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

                <!—[if (gte mso 9)|(IE)]>

        </td>

    </tr>

</table>

<![endif]—>

    </body>

</html>

Зачем нужен HTML-шаблон? — Еmail маркетинг

Время чтения: 12 минут

Если при фразе «шаблон HTML-письма для рассылки» волосы встают дыбом от ужаса – текст для вас. Мы не заставим учить языки программирования и погружаться в тонкости верстки. Просто расскажем, что такое шаблон и почему все вокруг говорят о коде.

Что такое шаблон письма?

Шаблон email-рассылки – основа электронного письма. Это пустая форма письма, которую заполняют подходящими элементами – изображениями, текстом, кнопками с призывом к действию, ссылками на сайт и соцсети. Готовый шаблон выглядит так:

Шаблон составляют один раз, но использовать его для создания писем можно бесконечно: макет остается тот же, а его наполняемость меняется.

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

Структура шаблона

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

Хедер

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

Хедер в email-рассылке зоомагазина Petshop.ru выглядит так:

Компания вставила логотип, название, рекламный слоган, номер колл-центра и ссылки на разделы из каталога товаров.

Основная часть

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

Емкое письмо от фитнес-клуба: завлекающий текст, тематическая картинка. Один минус – нет кнопки с призывом к действию. Ее не стоит прятать в футер. Лучше поставить в основную часть.

Футер

Подвал письма. Здесь указывают юридический адрес отправителя, ссылки на соцсети и кнопку «отписаться от рассылки».

Это футер сервиса по продаже билетов Bileter.ru. Серый скучный фон, и зря. Попрощайтесь с подписчиками ярко, чтобы запомниться и оставить приятное впечатление. Продумайте дизайн, а текст составьте не из официально-деловой лексики, а понятных и душевных слов.

Виды шаблонов

Платформы для email-рассылок предлагают 3 варианта работы с шаблонами:

  • Готовый шаблон;
  • Блочный редактор;
  • Собственный HTML-шаблон.

Готовый шаблон. Это макет, который за вас сделали разработчики платформы-рассыльщика или другого сервиса для работы с email-шаблонами. В готовом макете есть все элементы рассылки: кнопки, заголовки, место для текста и изображений. Нужно просто вставить в эти блоки свои изображения, ссылки и текст.

В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».

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

Блочный редактор. Это инструмент, благодаря которому создают шаблон из готовых блоков. Знания HTML-кода не нужны.
В Mailigen есть 10 блоков, их можно переставлять местами, добавлять и удалять:

  • Текст;
  • Видео;
  • Кнопка;
  • Заголовок;
  • RSS-контент;
  • Изображение;
  • Группы в соцсетях;
  • Шеринг в соцсетях;
  • Динамический контент;
  • Горизонтальный разделитель.

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

Собственный HTML-шаблон. Это отдельный HTML-файл рассылки. Если ты не верстальщик и не программист, уже на этом этапе определение «HTML-файл» может вызвать ступор.

HTML – это стандартный язык программирования, который «понимают» все веб-страницы интернета. С помощью этого языка описывают разметку документов – то есть то, как документы выглядят на сайте.

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

Возможности HTML-шаблона

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

Зато если научиться «кодить», получится создать уникальные макеты email-рассылок. Плюс, при грамотно прописанном коде верстка письма будет правильно отображаться:

а) на устройствах с любой шириной экрана;
б) в любом браузере и любой почте.

Теперь про ограничения. Язык HTML разработали в 1980-90-х годах. С тех пор он обновлялся несколько раз, а в интернете появились новые браузеры и почтовые провайдеры. Они не составили единые стандарты обработки кода, поэтому писать код так, чтобы его правильно считывали все браузеры и почтовые провайдеры, стало сложно.

Вот тут-то новичок и может попасть в ловушку – написать разметку макета, используя современные версии языка HTML. Это риск, ведь не все веб-системы смогут прочитать закодированную информацию. Как результат – съедет верстка: размер кнопок станет большим, или, наоборот, маленьким; футер потеряется, а текст выйдет за пределы шаблона.

Чтобы не разочароваться в возможностях HTML-верстки и сделать email-рассылку, которая откроется «без потерь», нужно использовать старые способы работы с кодом – те, что разработали в 1990-х годах.

Как верстать HTML-шаблон?

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

В коде обозначают и ширину письма. Оптимально – поставить 600 пикселей. Этот размер хорошо «подстраивается» под экраны разных диаметров.

Есть рекомендации и по размеру шрифта – 13 пикселей и больше. Меньше ставить не нужно, иначе на смартфоне шрифт будет мелким. Человек не сможет его прочитать.

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

Шрифты лучше использовать общепринятые: Arial, Times New Roman, Georgia, Tahoma и другие. Если вставите дизайнерский шрифт, есть риск, что он не отобразится у пользователя – это зависит от версии браузера и настроек почтовых программ. Тогда шрифт автоматически «переведут» в стандартный. Человек сможет прочитать текст, но, скорее всего, он съедет: ведь высота и ширина символов для каждого шрифта отличается.

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

Где сделать HTML-шаблон?

HTML-шаблон письма можно сделать на платформе для email-рассылок. Такая опция есть в Mailigen. Заходишь на платформу, кликаешь «Кампании – Шаблоны – Визуальный редактор».

Появляются два пустых поля. Левое – чтобы написать код. Правое – чтобы посмотреть, как выглядит письмо.

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

В написанном коде можем редактировать любые параметры: шрифт, выравнивание, размер баннера. Тогда и изображение письма изменится.

Бесплатные сервисы для работы с шаблонами

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

Stripo

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

Stripo предлагает 300 бесплатных готовых HTML-шаблонов, которые можно экспортировать на вашу платформу для email-рассылок. Код сохранится – вы сможете отредактировать его в любой момент и изменить внешний вид рассылки. Чтобы правок было меньше, выбирайте в Stripo тематические шаблоны – для промо-писем, welcome-серии, уведомлений, брошенной корзины.

Например, такой макет можно выбрать, чтобы сделать акционную рассылку в День Рождения пользователя:

А такую для брошенной корзины магазина товаров для туризма:

Litmus Templates

Сайт с бесплатными готовыми HTML-шаблонами для welcome-цепочек, объявлений, уведомлений и других видов писем.

Такой макет Litmus предлагает для рассылки-квитанции:

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

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

Behance

Платформа для дизайнеров, где можно выложить свою лучшую работу или вдохновиться шедеврами коллег со всего мира. У сервиса есть отдельный проект для email-маркетологов – Free Email Template. Смотрите яркие работы верстальщиков и дизайнеров и бесплатно скачивайте понравившиеся HTML-макеты.

На чем остановимся?

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

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

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

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

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

 

Хочешь больше узнать про верстку? Нужен уникальный дизайн письма? Позвони или напиши на [email protected].

Рекомендуемые статьи


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

Время чтения: 8 минут

Каков рецепт эффективной рассылки? Интересный текст, красивый дизайн, привлекающие внимание картинки… Но даже самая прекрасная рассылка может показаться получателю неаккуратной и «глючной», если в ней не будут загружаться изображения.

Есть ли способ красиво сделать рассылку и избежать ситуации, когда картинки не отображаются? Есть. Тут в дело вступает Mailigen с функцией «Встроенное изображение»!

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

Подписчики хотят за пару секунд понимать, о чём идет речь в рассылке. Тут-то и спасают изображения. Согласно исследованиям, мы — чистой воды визуалы, так как от 80 до 90% всей информации наш мозг получает через глаза. При этом скорость обработки информации может достигать 36 000 картинок в минуту. Впечатляет, правда?

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

Итак, визуальные материалы — это важнейший этап создания email-рассылки. По данным Trapit, почти 4/5 (82%) всех email-маркетологов считают красивые письма для рассылки с фото- и видеоконтентом важными для принятия решения о покупке. Значит, картинки играют значительную роль в успехе вашей рассылки. Но, увы, 60% почтовых клиентов по умолчанию блокируют изображения. Почему?

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

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

Всего один клик для отображения картинок — это много или мало?

Действительно, разве мы многого просим от получателей? Если почтовая рассылка пришла с картинками, которые не отображаются по умолчанию, то почему бы подписчику не загрузить их? «Это всего один щелчок мышью», — думаете вы. Но в наши дни, когда идёт битва маркетологов за внимание аудитории, даже один лишний клик может иметь значение.

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

Как сделать красивое письмо для рассылки? Встроенные изображения спешат на помощь!

Функция «Встроенные изображения» гарантирует, что все картинки в письме загрузятся автоматически, без дополнительных кликов. Для любителей делать красивые письма рассылки от Mailigen – просто находка!

Вашим подписчикам не придется загружать изображения, так как они уже будут отображены на экране. Они получат красивую рассылку, где каждая картинка будет на своём месте — в точности, как вы и задумывали!
Но зачем писать об этом, ведь мы можем показать! Взгляните на эти примеры рассылок: вот как они выглядят с функцией «Встроенных изображений» и без неё. Видите разницу?

Если вы хотите, чтобы ваше html письмо не выглядело дилетантским, и желаете привлечь внимание аудитории с первого взгляда, вы просто не можете позволить себе не использовать «Встроенные изображения». Но дело не только во внешнем виде рассылки. Использование этого инструмента принесёт вам многочисленные преимущества.

Преимущества использования функции «Встроенных изображений»

В чём ваша выгода от «Встроенных изображений»? Давайте выясним!

Больше внимания аудитории

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

Больше кликов по ссылкам

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

Ваш бренд более узнаваем

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

Больше разнообразия в дизайне письма

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

Экономия времени

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

Больше шансов «достучаться» до подписчика

Лучше один раз увидеть, чем сто раз услышать. Используйте картинки, чтобы сделать идею письма более доступной и понятной для подписчиков. Избегайте долгих объяснений — вместо этого добавьте картинку, которая объяснит всё сама!

Больше шрифтов

Как мы уже рассказывали в предыдущих статьях, Google-шрифты не работают, если соответствующее изображение не загрузилось. Функция «Встроенные изображения» позволяет избежать этого, и вы можете смело использовать интересные Google-шрифты, делая письма разнообразными.

Больше картинок

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

Итак, «Встроенные изображения» — это действительно полезная функция. Но прежде чем использовать её, вам стоит получить некоторую информацию к размышлению.

Есть и аргументы «против»…

Рассылка «весит» больше

Если вы встраиваете графику в HTML-код, то письмо становится более «тяжёлым», так как на каждую картинку требуется много кода. Чтобы не превысить рекомендованный размер email’а, обращайте внимание на информацию о «весе» рассылки, которая доступна на последнем этапе создания писем в Mailigen.

Вас может смутить снижение показателей открываемости рассылок

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

Выше спам-рейтинг

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

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

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

Некоторые почтовые сервисы не отображают даже «Встроенные изображения»

Будьте осторожны с теми подписчиками, которые пользуются Outlook 2007+, Hotmail и Yahoo! Эти почтовые сервисы до сих пор не используют распознавание встроенных изображений, и картинки не будут отображаться.

И все же мы говорим вам: «Дерзайте!»

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

  • Размер картинки: используйте изображения большого размера для сайтов и лендингов, а в письмах отправляйте небольшие картинки. Это ускорит загрузку письма и позволит обойти спам-фильтры.
  • Используйте соотношение текста и картинок 50/50 или даже 60/40, чтобы письмо не улетело в папку Спам, и чтобы его содержимое не было однообразным.
  • Добавляйте альтернативный текст к картинкам — он будет отображаться при блокировке. Так вы будете уверены, что идея письма дойдет до аудитории.

Чтобы начать использовать «Встроенные изображения» от Mailigen, вам нужно сделать всего один клик. На первом этапе создания рассылки в Mailigen поставьте галочку «Отправлять рассылку со встроенными изображениями». Готово! Ничего сложного, правда?

Если вашу красивую рассылку увидит только половина получателей, то стоит ли игра свеч? «Встроенные изображения» Mailigen помогут повысить узнаваемость бренда, интерес аудитории и количество переходов по ссылкам. А сэкономленное время вы можете потратить на разработку новых успешных стратегий email маркетинга!

Рекомендуемые статьи


Как просмотреть HTML-код электронного письма?

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

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

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

Что такое HTML-код в электронном письме?

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

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

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

Как просмотреть HTML в Outlook?

В Microsoft Outlook дважды щелкните, чтобы открыть электронное письмо. Вы увидите меню «Действия» на вкладке «Сообщение». Щелкните это меню и выберите «Другие действия», затем нажмите «Просмотреть исходный код», чтобы увидеть HTML-код.

Независимо от того, какой у вас текстовый редактор по умолчанию, файл HTML откроется как файл .txt.

Как просмотреть HTML-код в Gmail?

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

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

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

В Campaign Monitor вы можете увидеть HTML-код из окна предварительного просмотра.Создав шаблон, вы можете открыть окно предварительного просмотра на странице «Снимок кампании» и выбрать «Просмотреть источник страницы».

Вы можете сохранить файл, щелкнув правой кнопкой мыши и выбрав «Сохранить как» или скопировав текст и вставив его в свой любимый текстовый редактор с поддержкой HTML. Это позволит вам изменить HTML-код локально, а затем повторно импортировать его в Campaign Monitor для использования в будущих кампаниях.

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

Как измерить успех HTML-кода электронной почты

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

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

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

Это действительно важно?

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

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

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

Что теперь?

Если вы хотите узнать больше об использовании HTML-кодирования в дизайне электронной почты, ознакомьтесь с этим руководством, чтобы узнать, как использовать его в шаблонах. Хотя вы, возможно, знаете HTML и CSS, есть несколько предостережений при их использовании для создания электронных писем с поддержкой 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, встроенные теги