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

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

• Litmus Templates
• Really Simple Responsive HTML Email Template
• HTML Email Templates
• Foundation for Emails 2

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

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

Для обработки HTML-писем почтовые клиенты используют различные движки:

• Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
• Outlook 2000, 2002 and 2003 используют Internet Explorer.
• Outlook 2007, 2010 and 2013 используют Microsoft Word (да, Word!).
• Веб-клиенты используют браузерный движок (например, WebKit для Safari использует, Blink для Chrome).

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

font-family: Arial,sans-serif;

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

В сентябре 2016 в Google объявили о поддержке встраиваемых стилей и медиа-запросов для Gmail. Это огромный шаг для развития email-индустрии. Сейчас Gmail поддерживает немалое количество CSS-свойств, что существенно упрощает разработку e-mail-шаблонов.

При блочной верстке с использованием div-ов возникают проблемы с позиционированием в различных клиентах. Особенно в тех, где для обработки используется Microsoft Word, к примеру, Outlook. Конечно, при желании можно пользоваться div-ами, но безопаснее верстать, будто за окном 1999 год — таблицами. Это означает:

• table вместо div
• #FFFFFF вместо #FFF
• padding вместо margin
• CSS2 вместо CSS3
• HTML4 вместо HTML5
• background-color вместо background
• HTML-атрибуты вместо CSS
• встроенные стили вместо подключаемых или блоков style.

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

При использовании таблиц, не забывайте использовать

border=»0″ cellpadding=»0″ cellspacing=»0″

Если пользуетесь Premailer, у него есть список с описанием CSS-атрибутов, применяемых в таких случаях.

Некоторые клиенты, особенно Gmail до недавних пор, беспощадно обрезают любые не встроенные стили. Есть несколько вариантов:

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

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

Если вы вписываете стили руками, я советую использовать сниппеты и/или язык шаблонов с partial и helper. Это избавит вас от необходимости по многу раз прописывать одно и то же.

К веб-инлайнерам относятся: CSS-инлайнер в Campaign Monitor, CSS Inliner Tool в MailChimp и Responsive Email Inliner в Foundation for Email.

В качестве программного инлайнера я рекомендую модуль Juice для Node.js. Неплохие Ruby-альтернативы — Premailer gem и Roadie.

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

Мне нравится вот такое решение. С ним вы получите нормальную кнопку для веб-клиентов:

<a href=»#» class=»btn btn-primary»>Click Here</a>
Instead, write it like this:
<table border=»0″ cellpadding=»0″ cellspacing=»0″ class=»btn btn-primary»>
<tr>
<td align=»center»>
<table border=»0″ cellpadding=»0″ cellspacing=»0″>
<tr>
<td> <a href=»» target=»_blank»>Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>

В таком случае, встроенные стили будут выглядеть примерно так:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ class=»btn btn-primary» style=»border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;» width=»100%»>
<tr>
<td align=»center» style=»font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;» valign=»top»>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;»>
<tr>
<td style=»font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;» valign=»top» bgcolor=»#3498db» align=»center»> <a href=»» target=»_blank» style=»display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;»>Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>

Разберем подробнее. Первый тег <td> — это обертка, чтобы отцентрировать кнопку. Второй <td> задает размер кнопки. Некоторые клиенты, например, Outlook не распознают внутренние отступы в теге <a>, поэтому необходимо закрасить всю ячейку. В таком случае тег <a> займет все место во втором <td>, и вся область станет кликабельной.

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

Что такое VML? Если вы хоть раз занимались разработкой писем, то, вероятно, сталкивались с этим понятием. Язык векторной разметки (Vector Markup Language, VML) поддерживается старыми версиями Outlook. В Microsoft заявили, что VML больше не поддерживается в Internet Explorer (IE), начиная с IE10. Тем не менее, пока в ходу Outlook 2007, 2010 и 2013, вы еще не раз увидите, как его используют для фоновых изображений.

Проще всего пользоваться стандартными системными шрифтами. Это Helvetica, Arial и прочие. Однако можно использовать и веб-шрифты, например, Google Fonts. Расположите их за медиа-запросом WebKit, чтобы Outlook не ничего не перепутал.

