Доклад на конференции Mailing Day Санкт-Петербург 2016

1. Дизайн писем
Как адаптивный дизайн
влияет на конверсию?
Михаил Терентьев
mailfit.com
facebook.com/89tmc

2. Проблема
Люди не используют адаптивный дизайн
(вёрстку) писем.
Следствие 1: снижается удобство для
пользователей
Следствие 2: конверсия ниже.

3. Статистика
По данным исследования yesmail.com, отношение кликов к
открытиям на 55% выше в адаптивных письмах.
Очевидный факт: компании, использующие адаптивный
дизайн, больше заботятся об эффективности и качестве
своих рассылок.
Настольные площадки уже показали 29% снижение CTO, в
то время, как мобильные площадки дали рост на 26%.

4. Решение
Использовать один из трёх подходов:
- Фиксированная вёрстка — самый распространенный
подход. Просто но то плохо на мобильнике
- Резиновая вёрстка — гибрид — самый продвинутый
- Адаптивная вёрстка — на медиазапросах — тут больше
верстальщиков так умеют, подход к вёрстке сайтов
- Текст :)

5. litmus.com

6. litmus.com

7. litmus.com

8. Сервисы для вёрстки
1. MailChimp
2. Campaign Monitor
3. Beefree.io

14. https://habrahabr.ru/post/259793/
Таблицы, выровненные по левому или правому краю, остаются на своих местах в
мобильных приложениях, не поддерживающих media queries. Вы не можете это изменить с
помощью мобильного CSS (mobile-specific CSS)

15. https://habrahabr.ru/post/259793/
Визуализация того, что будет представлять из себя наша двухстолбцовая структура

16. Чеклист при
тестировании
1. Литмус или Мейлчимп — смотрим рендеринг
2. Проверяем ссылки
3. Смотрим тесты на реальных устройствах:
Mail.ru, Yandex.ru, мобильные клиенты этих
сервисов

17. Про контент
Неважно, какой метод вёрстки и дизайна вы
используете. Всё это не будет работать, если
контент письма (текст, картинки, навигация)
построен плохо.
Не стоит усложнять контент письма огромными
товарными выкладками, таблицами, сложными
баннерами. Во всём этом многообразии человек
просто потеряется.

18. О простоте
Вот набор базовых элементов письма:
1. Изображение, баннер
2. Заголовок, подзаголовок
3. Текстовый блок
4. Кнопка, ссылка
5. Цитата, другое выделение текстового блока
Шапка с лого, и подвал с контактами и ссылкой
отписки — по умолчанию.

24. 4. Plain Text и Apple Watch

25. mailfit.com