Верстка email рассылок и писем

Верстка текста в письмах существенно отличается от верстки сайтов, хотя реализуется она теми же способами (HTML и CSS). Макет письма обычно составляется с помощью приемов, которые крайне не рекомендуется использовать при верстке страниц: стили внутри HTML, пережатые картинки или их отсутствие, только стандартные шрифты и так далее. Ниже мы расскажем, почему нужно придерживаться «неправильных» правил, как сверстать тело письма и где взять шаблон электронного письма, если вы не хотите заниматься этим муторным процессом самостоятельно.

Верстка HTML писем

HTML шаблоны для рассылки

Head

Табличная верстка

Встроенные стили

Сброс стилей

Кнопки

Типографика

Условия

Изображения и медиа

Кнопки Gmail Actions

Предзаголовки

Тестирование рассылки

Правила визуальной доступности email

Что почитать по теме

FAQ

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

Верстка HTML писем

Итак, почему же верстка email писем оборачивается таким адом для верстальщика? Дело в том, что клиентов, отображающих письма – десятки, и каждый из них расшифровывает разметку/верстку по-своему. Верстку электронной почты можно сравнить с версткой интернет-страниц на заре существования интернета: есть много браузеров, каждый из них воспринимает HTML/CSS на свое усмотрение, как результат – страница идеально ровно отображается в одних браузерах и безжалостно «едет» в других. Со временем стандартизация (и доминирование Google, что уж там) свели верстку страниц к единым правилам, только вот какой-то общий шаблон для письма пока никто не придумал, как результат – верстальщикам приходится тщательным образом выбирать инструменты, при использовании которых верстка поедет только у небольшого числа людей, получивших письмо (а она поедет обязательно, не сомневайтесь).

Сама верстка по технике и технологиям ничем не отличается от верстки страниц на HTML и CSS. Вы все так же размечаете макет письма через <head> и <body>, после чего верстаете письмо как страницу. Верстку адаптивных писем делают так же, как адаптивную верстку страниц. На свой страх и риск вы даже можете добавить JavaScript, но здесь вас ждут очень большие проблемы – большинство почтовых клиентов либо вообще режут JS-скрипты, либо жестко лимитируют набор команд, которые можно использовать в письме.

Мы крайне не рекомендуем использовать JS при верстке писем – лучше ограничиться использованием HTML кодов и стилями CSS.

HTML шаблоны для рассылки

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

Stripo. Одна из крупнейших баз шаблонов для email рассылок. Всего – более 850 шаблонов, есть бесплатные, есть платные.
SendPulse. Еще одна крупная база, как и в прошлом случае, есть платные/бесплатные шаблоны.
Litmus. Сервис для быстрого создания шаблона. Есть встроенные готовые варианты и конструктор. Некоторый функционал доступен бесплатно.
Email On Acid. Сервис полностью посвящен созданию дизайна электронной верстки письма – есть конструктор, есть готовые варианты, есть инструменты для тестирования. Есть бесплатный период, но в целом за сервис надо платить.
Heml. Фреймворк для создания писем. С помощью этого фреймворка вы, как и при обычном подходе, создаете шаблон кодом, но есть одно отличие – фреймворк более понятен и позволяет описывать простым кодом сложные вещи.

Естественно, это – не все сервисы рассылок и генерации шаблонов, по факту их намного больше.

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

Head

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

Что нужно прописать:

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

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<title>Test Email Sample</title>

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

<meta http–equiv="X-UA-Compatible" content="IE=edge" />

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

<style>

<!— CSS-код, если мы будем писать его здесь —>

</style>

</head>

Теперь можно переходить к телу письма.

Табличная верстка

При создании скелета письма вам нужно использовать табличную верстку и только ее – div можно использовать только с крайней осторожностью и при большой необходимости:

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

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

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

@media only screen and (min–width: ___px) and (max–width: ___px)

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

@media only screen and (min–width:481px) and (max–width:699px) {

.em_main_table {

width: 100% !important;

}

.em_wrapper {

width: 100% !important;

}

.em_hide {

display: none !important;

}

.em_img {

width: 100% !important;

height: auto !important;

}

.em_h20 {

height: 20px !important;

}

.em_padd {

padding: 20px 10px !important;

}

}

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

