Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга

Делимся опытом: Чем вёрстка емейлов отличается от вёрстки веб-страниц

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

Базовые принципы

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

Рисунок 1:
Наш кейс: Чем вёрстка емейлов отличается от вёрстки веб-страниц 1

По данным EMX за 2015 год

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

01. CSS

Большинство веб-интерфейсов интерпретируют только содержание, игнорируя/вырезая всё остальное, так что при вёрстке емейлов следует использовать только «инлайновые стили», то есть те, что указываются в атрибуте style.

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

border:1px solid #000000;

следует записать как

border-width:1px; border-style:solid; border-color:#000000;

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

02. Структура и код

Ещё один постулат вёрстки емейлов: необходимо использовать табличную вёрстку. Она считается устаревшей, когда речь идёт о веб-вёрстке, однако это единственный инструмент, позволяющий обеспечить корректное отображение письма в большинстве веб-интерфейсов и почтовых клиентов. При этом следует использовать максимально простые структуры таблиц, избегая объединения ячеек (colspan, rowspan) — их следует заменять вложенными таблицами.

Значения атрибутов cellpadding, cellspacing и border у таблицы следует обнулять. Также следует указывать в явном виде выравнивание внутри ячеек, как горизонтальное, так и вертикальное (align, valign), так как значения по умолчанию могут отличаться, что может крайне негативно сказаться на отображении письма.

В Outlook (2007/2010) могут появляться «разрывы» страниц, которые выглядят как пространство, разрывающее таблицу или изображение. Они могут возникнуть в случае, если высота таблицы превышает 1800 px. Чтобы избавиться от данной проблемы, закройте все таблицы (включая родительскую) и откройте заново, чтобы высота каждой из таблиц не превышала 1800 px.

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

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

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

Размер html-кода письма не должен превышать 100 Кб, иначе он будет обрезан в некоторых веб-интерфейсах и почтовых клиентах, в частности, в Gmail. После того как письмо свёрстано и настроено, проверяйте размер получившегося html- файла. Для сокращения размера письма можно исключить все символы табуляции, переноса строк и все комментарии (кроме условных).

Основные элементы

01. Отступы

Достаточно сложно создать емейл, в котором интервалы отображались бы везде одинаково, поскольку платформы по-разному работают с вертикальными и горизонтальными отступами.
Например, в начале 2013 года оutlook.com начал вырезать отступы margin из кода емейлов. В результате для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов (padding). Ещё более осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding (для div), а отступы margin — поддерживает. В связи с этим лучше отказаться от использования как padding, так и margin.+

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

<div style="height: 10px; line-height:10px; font-size:8px;"> </div>

Или же используя border цвета фона.

Outlook 2013 имеет ещё одну интересную особенность: при создании ячейки меньше 19 пикселей в высоту она растянется до 19 пикселей. Во избежание этого вы можете добавить стилевое свойство line-height при описании стиля ячейки (о чём уже шла речь, когда рассматривали особенности использования изображений).

02. Текст

При оформлении текста также есть ряд особенностей.

Следует использовать теги, не имеющие специфического оформления по умолчанию: <span>, <strong>, <em>. От использования же <p>, <h1>-<h6> и т. д. следует отказаться. Для родительской ячейки (или блока) следует указать line-height. Стоит отметить, что outlook.com игнорирует параметр line-height, прописанный у ячейки таблицы.

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

Цвет (color)

Цвет необходимо прописывать у каждого текстового элемента, при этом, как упоминалось ранее, он должен быть задан в виде шестнадцатееричного кода, например: #4676a9.

Размер шрифта (font-size)

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

Гарнитура (font-family)

В письмах следует использовать только стандартные шрифты. Обычно под стандартными подразумевают предустановленные шрифты в ОС Windows XP. Существует два семейства шрифтов — с засечками (serif) и без засечек (sans-serif). Чаще всего используются:

Courier, Georgia, Times, Times New Roman
Arial, Verdana, Tahoma, Trebuchet MS

Если учесть эти рекомендации, то оформление текстового блока будет иметь следующий вид:

<div style="line-height:18px;">
<span style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;">
Пример текста
</span>
</div>

Высота строки (line-height)

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

Спецсимволы

Все спецсимволы (параграфы, сердечки, элементы псевдографики и т. д.) в письме следует заменить на соответствующие html-сущности:

¶  = &para;
Σ  = &Sigma;
♥  = &hearts;
—  = &mdash;

Их можно легко найти, например на сайте html5book.

Говоря о спецсимволах, стоит также упомянуть о борьбе с «висячими» союзами и предлогами. Их наличие некорректно с точки зрения типографики и не поощряется с точки зрения вёрстки, поэтому следует использовать символ неразрывного пробела &nbsp;, чтобы исключить их:

Только в&nbsp;этом году!

Веб-интерфейс Yandex меняет неразрывные пробелы на обычные.

Реже бывает и обратная ситуация, когда встречаются очень длинные слова, которые могут не поместиться на экран мобильного телефона. Чтобы обеспечить корректное отображение и грамотный перенос, можно воспользоваться символом «мягкого переноса» &shy;

