Артур Кох

Привет. Я автор kilogram. На гитхабе нынче не очень хороший релиз. Предлагаю дождаться новой версии с документацией.

Яндекс и Мейл не поддерживают медиазапросы потому что лошадь в ванной с огурцами точка жпг.

Gmail и Google Inbox заявили о начале поддержки медиазапросов не более двух месяцев назад. Следовательно, если они и работаю, то скорее всего весьма сыро.

Верстайте без них. Ключевые слова: Max-width и inline-block;

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

Почитайте статьи на Хабре от меня(dudeonthehorse).

Медиазапросы не работают в Яндекс и Мейл приложениях на смартфонах от слова "совсем". До недавнего времени Gmail и Google Inbox они так же не работали, но сейчас идет процесс поддержки со стороны гугла.

На вопрос "Как сделать мобильную версию рассылки?" - использовать подход резиновой верстки без медиазапросов. Описан в статье https://webdesign.tutsplus.com/tutorials/creating-...

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

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

Если шаблонизация писем происходит на серверной стороне, то единый файл удобнее для понимания структуры. Если код писем без шаблонизации будет вставляться "as is", то второй вариант, само собой, удобнее.

Верстать дивами можно. В том числе для реализации адаптивности. Таблицы нужны для аутлука и задания отсступов padding. Отступы задаются ячейкам таблицы. Вертикальный margin можно использовать для блочных элементов

Image Map несовместима с резиновыми изображениями.
Все верно, надо резать картинку на десяток ссылок.

О градиенте можно забыть.

Шрифт подключайте через link тег. Вариант через import режется на уровне отправки во многих сервисах. Попутно прописывайте conditional comments для аутлука с указанием дефолтного шрифта, так как подключаемый шрифт выдаст times в аутлуке. Работать будет не везде, но тесты покажут общую картину.

Рекомендованный выше zurb не рекомендую. Это монстр, которым без глубокого понимания верстки писем работать не стоит.

1. Гуглите "email custom font". Влечёт за собой проблемы в аутлуке. Решается через выставление принудительного sans serif через conditional comments.

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

P.s. Litmus.com за $80 + iPhone и бюджетный андроид для мануального тестирования популярных мобильных почтовиков. В их по дюжине на каждо платформе. На винфоне только Аутлук :)

Решений нет

 Сверстать адаптивное письмо с интеграцией в блочный редактор мейлчимпа.

Есть и бескостыльный вариант. Основной оберткой письма должна быть фиксированная таблица. Каждая "строка" этой таблицы должна быть выполнена дочерней TD, а не независимым элементом. В таком случае Gmail просто не сможет скукожить тот или иной элемент.

Единственный более менее вразумительный ответ дал Денис Инешин. Тем не менее он очень не полон.

Технически верстка писем ничем не отличается от верстки сайтов. Но в случае сайтов нам нужно поддерживать грубо говоря последние версии четырех браузеров и несколько версий IE. В случае писем поддержка может выливаться более, чем в 40 почтовых клиентов, вебсервисов и мобильных приложений. Если браузеры более-менее смогли договориться о стандартах, то почтовики - нет. У каждого почтового клиента есть ряд нюансов, который усложняет процесс разработки. Для максимальной поддержки необходимо использовать огромное количество костылей таким образом, чтобы они не мешали друг другу в разных почтовиках.

Ваш пример с тостером реализован слабенько. Плохая поддержка мобильных и старых почтовиков. Если вы из тех нытиков, которые не хотят/не могут поддерживать старые версии IE в сайтовой верстке, то верстка писем не для вас.

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

Основным источником заработка на верстке писем является работа с крупными компаниями, которые занимаются email маркетингом. Ниша практически не занята. Качественных исполнителей практически нет.

Сбросьте тест на Dudeonthehorse@yandex.ru
Впервые слышу о такой проблеме

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

JS в письмах не работает.

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

Счетчик реализовать можно, но только средствами GIF. При этом надо обойти кэширование графики почтовыми системами. Вот, например, чуваки из SenSay сделали счетчик https://sendsay.ru/archive/1g-A1R8fyGTwLFUNeRtxBQX...
Но из-за кеширования у него жесткая рассинхронизация