<style>
@import url(http://fonts.googleapis.com/css?family=Pacifico);
/* Type styles for all clients */
h1 {
font-family: Helvetica, Arial, serif;
}
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1 {
font-family: Pacifico, Helvetica, Arial, serif !important;
}
}
</style>

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

Мы можем применять специальные CSS стили и показывать/скрывать определенные элементы/контент в различных версиях Outlook.

Если надо обратиться только к версии Outlook, базирующейся на Microsoft Word:

<!—[if mso]>
Этот контент видно только в версиях Outlook, базирующихся на Microsoft Word.
<![endif]—>

Версии Outlook, базирующиеся на IE:

<!—[if (IE)]>
Этот контент видно только в версиях Outlook, базирующихся на IE.
<![endif]—>

Если нужна определенная версия Outlook:

<!—[if mso 12]>
Этот контент видно только в Outlook 2007.
<![endif]—>

Также с помощью медиа-запросов можно выбрать клиентов, базирующихся на WebKit:

.special-webkit-element {
display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.special-webkit-element {
display: block !important;
}
}

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

• Outlook по умолчанию блокирует обработку изображений.
• Apple Mail нет.
• Gmail уже нет.

Не забывайте прописывать качественный alt-текст ко всем изображениям. Текст расскажет пользователю, что было написано на картинке или пояснит, что это за изображение, например, «Логотип компании». Можно даже привнести в текст немного творчества, как это сделали Email Monks:

Не забудьте добавить базовый сброс стилей для всех изображений:

<img src=»https://www.smashingmagazine.com/wp-content/uploads/2016/11/» alt=»» width=»» height=»» border=»0″ style=»border:0; outline:none; text-decoration:none; display:block;»>

Анимированные гифки поддерживаются большинством клиентов. Версии Outlook с 2007 по 2013 не отображают гифки, вместо этого показывается первый кадр.

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

У масштабируемой векторной графики (Scalable Vector Graphics, SVG) масса преимуществ для использования в вебе. Однако ее отображение в письмах может вести себя не так как надо, поэтому SVG нуждается в запасных вариантах или условиях. Обычно я не рекомендую использовать ее в письмах.

Для изображений, адаптированных под Retina-дисплеи, подбирайте изображения крупнее (1.5× to 3×) и изменяйте размер. Я обычно сохраняю изображения низкого качества в двух разрешениях, получается неплохо.

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

Видео поддерживается на iOS, Apple Mail и Outlook.com. В зависимости от клиента, вы можете использовать медиа-запросы, чтобы показывать или скрывать видео.

Поддержка форм везде разная. Поэтому лучше держитесь от них подальше и при необходимости подключайте внешние формы. Понятное дело, все зависит от целей. Безопаснее не пользоваться формами, но, к примеру Rebelmail и Mixmax делали классные штуки для опросов и e-commerce.

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

Добавить код просто. Есть два варианта:

• JSON-LD,
• microdata.

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

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

<span style=»color: transparent; display: none !important; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;»>Текст предзаголовка</span>

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

Тестировать письма можно различными способами:

• Отсылать письмо себе на почту: на десктоп (Outlook), на веб-клиент (Gmail) и на мобильный клиент (iOS Mail).
• Автоматически тестировать с помощью Litmus или Email on Acid.
• Вычитывать содержание и проверять отображение верстки.
• Проводить A/B тестирование различных типов контента, размера письма и заголовка.

Верстка 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 style="margin: 0; padding: 0;">
2. <table border="1" cellpadding="0" cellspacing="0" width="100%">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>


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

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

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

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

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

1. <table style="border-collapse: collapse;" border="1" width="600" 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" width="600">
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" width="600">
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 style="font-size: 0; line-height: 0;" height="10">&nbsp;</td></tr>

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

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

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

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

1. <td align="center" style="padding: 20px 0px 30px 0px;" bgcolor="#ffa500">
2. <img width="600" style="display: block;" alt="СМС и Email маркетинг" src="E:epochtaБЛОГmailer_html_img.png">
3. </td>


Визуально:

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

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

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

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

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

Поехали!

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

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

1. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
2. <table border="1" cellpadding="0" cellspacing="0" width="100%">
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 width="100%" border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах
6. </td>
7. </tr>
8. <tr>
9. <td style="padding: 20px 0px 30px 0px;">
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" width="100%">
2. <tr>
3. <td width="260" valign="top">
4. Колонка 1
5. </td>
6. <td style="font-size: 0; line-height: 0;" width="20">
7. &nbsp;
8. </td>
9. <td width="260" valign="top">
10. Колонка 3
11. </td>
12. </tr>
13. </table>

Визуально:

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

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

1. <table width="100%" border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td width="260" valign="top">
5. <table width="100%" border="1" cellspacing="0" cellpadding="0">
6. <tbody>
7. <tr><td>&nbsp;
8. <img width="260" height="160" style="display: block;" alt="Картинка для колонки 1" src="E:epochtaБЛОГбитые картинки на блогеiStock_000004384999XSmall.jpg"> </td>
9. </tr>
10. <tr>
11. <td style="padding: 25px 0px 0px 0px;">
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 width="20" style="line-height: 0; font-size: 0px;">
18. &nbsp;
19. </td>
20. <td width="260" valign="top">
21. <table width="100%" border="1" cellspacing="0" cellpadding="0">
22. <tbody> <tr>
23. <td>
24. &nbsp;
25. <img width="260" height="160" style="display: block;" alt="Картинка для колонки 3" src="E:epochtaБЛОГбитые картинки на блогеgreed.jpeg"> </td>
26. </tr>
27. <tr>
28. <td style="padding: 25px 0px 0px 0px;">
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 " style="padding: 30px 30px 30px 30px;">
Строка 3
</td>

Визуально:

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

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

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

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

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

Визуально:

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

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

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

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

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

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

1. <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"><p align="center">
2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах
3. </p></td>

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

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

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

<table width="600" align="center" style="border-collapse: collapse; border: 1px solid #cccccc;" cellspacing="0" cellpadding="0">

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

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

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

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

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

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

Russian (Pусский) translation by Anastasia Reut (you can also view the original English article)

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

Материалы

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

• Чудесные 2D иконки от Pierre Borodin на Dribbble
• Использованные шрифты Oil Can, Source Sans Pro и Mission Script
• Иконки социальных сетей от Metrize Icons

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

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>Demystifying Email Design</title>

6

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

7

</head>

8

</html>

После этого можем начать строить остальную часть письма.

Создание контейнера и основной таблицы.

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

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

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

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

1

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

2

 <table border="1" cellpadding="0" cellspacing="0" width="100%">

3

  <tr>

4

   <td>

5

    Hello!

6

   </td>

7

  </tr>

8

 </table>

9

</body>

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

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

Задайте ширину в HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML писем: если какой-либо атрибут существует в HTML, используйте его, вместо CSS свойства.

Теперь заменим наше небольшое приветствие ‘Hello!’ на эту таблицу:

1

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">

2

 <tr>

3

  <td>

4

   Hello!

5

  </td>

6

 </tr>

7

</table>

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

Создание Структуры и Шапки.

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

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

1

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">

2

 <tr>

3

  <td>

4

   Row 1

5

  </td>

6

 </tr>

7

 <tr>

8

  <td>

9

   Row 2

10

  </td>

11

 </tr>

12

 <tr>

13

  <td>

14

   Row 3

15

  </td>

16

 </tr>

17

</table>

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

1

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">

2

 <tr>

3

  <td bgcolor="#70bbd9">

4

   Row 1

5

  </td>

6

 </tr>

7

 <tr>

8

  <td bgcolor="#ffffff">

9

   Row 2

10

  </td>

11

 </tr>

12

 <tr>

13

  <td bgcolor="#ee4c50">

14

   Row 3

15

  </td>

16

 </tr>

17

</table>

Хорошо, в следующем шаге сфокусируемся на Строке 1. Нам необходимо задать padding в ячейке и затем вставить изображение.

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

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

