Pull to refresh

Comments 81

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

В почтовых клиентах фоновые картинки — дохлый номер. В некоторых веб-интерфейсах еще может быть и прокатит, но тут, как говорится, пальцем в небо. Фон для body срабатывает в бОльших случаях, но, как вы понимаете, тут речи о кроссмейлерности быть в принципе не может
Я тогда забил.
Но поздравляю, что получилось. При случае попробую потестить
Спасибо,
учтите только, что тестировать допустим из thunderbird такие письма у меня не получилось. При вставке html в тело письма громоптица съедает namespace у html и body (хотя думаю не только она). Так что нужно или через сервис тестировать, или через какой-то серверный скрипт отправлять.
А теперь повторите это в the bat! и thunder bird

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

Про ранние версии thunderbird и the bat сказать ничего не могу, ни под рукой нет, ни в litmus, ни в рамках моего текущего ТЗ этих почтовиков нет. Но верю конечно, 100% схожести во всех возможных клиентах не добиться.
И тем не менее Outlook — это ощутимая доля.
Никогда, особо не заморачивался над вёрсткой писем… Стоит задуматься.
Чем бы еще быстро проверять кроссмейлерность?
сервисы отвечающие за массовую рассылку имеют инструментарий для быстрого тестирования.
кстати, не подскажете парочку годных сервисов таких?
Лично пользуюсь отечественным www.mailcube.ru уже не первый год, доволен. Единственное, чего там не хватает – это готовые шаблоны или возможность их хранить.

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

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

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

Таких «нюансов» много. Я их выписывал когда-то на своём форуме. Конкретно по вёрстке писем: forum.artof.ru/showthread.php?t=311.
Довольно много слышал о проблемах с mail.ru но по факту с ними не сталкивался. Для рассылки использовал этот сервис и с мэйлом мы жили дружно. Буду работать в этом направлении.

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

Создание костылей для ровного отображения без картинк этого граничит с извратом :)
Все веб-разработчики извращенцы по-своему ©
А вот письма постоянным клиентам… А если это социальный сервис с новостной рассылкой на сто тыщ человек… и тоже ведь имеет место быть дизайн письма. Хотя я за минимализм. Дизайн должен быть простым, не навязчивым и не отвлекать от сути текста. Ведь, в основном, письма нужны, чтобы читать, а не дизайнерской мыслью восхищаться.
UFO just landed and posted this here
Хотя бы то, что я не имел проблем с mail.ru — уже является весомым плюсом.
Работал с Ultimate версией, оперативный саппорт, отличная детальная статистика, файловый хостинг с сокращалкой ссылок, быстрое тестирование верстки практически по всем перечисленным в статье почтовикам/интерфейсам.
Из минусов — отдаленность серверов. Порой сказывалось на скорости работы.
Если говорить о верстке под различное легаси, то надо вспомнить и более древние почтовые клиенты, такие как 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-пиксельные артефакты в размер распорки
у некоторых моих знакомых стоят версии 10 летней давности
[занудство]А у моих некоторых знакомых до сих пор стоит ie6[/занудство]

