Всем привет! Скажите пожалуйста как сегодня верстают email-письма? Есть тестовое задание - сверстать письмо, чтобы отображалось во всех почтовых клиентах. Макет email-письма достаточно большой, много картинок. С версткой писем никогда дела не имел, знаю, что надо все таблицей делать. Вот и есть пару вопросов ... как подгружать картинки, как протестировать во всех популярных почтовых клиентах, какие популярные? Как верстать адаптивно? И еще ... дали два макета, один с картинками, другой - без ... это две страницы верстать? Короче интересуют все нюансы подобной верстки.
Буду очень благодарен за любые советы, примеры кода)
Если требуется во всех почтовых клиентах (допустим Outlook 2011+), то офк онли таблички с инлайн стилями. Респонсив поддерживается адекватно только в эпл почте + имеется гибридный подход для gmail, но он геморойный.
Вообще норм люди делают подобные вещи с помощью вот таких штук foundation.zurb.com/emails.html
Руками только наркоманы все верстают, ибо повесится можно.
xtala zen: да. Можно одно письмо статично делать, можно прям с наворотами, аля sass и так далее. Я на основе этого фреймворка сделал почтовый генератор с блэкджеком и путанами, делает настоящую магию и генерирует каждый день огромные сложные емейлы размером под несколько мегабайт (с учетом картинок конечно)
https://habrahabr.ru/company/pechkin/blog/255819/ https://habrahabr.ru/post/252279/
Таблицами по моему верстают не мастхэв, а вроде из-за удобства. Этот стиль верстки был популярен во времена веб 1.0. Сейчас это моветон уж не знаю чего ради он опять стал модным.
Две страницы это скорее всего два стиля под разные экраны (широкий десктоп и мобильный) которые вы должны будете подсовывать в зависимости от разрешения оного.
И еще вроде как стили верстаются инлайново т.е. прямо в тегах без использования стилевых файлов. Это конечно неудобно.
Но я могу ошибаться так что не обессудьте.
Если удобством называть идентичный вид в разных почтовых клиентах, то да, таблицами верстают из-за удобства. например тот же аутлук не распознает элементарный float:left и имеет проблемы с заданием ширины для блоков.
Вот тут вот что и чем поддерживается: https://www.campaignmonitor.com/css/
Я верстаю таблицами. Где можно css заменить атрибутами html - лучше это делать. Ну и пару постоянных проблем - адаптивность требуют постоянно, но никого не волнует, что она поддерживается только Яблуком, а также никто не понимает, как верстать под windowsphone, так как он работает по настроению.
xtala zen: а вы нормальной адаптивности не добъетесь. Когда мне говорят,чт нужно сделать адаптивно, я объясню, что медиа-запросы поддерживает только Яблуко. Обычно этого хватает, м я сверстаю в одном размере.
xtala zen: 600px. Иногда присылают макеты под 650рх, но я их все равно уменьшаются до 600 - чуть меньше отступы, чуть меньше картинки, текст - в общем, незаметно, но по стандарту.
