- Дизайн
- 4 мин на чтение
- 9100
О верстке писем для простых смертных
В первую очередь стоит иметь понимание об адаптивности писем. С сайтами все куда проще. Верстальщик делает десктопный сайт и при помощи медиазапросов адаптирует его под мобильные платформы. Все предельно понятно.
С письмами все обстоит иначе. Десятки почтовых клиентов можно условно разделить на несколько групп:
- Нормальные почтовые клиенты, к которым относится большинство десктопных приложений и вебморд (Gmail, Yandex, Mail.ru, Outlook.com, Thunderbird, Apple Mail, AirMail)
- Семейство десктопных Outlook
- Нормальные мобильные почтовые клиенты (Apple Mail, Android Mail, Yahoo Mail, Spark)
- Мобильные почтовые клиенты, которые не поддерживают медиазапросы (Gmail, Google Inbox, Yandex, Mail.ru)
- Уникумы (Rambler, The Bat!, Lotus Notes, Polymail)
Большинство верстальщиков и готовых шаблонов способны покрыть потребности лишь первых трех групп. Суть подхода та же, что и у сайтовой верстки, но идет расчет на некоторые нюансы почтовиков (инлайн стили, особое форматирование, табличная верстка).
Как же нам сделать хорошо везде?
Прежде всего будет крайне полезным подход Mobile First. Сделать из мобильноого письма десктопное в несколько раз проще и быстрее, чем наоборот.
Верстальщик должен уметь верстать адаптивно без медиазапросов. Это сложно, но нет ничего невозможного. Если ваш верстальщик говорит, что это сверстать невозможно, то попросите его внести незначительные изменения в дизайн-макет таким образом, чтобы это стало возможным. Если он этого сделать не может, то вы платите деньги не тому человеку.
Как правильно написать ТЗ для верстальщика, который раньше верстал только лендинги?
Никак. Я бы не стал обращаться к исполнителю без опыта верстки писем. Тем не менее можно заказать мастер-шаблон письма у хорошего спеца, а “собирать” конкретные письма на его основе уже сможет и неопытный верстун.
Чек-лист по верстке писем. Как проверить все ли у нас хорошо?
- Покупаем аккуант Litmus.com за $80 в месяц. Он того стоит. Предоставляет скриншоты писем с большинства популярных почтовых клиентов. Также на платных аккаунтах Mailchimp присутствует инструментарий Литмуса прямо внутри Чимпа. Аналоги Литмуса сосут. Точка.
- Делаем живые тесты на российские почтовые вебморды(отсутствуют в Литмусе), и все мобильные почтовики, коих в Литмусе так же очень мало. Ручками в живую смотрим на качество отображений наших писем.
- Не будет лишним просмотреть заголовки писем на наличие электронных подписей, но этот вопрос уже за гранью нашей темы.
Сервисы, которые помогают сделать верстку
Каждая система рассылки считает своим долгом сделать собственный конструктор писем. В принципе, никто толком нормального и не сделал.
- Блочный редактор Mailchimp. 8/10. Покрывает нужды первых трех категорий из начала статьи, приветливый и понятный интерфейс. Неудобные ограничения присутствуют.
- Блочный редактор Campaign Monitor. 7/10. Практически ничем не отличается от редактора Mailchimp. Дьявол в деталях.
- Блочный редактор https://beefree.io/ 8/10. Умеет делать адаптивные письма без медиазапросов. Удобен и приятен. Но сыроват. Присутствуют баги.
Все остальные блочные редакторы в сети — мусор, которым нельзя пользоваться.
Шаблоны — нужно ли пользоваться и какие хорошие?
Шаблонами пользоваться просто необходимо. Будь то готовые или написанные вами самостоятельно. Нет смысла делать каждое новое письмо с нуля. Пойдем по списку от простого к сложному:
- Бомж-вариант. http://themeforest.net/category/marketing/email-templates Шаблоны писем, покрывающие первые три категории почтовиков. Средний ценник $20. Любой мало-мальски вменяемый верстальщик может его доработать под ваш фирменный стиль.
- Готовые шаблоны Mailchimp. Тоже неплохо, но так же не справляются с почтовиками, которые не понимают медиазапросы.
- https://github.com/mailchimp/email-blueprints Более интересный вариант. Набор шаблонов для верстальщика все от того же Mailchimp. С адаптивностью все так же не очень гладко.
- https://github.com/dudeonthehorse/kilogram Мой фреймворк для верстки писем, который содержит в себе шаблон письма с максимальной адаптивностью без медиазапросов. Предназначен для верстальщиков с пониманием верстки, а не для тупого копирования кода.
Есть ли хорошие видео или статьи о верстке писем?
Материала на самом деле очень много. Тем не менее авторского русскоязычного контента практически нет. Привожу список полезных материалов:
- Мой блог на хабре https://habrahabr.ru/users/dudeonthehorse/topics/Без доли скромности скажу, что самый полезный в рунете уникальный контент по верстке писем, который основан на моем многолетнем опыте работы с письмами
- Хаб на хабре, посвященный верстке писем https://habrahabr.ru/hub/devmail/
- Блог Печкина на Хабре https://habrahabr.ru/company/pechkin/Среди кучи откровенно рекламных и переводных статей иногда попадаются действительно годные материалы. Особенно рекомендуую обратить внимание на отличнуцю подборку https://habrahabr.ru/company/pechkin/blog/275603/
- Блог Николь Мерлин http://blog.emailwizardry.co/
- Сообщества https://www.campaignmonitor.com/forums/ и https://litmus.com/community
- Джедай верстки https://www.youtube.com/watch?v=TWFYQxevE9k Не истина в последней инстанции, но заслуживает внимания
- Курс Антона Чиркова на Нетологии http://netology.ru/courses/adaptivnaya-verstka-email Как минимум даст общее представление для верстальщика.
Источник: medium.com