А по делу — вы все верно сказали, если принимать во внимание «ископаемые» почтовики.
А почему не
<div style="width:20px"> </div>
вместо blank.gif для отступов?
<img src="blank.gif" style="width:20px;">
Хотя бы потому, что div — блочный элемент, и ширину для него устанавливать — нелогично. К тому же не вижу смысла мудрить с дивами, раз уж все делается на таблицах. В нашем случае минимум кода — не торт.
Т.е. если верстать таблицами, то использовать div — нелогично? А если верстать блочно, то нелогично использовать таблицы? По-моему чушь. А использовать img для отступов логично?
Но вопрос не в этом. Каждый может верстать как ему нравится, главное, чтоб это доставляло ему удовольствие, было читабельно, коссбраузерно(в данном случае «кроссмейлерно») и т.д.
Вопрос в другом — будет ли «кроссмейлерно» использование div вместо img, исходя из вашего опыта?
Не будет. Что такое div? Это блочный элемент. Гипотетически мы могли бы использовать его лишь для задания вертикальных отступов, потому как если мы замахнемся на горизонтальные отступы при помощи того же div, то нам придется лишать его фактической блочности посредством float'ов. А где float'ы, там и clear'ы. Мало того, что это приведет к еще большей сумятице кода, но дополняет картину тот факт, что эти самые float'ы, там и clear'ы так же далеко не всеми интерфейсами/клиентами воспринимаются.
Ну и наконец, почему же не стоит использовать div с заданной высотой для вертикального отступа: парсер увидев пустой div с заданной высотой подумает — «А на кой этот див нужен? Он же пуст!», даже не обратив внимание на заданную высоту.
Причём тут 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.
А пробел можно заменить &nbsp;
Я понял вашу мысль. Но вашим примером желаемого не добиться. Вы пытаетесь указать для div ширину в 20px. Но этого просто неправильно, т.к. у блочного элемента по умолчанию ширина равна 100%, и в вашем случае 20px = 100%, следовательно это тоже самое что вставить пустой див без параметров.
Я вижу, что вы хотите избавиться от вставки изображений, но blank как раз и обеспечивает нам железные отступы. Сможете привести железно рабочий пример без blank'a — я и еще 300 добавивших в избранное плюсанем вас.
Ура)) Я был не вкурсе т.к. уже с полгода не занимался вёрсткой писем. Но новость радостная :) Спасибо :)
Спасибо за статью. Есть несколько полезных моментов.
Тоже мучался с рассылкой, и в первых вариантах использовал дивы, бекграунд и прочие радости css. Потом пришлось все переделывать в таблицы.
Но все равно разные почтовые сервисы по разному режут стили. Если в gmail разрешено почти все, то mail.ru (которых большинство в моем списке рассылки) оставляет почти голый html без стилей и верстка разлезается куда попало.
Да, я читал эту статью. Но, согласитесь она слегка сумбурна и поверхностна. При этом я не отрицаю факт ее полезности.

Mail.ru, почты Яндекса и Рамблера вырезают весь css, поэтому верстать надо с помощью HTML3.2;
Режутся общие стили в head. Инлайновые работают отлично.
Хотел бы отметить прекрасное решение для автоматического инлайна стилей — premailer.dialect.ca/
Выполнен на руби, исходники есть на гитхабе. Используя подобные вещи, можно верстать письма с помощью CSS и инлайнить стили автоматически перед отправкой письма.
Так же есть еще вот это — inlinestyler.torchboxapps.com/

Но этот сервис не очень хорошо дружит с переносами строк, так что ваш предпочтительнее.
Не хватает пояснения по вставке рисунков, а так все правильно.
Все рисунку нужно вставлять в тело письма, т.к. все современные почтовые клиенты в борьбе со спамом секут внешние рисунки типа src=«mysite.ru/blank.gif...».
Про то как вставлять рисунки, multipart и про src=«cid:blank.gif» я думаю говорить особо не нужно, большинство библиотек это делают уже не криво.
На моей практике не было эксцессов с рисунками типа src=«mysite.ru/blank.gif...»
Единственное, что могу добавить по этому поводу, количество текста в письме должно сильно превышать количество графики, иначе письмо попадет в спам. Алгоритм вычисления этого остается загадкой, но тестовые рассылки еще никто не отменял.
Картинки через мультипарт и cid: лучше тем, что, например, thundebird при открытии письма спрашивает «подгрузить содержимое со стороннего сайта»? и пока не подгрузишь письмо выглядит криво. А cid: картинки он показывает сразу. Мы используем полностью собственный инструмент для рассылок, там из картинок которые шлются не мультипартом только однопиксельная трекинг-картинка.

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

Соотношение графики и текста — это уже из области работы алгоритмов спам-фильтров. С удовольствием бы об этом почитал.
ну я имею в виду что например на новый год мы делали рассылку состоящую фактически из 1 картинки- открытки, яндекс/мейл/spamassasin/тандерберд/the bat/outlook ее как спам не определили
А вот это уж странно. Я долго боролся с фильтром gmail и outlook 2003, чтобы пропустил письмо. Прошло после уменьшения картинки 600x400px в 2 раза.
Возможно это из-за того что вы картинки прилагаете через example.com/image.gif а я через cid:image_gif
Как раз может быть. Но мой сервис не имеет такой возможности. Из популярных сервисов не подскажете поддерживающий подобное?
Не знаю, у нас самописное решение для орагнизации рассылок, специально заточненное под наши требования (трекинг переходов и путей по сайту после переходов и еще всякие мелочи :)
Могу добавить что MS Outlook 2007 поддерживает «растягивание» картинок, например того-же самого blank.gif, только до определенного размера (на вскидку что-то около 80 пикселей).
Растягивать blank вы можете везде. Я говорил о том, что растягивания неблагоприятно скажутся на визуальных качествах изображения.
Mail.ru — главный враг верстальщиков рассылок. Издеваются над поддержкой тегов и параметров только так. Извините, эмоция захлестнула.