Если у Вас всё же возникли большие проблемы с padding (например почтовый клиент удаляет Ваш CSS), не используйте их совсем. Просто используйте пустые ячейки, чтобы создать пространство. Совсем не обязательно использовать gif распорку, можно просто добавить style="line-height: 0; font-size: 0;" для ячейки, вставить внутрь    и задать определённую высоту или ширину. Пример ниже:

1

<tr><td style="font-size: 0; line-height: 0;" height="10">&nbsp;</td></tr>

Также обратите внимание, что безопаснее использовать padding в <td> тэгах, а не в <p> или <div>. Они ведут себя намного более непредсказуемо.

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

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

1

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">

2

 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

3

</td>

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

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

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

1

<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">

2

 <table border="1" cellpadding="0" cellspacing="0" width="100%">

3

  <tr>

4

   <td>

5

    Row 1

6

   </td>

7

  </tr>

8

  <tr>

9

   <td>

10

    Row 2

11

   </td>

12

  </tr>

13

  <tr>

14

   <td>

15

    Row 3

16

   </td>

17

  </tr>

18

 </table>

19

</td>

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

1

<table border="1" cellpadding="0" cellspacing="0" width="100%">

2

 <tr>

3

  <td>

4

   Lorem ipsum dolor sit amet!

5

  </td>

6

 </tr>

7

 <tr>

8

  <td style="padding: 20px 0 30px 0;">

9

   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.

10

  </td>

11

 </tr>

12

 <tr>

13

  <td>

14

   Row 3

15

  </td>

16

 </tr>

17

</table>

Добавим две колонки с контентом для строки 3. Нам нужен margin между двумя ячейками, но margin не поддерживается, поэтому мы создадим таблицу с тремя колонками и средняя колонка останется пустой.

Сколько бы я не придерживался процентов, но, если Вам нужен контент определённого размера, может быть непросто перевести его в проценты (например, колонки будут равны 48,1%, что может привести к путанице ). Именно поэтому, учитывая, что наши изображения равны 260px, мы создадим колонки шириной 260px, с ячейкой для margin в 20px посередине. (В общем выходит 540px: 600px ширина таблицы минус padding 30px с каждой стороны). Обязательно обнулите font-size и line-height и добавьте неразрывный пробел   в ячейку с margin.

Также установим valign значение "top" для каждой ячейки, чтобы выравнять их по вертикали, даже если одна из колонок имеет больше содержимого, чем остальные. Значение по умолчанию "middle".

1

<table border="1" cellpadding="0" cellspacing="0" width="100%">

2

 <tr>

3

  <td width="260" valign="top">

4

   Column 1

5

  </td>

6

  <td style="font-size: 0; line-height: 0;" width="20">

7

    

8

  </td>

9

  <td width="260" valign="top">

10

   Column 2

11

  </td>

12

 </tr>

13

</table>

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

1

<table border="1" cellpadding="0" cellspacing="0" width="100%">

2

 <tr>

3

  <td width="260" valign="top">

4

   <table border="1" cellpadding="0" cellspacing="0" width="100%">

5

    <tr>

6

     <td>

7

      <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />

8

     </td>

9

    </tr>

10

    <tr>

11

     <td style="padding: 25px 0 0 0;">

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

   </table>

16

  </td>

17

  <td style="font-size: 0; line-height: 0;" width="20">

18

    

19

  </td>

20

  <td width="260" valign="top">

21

   <table border="1" cellpadding="0" cellspacing="0" width="100%">

22

    <tr>

23

     <td>

24

      <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />

25

     </td>

26

    </tr>

27

    <tr>

28

     <td style="padding: 25px 0 0 0;">

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

   </table>

33

  </td>

34

 </tr>

35

</table>

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

Footer

Теперь добавим padding для строки footer.

1

<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">

2

 Row 3

3

</td>

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

1

<table border="1" cellpadding="0" cellspacing="0" width="100%">

2

 <tr>

3

  <td>

4

   Column 1

5

  </td>

6

  <td>

7

   Column 2

8

  </td>

9

 </tr>

10

</table>

Создадим другую небольшую таблицу для иконок социальных сетей. Зададим родительской ячейке align="right". Убедитесь, что Вы установили border="0" на ссылках с изображением (чтобы избежать подчёркивания ссылки) и не забудьте display:block

