10 рекомендаций по html-верстке электронных писем

[bobermaniac]

Первое правило верстки писем в HTML — не пишите письма в HTML.

[Aralot]

честно говоря, сам никогда в жизни не писал :) (поэтому и возникло столько неожиданных трудностей)

а вот для корпоративной рассылки — понадобилось

[3em]

Речь идет не об обычных письмах, а о «рассылках». Такой «спам» подразумевает картинки и более-менее оформленный текст.

[Gesper]

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

[shiko_1st]

А если заказчик пожелает рассылать по почте файло по 100 мегабайт? Тоже под козырек возьмете, или все же обнаружите в себе специалиста, и попробуете разъяснить заказчику, в чем именно он не прав?

[yukey]

Года через четыре эта фраза будет звучать так же, как сейчас прозвучала бы «а может вы в письме историю переписки не удаляете и еще аттачи по 500 кБ прикладываете? „

[Kaputmaher]

Нет, через четыре года так еще не будут делать.

[m0sk1t]

Даже через шесть лет…

[ozonar]

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

[AlexSuslin]

а сегодня, наверное, отдельная почтовая программа это уже архаизм

[seaji]

У меня заказчик рассылает по 5-6 тыс. писем, в каждое письмо кладет картиночку в жпеге весом 200 — 300 кб (подсчитать объем трафика можете?), а в картиночках почти сплошной текст.
Я им уже 150 раз говорил, чтоб делали картиночку в гифе, не а, не понимают :(

ЗЫ. спамом не занимаюсь. все по подписке.

[allter]

Вы пробовали? В RFC на относительные URL`ы говорится ясно: для multipart/* частей базовый URL — это сам контейнер, т.е. //host/path в них работать не должен. Только с указанием схемы. А Болк писал про https:/http: URLы.

P.S. Впрочем, в рассылках, ориентированных на web-мэйлы, это, возможно, сработает. Но идея вставлять ссылки на картинок вместо самих картинок — плоха.

[Kirpichtion]

Почему?

[bobermaniac]

Полно ответов в комментариях.

[Aralot]

ваша правда, сейчас поправлю в тексте…

[proc]

11) Если делаете письмо в HTML, то обязательно(!!!) шлите вместе с ним письмо в тексте.

[not_ice]

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

[Newton]

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

[Aralot]

идеологически я с вами согласен, но…

[bioroot]

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

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

[Aralot]

ну это уже дело программистов — как на сервере это письмо генерировать, чтобы картинки показывались… вроде как у нас как раз в base64 кодируется :)

[bioroot]

Ну это смотря чем вы занимаетесь. Если просто верстаете основной шаблон, то это действительно не ваша проблема.

Программистам же могу посоветовать почитать что-то типа этого: www.spravkaweb.ru/php/sovet/mail/image
Коротко и корявенько, но по делу. Суть в том, чтобы пришивать файл к самому письму, а в аттрибуте src тега img cid-идентификатор. Суть в том, что т.к. такая картинка не берётся из внешнего источника она скорее всего не будет порезана почтовиком как возможно небезопасная. Так что письмо сразу отразится по-человечески.

[flaresun]

Вот здесь достаточное количество информации по письмам. Делали рассылку с вложенными изображениями, работает нормально, только на mail.ru отображается немного иначе, на остальных сервисах и в почтовиках отображается как и задумывалось. На mail'е добавляются только отступы большие, в остальном письмо такое же…

[LophophoraWilliamsii]

возможно отступы у вас были вот в связи с чем:

на mail'е добаляются отступы из-за табов в структурированом коде.

тоесть если в коде было:

<table>
   <tr>
      <td>
         какая-то фигня
      </td>
   </tr>
</table>

то при просмотре письма в веб-интерфейсе будут отступы.

А если в коде будет:

<table>
<tr>
<td>
какая-то фигня
</td>
</tr>
</table>

то отступов не будет

[Aralot]

насколько я понял, отступы там добавляются попросту из-за перекрывания стилей — попробуйте посмотреть фаербагом

[flaresun]

Да не, с табами всё нормально
В изначальном шаблоне письма они есть, но зачем их слать в письмах :) шаблон обрабатывается и лишнее всё удаляется при формировании письма. Отступы появляются из-за мэйловских стилей…

[spaceblock]

Да, так и есть, сделал только что.
Спасибо!

[MastaEx]

Для меня тема весьма актуальна, так что буду рад новым публикациям, спасибо за эту.
Изучил приведенные в конце поста ссылки, увидел, что сервис по рассылкам получает статистику об открытых, forwarded и даже помеченных как спам письмах из рассылки — как они это делают? На ум приходит только картинка-счетчик и сбор авто ответов о прочтении (), но эти цифры не дадут точной картины… А уж forwarded и помеченные как спам… Просветите меня, а?

[Novikov]

Мы для себя установили правило: письма — только в plain text. Даже редкие рассылки.

[tenshi]

есть мнение, что в письмах нужно посылать гипертекст, а не вэб-страницы…

[grossu]

Реально 90-е. А в чем интересно проблема, поддерживать стиль, css?
Кстати Mail Apple читал css вложенную.

[Gesper]

Web-интерфейсы многих почтовых сервисов режут стили.

[MTonly]

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

[MTonly]

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

[MTonly]

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

[MTonly]

В каком фрейме? Во фрейм выводится то, что посчитает нужным вывести программист веб-интерфейса. Никакого JS там не будет, а всем ссылкам в письме можно автоматически проставить какой угодно target.

[MTonly]

Или я вас не вполне понимаю, или вы не вполне понимаете, о чём говорите.

[MTonly]

фрейм, как не ухищрайся, может содержать в себе потенциальный риск

Жесть.

[allter]

Вы, видимо, ещё ни разу не сталкивались лично с другой расшифровкой аббревиатуры CSS: XSS.

Поясните, каким образом вы собираетесь создавать фрейм? iframe?

[MTonly]

Фрейм или не фрейм, в плане безопасности в рамках веб-интерфейса почты не играет никакой роли: и страница, и фрейм, в неё включённый, генерируются средствами одного и того же сайта, и код их сколь угодно безопасен вследствие сколь угодно строгой фильтрации исходного кода письма.

[allter]

Сколь угодно строгая — это отключение большинства стилей вообще для предотвращения фишинга? Так об этом и тред.

Но вот в том, что скрипты легко обрезать, не обрезая при этом кучу сторонней функциональности, вы не правы, мне кажется.

[MTonly]

Речь в ветке только и именно о том, чтобы сохранить стили и не провоцировать применение нарочитого old-school-HTML в HTML-письмах.

Фрейм нужен только для исключения конфликтов со стилями «обвязки» веб-интерфейса почты. Скрипты (элементы script и обработчики в атрибутах) вырезаем (с использованием DOM-парсера задача простейшая). По-прежнему что-то неясно? ;-)

[MTonly]

А в чем интересно проблема, поддерживать стиль, css?

[MTonly]

(Хм. Продолжение:)
В горе-программистах, пишущих почтовые сервисы.

[JerryJJ]

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

[cybd]

сказали бы вы это заказчику

[JerryJJ]

А статистику по читаемости расылки у клиентов собирали?

[dime]

Речь не про шефа, а про заказчика. Заказчику говорили? Он после этого не пожал плечами и не пошёл к другому подрядчику, который не встаёт в позу, не говорит — «а пусть эту проблему решают мейл.ру и гымейл.ком», а просто делает то, что требуется? :)

[Aralot]

так я и подозревал, что будут такие гневные комментарии, т.к. им оказался ваш — вам и отвечу :)

а) я руками и ногами ЗА веб-стандарты;
б) в данном случае, статья — просто попытка облегчить жизнь тем, кто столкнулся вдруг с такой задачей;
в) с другой стороны:
— посмотрите на буржуйские интернеты: все рассылки приходят в формате HTML (причём, обильно сдобренные css'ом, видимо, динозавров типа mail.ru там не осталось);
— думаю, всем понятно, что красиво оформленное письмо «продаст» эффективнее и лучше (я не спам сейчас имею ввиду)
— это я не с потолка взял, а наткнулся в процессе гугления на иностранную статью-исследование (сейчас не могу ссылку найти, потом, возможно, повешу).

[Aralot]

я как-то запутался и ответил вам на то, что вы не писали :)

пункты б) и в) — это по поводу plain текста

[ambientos]

пральна! двачую)

[deniamnet]

а зачем семантика в html-письмах?

[deniamnet]

надо понимать, что html-письмо это не страница и не все правила для него работают, как уже было сказано выше
хотя я с вами согласен — лучше слать plain, чем кривой html

[Castro]

У меня во время приёма на работу в одну из контор были именно такое задание. Их и гемору я натерпелся тогда, потому что пришлось верстать практически чистым html

[andrew_b]

Так работодатели хотели показать, как рационально использовать время своих сотрудников?

[Castro]

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

[andrew_b]

Письма в HTML — это как обычные письма на ватмане.

[egorinsk]

Имхо, стоит отграничиться минимальным набором: h1-h6, p, ul, ol, dl, img, a и не пытаться превратить письмо в веб2.0 страницу.

[alexmegus]

Aralot, а вы, случайно, не в cpeople.ru работаете?

[Aralot]

нет, а откуда такие выводы? :)

(место работы у меня в профиле указано)

[alexmegus]

Aralot, пардон

Просто этот пост мне напомнил недавнюю историю.
Я делал один фриланс и в рамках работы нужно было создать email-рассылку, а дизайн письма делали ребята из вышеупомянутой компании. Так вот они повторяли все пункты описанные в статье :) В начале мне прислали html-шаблон, в котором все сверстано на дивах, после того как я протестировал его и понял, что нужно делать все в таблицах, они переделали в таблицы. Затем ошибка с выносом css в файл (об этом я даже не говорил им, проще было самому включить css в документ) и т.д. по списку в указанном вами порядке :)
Эта эпопея с переслыкой мне невалидного шаблона длилась недели две, пока терпение мое не кончилось и я набросал для них программу на C# через которую можно было отправлять html-письмо, скопировав код шаблона в поле ввода. Отправил прогу со словами :«Пока не протестируете не прислылайте шаблон». Ребята пропали месяца на два… и вот буквально два дня назад объявились, прислали письмо с протестированным шаблоном :) и тут этот пост…
Совпадение :)

[shiko_1st]

Гайдлайны для спамеров?

[FloppyFormator]

Вы что, те сплошной картинкой шлют )

[questor]

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

[notfidel]

По п. 3 — задание padding-left, padding-right. В комментариях уже было, я лишь подтверждаю, что в mail.ru работает так:

 <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td><img src="spacer.gif" width="10" height="1"></td>
      <td width="100%"></td>
      <td><img src="spacer.gif" width="10" height="1"></td>
    </tr>
</table>

По п. 9) картинки в оформлении. Я использую такой смешанный вариант (подходит для mail.ru, yandex, rambler, gmail.com):

<td background="http://www.moysite.ru/bg.gif" style="background:url(http://www.moysite.ru/bg.gif);">
<img src="spacer.gif" width="50" height="1">
</td>

p.s. В почтовых клиентах не проверял, что является упущением, конечно. Было бы интересно узнать статистику, сколько процентов пользователей ими пользуется. Как теперь вижу по комментариям — есть проблемы с отображением внешних изображений в почтовых клиентах.

[A1lfeG]

Пропустил заголовок и думал речь идет о вэб верстке. Сильно испугался. :)

[kellas]

красиво спамим

[ambientos]

Разметка в письмах не нужна совсем.

[Lufa]

>Самый распространенный почтовый сервис на данный момент (mail.ru)
Так уж самый распространенный?

[esc]

Ну а какой еще с ним по популярности сравнится? В России по крайней мере…

[Lufa]

Ну так… Автор не писал про РФ а про «Самый распространенный почтовый сервис на данный момент»…

[Aralot]

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

впрочем, в данном случае, возможно, вы правы :)

[piloter]

Сейчас занимаюсь вёрсктой для мобильных телефонов (xhtml mp) — та же ерунда, back to 90s.

[handymade]

полезно! спасибо.

[lugansk]

«10) программы и инструментарий … точнее его отстутсвие — для тестирования рассылки я, к моему сожалению (и удивлению), ничего лучше outlook express»

Я когда шаблоны для рассылки верстал, делал сообщение в виде обычного HTML, открыть в Опере или ИЕ и сохранял «как веб-архив», затем менял расширение с mht на msg, а уже msg-файлы замечательно импортируются в почтовые клиенты.

[lugansk]

… открывал…

[rybyakov]

Насчет паддингов на mail.ru, у них есть класс pad_null, если его поставить всем используемым тегам table — паддинги обнуляться.
Это свойство в css файле mail.ru помечено «для партнерских рассылок»…

[Aralot]

только вот как поставить класс, если стили режутся? :)

[rybyakov]

а вы попробуйте написать так:, увидите сами, это останется не тронутым. На mail.ru вырезается атрибут style (переименовывается в xstyle, как уже писали выше) и вырезается тег

[rybyakov]

Сорри. атрибут class в тегах не режется, режется тег style, который пишется в шапке HTML и содержит стили для используемых на странице классах. Поэтому использовать классы, которые определены в CSS файлах mail.ru можно, но лично я не нашел в них ничего полезного, кроме pad_null, который обнуляет отступы…

[Aralot]

ой, точно, торможу :)

обязательно попробую, спасибо!

[Aralot]

ура, работает! сейчас добавлю в текст статьи :)

[rybyakov]

пжлста)

[Alinaki]

Блин, мне аж поплохело.

[CLaiN]

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

[myadzel]

Мой Nokia Е60 распознает ip-адреса в сообщениях как номер телефона :-0.

Имхо, лучше хороший (оттипографленный и выверенный) plain, чем корявый html.

[silkleo]

Отличная статья, спасибо!