dudeonthehorse Jan 19 2011 at 20:08

Верстка почтовых рассылок

6 min

71K

CSS*Email layout*

Tutorial

From sandbox

+142

Comments 81

Yeah Jan 19 2011 at 21:12

Великолепная статья. Как раз недавно долго мучился с фоновой картинкой для MS Outlook 2003.

dudeonthehorse Jan 19 2011 at 21:23

Спасибо!

В почтовых клиентах фоновые картинки — дохлый номер. В некоторых веб-интерфейсах еще может быть и прокатит, но тут, как говорится, пальцем в небо. Фон для body срабатывает в бОльших случаях, но, как вы понимаете, тут речи о кроссмейлерности быть в принципе не может

Anton_Gorodezkiy Sep 19 2012 at 13:44

У вас получилось?
У меня получилось задать фоновые картинки в Outlook 2000 и выше через conditional comments и vml:
snipplr.com/view/64348/applying-background-images-to-table-cells--blog--campaign-monitor/

Yeah Sep 19 2012 at 13:45

Я тогда забил.
Но поздравляю, что получилось. При случае попробую потестить

Anton_Gorodezkiy Sep 19 2012 at 14:18

Спасибо,
учтите только, что тестировать допустим из thunderbird такие письма у меня не получилось. При вставке html в тело письма громоптица съедает namespace у html и body (хотя думаю не только она). Так что нужно или через сервис тестировать, или через какой-то серверный скрипт отправлять.

dudeonthehorse Sep 19 2012 at 13:46

А теперь повторите это в the bat! и thunder bird

Хотя мне кажется это не стоит тех мучений.

Anton_Gorodezkiy Sep 19 2012 at 14:16

В thunderbird 3, это конечно только догадка, подозреваю используется для рендеринга движок firefox или его часть.
Поэтому там и с css свойствами это было достигнуто.

Про ранние версии thunderbird и the bat сказать ничего не могу, ни под рукой нет, ни в litmus, ни в рамках моего текущего ТЗ этих почтовиков нет. Но верю конечно, 100% схожести во всех возможных клиентах не добиться.
И тем не менее Outlook — это ощутимая доля.

Palehin Jan 19 2011 at 21:20

Никогда, особо не заморачивался над вёрсткой писем… Стоит задуматься.

doozy Jan 19 2011 at 21:30

Чем бы еще быстро проверять кроссмейлерность?

dudeonthehorse Jan 19 2011 at 21:31

сервисы отвечающие за массовую рассылку имеют инструментарий для быстрого тестирования.

Terion Jan 20 2011 at 00:00

кстати, не подскажете парочку годных сервисов таких?

dudeonthehorse Jan 20 2011 at 00:09

webasyst и pardot

inntroverse Jan 20 2011 at 00:30

litmus.com/

Simba Jan 20 2011 at 12:49

Лично пользуюсь отечественным www.mailcube.ru уже не первый год, доволен. Единственное, чего там не хватает – это готовые шаблоны или возможность их хранить.

Ну и бонус: www.campaignmonitor.com/templates/

o_mega Jan 19 2011 at 21:43

На заметку — однопиксельную гифку «хавают» далеко не все почтовые программы, не говоря уже о веб-интерфейсовых сервисах, которые (большинство) просто вырубают картинки по-умолчанию и вся вёрстка, соответственно, ломается.

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

Ну и кстати, по тому же мейлру… Попробуйте создать нулевую (с border, padding, spacing — по нулям) табличку и посмотреть в веб-интерфейсе сервиса :) Там будут проставлены для таблиц здоровенные паддинги, от которых можно уберечься, только применив класс самого мейл.ру, который я обнаружил в их стилях — table.pad_null td{padding: 0 0 0 0}. Соответственно, применив данный класс к таблицам — получаем нулевой паддинг и можем спокойно верстать дальше.

Таких «нюансов» много. Я их выписывал когда-то на своём форуме. Конкретно по вёрстке писем: forum.artof.ru/showthread.php?t=311.

dudeonthehorse Jan 19 2011 at 22:01

Довольно много слышал о проблемах с mail.ru но по факту с ними не сталкивался. Для рассылки использовал этот сервис и с мэйлом мы жили дружно. Буду работать в этом направлении.