1

<td align="right">

2

 <table border="0" cellpadding="0" cellspacing="0">

3

  <tr>

4

   <td>

5

    <a href="http://www.twitter.com/">

6

     <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />

7

    </a>

8

   </td>

9

   <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>

10

   <td>

11

    <a href="http://www.twitter.com/">

12

     <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />

13

    </a>

14

   </td>

15

  </tr>

16

 </table>

17

</td>

Теперь вставим текст и зададим ширину для ячеек, на всякий случай,  даже если между ними достаточно пространства. Установим ширину этой ячейки на 75% и других на 25%.

1

<td width="75%">

2

 &reg; Someone, somewhere 2013<br/>

3

 Unsubscribe to this newsletter instantly

4

</td>

Ну вот и всё! Наша вёрстка закончена.

Валидация

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

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

Стилизация текста

Наша первая строка — это заголовок. Будем использовать тег <b> , чтобы сделать текст жирным, потому, что, как мы знаем, если есть возможность стилизовать в HTML, используем это, вместо CSS свойств.

1

<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">

2

 <b>Lorem ipsum dolor sit amet!</b>

3

</td>

Также добавим эти стили ко всем другим ячейкам текста:

1

style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

Далее нам нужно стилизовать текст футера и, кроме этого, приведём в порядок ссылку откказа от рассылки. Стилизуем ссылку используя одновременно CSS и HTML тег <font>. Дублирование тегов — это  лучший способ убедиться, что Ваши ссылки не будут отображаются синим по умолчанию.

1

<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">

2

 &reg; Someone, somewhere 2013<br/>

3

 <a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly

4

</td>

И вот оно! Всё готово! Время, чтобы выключить границы и увидеть, как всё красиво выглядит. Пройдитесь по коду и замените каждое border="1" на border="0"

Сейчас всё выглядит немного грустно, плавает в белом пространстве,
так что давайте вернёмся к нашей первой ширине 600px и добавим:

1

style="border: 1px solid #cccccc;"

Теперь ничего не плавает в пространстве. В качестве последнего шриха я добавлю 30px padding к нижней части самой первой ячейки, чтобы предотвратить внезапную остановку нашей электронной почты на некоторых почтовых клиентах (таких, как Apple Mail), и 10px padding сверху, так, чтобы наш синий заголовок имел немного воздуха.

1

<td style="padding: 20px 0 30px 0;">

И это всё! Мы готовы к финальному тесту.

Готово!

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

Сейчас самое подходящее время для финального теста и тогда Ваше электронное письмо готово к отправке!

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

• Создание простой адаптивной электронной почты
• Совет: не забывайте добавлять текст в alt
• Создание электронной почты с проверкой без использования медиа запросов

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

Особенности вёрстки писем коротко:

• используем табличную вёрстку;
• все стили прописываются инлайново либо в голове страницы — там прописываем все медиазапросы;
• в стилях предпочтительней использовать развёрнутую форму записи свойств. Например, так: «border-width: 1px; border-style: solid; border-color: #e1e1e1;» , а не так: «border: 1px solid #e1e1e1;»;
• аккуратно используем свойства CSS3, так как работать они будут не везде;
• ширина письма в среднем от 600 px до 700 px;
• используем только стандартные шрифты, которые присутствуют на всех устройствах.

Вёрстка письма имеет структуру стандартной html-страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>...</title>
<style type="text/css">
	...
</style>
</head>
<body>
	…
</body>
</html>

Для вёрстки писем подходит доктайп 4.01 и кодировка utf-8.

Вёрстка html-писем начинается с получения макета. Про дизайн email-рассылок у нас есть отдельная подробная инструкция.

Особенности html-вёрстки писем и элементов дизайна

В письмах используется табличная вёрстка

Контент письма оборачиваем в две таблицы:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: #f5f5f5; min-width: 320px; font-size: 1px; line-height: normal;">
 	<tr>
   		<td align="center" valign="top">
   			<table cellpadding="0" cellspacing="0" border="0" width="700" class="table700" style="max-width: 700px; min-width: 320px; background: #ffffff;">
   				<tr>
   					<td align="center" valign="top">


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

