Особенности вёрстки email

Особенности вёрстки email
Вёрстка email-сообщений несколько отличается от web-вёрстки. Если для web-вёрстки современных сайтов используется CSS3, то для вёрстки email проблематично использование даже более ранних стандартов CSS. Это связано с тем, что многие пользователи до сих пор используют старые устройства и старые версии почтовых клиентов. Вместе с этим количество новых устройств постоянно растёт. А значит, чтобы письма корректно изображались на большинстве существующих устройств, придется сделать шаг назад и больше полагаться на возможности HTML-вёрстки.
В идеальном варианте при разработке письма дизайнер должен постоянно советоваться с верстальщиком.

Основные параметры

* Размер
Оптимальная ширина письма – 600-650px. При адаптивной вёрстке в медиа-запросах или в файлах стилей чаще всего прописывают максимальную величину экрана в 480px. При этом размеры контентных блоков и самого письма лучше задавать в процентах и указывать максимальную ширину. Так письмо будет автоматически сжиматься на экранах меньше 600px. Правда, этого приёма будет не достаточно для адаптивной вёрстки с учётом особенностей мобильных устройств.

* Фон и цвет
Для удобства чтения и привлечения внимания часто используют светлый фон, отличный от белого. Как обозначать цвета. RGB-запись цвета воспринимается не всеми почтовыми клиентами. Поэтому лучше использовать шестнадцатиричную запись кода цвета и не сокращать его [1].

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

* Размеры элементов
Размеры элементов должны задаваться в абсолютных значениях. Размеры ячеек таблицы указываются в процентах, размеры элементов – в пикселах. При этом лучше указывать размер без обозначения px. Так можно избежать некоторых проблем отображения в Outlook (например, width=»400″).

* Доктайп (DOCTYPE)
Любой HTML-документ начинается с элемента DOCTYPE. Он сообщает браузеру, как интерпретировать код. Существует несколько версий языка HTML с разным синтаксисом. Для писем рекомендуется использовать доктайп:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

* Шрифты
Список шрифтов, которые можно использовать в email-шаблонах [2] [3]

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Georgia, serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

* HTML-теги, которые можно использовать в email

<table> <tr> <td><a href="#"></a></td> <td><span></span></td> <td><img src="" alt=""></td> </tr> </table>

* CSS-стили
В вёрстке email использование стилей CSS ограничено, практически не используется CSS3. Все стили прописываются инлайн (то есть рядом с элементом, к которому они относятся). Стили, прописанные внутри тега или игнорируются большинством почтовиков [4] [1].

CSS-стили в email-вёрстке

Стили CSS позволяют задать основные параметры для элементов на странице (размеры, выравнивание, цвет фона и т.д.). Существует 4 способа задания стилей для HTML-тегов [5]:

* Внедрённый стиль

Стиль задаётся в теге <head> документа. Например:

<head> <style> h { color: green; margin-top: 80px; } </style>

Здесь 1 раз задаётся стиль для тега <h1>, и все элементам с тегом <h1> будет присвоен описанный стиль.

* Импортированный стиль

Импортированный стиль также прописывается в теге <head> документа, но при этом все его параметры загружаются из файла. Пример:

<head> <style> @import url("my.css"); </style> </head>

* Стиль из файла

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

<head> <link rel="stylesheet" type="text/css" href="my.css"> </head>

* Inline-стиль Стиль указывается непосредственно в теле тега. Например:

<p style = "font-size: 120%; text-align: left;">контент</p>

В веб-разработке CSS-стили позволяют уменьшить количество кода. Для email-писем этот приём не работает, так как большинство почтовых программ игнорирует атрибуты, заданные в , а также внешние css-файлы. Именно поэтому для вёрстки email следует использовать inline-стили.
В разных сервисах есть разные ограничения на поддержку CSS-атрибутов. Подробная таблица поддержки стилей для наиболее популярных почтовых сервисов была создана специалистами campaignmonitor. Здесь ее можно посмотреть онлайн: … для 10 основных сервисов или скачать таблицу для 18 сервисов.
Многие сервисы для email-маркетинга имеют свои инлайнеры, которые конвертируют код в инлайн-вёрстку автоматически.
Инлайнер Mailchimp
Инлайнер Campaignmonitor
Инлайнер Litmus

Использование табличной вёрстки

Блочная вёрстка, которая используется для создания современных веб-сайтов, не подходит для email. Для вёрстки email лучше использовать таблицы. Так, скорее всего, шаблон не разъедется в устаревших почтовых клиентах.
Сначала нужно создать контейнер, т.е. основную таблицу, которая обозначит границу письма. Таблицы внутри этого контейнера будут выполнять роль ячеек. И уже внутри ячеек можно будет расположить собственно контент письма.
При этом следует избегать объединения ячеек (атрибуты colspan, rowspan), а для форматирования контента в ячейках использовать вложенные таблицы. Простейший код основной таблицы письма может выглядеть так [1]:

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> <tr> <td> <center style="max-width: 600px; width: 100%;"> контент письма </center> </td> </tr> </table>

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

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <center style="max-width: 600px; width: 100%;"> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td>  <span style="display:inline-block; width:300px;"> Контент блока </span>   <span style="display:inline-block; width:300px;"> Контент блока </span> <!-- Блок номер 2 → </td> </tr> </table> </center> </td> </tr> </table>

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