Никотинамидаденин&shy;динуклеотидфосфат

Ссылки

Оформление ссылок аналогично оформлению обычного текста, соответственно, используется тег <a> и появляется обязательный атрибут href. А также для ссылок в письмах необходимо указывать атрибут target со значением _blank. Также цвет ссылок следует задать в явном виде и прописать стилевое свойство text-decoration с желаемым значением, так как во многих почтовых клиентах и веб-интерфейсах данное свойство имеет значение по умолчанию underline у ссылок.
Итак, ссылка будет иметь вид:

<a href="#""  target="_blank" style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;text-decoration:none;"> 
Пример текста 
</a>

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

Рисунок 2:
Наш кейс: Чем вёрстка емейлов отличается от вёрстки веб-страниц 2

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

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

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

Первым вариантом решения проблемы является стилизация ссылок в письме посредством добавления определённых стилей в <head>, но работать это будет не везде: например, в почтовом клиенте Mail.ru номер телефона будет ярко-синий.

Вторым вариантом является добавление ссылки заранее (аналогично емейл-адресам и url), при этом это может быть как ссылка на страницу контактов на сайте, так и ссылка вида tel:123456789 для осуществления звонка.

И последний вариант — запретить распознавание номера телефона, для этого вставьте следующий код:

<span style="font-size:0;">&zwnj;</span>

Символ &zwnj; является непечатным символом, однако на Android 2.3 он отображается, и чтобы избавиться от этой проблемы, размер обнуляется и указывается цвет фона. В итоге номер телефона будет иметь вид:

+7920<span style="font-size:0;">&zwnj;</span>9209292

03. Изображения и фон

Работа с изображениями в письмах также имеет ряд особенностей.

Помимо обязательных атрибутов (src и alt), здесь необходимо в явном виде указывать размеры (width и height) изображения, а также для исключения нежелательных отступов прописывать стилевое свойство display со значением block:

<img src="img/img01.jpg" width="300" height="50" alt="Акция" border="0" style="display: block;" />

Если в ячейке содержится только одно изображение, которое в высоту не превышает 19 px, то у этой ячейки следует прописать стилевое свойство line-height с указанием необходимой высоты — для исключения проблем отображения в Outlook 2013.

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

Так как речь идёт о современных адаптивных письмах, нельзя не сказать про retina-адаптацию. Под этим термином подразумевают подготовку изображений для чёткого отображения на экранах с повышенной плотностью пикселей (экран iРhone или любого другого современного смартфона среднего и более высокого ценового диапазона). Обычные изображения на таких устройствах выглядят мутно:

Рисунок 3:
Наш кейс: Чем вёрстка емейлов отличается от вёрстки веб-страниц 3

Чтобы избавиться от такого нежелательного эффекта, используют изображения в двое больших размеров. Например, необходимо отобразить иконку размером 60х60 px, для того чтобы она выглядела чёткой на retina-экране, необходимо использовать изображение размером 120×120 px.

Рисунок 4:
Наш кейс: Чем вёрстка емейлов отличается от вёрстки веб-страниц 4

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

При вставке изображений в адаптивное письмо не всегда можно указать размеры width и height в пикселах, иногда приходится указывать в процентах: часто у креативов прописывается ширина 100 %. При этом большинство веб-интерфейсов и почтовых клиентов растянут данное изображение на 100 % ширины родительского блока, однако Outlook 2007–2016 отобразит изображение в масштабе 1:1. Поэтому ширина такой картинки должна совпадать с выводимой шириной.

Фоновые изображения

Outlook 2007–2016 не поддерживает фоновые изображения. Исключением является фоновое изображение, прописанное в body. Однако применение данного приёма сильно повышает шанс попадания письма в спам, так что использовать его не рекомендуется.

Данное ограничение можно обойти, используя VML. Для удобного его применения можете воспользоваться сервисом http://emx-tools.ru

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

Мобильная адаптация письма

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

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

Рисунок 5:
Наш кейс: Чем вёрстка емейлов отличается от вёрстки веб-страниц 5

Так как Outlook 2007–2016 не поддерживает плавающие блоки, то специально для них строится вспомогательная структура в условных комментариях:

<!--[if gte mso 9]> 
<table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td> 
<![endif]--> 
Блок1 
<!--[if gte mso 9]></td><td><![endif]--> 
Блок2 
<!--[if gte mso 9]> 
</td></tr></table> 
<![endif]--> 

Код, заключённый между

<!--[if gte mso 9]><![endif]-->

будет проигнорирован всеми почтовыми клиентами, кроме Оutlook 2007–2016.

А каждый из блоков будет иметь следующую структуру:

<div style="float: left; display: inline-block; width:200px;"> 
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left"> 
<tr><td align="left" valign="middle"> 
Блок 
</td></tr> 
</table>
</div>