Первая таблица по ширине 100% экрана задаёт фон, минимальную ширину, размер шрифта в 1 px, чтобы не вылезло ненужных отступов.

Вторая имеет ширину контента, в этом случае 700 px, задаёт фон, минимальную ширину. В таблицах обнуляем cellpadding, cellspacing, border.

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

Скачайте и пользуйтесь

28 готовых html-шаблона писем для интернет-магазинов

В html-вёрстке писем не используем margin и padding

Для отступов не используем margin и padding, а берём следующие конструкции — для вертикальных используем div:

<div style="height: 9px; line-height: 9px; font-size: 7px;">&nbsp;</div>

Для горизонтальных используем столбец таблицы:

<td width="15" style="width: 15px; max-width: 15px; min-width: 15px;">&nbsp;</td>

Вставка текста в html-шаблон письма

Для вставки текста используем следующую конструкцию:

<span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px;">текст</span>

Свойства шрифта добавляем в span. Чтобы предлог не был оторван от слова, используйте символ неразрывного пробела: «Бесплатно с 07:00 до 21:00» Для ссылок оборачиваем это ещё и в тег а, и тоже дублируем свойства. У ссылок необходимо указывать атрибут target=”_blank”:

<a href="#" target="_blank" style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px; text-decoration: underline;">
             	<span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px; text-decoration: underline;">Веб-версия</span>
 </a>

Изображения

Для изображений обнуляем border, задаём ширину. Если изображение при адаптации нужно уменьшить, указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Если нужно, можно указать и минимальную ширину.

<div style="display: block; max-width: 130px;">
 <img src="img/logo.png" alt="img" width="130" border="0" style="display: block; width: 130px; max-width: 100%;" />
</div>
	
<a href="#" target="_blank" style="display: block; max-width: 130px;">
 <img src="img/logo.png" alt="img" width="130" border="0" style="display: block; width: 130px; max-width: 100%;" />
</a>

Фоновые изображения. Пример использования:

<table cellpadding="0" cellspacing="0" border="0" width="86%" style="width: 86% !important; min-width: 86%; max-width: 86%;">
   <tr>
      <td align="center" valign="middle" height="509" background="img/bg.png" style="width: 100%; background-image:url(img/bg.png); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%;" bgcolor="#e3c7d7">
         <!--[if (gte mso 9)|(IE)]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:509px;">
            <v:fill type="tile" src="img/bg.png" color="#e3c7d7" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
         <![endif]-->
         <!--[if (gte mso 9)|(IE)]>
         <table border="0" cellspacing="0" cellpadding="0" width="600" height="509">
         <tr><td align="center" valign="top" width="600" height="509"><![endif]-->
         <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100% !important; min-width: 100%; max-width: 100%;">
            <tr>
               <td align="center" valign="top" height="60" style="height: 60px; max-height: 60px; min-height: 60px;">        
                  <div style="height: 60px; line-height: 60px; font-size: 58px">&nbsp;</div>
               </td>
            </tr>
         </table>
         <!--[if (gte mso 9)|(IE)]>
         </td></tr>
         </table><![endif]-->
         <!--[if (gte mso 9)|(IE)]>
            </v:textbox>
            </v:rect>
         <![endif]-->
      </td>
   </tr>
</table>

Видим таблицу шириной 86% и фиксированной высотой. К столбцу прописаны свойства background-image, background-position, background-repeat, background-size, bgcolor. Внутри таблицы расположена структура, благодаря которой можно добиться отображения фона в Outlook. Внутри этой структуры для Outlook располагается таблица с фиксированной высотой. Также можно увидеть таблицу с высотой 60 px, которая выполняет роль отступа, так как с ними может возникнуть проблема из-за структуры для Outlook.

Кнопки

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

<table cellpadding="0" cellspacing="0" border="0" width="170">
   <tr>
      <td align="center" valign="middle" height="40" style="background:#000000;">
         <a href="#" target="_blank" style="display: block; width: 100%; height: 40px; font-family: Arial, Helvetica, Tahoma, sans-serif; color: #FFFFFF; font-size: 14px; line-height: 40px; text-decoration: none; ">Начать покупки</a>
      </td>
   </tr>