Отображение письма в разных почтовых клиентах

Общие замечания

Как уже упоминалось выше, в разных почтовых службах письма отображаются по-разному. Это связано с разной поддержкой CSS-стилей, а также их нетерпимостью к тем или иным способам кодировки (так, например, большинство почтовых клиентов удаляют все стили, прописанные в <head> и <body>). Такие клиенты как Thunderbird, Outlook и Gmail по умолчанию не показывают изображения. Поэтому, стоит точно прописывать название изображения в alt. Не рекомендуется оформлять шапку и заголовки в письме только изображениями, без текста. Верстальщики, которые работают с email-сообщениями, советуют прежде всего позаботиться о нормальном отображении писем в Gmail, Lotus Notes и Outlook 2007 [6]. С точки зрения поддержки стилей это наиболее проблемные клиенты, поэтому, если письмо хорошо отображается в этих трёх сервисах, то, скорее всего, во всех остальных почтовых программах оно не расползется.

Таблицы, ячейки и отступы

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

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> [7] [6]

Для Lotus Notes вокруг главной таблицы стоит создать пространство, установив значение cellpadding как минимум на 5% [6]
Атрибуты colspan и rowspan лучше не использовать, так как поддерживаются они далеко не всеми почтовиками [6]
Ширина ячеек таблицы прописывается в тэгах td [6]
Часто рекомендуют использовать атрибут padding для задания отступов и не использовать margin. Однако Outlook не поддерживает свойство padding, но поддерживает margin. Поэтому есть смысл отказаться от обоих этих атрибутов. Горизонтальные отступы можно задать с помощью пустой ячейки с символом «пробел», для которого задается размер, как для текста [8]. Однако более надежным способом является использование распорки с прозрачным однопиксельным изображением в формате .gif. [4]
Вокруг контента стоит выставлять отступы не менее 10px, чтобы контент не заезжал на границы.
Чтобы избавиться от больших отступов, которые делает Mail.ru можно обернуть письмо в <div id="mailsub"> [9]

Задание стиля для элементов

Прописывать стили следует для каждого элемента, стили, прописанные в теге <head> или <body>, многие почтовые сервисы игнорируют или удаляют [6].

Оформление текста

Оформление текста некоторые верстальщики советуют производить с помощью сразу двух тэгов – <font> и <span>[8]. Так можно добиться правильного отображения параметров шрифта в большинстве почтовых сервиса.

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

Для изображений следует использовать абсолютные пути [6]

Gmail и Outlook не поддерживают фоновые изображения.

Для Outlook можно применить вот такой метод [10]:

<td height="150" width="150" valign="top" style="background: url('img/1.jpg') right 0 no-repeat;">  Некоторый текст в ячейке. </td>

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

Цвет фона следует задавать атрибутом bgcolor и использовать 16-ное обозначение цвета без сокращений (bgcolor=»#ffffff») [11]

Оформление ссылок

Для оформления ссылок необходимо использовать атрибут target=»_blank», чтобы почтовый сервис не пытался открыть ссылку внутри письма. Чтобы ссылка правильно отображалась в Outlook, ее необходимо обернуть в . Для кроссмейлерной вёрстки можно использовать вот такую конструкцию:

<a href="#" target="_blank" style="color: #267f00 !important; text-decoration: underline;"><span style="color: #267f00;">link</span></a> [12]

Телефонные номера

Некоторые почтовые сервисы, оформляют текст хоть как-то похожий на телефон в виде ссылок. Чтобы этого избежать, можно сразу оформить телефон в ссылку: (например так — href=tel:+79876543210). Или сделать так, чтобы текст не распознавался, как телефон (например, так — +7<span>987<span><span>654<span><span>32<span><span>10<span> [11]

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

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

Платные сервисы для проверки отображения писем:

eDesign Optimizer Проверяет отображение писем в почтовых клиентах и на различных устройствах (как международных, так и в некоторых локальных).

Litmus Позволяет предварительно просмотреть отображение письма в 32 самых популярных почтовых сервисах и приложениях на разных устройствах

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

Preview My Email Сервис отправляет письма на самые популярные почтовые сервисы, на выходе вы получаете скриншоты настоящего доставленного письма с вашей версткой. Во время тестирования и корректировки шаблона письма стоит ориентироваться на аналитику по количеству пользователей, которые используют те или иные почтовые клиенты и устройства. И больше ориентироваться на те устройства и почтовики, которые наиболее популярны у вашей ЦА. При этом самым надежным и действенным способом тестирования остаётся ручной анализ доставленных писем. Для этого стоит зарегистрировать ящики на всех почтовых сервисах, которыми пользуются ваши клиенты.