HTML письма и российские почтовые сервисы: подводные камни

Чтобы выделиться из общей массы сервисов рассылок, нередко владельцы сайтов решают отказаться от однообразных текстовых E-mail писем в пользу красивых разноцветных HTML версий. Такие письма выглядят эффектно и солидно. Но для их создания необходимы навыки в вёрстке и определенный запас терпения. А всё потому что модель HTML письма несколько отличается от стандартной модели страницы и то, как такое письмо будет выглядить, в значительной степени зависит не только от браузера, но и от используемого почтового сервиса.

Во-первых, стоит упомянуть, что для HTML писем сегодня принято использовать MIME тип "multipart/alternative". Это позволяет включать в E-mail как HTML, так и текстовую версию письма, на случай если пользователь не имеет возможности увидеть вашу вёрстку. Также, как показывает практика, почтовые сервисы предпочитают иметь дело именно с таким типом в случае HTML писем.

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

Еще один важный момент: к HTML письмам не стоит прикреплять внешний CSS файл - он просто не будет прочтен. Весь CSS код должен быть включен в сам E-mail. Хотя в идеале лучше вообще обойтись без каскадных таблиц стилей, так как, опять же, разные почтовики имеют разный уровень их поддержки.

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

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

Еще один небольшой совет - старайтесь уместить HTML письмо в ширину около 500px, ведь окошко просмотра содержимого E-mail у почтовиков меньше ширины окна, причем иногда сильно меньше.

Теперь рассмотрим некоторые особенности вёрстки HTML писем под популярные в рунете почтовые сервисы.

1. Mail.ru
Сразу скажу, что Mail.ru это IE6 от почтовиков. Пользуются им очень многие при том, что он очень недружелюбен к вёрстке. Не дай вам бог забыть убрать head и body из письма - показывать письмо откажется. CSS практически не поддерживает, более того - навязывает свои стили, которые побороть крайне сложно. Например, он насильно делает отступы от рамки в клетках таблицы (около 20-30 px, разные с каждой стороны). Поэтому если вы организуете хотя бы слегка нетривиальное позиционирование элементов, используя при этом таблицы, то придется учитывать данные отступы. Обычно это выливается в то, что под mail.ru делается отдельная версия письма, учитывающая особенности вёрстки под него.

2. Яндекс.Почта
Довольно-таки дружелюбный почтовый сервис, серьёзных проблем обычно не вызывает. Единственное, что неприятно - если не включить в код body и head, то поместит ваше письмо в спам. Странная логика. Посему делаем отдельную версию под этот ящик с body и head.

3. Рамблер Почта
По умолчанию не отображает картинки и alt текст для них, поэтому если какой-то текст вшит в них, то стоит приложить текстовую версию письма.

4. Gmail
Самый адекватный почтовый сервис. Практически никаких проблем. По умолчанию изображения также отключены, но alt текст отображается в любом случае.

HTML письмо - эффектный метод привлечь внимание к сайту. Главное помнить, что оно не является полноценной веб страницей и имеет ряд вышеперечисленных особенностей при вёрстке. Не забывайте проверять их отображение во всех более менее популярных почтовых сервисах, а также иметь представление о том, как они будут смотреться в почтовых программах типа MS Outlook, Firebird и на корпоративных ящиках.