5 правил верстки email-писем от Печкина

[tbicr]

автоматический CSS-inliner

Где взять консольный вариант?

[dsosnin]

Его нет. Доступа по API к внутренним сервисам Печкина мы не планируем. Для дизайнеров и верстальщиков достаточно и такого инструмента.

[tbicr]

Может знаете аналоги?

[dsosnin]

Google. ;-) есть много разных открытых скриптов. На их основе вы сможете создать свой.

[Borodean]

Премейлер, гем для руби.

[tbicr]

Спасибо, нашел для питона и ноды (обсуждение на стеке).

[Stamm]

+ видео с railscast

[medvoodoo]

www.pelagodesign.com/sidecar/emogrifier/ как вариант, можно допилить под себя

[Fatal_Error]

6. Убедитесь что ваше письмо читается с отключенными картинками.
Как минимум в Gmail отображение картинок в письме по-умолчания отключены

[piromanlynx]

<img src="...base64ofPng...."> — но только небольшого размера, спасают от отключенных картинок в письмах

[sompylasar]

data-URI вырезаются, как минимум, в GMail. Работают content-id, указывающие на attachment (встраивал, используя PHPMailer).

[dsosnin]

о, про это можно написать целую статью. некоторые умельцы могут делать аналог ASCII-art так, что при отключенных картинках рассылка иногда смотрится даже лучше, чем при них.

[alist]

Если озаботиться поддежкой всякого безобразия вроде Outlook XP или 2003, то придется верстать таблицами и вспомнить про spacer.gif. Хорошо, что есть онлайн-сервисы вроде Litmus, которые показывают, как ваше письмо будет выглядить в разных клиентах. Оно стоит каких-то денег, но обычно достаточно сделать нормальные шаблоны, а потом уже новые письма делать по ним. И дальше вполне достаточно проверять для верности в Outlook.com и не тратить денег. Там микрософтовцы постарались часть косяков своих десктоп-продуктов воспроизвести, за что им спасибо. Не знаю, насколько это было сложно, но наверняка не тривиально.

[dsosnin]

Litmus, PreviewMyEmail, есть много продуктов. Печкин на базе Litmus предоставляет сервис для всех платных тарифах посмотреть как выглядит ваша рассылка перед отправкой. Но, если честно, мы не рекомендуем извращаться и поддерживать все-все-все, это просто не стоит тех усилий, особенно с Outlook 2003.

[ydnz]

Вот по всем этим правилам сверстали заказчикам подпись совсем недавно.
Но и это не уберегло.
Нашёлся таки клиент, пользующейся какой-то своей веб-почтой с TinyMCE в качестве текстового редактора
И этот TinyMCE взял и почистил стили, которые посчитал лишними и растянул таблицу на 100%

Так что, на всякий случай, следует ещё обращать внимание на то как будет выглядеть подпись, если удалить css весь или частично
Ну а про отключенные картинки, уже упомянули выше

[Abcd_Efgh]

Прошу простить за нескромный вопрос, но скажите: дизайн вашего сайта точно не взят у Mailchimp с рядом своих корректив, в том числе и не самых лучших корректив (таких, как кнопка «Зарегистрироваться», перемещённая вверх и выглядящая по стилю иначе, чем меню сайта)? А то уж как-то слишком похоже.

[dsosnin]

Да, мы — клон Mailchimp.

[micbsv]

За честность — спасибо! ;)

[r0ma]

Для тех кому интересна эта тема не будет лишним также ознакомится с таблицей поддерживаемых стилей в 10 наиболие популярных емайл-клиентах — www.campaignmonitor.com/css/

[dsosnin]

Это наш корпоративный блог, поэтому и пиарим ;-)

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