Задача.
Адаптивный шаблон товарной рассылки. учитывать все почтовые клиенты
Первый вариант.
Шаблонизатор Zurb foundation for emails
Есть два компьютера 1) стационарный windows 10- работающий через корпоративную proxy. 2) macPro.
На первом возникли сложности с настройкой nodejs через корпоративную proxy. Настройка npm
https-proxy=http://username:password@proxy:port/
proxy=http://username:password@proxy:port/
strict-ssl=false
На маке пакет foundation-cli установился без проблем.
Преимущества пакета от foundation в том, что он позволяет верстать используя внутренний парсер tiny.
Код пишется тегами <container><row> , с использованием сетки с классами для мобильного и обычного отображения блока (по аналогии с Foundation for site/Bootstrap); Стили подключаются внешним файлом(можно выбрать CSS или SCSS); Можно верстать используя обычные классы;
При парсинге стили вставляются inline каждый тег отдельно, верстка переделывается в табличную. Результат, чище код, удобнее верстать.
На освоение библиотеки ушло около дня-двух. Все похоже на те же bootstrap и foundation.
Для тестирования
- Litmus за 80$ в месяц.
- putsmail позволяет отправлять код рассылки на указанные адреса и руками открывать клиенты.
Доступные клиенты: mail IOs iPhone6, safari mob gmail, android / Outlook 2010,
Первый день
Макет с шапкой, навигацией, главным баннером, сетки товаров из 3 карточек, логотипами и подвалом.
Основные клиенты gmail, mac mail почтовик, mail, yandex отобразили верстку корректно и на мобильных и в приложениях. Адаптация работает.
День второй
Тест-01-02
проблема в Outlook и iphone5 из-за маленького разрешения экрана (320px плюс даются отступы по бокам). После тестов стало понятно, что Outlook, отображает сетку корректно, но при загрузке картинок не масшатбирует и отображает в реальном размере.
Решение использовать исключение для Outlook. задавать максимальную ширину контейнера.
<!--[if !mso]><!--><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style=" max-width:600px!important; width:100%;"><!--<![endif]-->
<!--[if gte mso 9]><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600" ><![endif]-->
Третий день
test-04
Проблема, Outlook отображает картинки в их реальном размере, так же как и максимальный размер таблицы 600px заданный в исключении для outlook.
style width, height. атрибуты тега img wight height игнорируются outlook.
test-05
Текущее решение, подмена картинок для Outlook.
<!--[if gte mso 9]>
<img src="http://placehold.it/175x175" alt="товар" class="card-body-img"
style="-ms-interpolation-mode:bicubic;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto">
<![endif]-->
<!--[if !mso]><!-->
<img src="http://cdn2.top-shop.ru/55/dc/big_fd307a857c1260357645dddfdedddc55.png" alt="товар" class="card-body-img"
style="-ms-interpolation-mode:bicubic;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto">
<!--<![endif]-->
Для всех клиентов загружаются изображения любого размера, и изменяют размер в зависимости от свободного места. В Outlook загружаются изображения с размером не ломающих сетку рассылки. Минус – создание двух изображений карточек товара при разработке макета. Парсер дублирует код, вырастает общий размер исходника.
Задача – найти возможность заблокировать ширину Общей таблицы для Outlook.
Responsive Email Templates in Outlook: Tips and Pitfalls
- Outlook 2003 used IE6 for render
- Media query are not supported
- CSS in head section is ignored (css inline tool)
- Background-image, float, margin, and display – ignored
- Applying padding or width in CSS to a div or p tag will not work with Outlook
Ссылки в меню Outlook делает синими – временное решение – использовать тег <font></font> (fixed решается добавлением класса).
Стили подключаемые для мобильной верстки @media-query требуют установки атрибута !important. Query в header, inline стили их перебивают.
https://newsignature.com/articles/responsive-email-templates-outlook-tips-pitfalls/
Email Design Checklist
Putsmail send test message
CSS inliner tool
Zurb foundation for emails
Guide to CSS