</table>

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

Тени

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

Адаптивная вёрстка писем — варианты адаптации

Вариант с «плавающими блоками»

​

Пример использования:

<table cellpadding="0" cellspacing="0" border="0" width="93%" style="width: 93% !important; min-width: 93%; max-width: 93%;">
  <tr>
    <td align="center" valign="top">
      <!--[if (gte mso 9)|(IE)]>
         <table border="0" cellspacing="0" cellpadding="0">
         <tr><td align="center" valign="top" width="165"><![endif]-->
      <div style="display: inline-block; vertical-align: top; width: 165px;">
      </div>
      <!--[if (gte mso 9)|(IE)]></td><td align="center" valign="top" width="165"><![endif]-->
      <div style="display: inline-block; vertical-align: top; width: 165px;">
      </div>
      <!--[if (gte mso 9)|(IE)]></td><td align="center" valign="top" width="165"><![endif]-->
      <div style="display: inline-block; vertical-align: top; width: 165px;">
      </div>
      <!--[if (gte mso 9)|(IE)]>
         </td></tr>
         </table><![endif]-->
    </td>
  </tr>
</table>

Вариант с подстраивающимся содержимым

​

​

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

Какие клиенты поддерживают media queries, а какие нет

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

• Figma или Photoshop для нарезки макета и оптимизации изображений;
• изображения, экспортированные из Figma, оптимизируем через сервис TinyPNG;
• любой текстовый редактор с подсветкой синтаксиса html.

Мы не используем никакие инлайнеры, а сразу прописываем все стили в html-файле. Код получается чище и аккуратнее.

Как тестируем вёрстку

Для теста используем:

• https://validator.w3.org, чтобы проверить валидность кода и увидеть опечатки, если есть;
• Email on Acid помогает сразу увидеть отображение письма во множестве клиентов, но бывают случаи, когда отобржение на сайте разнится с отображением в реальности;
• через MailChimp отправляем письма на свои почтовые ящики, чтобы проверить отображение в реальной ситуации;
• The W3C Markup Validation Service — подходит для массовых тестов.

Почему html-вёрстка, а не блочный конструктор

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

Html-вёрстка писем в платформах рассылок

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

UniSender

При создании письма выбираете html-редактор или загрузку своего кода.

Можно загрузить письмо с кодом из файла в форматах rar, zip, 7z и html или web-страницу с письмом — там уже есть все стили, нужные картинки и другие файлы, относящиеся к рассылке, которые подгрузятся автоматически. В интерфейсе после загрузки архива письмо будет таким, каким его увидят подписчики. Если нужно что-то поправить в коде письма (добавить или убрать теги, ссылки и так далее), переходим в источник.

Попадаем в html-редактор с цветовой подсветкой, вносим необходимые правки.

В UniSender можно вставить свой код — если вы в нём уверены и править не собираетесь.

MailChimp

В интерфейсе создания письма выбираем вариант Code your own → Paste in code.

Дальше мы переходим на экран загрузки кода.

Читайте также

Как работать с собственным html-шаблоном в визуальном редакторе MailChimp

SendPulse

На этой платформе также можно загрузить письмо файлом (html, htm, zip, rar и 7z), ссылкой или кодом.

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

А ещё у SendPulse есть упрощённый html-редактор, который работает по принципу текстового редактора. И выглядит так же.

Marketo

Заходим в Design studios для создания письма. Нажимаем New → New email.

Задаём имя письма и выбираем black template. После этого в редакторе нажимаем Edit Code. После чего вставляем код и можем сохранять его с помощью кнопки Save.

Klaviyo

Создаем новую кампанию, выбираем Or code your own html content.

После чего откроется редактор кода, куда можно скопировать html и нажать Save в правом верхнем углу.

Пользуйтесь на здоровье!

Подписывайтесь на наш Телеграм-канал «Маркетинг за три минуты», где мы делимся интересными материалами про онлайн-маркетинг в формате постов-трёхминуток. А если вы хотите поболтать и поделиться своими мыслями, приходите к нам в CRM-Chat.