Встроенные стили

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

<style>

h1{ color: blue; }

</style>

Прописывание стиля с использованием HTML Inline выглядит так:

<h1 style="color:blue;">A Blue Heading</h1>

Увы, только так стиль корректно отображается во всех версиях Outlook и в некоторых других почтовых клиентах.

Сброс стилей

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

<style type="text/css">

body{

margin:0;

padding:0;

}

img{

border:0 none;

height:auto;

line-height:100%;

outline:none;

text-decoration:none;

}

a img{

border:0 none;

}

.imageFix{

display:block;

}

table, td{

border-collapse:collapse;

}

#bodyTable{

height:100% !important;

margin:0;

padding:0;

width:100% !important;

}

</style>

После этого кода вы можете писать свои стили.

Кнопки

Если мы не говорим про Google Actions (будут отдельно разобраны ниже), то кнопка – это ячейка таблицы, в которой лежит ссылка с закрашенным фоном и отступами. Пользователь нажимает на «кнопку», после чего переходит по ссылке. HTML на практике выглядит так:

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

<tr>

<td>

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

<tr>

<td class="button" bgcolor="#ED2939">

<a class="link" href="адрес-нужной-страницы" target="_blank">

Click

</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

В head нужно прописать стили для классов:

.button {

border-radius: 2px;

}

.button a {

padding: 8px 12px;

border: 1px solid #ED2939;

border-radius: 2px;

font-family: Helvetica, Arial, sans-serif;

font-size: 14px;

color: #ffffff; 

text-decoration: none;

font-weight: bold;

display: inline-block;

}

Все, никакой магии.

Типографика

Основное из типографики, что можно применить к верстке писем – это шрифты. Выше мы уже говорили, что далеко не все клиенты корректно отображают внешние стили, подключенные через link с адресом CSS-файла (выделяется здесь Outlook, который вообще ничего не пропускает). А для подключения шрифтов обязательно нужно скачивать их из какого-то источника. Что делать?

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

<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

 </head>

После чего в стиле элемента пишем:

<td style="font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal;">Какой-то текст.</td>

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

Условия

Outlook – это головная боль верстальщика писем. Эта боль – настолько сильная, что даже сам Outlook это признал, вследствие чего в нем появились условные комментарии. Условный комментарий – это код, который будет исполнен только в том случае, если его исполняет определенный почтовый клиент. Чаще всего этим клиентом как раз выступает Outlook, а все остальные клиенты этот код игнорируют. Выглядит условный комментарий так:

<!--[if mso]>

…какой-то стиль…

<![endif]-->

Как видите, весь код заключен в комментарий – то есть почтовые клиенты, не имеющие представления об условных комментариях, примут этот код за обычный комментарий и просто проигнорируют его. Пример использования как раз связан с предыдущей темой, со шрифтами. Outlook не только не подгружает шрифты из других источников – он еще и молча переопределяет список стандартных шрифтов, по умолчанию выставляя Times New Roman. Чтобы справиться с этим, вам нужно явно переопределить список шрифтов:

<!--[if mso]>

<style type="text/css">

.body-class {

font-family: Arial;

}

</style>

<![endif]-->

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

Изображения и медиа

Гарантированно поддерживаются только 3 формата: jpg, png, gif. Про видео можете забыть (как вариант – можете дать ссылку на YouTube). Чтобы не сломать блочную верстку таблицей, изображения нужно вставлять в ячейки как фоновые – это позволяет загружать их из какого-то дистанционного источника, кроме того, почтовый клиент сам выберет подходящий размер изображения, исходя из фактического размера блока. Код выглядит следующим образом:

<td align="center" style="background-image: url('адрес картинки'); background-repeat: no-repeat; background-position: top center;"></td>

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

<td background="ссылка на изображение" style="height:700px; background-image:url(ссылка на изображение)">

<!--[if gte mso 9]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 550px; height: 700px;" src="ссылка на изображение" />

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 550px; height: 700px;">

<v:fill opacity="0%" color="#f7901e" />

<v:textbox inset="0,0,0,0">

<![endif]--> 

<div>

<!—любой HTML-код -->

</div>

<!--[if gte mso 9]> 

