Комментарии 21
Спасибо за перевод,
но лично мое субъективное мнение, что чтение такого материала скорее во вред, полуработающие подходы типа использования
Если вам нужно, действительно, верстать письма, лучше почитать публикации здесь dudeonthehorse %)
но лично мое субъективное мнение, что чтение такого материала скорее во вред, полуработающие подходы типа использования
<p>
( обходить надо за километр), необязательность задания border=«0» cellpadding=«0», cellspacing=«0» на таблицах и куча таких неточностей по тексту без каких-либо примеров кода.Если вам нужно, действительно, верстать письма, лучше почитать публикации здесь dudeonthehorse %)
+2
Кох очень крутой, это да. Насчет примеров кода — мы подумываем сделать про это отдельный туториал. Если это будет интересно аудитории (как раз сегодняшним постом и проверим)
0
Примеры кода это всегда интересно. Будет, что обсудить.
Но главный недостаток подобных статей в том, что они все же поверхностны. Много воды, спорных и ненужных фактов. Преувеличения относительно ужасного аутлука и ни слова как делать адаптивные письма для почтовиков, которые не поддерживают media_queries, а это gmail(ios, android), yandex mail(android)
Но главный недостаток подобных статей в том, что они все же поверхностны. Много воды, спорных и ненужных фактов. Преувеличения относительно ужасного аутлука и ни слова как делать адаптивные письма для почтовиков, которые не поддерживают media_queries, а это gmail(ios, android), yandex mail(android)
0
Мне кажется, главное правило: посылайте сообщения plain text'ом.
0
На самом деле нет :)
0
Дело вкуса, я понимаю. Но лично я к plain text-письму изначально более серьёзно отношусь, чем к письму в HTML. Если я вижу, что письмо в HTML, моя изначальная установка — что это скорее всего реклама, рассылка или что-то в этом роде.
+3
Ну тут просто какой-то стереотип о том, что рассылка — это плохо. Если же ни на что не подписывались, а что-то получили — тогда конечно, неприятно. А если сами подписались на новости условной Мосигры и вам пишут про новые настолки, то можно и картинки посмотреть.
Здесь материал именно о том, как создавать рассылки для тех, кто сам подписался.
Здесь материал именно о том, как создавать рассылки для тех, кто сам подписался.
0
В этом контексте, конечно. Как и в нескольких других случаях, типа электронных билетов.
0
В рассылках Мосигры как раз и нет никаких картинок. И это практически единственная рассылка, на которую я сама подписалась и каждое письмо которой я читаю от начала и до конца, а не проглядываю заголовки за 10 секунд.
0
Ну не нужно уж придираться к словам, это было в качестве примера. У того же Мегаплана картинки бывают, и рассылка от этого хуже не становится. Главное, чтобы человек хотел получать письмо и сам подписался для этого.
0
Вы не поверите, но рассылка Мосигры сверстана мной. Да там не картинок, но причесана типографика и проведены тесты на мобильниках. И письмо не является plain/text.
+1
Подтверждаю. Основная проблема, которая при этом решалась в сравнении с plain — некоторые косяки с телефонной версией. А у dudeonthehorse есть целый цикл топиков, как не облажаться.
+1
Спасибо за статью, по своему опыту знаю, что верстка адаптивных писем та еще головная боль. К сожалению очень много нюансов всплывают только при личном опыте. И в лучшем случае еще можно установить причину проблемы. Например, не так давно сталкивались с проблемой, что приложение Mail для Mac'a слишком сильно блюрит масштабируемые изображения при алиасинге. Я даже не уверен правда это или нет. Единственное, что заставляет так думать — это то, что при сочетании условий, когда вписываемый контейнер таков, что величина масштаба изображения — целое число, то изображение не блюрится. Не могу даже вспомнить, как пришло в голову это проверить.
После такого, конечно, хочется чтобы был только plain text. Так что, всем, кто верстает email-ы могу пожелать только удачи.
После такого, конечно, хочется чтобы был только plain text. Так что, всем, кто верстает email-ы могу пожелать только удачи.
0
Рекомендую github.com/bevacqua/campaign — верстаешь и отправляешь. Есть прикольные фишки типа teaser'а, headerImage'а, режим отладки. Можно использовать шаблонизаторы html.
0
«Секрет вёрстки двухколоночных шаблонов HTML-писем для отображения на маленьких экранах залючается в помещении каждого столбца в отдельную таблицу. Затем для каждой HTML-таблицы нужно использовать встроенный CSS для float:left и HTML align=”left” для выравнивания всего контента в столбце по его левому краю. Затем в описание нужно добавить определение class=”email”, а в ячейки — class=”email-content”.»
Все верно, только с аутлуком будут необходимы пляски с бубном. Решается вставкой хаков. Пример по ссылке. Пример весьма условный и в нем используются фиксированные колонки. С резиновыми пока работаю. Надо провести множество тестов.
Так же вынесенный стиль для .flex-item
Все верно, только с аутлуком будут необходимы пляски с бубном. Решается вставкой хаков. Пример по ссылке. Пример весьма условный и в нем используются фиксированные колонки. С резиновыми пока работаю. Надо провести множество тестов.
Так же вынесенный стиль для .flex-item
<!--[if gte mso 9]>
<style>
.flex-item { width:100% !important; }
</style>
<![endif]-->
0
По тексту нас пугают Лотусом и аутлуком, но ни слова о the Bat!.. Лотус действительно крайне чувствителен к верстке и если его поддержка нужна, то к дизайну письма стоит подходить крайне осторожно и минималистично. В аутлуке нет ничего невозможного. Все можно решить хаками и вынесенными стилями(да-да!), а вот the Bat! — это такой капризный ребенок вроде аутлука, вот только хаков для него нет.
0
<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
0
А только у меня теги, указанные в тексте, отсутствуют, напр, в фразе: «что в тегах,,,, и других не хватает „
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
How-to: Правила вёрстки email-писем