На заметку — однопиксельную гифку «хавают» далеко не все почтовые программы, не говоря уже о веб-интерфейсовых сервисах, которые (большинство) просто вырубают картинки по-умолчанию и вся вёрстка, соответственно, ломается.

Абсолютно согласен. Но даже в этом случае считаю, что blank.gif вполне справляется со своей задачей. Без подгрузки картинок любая верстка будет «не фонтан». А если можете отказаться от картинок, не верстайте письма ;) шлите текстовую версию.

o_mega Jan 19 2011 at 22:06

Да не в том дело, с однопиксельной-то :) Вот взять к примеру, тот же гмейл. Он же многие письма пишет «картинки, прикрепленные к данному сообщению, были отключены (включить)»… И покааа пользователь додумается, что их включить-то надо для красоты… уже десять раз успеет посмотреть «кривое» письмо и выключить его )))) Как вариант — текст моноширинным текстом с цветом фона. Но это ваще ппц, хотя и решает проблему.

dudeonthehorse Jan 19 2011 at 22:16

Я понял вас. Не сочтите меня идеалистом, но я считаю, что слать абы кому письма с рюшечками и хохломой не стоит. Красивые сверстанные письма в моем понятии ориентированы скажем на постоянных клиентов компании/сайта, для которых мы передаем послания обрамленные в фирменный стиль нашего сайта/компании. А постоянный подписчик имеет сообразительность включить адрес рассылки в список доверительных, что избавит его от получения кривых писем.

Создание костылей для ровного отображения без картинк этого граничит с извратом :)

o_mega Jan 19 2011 at 22:19

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

dudeonthehorse Jan 19 2011 at 22:23

Абсолютно с вами согласен.

UFO just landed and posted this here

dudeonthehorse Jan 20 2011 at 00:23

Хотя бы то, что я не имел проблем с mail.ru — уже является весомым плюсом.
Работал с Ultimate версией, оперативный саппорт, отличная детальная статистика, файловый хостинг с сокращалкой ссылок, быстрое тестирование верстки практически по всем перечисленным в статье почтовикам/интерфейсам.
Из минусов — отдаленность серверов. Порой сказывалось на скорости работы.

dudeonthehorse Jan 20 2011 at 00:29

mailchimp не юзал

WheelReinventor Jan 20 2011 at 06:02

Если говорить о верстке под различное легаси, то надо вспомнить и более древние почтовые клиенты, такие как TheBat или Netscape Messenger, которые имели собственные движки для отображения HTML. Почтовый клиент — это не та программа, которую можно быстро поменять, у некоторых моих знакомых стоят версии 10 летней давности.

Так как протестировать верстку на всем зоопарке невозможно, то можно использовать 2-3 браузера тех времен, скажем links или arachne. Стили они не поддерживают вообще, а те что поддерживают могут это делать некорректно.

Я бы рекомендовал заменить style=«height: ___» на просто height="___" у картинок, это поможет такому браузеру как links отображать отступы корректно (все примеры из статьи я проверял на нем), поэтому с «Это можно реализовать через атрибуты width и height, а так же через css в атрибуте style тега img — разницы нет» я не согласен, это же относится и к тегу font вместо span.

Лучше использовать width и height одновременно, тогда точно не возникнет артефактов загрузки, если картинка внешняя

Вместо юникодных символов лучше использовать графические изображения, так как links по началу отобразил • как 3 символа из latin1

Графический фон конечно нельзя, но никто не мешает сгенерировать пару заголовков уже с текстом и вставить в код как обычные картинки. Главное не переусердствовать и не оставить только 1 большую картинку, ибо некоторые почтовики вообще отключают картинки (спасибо спаммерам), в этом случае код письма должен содержать только текстовую версию.

Кстате, links рисовал уголки у картинки, выглядело это как 1-пиксельные артефакты в размер распорки

dudeonthehorse Jan 20 2011 at 06:17

у некоторых моих знакомых стоят версии 10 летней давности

[занудство]А у моих некоторых знакомых до сих пор стоит ie6[/занудство]

А по делу — вы все верно сказали, если принимать во внимание «ископаемые» почтовики.

kratkar Jan 20 2011 at 12:28

А почему не
<div style="width:20px"> </div>
вместо blank.gif для отступов?
<img src="blank.gif" style="width:20px;">

-1

dudeonthehorse Jan 20 2011 at 12:36

