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

Материал из 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. Все стили прописываются инлайн (то есть рядом с элементом, к которому они относятся). Стили, прописанные внутри тега <body> или <head> игнорируются большинством почтовиков[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>


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

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


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


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


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


В веб-разработке CSS-стили позволяют уменьшить количество кода. Для email-писем этот приём не работает, так как большинство почтовых программ игнорирует атрибуты, заданные в <head>, а также внешние 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> <!-- Блок номер 1 --> <span style="display:inline-block; width:300px;"> Контент блока </span> <!-- Блок номер 1 --> <!-- Блок номер 2 --> <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;"> <!--[if gte mso 9] <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage1" style='behavior: url(#default#VML); display: block; position: absolute; width: 150px; height: 150px; border: 0; margin: 0; z-index: -1;' src="img/1.jpg" /> <![endif]--> Некоторый текст в ячейке. </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 Сервис отправляет письма на самые популярные почтовые сервисы, на выходе вы получаете скриншоты настоящего доставленного письма с вашей версткой. Во время тестирования и корректировки шаблона письма стоит ориентироваться на аналитику по количеству пользователей, которые используют те или иные почтовые клиенты и устройства. И больше ориентироваться на те устройства и почтовики, которые наиболее популярны у вашей ЦА. При этом самым надежным и действенным способом тестирования остаётся ручной анализ доставленных писем. Для этого стоит зарегистрировать ящики на всех почтовых сервисах, которыми пользуются ваши клиенты.

==Примечания==

  1. 1,0 1,1 1,2 1,3 http://habrahabr.ru/post/252279/
  2. http://www.w3schools.com/cssref/css_websafe_fonts.asp
  3. http://habrahabr.ru/post/252279/
  4. 4,0 4,1 http://habrahabr.ru/post/112163/
  5. http://www.htmlhelp.com/reference/css/style-html.html
  6. 6,0 6,1 6,2 6,3 6,4 6,5 6,6 http://rightblog.ru/332/
  7. http://habrahabr.ru/post/252279/
  8. 8,0 8,1 http://blog.emailmatrix.ru/html-part1
  9. http://best-web-creation.com/articles/view/id/verstka-html-pisem?lang=ru
  10. http://www.parshinpn.pro/content/osobennosti-vyorstki-html-pisem
  11. 11,0 11,1 http://tj-s.ru/tod/verstka-html-pisem.-chast-1.html
  12. http://habrahabr.ru/post/180013/