Из кода видно, что при перестроении блоки будут выровнены по левому краю, однако это не всегда обеспечивает желаемое отображение, особенно если это трёхколоночная сетка, в этом случае применяется аналогичная структура, но обтекание (float) у блоков не указывается, и блоки отображаются как инлайновые. Размер их не должен превышать 300 px после перестроения. У родительской ячейки следует указать выравнивание по центру. А так как Outlook 2003 и другие IE-образные почтовые клиенты не поддерживают отображение в виде инлайновых блоков, условные комментарии будут иметь немного другой вид:

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

И код примет вид:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center"><!–- block1 
--><div style="display: inline-block; width:280px;"> 
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left"> 
<tr><td align="left" valign="middle"> 
Блок 1
</td></tr> 
</table>
</div><!–- block1 END 
--><!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]--><!–- block2 
--><div style="display: inline-block; width:280px;"> 
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left"> 
<tr><td align="left" valign="middle"> 
Блок 2
</td></tr> 
</table>
</div><!–- block2 END 
--></td></tr> 
</table>

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

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td dir="rtl" align="center"><!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td width="300" dir="rtl">
<![endif]--><!-- 

Item --><div style="display: inline-block; vertical-align: top; width: 300px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" dir="ltr">
<tr><td align="center">
Блок 2
</td></tr>
</table>
</div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
</td><td width="300">
<![endif]--><!-- 

Item --><div style="display: inline-block; vertical-align: top; width: 300px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="ltr">
<tr><td align="center">
Блок 1
</td></tr>
</table>
</div><!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]--></td>
</tr>
</table>

Базовый шаблон адаптивного письма

<!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" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> - </title>
<style type="text/CSS">
	html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
	@media only screen and (min-device-width: 660px) {
		.table660 {
			width:660px !important;
		}
	}
	@media only screen and (max-device-width: 660px), only screen and (max-width: 660px) { 
		table[class="table660"]{
			width: 100% !important;
		}
	}
	@media only screen and (max-width: 660px) { 
		table[class="table660"] {
			width: 100% !important;
		}
	}
	.table660{
		width:660px;
	}
</style>
<style type="text/CSS">
	@-ms-viewport{width:device-width}
</style>
</head>

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

<div style="word-break:normal;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;line-height: normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="line-height: normal;"><tr><td align="center" bgcolor="#ffffff">

<!--[if (gte mso 9)|(IE)]>
<table width="660" border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
<div style="max-width:660px;">
<table border="0" cellspacing="0" cellpadding="0" class="table660" width="100%" style="max-width: 660px;min-width:300px;">
<!--main -->
<tr><td align="center">


</td></tr>  
<!--main END-->
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->

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

</body>
</html>

Рассмотрим немного подробнее.

Стилевое свойство text-size-adjust со значением none используется для исключения увеличения шрифта (например, в стандартном приложении на iOS).

В блоке body после таблицы на 100 % ширины, где задаётся цвет фона, следует контентная таблица шириной 660 px. Причём первоначально создаётся таблица в условных комментариях, где необходимая ширина задаётся в атрибуте width, и только затем основная таблица, где указана ширина 100 % с ограничением максимальной ширины в 660 px. Это делается потому, что Outlook 2003 не поддерживает стилевое свойство max-width.

Прочие элементы и приёмы

01. Невидимый прехедер

Практически все веб-интерфейсы выводят рядом с темой письма также и первый текст:

Рисунок 6:
Наш кейс: Чем вёрстка емейлов отличается от вёрстки веб-страниц 6

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

Для этого следует добавить в самое начало html-тела письма код со следующей структурой:

<style>
.preheader {
display:none !important;
}
</style>
...

<!--[if !mso]><!-->
<div class="preheader" style="font-size:0px;color:#ffffff;line-height:0px;"> 
Скрытый прехэдер
</div>
<!--<![endif]-->

<style> следует прописать в разделе <head>. Текст невидимого прехедера не отобразится при открытии письма, однако он будет выведен рядом с темой до открытия. Цвет текста прехедера должен соответствовать цвету фона письма.

02. Видео в письмах

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

При такой реализации видео отобразится на слое в веб-интерфейсах mail.ru (около 55 %) и Gmail (около 14 %). При этом на большинстве мобильных устройств видео будет открыто в приложении Youtube, без открытия браузера.

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

Тестирование

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

Заключение

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

01. Инструменты и сервисы

Email buttons — генератор кнопочек с использованием VML.

Background generator — вставка фоновых изображений в письмах с использованием VML.

Litmus — тестирование отображения писем.

Email On Acid — альтернатива Litmus: тестирование отображения писем.

02. Полезные материалы

Блог Litmus — лидер рынка емейл-тестирования. Интересные кейсы и последние новости из мира емейл-маркетинга и вёрстки емейл-писем.

Блог Email On Acid — интересные кейсы и последние новости из мира емейл-маркетинга и вёрстки емейл-писем.

EmailsLab — первый блог о емейл-маркетинге, рассказывает о том, как сделать письма эффективными.

Tod’s blog — интересные кейсы и полезные материалы о вёрстке и разработке.

Понравился кейс?Мы поможем реализовать его и у вас!
Напишите нам.
Поделиться статьёй:
Ac
Антон Чирков
Антон Чирков
Руководитель отдела разработки, EMAILMATRIX
Все рецепты автора
Комментарии