В начале была почта, или маркетинг в почтовом ящике

Дизайн, копирайт, идеи для правильных рассылок. Блог Почтового Куба

04.06.2007

Поддержка CSS в почтовых системах Рунета

Изучена степень поддержки CSS в популярных почтовых системах Рунета. Для дизайнеров, которые разрабатывают дизайн-макеты для писем, в частности, дизайн для новостных рассылок. Июнь 2007.

Введение

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

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

Разработка дизайн-макета письма во многом похожа на работку дизайна обычной html-страницы. Однако, все почтовые программы в той или иной степени ограничивают использование css в письмах с целью защиты от вредоносных действий – фишинга, кросс-скриптинга и т.д.

Чтобы создать дизайн-макет, который будет хорошо смотреться в почтовых ящиках пользователей, надо знать особенности отображения html и css в почтовых программах. Мы исследовали особенности популярных в Рунете почтовых систем и свели данные в таблицы.

Выбор почтовых систем

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

mail.ru
27,13%
yandex.ru
8,53%
rambler.ru
5,92%
gmail.com
1,12%
yahoo.com
0,86%
ukr.net
0,64%
pochta.ru
0,81%
hotmail.com
0,54%
newmail.ru
0,41%
tut.by
0,21%

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

Сразу определимся, что в нашем исследовании не будут принимать участие англоязычные системы gmail.com, yahoo.com, hotmail.com, по той причине, что они уже исследованы достаточно авторитетными источниками [например, здесь и
здесь].

По той же причине мы не исследуем известные почтовые клиенты – Microsoft Outlook , Mozilla Thunderbird и Lotus Notes, а отсылаем к другим исследованиям (мы планируем свести результаты разных источников в одну таблицу и опубликовать их в этом блоге).

Из "настольных" почтовых клиентов мы решили исследовать только The Bat! (версия 3.99), потому что он достаточно популярен в русскоязычном мире.

Почтовая система ukr.net, несмотря на относительную популярность, не вошла в исследование, поскольку регистрация в ней ограничена (из России зарегистрироваться нельзя – такое вот цифровое неравенство).

Методика

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

Мы исследовали почтовые системы по следующим направлениям:

  • Включение таблиц стилей (link, style)
  • Поддержка inline-стилей
  • Автоматическая загрузка изображений
  • Поддержка кодировки utf-8

Результаты

Включение таблиц стилей

Для включение таблиц стилей в обычную html-страницу используется тэг link или блоки style. Наша первая цель – выяснить как почтовые клиенты относятся к такому определению стилей:

  Yandex Mail Rambler Pochta newmail tut.by The Bat!
<link>
<style> внутри <head>
<style> внутри <body>

Как выснилось, ни одна из почтовых систем, кроме newmail, не поддерживает включение таблиц стилей. А значит, почти у всех читателей вашего письма письма не будут работать стили, которые вы определяете в блоке <style> или во внешнем файле, подключаемым при помощи <link>.

Вывод – в письме нельзя использовать команды <link> или <style> для подключения стилей. Чуть лучше обстоят дела с inline-определениями.

Inline-CSS

Стили можно определять inline для каждого тэга, например, <p style="line-height: 1.3em">. Такое определение поддерживается некоторыми системами электронной почты, но нужно быть готовым к тому, что большинство получателей всё же не увидят это оформление:

  Yandex Mail Rambler Pochta newmail tut.by The Bat!
background-color
background-image
background-position
background-repeat
border
border-collapse
border-spacing
bottom
caption-side
clear
clip
color
cursor
direction
display
empty-cells
float The Bat! поддерживает flot частично. Поддерживает float: left.
font-family
font-size
font-style
font-variant
font-weight
height
left
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
margin
opacity
overflow
padding The Bat! поддерживает padding частично. Поддерживает внутри div и td, но не поддерживаеь, например, внутри ul.
position
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
vertical-align
visibility
white-spacing
width
word-spacing
z-index

Яндекс.Почта поддерживает inline-определения стилей. Хорошо работает как «старый» вариант mail.yandex.ru, так и новый mail.ya.ru.
Есть ограничения, связанные с абсолютным позиционированием.

Mail.ru, Rambler.ru, pochta.ru и tut.by не поддерживает стили вообще. Они просто удаляют все определения стилей.

The Bat! отображает некоторые стили. В нем работают «простые» определения, касающиеся оформления шфрита, а также отступы (margin и padding) и цвет фона (background-color). Остальные стили the Bat отключает.

Автоматическая загрузка изображений

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

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

  Yandex Mail Rambler Pochta newmail tut.by The Bat!
img
background-image
table background

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

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

