Responsive Email Templates
Адаптивные шаблоны писем

Большая часть всех писем сегодня читаются на мобильных устройствах, поэтому заранее необходимо позаботиться об правильном отображении писем на смартфонах. Адаптивная верстка не сокращает информацию в письме, а позволяет отображать контент в полной мере. Оптимизация писем под мобильные устройства с помощью Адаптивного дизайна имеет решающее значение в увеличении ROI, так как чтение почты на смартфоне уже становится обычным делом.

Адаптивные письма (responsive email) - современная технология верстки HTML писем, которая изменяет дизайн на мобильных устройствах, делая их удобными для отображения на не больших экранах.

Главные особенности Aдаптивных email'ов:

  • Увеличение коэффициента возврата инвестиций (ROI).
  • Увеличение показателя кликабельности (CTR) до +24%.
  • Для удобства информация перестраивается в одну колонку.
  • Изменяется размера шрифта и отступов.
  • Изображения центрируются или растягиваются по ширине экрана.
  • Дополнительно отображается или скрывается информация.
  • Увеличивается размер кнопок.
  • Retina качество.

На скриншотах демонстрируются основные функции Адаптивной верстки. Нажимайте на них, чтобы увеличить и рассмотреть подробней.

1. Сравните отображение обычного html письма и Адаптивного. В обычном появляется горизонтальный скролл, информация не помещается, читать ее не совсем удобно. В Адаптивной версии контент перестроится под ширину экрана мобильного устройства.

2. Пример Адаптивного письма - десктопная и мобильная версия отображения.
Информация в хедере перестраивается в одну колонку, навигация превращается в вертикальный список, кнопки с полной кликабельной областью. Изображение главного поста центрируется и становится первым, затем идет заголовок и текст, список с социальными иконками меняет положение.

3. Retina качество можно реализовать для логотипов, иконок, кнопок и изображений. Предоставьте исходный материал для таких элементов в двойном размере и специалисты все сделают.
Например логотип в макете имеет размеры 100px на 60px, тогда исходник для ретины должен быть 200px на 120px. Если выполнить это требование при разработке, то на дисплеях с высокой плотностью (планшетах и телефонах) - изображения будут очень четкими.

4. Представьте дизайн из 3-х блоков с информацией (зеленый, красный, синий). Внутри них может быть текст и изображения. Этот пример демонстрирует всю гибкость перестроения Адаптивного кода от WOW EMAIL, очередность перестроения контента на мобильных устройствах показана на варианте 1-6.
Возможно скрыть любой блок и отобразить новый, смотрите вариант 7.

Перестроение контента сработает:

iOS 8+ Gmail App — адаптивная версия
iOS 8+ Родная почта (native mail) — адаптивная версия
iOS 8+ Outlook App — адаптивная версия
iOS 8+ Inbox by Gmail App — адаптивная версия
iOS 8+ Yahoo App — адаптивная версия
Android 4+ Gmail App — адаптивная версия
Android 4+ Родная почта (native mail) — адаптивная версия
Android 4+ Outlook App — адаптивная версия
Android 4+ Inbox by Gmail App — адаптивная версия
macOS Mail — адаптивная версия
Windows Mozilla Thunderbird — адаптивная версия

* В остальных приложениях, почтовых сервисах и почтовых клиентах будет десктопная версия письма, при этом проблем с отображением не возникнет.

Письма электронной почты следует делать Адаптивными, ваши клиенты уже просматривают их на мобильных устройствах. По статистике еще в октябре 2013 года - 48% открытий, именно с мобильного телефона.