Мобильная адаптация писем. Как сделать так, чтобы ваши...
TRANSCRIPT
![Page 1: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/1.jpg)
. Мобильная адаптация писем , Как сделать так чтобы ваши письма открыли
.на мобильном устройстве и не испугались Антон Чирков
![Page 2: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/2.jpg)
Мобильная адаптация писем
Содержание
• Адаптивные письма и зачем они нужны
• Виды мобильной адаптации
• Приемы при создании адаптивного письма
• Нестандартные подходы к верстке писем
![Page 3: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/3.jpg)
Среда открытий
По данным за 2014
Тенденция роста мобильного сегмента сохраняется и в среднем составляет +5% в год.
Мобильная адаптация писем
![Page 4: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/4.jpg)
vs Адаптивная обычная вёрстка
Обычная вёрстка
Адаптивные письма и зачем они нужны
![Page 5: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/5.jpg)
vs Адаптивная обычная вёрстка
Адаптивная вёрстка
Адаптивные письма и зачем они нужны
![Page 6: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/6.jpg)
Преимущества и недостатки
• корректное отображение на любых устройствах
• повышение лояльности подписчика
• CTA видны сразу• больший CTR
• увеличение затрат на разработку дизайна и верстку
Адаптивные письма и зачем они нужны
![Page 7: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/7.jpg)
Мобильная вёрсткаПрименяется только если ~70% всех открытий производится с мобильных устройств.
Виды мобильной адаптации
![Page 8: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/8.jpg)
Резиновая вёрсткаИспользуются только относительные размеры всех блоков и изображений.
Виды мобильной адаптации
![Page 9: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/9.jpg)
-Применение медиа запросовОбеспечивает наилучшее отображение письма на экране любого размера.
Виды мобильной адаптации
![Page 10: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/10.jpg)
-Применение медиа запросов
…
Виды мобильной адаптации
![Page 11: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/11.jpg)
-Применение медиа запросовВ Android 5.0 единственным почтовым клиентом по-умолчанию остался лишь Gmail
Виды мобильной адаптации
![Page 12: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/12.jpg)
Мобильная адаптация
Сочетание резиновой верстки и применение медиа-запросов обеспечивает хорошее
отображение письма на любых устройствах
Виды мобильной адаптации
![Page 13: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/13.jpg)
. Приёмы Фланговая адаптацияНа мобильном устройстве отображается лишь фрагмент креатива (баннера)
Приемы при создании адаптивного письма
![Page 14: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/14.jpg)
. Приёмы Фланговая адаптация
60% 40%
Приемы при создании адаптивного письма
![Page 15: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/15.jpg)
. Приёмы Блочная адаптацияНа мобильном устройстве блоки перестраиваются друг под друга
Приемы при создании адаптивного письма
![Page 16: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/16.jpg)
. Приёмы Блочная адаптация
Блок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]-->
Приемы при создании адаптивного письма
![Page 17: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/17.jpg)
. -Приёмы Медиа запросы
Приемы при создании адаптивного письма
![Page 18: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/18.jpg)
Видео внутри письма
Нестандартные подходы к верстке писем
![Page 19: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/19.jpg)
Видео внутри письма
Нестандартные подходы к верстке писем
![Page 20: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/20.jpg)
Внутренний скроллинг
Нестандартные подходы к верстке писем
![Page 21: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/21.jpg)
CSS3
• CSS3 анимация• CSS3 parallax
Нестандартные подходы к верстке писем
![Page 22: Мобильная адаптация писем. Как сделать так, чтобы ваши письма открыли на мобильном устройстве и не](https://reader034.vdocuments.site/reader034/viewer/2022042716/55a9ea531a28ab13638b45e9/html5/thumbnails/22.jpg)
Содержание
• Адаптивные письма и зачем они нужны
• Виды мобильной адаптации
• Приемы при создании адаптивного письма
• Нестандартные подходы к верстке писем
Мобильная адаптация писем