Поддержка utf-8

Кодировку utf-8 поддерживает подавляющее большинство систем:

  Yandex Mail Rambler Pochta newmail tut.by The Bat!
Поддержка utf-8

Мы протестировали также GMail.com, Yahoo.com, Hotmail.com, Microsoft Outlook XP/2003/2007 и Outlook Express последних версий и не обнаружили проблем, так что если Вы еще не используете utf-8, присмотритесь к ней.

Единственная система, которая не поддерживает utf-8 на сегодняшний день – это newmail.ru. Причины этого непонятны, мы постараемся получить объяснение от владельцев системы, тем более, что система pochta.ru того же владельца utf-8 поддерживает.

Литература

[1] CSS and Email, Kissing in a Tree http://alistapart.com/articles/cssemail
[2] Style In Email: http://css-discuss.incutio.com/?page=StyleInEmail
[3] CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail: http://www.xavierfrenette.com/articles/css-support-in-webmail/
[4] A Guide to CSS Support in Email: http://www.campaignmonitor.com/blog/archives/2007/04/…

Popularity: 32% [?]

No related posts.

Комментарии (12) »

Влад — 15.06.2007 12:28 #

Очень полезный текст. Спасибо автору.

Елена — 09.09.2007 19:55 #

Спасибо. Действительно полезный обзор. Но есть ли альтернатива для создателей рассылок? Можно ли как-нибудь все-таки задавать стили?

Сергей — 09.09.2007 21:13 #

Елена,
задать стили для всех почтовых систем никак нельзя. mail-ru вырежет из письма любые стили.

Но можно смягчить последствия.

Во-первых, в каждом письме можно давать ссылку на его онлайн-версию.

Во-вторых, чаще использовать старые добрые тэги и атрибуты – font, bgcolor.

В-третьих, надо протестировать письмо во всех почтовых системах и сделать так, чтобы даже без css письмо читалось.

И так далее ;)

Елена — 10.09.2007 15:13 #

Сергей, спасибо большое!

Я столкнулась с тем, что возникает проблема с отступами внутри таблиц. Mail.ru игнорирует cellspacing=0 и cellpadding=0, он задает какие-то свои значения :( А через уже разобрались, что стиль нельзя никак задать… Из-за всего этого рассылка становится очень вытянутой, и теряется внешний вид.

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

Сергей — 10.09.2007 15:41 #

Договориться с почтовыми службами… нет, это невозможно. Я считаю, что не поддерживают стили только ленивые разработчики. И вряд ли вы сможете повлиять на них ;)

С другой стороны, дизайнеру не составит большого труда поправить дизайн рассылки так, чтобы она _нормально_ показывалась в mail.ru.

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

Елена — 10.09.2007 22:15 #

Больше не буду пользоваться почтой mail.ru :)
Я думаю переделать рассылку с использованием пустого изображения под цвет фона как разделитель между элементами. Если не получится, то буду снова звать на помощь :) Спасибо!

Война за веб-стандарты в почтовых системах » Блог о рассылках — 29.09.2007 23:24 #

[...] Яндекс.Почта поддерживает css очень даже неплохо, а Mail.ru не поддерживает вообще. Gmail и Hotmail поддерживает многие атрибуты, Outlook 2003 дружит с дизайном, а вот Outlook 2007 использует для отображения движок ms word и рендерит html совсем не так, как браузер. А ведь есть еще около 20 известных почтовых клиентов и веб-систем, каждая из которых трактует html и css в письмах по-своему (про мировые системы здесь, про русские — у нас). [...]

Email standards project — продолжение » Блог о рассылках — 13.05.2008 00:57 #

[...] поддержки CSS в mail.ru, почте Яндека и ? амблера (результаты). Тогда мы разработали свой вариант тестового [...]

PaLyCH — 03.06.2008 16:22 #

Тест конечно интересный. но почему не сделали отдельно тест для почтовых программ. А только включили Bat. Многие получают почту именно почтовиками, и не только баттом.

Сергей — 04.06.2008 09:38 #

PaLyCH, потому что другие системы исследовали раньше нас: http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

ksi — 25.06.2008 23:15 #

Исследовать-то исследовали, а на русском нам кто объяснит ? :)

Сергей — 30.06.2008 01:41 #

ksi, вот новая ссылка
там просто таблица – какие почтовые клиенты какие css-свойства поддерживают, всё понятно без перевода:
http://www.campaignmonitor.com/css/

Оставить комментарий

Блог Почтового Куба — сервиса почтовых рассылок для дизайнеров.
При перепечатке, пожалуйста, ставьте ссылку на источник.