Хотя бы потому, что div — блочный элемент, и ширину для него устанавливать — нелогично. К тому же не вижу смысла мудрить с дивами, раз уж все делается на таблицах. В нашем случае минимум кода — не торт.

kratkar Jan 20 2011 at 13:00

Т.е. если верстать таблицами, то использовать div — нелогично? А если верстать блочно, то нелогично использовать таблицы? По-моему чушь. А использовать img для отступов логично?
Но вопрос не в этом. Каждый может верстать как ему нравится, главное, чтоб это доставляло ему удовольствие, было читабельно, коссбраузерно(в данном случае «кроссмейлерно») и т.д.
Вопрос в другом — будет ли «кроссмейлерно» использование div вместо img, исходя из вашего опыта?

dudeonthehorse Jan 20 2011 at 13:13

Не будет. Что такое div? Это блочный элемент. Гипотетически мы могли бы использовать его лишь для задания вертикальных отступов, потому как если мы замахнемся на горизонтальные отступы при помощи того же div, то нам придется лишать его фактической блочности посредством float'ов. А где float'ы, там и clear'ы. Мало того, что это приведет к еще большей сумятице кода, но дополняет картину тот факт, что эти самые float'ы, там и clear'ы так же далеко не всеми интерфейсами/клиентами воспринимаются.
Ну и наконец, почему же не стоит использовать div с заданной высотой для вертикального отступа: парсер увидев пустой div с заданной высотой подумает — «А на кой этот див нужен? Он же пуст!», даже не обратив внимание на заданную высоту.

kratkar Jan 20 2011 at 13:46

Причём тут clear и зачем лишать блочности? Вместо:
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
писать
<td style="width:20px;"><div style="width:20px;"> <div&gt</td>
и никаких clear.
А пробел можно заменить  

dudeonthehorse Jan 20 2011 at 13:56

Я понял вашу мысль. Но вашим примером желаемого не добиться. Вы пытаетесь указать для div ширину в 20px. Но этого просто неправильно, т.к. у блочного элемента по умолчанию ширина равна 100%, и в вашем случае 20px = 100%, следовательно это тоже самое что вставить пустой див без параметров.
Я вижу, что вы хотите избавиться от вставки изображений, но blank как раз и обеспечивает нам железные отступы. Сможете привести железно рабочий пример без blank'a — я и еще 300 добавивших в избранное плюсанем вас.

dudeonthehorse Jan 21 2011 at 23:46

Ваши доводы о мейл.ру немного не актуальны :)
habrahabr.ru/blogs/css/112307/

o_mega Jan 22 2011 at 16:32

Ура)) Я был не вкурсе т.к. уже с полгода не занимался вёрсткой писем. Но новость радостная :) Спасибо :)

Ftornik Jan 19 2011 at 21:46

Спасибо за статью. Есть несколько полезных моментов.
Тоже мучался с рассылкой, и в первых вариантах использовал дивы, бекграунд и прочие радости css. Потом пришлось все переделывать в таблицы.
Но все равно разные почтовые сервисы по разному режут стили. Если в gmail разрешено почти все, то mail.ru (которых большинство в моем списке рассылки) оставляет почти голый html без стилей и верстка разлезается куда попало.

Gero Jan 19 2011 at 22:01

habrahabr.ru/blogs/webdev/106387/

dudeonthehorse Jan 19 2011 at 22:08

Да, я читал эту статью. Но, согласитесь она слегка сумбурна и поверхностна. При этом я не отрицаю факт ее полезности.

Mail.ru, почты Яндекса и Рамблера вырезают весь css, поэтому верстать надо с помощью HTML3.2;

Режутся общие стили в head. Инлайновые работают отлично.

shuruev Jan 20 2011 at 01:07

Хотел бы отметить прекрасное решение для автоматического инлайна стилей — premailer.dialect.ca/
Выполнен на руби, исходники есть на гитхабе. Используя подобные вещи, можно верстать письма с помощью CSS и инлайнить стили автоматически перед отправкой письма.

KaLGaN Jan 20 2011 at 14:12

Так же есть еще вот это — inlinestyler.torchboxapps.com/

Но этот сервис не очень хорошо дружит с переносами строк, так что ваш предпочтительнее.

dudeonthehorse Jan 20 2011 at 14:20

тогда к чему приведенная ссылка?

KaLGaN Jan 20 2011 at 14:26

К разнообразию. ;)

arbuzik Jan 19 2011 at 22:13