</v:textbox>

</v:fill>

</v:rect>

</v:image>

<![endif]-->

</td>

Увы, какого-то более простого способа нет. С этим кодом умеют работать все почтовые клиенты Microsoft.

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

Кнопки Gmail Actions

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

Когда пользователь нажимает на кнопку – что-то происходит, например – его перенаправляет на сайт или в его ежедневник (если тот синхронизирован с Гуглом) записывается событие. Кнопки создаются через специальный сервис Гугла. Чтобы кнопки работали, вам нужно будет написать JS-скрипт и привязать его к кнопке (гайды). Чтобы пользоваться услугой, вам нужно попасть в «белый лист» Гугла (форма для подачи заявки). Чтобы вас добавили, ваша почта/сайт должны соответствовать куче требований Гугла.

Предзаголовки

Прехедер – это то, что идет после темы письма в предпросмотре.

Добавляется он очень просто – сразу после <body> вам нужно добавить следующий код:

<div style="font-size:0px; line-height:1px; mso-line-height-rule:exactly; display:none; max-width:0px; max-height:0px; opacity:0; overflow:hidden; mso-hide:all;">

<!—До 100 символов прехедера -->

</div>

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

Тестирование рассылки

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

обычные опечатки;
сложности с отображением картинок в Outlook;
отсутствие важной информации и т.д.

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

отправка email на свою почту, причем в нескольких вариантах – на рабочий стол ПК, на Gmail или на мобильное устройство;
использование автоматических сервисов и специальных программ, например, Email on Acid или Litmus;
традиционное вычитывание текста и ручная проверка отображения визуальной составляющей рассылки;
так называемое A/B-тестирование, которое предусматривает использование разных размеров письма и его отдельных элементов, форматов контента и т.д.

Правила визуальной доступности email

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

добавлять в исходный код атрибут role=>>presentation, позволяющий понять, что данная таблица предназначена для верстки;
к каждой части текста давать содержательные описания, что упростит работу с письмом для остальных задействованных сотрудников;
активнее применять семантический подход к верстке и соответствующие теги в виде <H1> или <p>.

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

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

container {

max-width: 600px;

width: 100%;

}

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

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

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

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

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

<tr>

<td align="left" valign="top" width="50%">

<![endif]—>

<div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">…</div>

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

</td>

<td align="left" valign="top" width="50%">

<![endif]—>

<div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">…</div>

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

</td>

</tr>

</table>

<![endif]—>

@media only screen and (max-width: 620px) {

.span-3 {

max-width: none !important;

width: 100% !important;

}

.span-3 > table {

max-width: 100% !important;

width: 100% !important;

}

}

Что почитать по теме

Web Standards Project. Глобальный проект, который пытается унифицировать многие вещи в интернете, в том числе и рассылку писем. На их сайте вы можете найти стандарты и рекомендации по верстке писем.
Курс по верстке. Если вам часто нужно работать с версткой писем – есть смысл пройти этот курс.

FAQ

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

Есть множество сервисов, к примеру: htmlemailcheck, putsmail, htmlemail.

Есть ли какие-то способы автоматизации процесса?

Если не пользоваться конструкторами и шаблонами – опций мало, можете попробовать сервис, который переводит CSS-стили в инлайнеры (записывает в теги).

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

Тезисно:

Письма для email-рассылки верстаются почти так же, как и страницы сайтов.
Отличия – в том, что в письме очень сложно использовать какие-то внешние файлы, поэтому все стили нужно прописывать в head или вообще в самих тегах, с помощью атрибута style.
Если вы не хотите ввязываться в верстку (а это – сложный и долгий процесс), вам лучше воспользоваться конструкторами или готовыми шаблонами.
Основа верстки – таблицы, внутри которых вы помещаете другие таблицы.
Многие вещи, которые можно делать в верстке страниц, применимы и к верстке писем: ссылки в качестве кнопок, сброс стилей, подключение шрифтов и так далее.
Самые большие проблемы возникают с версткой писем под Outlook, потому что последний часто ломает верстку. Обход – через условные комментарии.

Сравни.руОнлайн курсыПутеводительВерстка email рассылок и писем

Часто ищут

Интересные предложения

Часто выбирают