Статья хорошая очень, спасибо. Хочу добавить о необходимости прогонять весь текст через типограф и дотошном слежении за кавычками.
Спасибо, как раз вовремя пригодилась
Считаю, что в большинстве случаев для писем достаточно plain text.
В остальных случаях статья будет полезна. =)
Спасибо!
Согласен. В топку письменный HTML.
Достаточно, да, но великое и ужасно «хочу» от заказчиков слышали, наверное, все.
На вскидку, HTML нужен когда необходимо послать письмо о том, что создан заказ в интернет-магазине. К примеру, на Амазоне очень много данных о заказе и форматировать его в plain-text, думаю, было бы безумием.
90% plain text достаточно
Статья не первой свежести — как никак июнь 2008. То, что она прям хорошая так же не сказал бы, много букв и мало смысла. Некоторые замечания не верны. Расписано как нужно верстать туда, и как туда. Мне кажется подход «так надо верстать для всех клиентов» будет более правильным.
Спасибо, скриншотиков бы еще, с примерами
Я, конечно, понимаю, что «книжки с картинками» куда интереснее, но что тут показывать? Я лишь рассказал о том, как нужно верстать то, что мы уже давно привыкли видеть, и на картинках вы ничего нового не увидите.
Вы не могли бы рассказать, зачем вообще использовать HTML в письмах? Я стараюсь настраивать все клиенты так, чтобы отображался только простой текст, но иногда присылают только HTML. Совершенно не понимаю, какая может быть польза от него. Казалось бы, есть уведомление, подробности по ссылке, что может быть проще. Или ЦА активнее щелкает по цветным ссылкам?
Личное мое мнение — яркие расписные «елки-открытки» падающие в ящик — это ужасно!
А вот скажем письмо от сайта/компании с логотипом в уголке и выполненное в фирменных цветах(2-3 цвета) — хороший тон и солидность.
Я теоретически знал, что с версткой в письмах всё плохо. Но чтобы НАСТОЛЬКО…
Спасибо, очень полезная и информативная статья. Как раз надо, пойду верстать рассылочку)
Интересно, спасибо!

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

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

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


Это какой-то специальный профессиональный хак, или тупо забыли открыть head?
И есть ли вообще какие-то специальные хаки
Неоткрытый head — косяк верстальщика, другой причины никак не вижу.

Хаков как таковых нет. Хотя автор этого каммента говорил об особенностоях mail.ru
По поводу вашего примера в статье. Конкретно в даном случае полагаю было бы проще сделать с отсупами в таком виде:
<table align="center" width="800" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" bgcolor="#cccccc">
<tr>
<td>
<table width="760" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" bgcolor="#000000">
<tr>
<td width="370">smth</td>
<td bgcolor="#cccccc"></td>
<td width="370">smth</td>
</tr>
</table>
</td>
</tr>
</table>
Согласен, это будет работать в большинстве случаев, но не во всех. Парсеры такие разные :)
Нужно явно указывать все величины и ставить распорки-blank'и
Не могли бы вы уточнить в каких именно системах даная конструкция могла бы не сработать.
Наблюдалось в старых версиях lotus notes и apple mail. Парсер просто вырезал пустые ячейки.
Т.е. получается, что в качестве фона может быть только однотонная заливка?
Текст поверх изображения исключается вообще?
Да, именно так. В gmail и apple mail это провернуть можно, но из-за остальных клиентов отказ от этой реализации.
Либо это решается текстом в растровой картинке, т.е. нарисованным. Например «Learn more» на баннере в письме.
Only those users with full accounts are able to leave comments. Log in, please.