Хотя опыт верстки таких писем достаточно большой, всегда заглядываю в сравнительную таблицу www.campaignmonitor.com/css/

medvoodoo Jan 19 2011 at 22:17

Не хватает пояснения по вставке рисунков, а так все правильно.
Все рисунку нужно вставлять в тело письма, т.к. все современные почтовые клиенты в борьбе со спамом секут внешние рисунки типа src=«mysite.ru/blank.gif...».
Про то как вставлять рисунки, multipart и про src=«cid:blank.gif» я думаю говорить особо не нужно, большинство библиотек это делают уже не криво.

dudeonthehorse Jan 19 2011 at 22:29

На моей практике не было эксцессов с рисунками типа src=«mysite.ru/blank.gif...»
Единственное, что могу добавить по этому поводу, количество текста в письме должно сильно превышать количество графики, иначе письмо попадет в спам. Алгоритм вычисления этого остается загадкой, но тестовые рассылки еще никто не отменял.

rednaxi Jan 19 2011 at 23:01

Картинки через мультипарт и cid: лучше тем, что, например, thundebird при открытии письма спрашивает «подгрузить содержимое со стороннего сайта»? и пока не подгрузишь письмо выглядит криво. А cid: картинки он показывает сразу. Мы используем полностью собственный инструмент для рассылок, там из картинок которые шлются не мультипартом только однопиксельная трекинг-картинка.

А вот насчет графики и текста — ни разу с таким не сталивался.

dudeonthehorse Jan 19 2011 at 23:12

Соотношение графики и текста — это уже из области работы алгоритмов спам-фильтров. С удовольствием бы об этом почитал.

rednaxi Jan 19 2011 at 23:28

ну я имею в виду что например на новый год мы делали рассылку состоящую фактически из 1 картинки- открытки, яндекс/мейл/spamassasin/тандерберд/the bat/outlook ее как спам не определили

dudeonthehorse Jan 19 2011 at 23:35

А вот это уж странно. Я долго боролся с фильтром gmail и outlook 2003, чтобы пропустил письмо. Прошло после уменьшения картинки 600x400px в 2 раза.

rednaxi Jan 19 2011 at 23:37

Возможно это из-за того что вы картинки прилагаете через example.com/image.gif а я через cid:image_gif

dudeonthehorse Jan 19 2011 at 23:47

Как раз может быть. Но мой сервис не имеет такой возможности. Из популярных сервисов не подскажете поддерживающий подобное?

rednaxi Jan 19 2011 at 23:54

Не знаю, у нас самописное решение для орагнизации рассылок, специально заточненное под наши требования (трекинг переходов и путей по сайту после переходов и еще всякие мелочи :)

Omgovich Jan 19 2011 at 22:25

Спасибо, хорошая статья.

kevin Jan 19 2011 at 22:37

Могу добавить что MS Outlook 2007 поддерживает «растягивание» картинок, например того-же самого blank.gif, только до определенного размера (на вскидку что-то около 80 пикселей).

dudeonthehorse Jan 19 2011 at 22:44

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

thorgnir Jan 19 2011 at 22:56

Mail.ru — главный враг верстальщиков рассылок. Издеваются над поддержкой тегов и параметров только так. Извините, эмоция захлестнула.

Статья хорошая очень, спасибо. Хочу добавить о необходимости прогонять весь текст через типограф и дотошном слежении за кавычками.

YuriPikin Jan 19 2011 at 23:09

Спасибо, как раз вовремя пригодилась

pmurzakov Jan 20 2011 at 00:20

Считаю, что в большинстве случаев для писем достаточно plain text.
В остальных случаях статья будет полезна. =)
Спасибо!

Mirror Jan 20 2011 at 00:24

Согласен. В топку письменный HTML.

dudeonthehorse Jan 20 2011 at 00:31

повод для холивара ;)

Yeah Jan 20 2011 at 02:15

Достаточно, да, но великое и ужасно «хочу» от заказчиков слышали, наверное, все.
На вскидку, HTML нужен когда необходимо послать письмо о том, что создан заказ в интернет-магазине. К примеру, на Амазоне очень много данных о заказе и форматировать его в plain-text, думаю, было бы безумием.

drak Jan 20 2011 at 13:38

90% plain text достаточно

dudeonthehorse Jan 20 2011 at 13:57

Не судите по своим нуждам.

