Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не испугались.

1. .Мобильная адаптация писем
,Как сделать так чтобы ваши письма открыли
.на мобильном устройстве и не испугались
Антон Чирков

2. Мобильная адаптация писем
Содержание
• Адаптивные письма и зачем они нужны
• Виды мобильной адаптации
• Приемы при создании адаптивного письма
• Нестандартные подходы к верстке писем

3. Среда открытий
По данным за 2014
Тенденция роста
мобильного сегмента
сохраняется и в
среднем составляет
+5% в год.
Мобильная адаптация писем

4. vsАдаптивная обычная вёрстка
Обычная вёрстка
Адаптивные письма и зачем они нужны

5. vsАдаптивная обычная вёрстка
Адаптивная вёрстка
Адаптивные письма и зачем они нужны

6. Преимущества и недостатки
• корректное отображение на
любых устройствах
• повышение лояльности
подписчика
• CTA видны сразу
• больший CTR
• увеличение затрат на
разработку дизайна и
верстку
Адаптивные письма и зачем они нужны

7. Мобильная вёрстка
Применяется только если ~70% всех открытий
производится с мобильных устройств.
Виды мобильной адаптации

8. Резиновая вёрстка
Используются только относительные размеры всех блоков
и изображений.
Виды мобильной адаптации

9. -Применение медиа запросов
Обеспечивает наилучшее отображение письма на экране
любого размера.
Виды мобильной адаптации

10. -Применение медиа запросов
…
Виды мобильной адаптации

11. -Применение медиа запросов
В Android 5.0 единственным почтовым клиентом по-
умолчанию остался лишь Gmail
Виды мобильной адаптации

12. Мобильная адаптация
Сочетание резиновой верстки и применение
медиа-запросов обеспечивает хорошее
отображение письма на любых устройствах
Виды мобильной адаптации

13. .Приёмы Фланговая адаптация
На мобильном устройстве отображается лишь
фрагмент креатива (баннера)
Приемы при создании адаптивного письма

14. .Приёмы Фланговая адаптация
60% 40%
Приемы при создании адаптивного письма

15. .Приёмы Блочная адаптация
На мобильном устройстве блоки перестраиваются
друг под друга
Приемы при создании адаптивного письма

16. .Приёмы Блочная адаптация
Блок1 Блок2
Блок1
Блок2
<!--[if gte mso 9]>
<table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
Блок1
<!--[if gte mso 9]> </td><td> <![endif]-->
Блок2
<!--[if gte mso 9]> </td></tr> </table> <![endif]-->
Приемы при создании адаптивного письма

17. . -Приёмы Медиа запросы
Приемы при создании адаптивного письма

18. Видео внутри письма
Нестандартные подходы к верстке писем

19. Видео внутри письма
Нестандартные подходы к верстке писем

20. Внутренний скроллинг
Нестандартные подходы к верстке писем

21. CSS3
• CSS3 анимация
• CSS3 parallax
Нестандартные подходы к верстке писем

22. Содержание
• Адаптивные письма и зачем они нужны
• Виды мобильной адаптации
• Приемы при создании адаптивного письма
• Нестандартные подходы к верстке писем
Мобильная адаптация писем

23. Антон Чирков
HTML-Ведущий специалист
EmailMatrixкомпании
anton.chirkov@emailmatrix.
ru
emailmatrix.ru