adaptive email

Задача.

Адаптивный шаблон товарной рассылки. учитывать все почтовые клиенты

 

Первый вариант.

Шаблонизатор 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

 

Leave a comment