bomarsche Jan 20 2011 at 05:56

Хорошая статья на тему — http://sdelaisait.com.ua/how-to-code-html-email/

-1

dudeonthehorse Jan 20 2011 at 06:07

Статья не первой свежести — как никак июнь 2008. То, что она прям хорошая так же не сказал бы, много букв и мало смысла. Некоторые замечания не верны. Расписано как нужно верстать туда, и как туда. Мне кажется подход «так надо верстать для всех клиентов» будет более правильным.

kurd Jan 20 2011 at 08:45

Спасибо, скриншотиков бы еще, с примерами

dudeonthehorse Jan 20 2011 at 08:57

Я, конечно, понимаю, что «книжки с картинками» куда интереснее, но что тут показывать? Я лишь рассказал о том, как нужно верстать то, что мы уже давно привыкли видеть, и на картинках вы ничего нового не увидите.

neithere Jan 20 2011 at 09:52

Вы не могли бы рассказать, зачем вообще использовать HTML в письмах? Я стараюсь настраивать все клиенты так, чтобы отображался только простой текст, но иногда присылают только HTML. Совершенно не понимаю, какая может быть польза от него. Казалось бы, есть уведомление, подробности по ссылке, что может быть проще. Или ЦА активнее щелкает по цветным ссылкам?

dudeonthehorse Jan 20 2011 at 10:51

Личное мое мнение — яркие расписные «елки-открытки» падающие в ящик — это ужасно!
А вот скажем письмо от сайта/компании с логотипом в уголке и выполненное в фирменных цветах(2-3 цвета) — хороший тон и солидность.

pxx Jan 20 2011 at 10:40

Я теоретически знал, что с версткой в письмах всё плохо. Но чтобы НАСТОЛЬКО…

SidexQX Jan 20 2011 at 11:26

Спасибо, очень полезная и информативная статья. Как раз надо, пойду верстать рассылочку)

ikido Jan 20 2011 at 12:16

Интересно, спасибо!

Скажите, а вы знаете что-нибудь о белых горизонтальных полосах поверх контента (~20px), которые появляются в длинных письмах в последних аутлуках? Где-то читал что это из-за разбивки письма на «страницы», но так и не справился с этой проблемой…

dudeonthehorse Jan 20 2011 at 12:29

Не сталкивался с данной проблемой. Стараюсь не делать письмо > 1,5 высоты экрана. Все же не книгу шлем адресату.

Dlussky Jan 20 2011 at 14:29

Вопрос к знатокам в тему:

Разбираясь на днях, как устроены рассылки у серьезных людей, наткнулся на весьма необычный код:

<html>
<style type="text/css">
<!--
body {
  background-color: #4A5767;
}
-->
</style></head>
<body  background="http://###/bg.jpg" ...

Это какой-то специальный профессиональный хак, или тупо забыли открыть head?
И есть ли вообще какие-то специальные хаки

dudeonthehorse Jan 20 2011 at 14:48

Неоткрытый head — косяк верстальщика, другой причины никак не вижу.

Хаков как таковых нет. Хотя автор этого каммента говорил об особенностоях mail.ru

shel_ol Feb 8 2011 at 13:51

По поводу вашего примера в статье. Конкретно в даном случае полагаю было бы проще сделать с отсупами в таком виде:

shel_ol Feb 8 2011 at 14:43

dudeonthehorse Feb 8 2011 at 20:16

Согласен, это будет работать в большинстве случаев, но не во всех. Парсеры такие разные :)
Нужно явно указывать все величины и ставить распорки-blank'и

shel_ol Feb 9 2011 at 09:35

Не могли бы вы уточнить в каких именно системах даная конструкция могла бы не сработать.

dudeonthehorse Feb 9 2011 at 14:18

Наблюдалось в старых версиях lotus notes и apple mail. Парсер просто вырезал пустые ячейки.

vikont Mar 15 2012 at 11:50

Т.е. получается, что в качестве фона может быть только однотонная заливка?
Текст поверх изображения исключается вообще?

dudeonthehorse Mar 15 2012 at 12:13

Да, именно так. В gmail и apple mail это провернуть можно, но из-за остальных клиентов отказ от этой реализации.

dudeonthehorse Mar 15 2012 at 12:14

Либо это решается текстом в растровой картинке, т.е. нарисованным. Например «Learn more» на баннере в письме.

Show the best of all time