How-to: Правила вёрстки email-писем

[VitaLik_is_goodman]

Спасибо за перевод,

но лично мое субъективное мнение, что чтение такого материала скорее во вред, полуработающие подходы типа использования <p> ( обходить надо за километр), необязательность задания border=«0» cellpadding=«0», cellspacing=«0» на таблицах и куча таких неточностей по тексту без каких-либо примеров кода.

Если вам нужно, действительно, верстать письма, лучше почитать публикации здесь dudeonthehorse %)

[lol_wat]

Кох очень крутой, это да. Насчет примеров кода — мы подумываем сделать про это отдельный туториал. Если это будет интересно аудитории (как раз сегодняшним постом и проверим)

[dudeonthehorse]

Примеры кода это всегда интересно. Будет, что обсудить.

Но главный недостаток подобных статей в том, что они все же поверхностны. Много воды, спорных и ненужных фактов. Преувеличения относительно ужасного аутлука и ни слова как делать адаптивные письма для почтовиков, которые не поддерживают media_queries, а это gmail(ios, android), yandex mail(android)

[eterevsky]

Мне кажется, главное правило: посылайте сообщения plain text'ом.

[lol_wat]

На самом деле нет :)

[eterevsky]

Дело вкуса, я понимаю. Но лично я к plain text-письму изначально более серьёзно отношусь, чем к письму в HTML. Если я вижу, что письмо в HTML, моя изначальная установка — что это скорее всего реклама, рассылка или что-то в этом роде.

[lol_wat]

Ну тут просто какой-то стереотип о том, что рассылка — это плохо. Если же ни на что не подписывались, а что-то получили — тогда конечно, неприятно. А если сами подписались на новости условной Мосигры и вам пишут про новые настолки, то можно и картинки посмотреть.

Здесь материал именно о том, как создавать рассылки для тех, кто сам подписался.

[eterevsky]

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

[zmeika]

В рассылках Мосигры как раз и нет никаких картинок. И это практически единственная рассылка, на которую я сама подписалась и каждое письмо которой я читаю от начала и до конца, а не проглядываю заголовки за 10 секунд.

[lol_wat]

Ну не нужно уж придираться к словам, это было в качестве примера. У того же Мегаплана картинки бывают, и рассылка от этого хуже не становится. Главное, чтобы человек хотел получать письмо и сам подписался для этого.

[Milfgard]

Мы гоняли АБ-тесты неоднократно. Те же версии с картинками проигрывают на 10%.

[dudeonthehorse]

Вы не поверите, но рассылка Мосигры сверстана мной. Да там не картинок, но причесана типографика и проведены тесты на мобильниках. И письмо не является plain/text.

[Milfgard]

Подтверждаю. Основная проблема, которая при этом решалась в сравнении с plain — некоторые косяки с телефонной версией. А у dudeonthehorse есть целый цикл топиков, как не облажаться.

[wombtromb]

Спасибо за статью, по своему опыту знаю, что верстка адаптивных писем та еще головная боль. К сожалению очень много нюансов всплывают только при личном опыте. И в лучшем случае еще можно установить причину проблемы. Например, не так давно сталкивались с проблемой, что приложение Mail для Mac'a слишком сильно блюрит масштабируемые изображения при алиасинге. Я даже не уверен правда это или нет. Единственное, что заставляет так думать — это то, что при сочетании условий, когда вписываемый контейнер таков, что величина масштаба изображения — целое число, то изображение не блюрится. Не могу даже вспомнить, как пришло в голову это проверить.

После такого, конечно, хочется чтобы был только plain text. Так что, всем, кто верстает email-ы могу пожелать только удачи.

[dudeonthehorse]

Как правило можно обойтись трансформациями изображений 2 к 1 для ретины. и 600 к 300 для десктопа/мобильника. И проблем с искажениями не будет.

[antirek]

Рекомендую github.com/bevacqua/campaign — верстаешь и отправляешь. Есть прикольные фишки типа teaser'а, headerImage'а, режим отладки. Можно использовать шаблонизаторы html.

[dudeonthehorse]

«Секрет вёрстки двухколоночных шаблонов HTML-писем для отображения на маленьких экранах залючается в помещении каждого столбца в отдельную таблицу. Затем для каждой HTML-таблицы нужно использовать встроенный CSS для float:left и HTML align=”left” для выравнивания всего контента в столбце по его левому краю. Затем в описание нужно добавить определение class=”email”, а в ячейки — class=”email-content”.»

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

Так же вынесенный стиль для .flex-item

<!--[if gte mso 9]>
	<style>
		.flex-item { width:100% !important; }
 	</style>
<![endif]-->

[dudeonthehorse]

По тексту нас пугают Лотусом и аутлуком, но ни слова о the Bat!.. Лотус действительно крайне чувствителен к верстке и если его поддержка нужна, то к дизайну письма стоит подходить крайне осторожно и минималистично. В аутлуке нет ничего невозможного. Все можно решить хаками и вынесенными стилями(да-да!), а вот the Bat! — это такой капризный ребенок вроде аутлука, вот только хаков для него нет.

[dudeonthehorse]

<p style="color: red;"></p>

А вот с этим я бы не рисковал. Некоторые почтовики обрезают отступы абзацев, а при попытке задать их напрямую через css, можно получить непредсказуемый результат в других почтовых клиентах. Куда проще использовать для этого div. Его можно и нужно использовать только для двух вещей по моему мнению:

1. Форматирование текста

<div style="font-family:arial; font-size:14px; color:#666666;">Текст</div>

2. Выравнивание элементов

<div align="center"><img src="button.png"></div>

А отбивать абзацы можно банальным двойным br

[dudeonthehorse]

Также именно для div можно задавать line-height. Я указываю его в EM. Но и тут есть нюанс, для аутлука интерлиньяж необходимо обнулять.

<!--[if gte mso 9]>
	<style>
		.div { line-height:normal !important; }
 	</style>
<![endif]-->

[Leony]

А только у меня теги, указанные в тексте, отсутствуют, напр, в фразе: «что в тегах,,,, и других не хватает „