Адаптивный дизайн стал уже хорошим тоном при создании писем. К сожалению, даже самый красивый дизайн не всегда хорошо выглядит на разных устройствах, а тем более если дело доходит до Андроида. Радует только тот факт, что % открытий писем на мобильных телефонах в нашем регионе едва достигает 40%, в отличие от USA и Индии.

В статье не будет жесткача и кусков кода - таких материалов в сети много и они больше подходят для тех, кто действительно верстает всё вручную. Наша задача - разобраться, какие же подводные камни скрываются за письмами для Android.

Отправитель и тема письма

Первое, с чего начинается “знакомство” с вами в почтовике - это имя отправителя и тема письма, какими же они должны быть, чтобы заинтересовать подписчика?

Как выглядит поле От кого:

У вас в запасе есть 23-32 символа, чтобы указать понятное для читателя название. Недаром считается, что имя отправителя - это ключевой параметр по которому пользователи решают читать им письмо или нет.

Ещё есть небольшой лайфхак - чтобы увеличить узнаваемость, отправителю добавляют аватарку. И всё бы было хорошо, если бы не особенности Gmail

Ваша аватарка будет отображаться только в открытом письме, а в общем списке, как видим, добиться этого не удалось. Для сравнения, мы проверили как письма отображаются на мобильных, мы взяли ещё mail.ru на Андроид, Native iOS email app и Gmail на iPhone.

Кроме mail.ru больше нигде не удалось увидеть эти миниатюрки и в Gmail, если письмо отправлено с личной почты. Возможно, вы знаете какие-то хитрости как это обойти - научите меня:)

Несколько слов о теме письма

В то время, как на ПК в теме отображается до 80 символов, мобильные устройства обрежут её до 30 символов, а то и меньше.

На большинстве устройств строка темы и отправитель у непрочитанных писем выделены жирным шрифтом, но обратите внимание, ещё же есть предзаголовок...

Оптимизируем предзаголовок для мобильных

Предзаголовку отдаётся целая строчка во “Входящих”, поэтому не стоит его недооценивать. У вас есть ещё 30 дополнительных символов, которые отлично дополнят тему и раскроют суть содержимого письма.

Пример того, как тему письма дополняет предзаголовок. Никогда не рано начинать отмечать :) Т.е. интрига есть, но на всякий случай её немного приоткрывают.

Оформление письма

Каждая версия Андроида адаптирует письма по своему. Gmail для Android пользуется особой популярностью у пользователей и точно так же странно поддерживает CSS, как и Gmail на десктопах.

Если вы создали адаптивное письмо или использовали одну из готовых адаптивных структур в нашей системе, это ещё не означает, что письмо будет идеальным на всех устройствах. Например, прекрасное письмо, которое хорошо выглядит везде, кроме Gmail на Андроид.

В этой комбинации Gmail выровнял картинку по правому краю, а блок с соц.сетями по левому, предполагая, что пользователю так будет удобнее читать.

Сейчас в наш редактор специально добавлена опция, которая адаптирует письмо под Андроид, добавляя в него специальный фрагмент кода. Так почтовики на Андроид не будут ломать письмо по своему усмотрению, а отобразят как desktop версию.

Ширина письма

Рекомендуемая ширина для всех писем (так уже исторически сложилось) - 600 px, что позволяет письму хорошо отображаться на большинстве устройств. Это не всегда панацея, но если использовать так называемый "адаптивный веб-дизайн", то письмо автоматически подстроится под устройства с экранами и меньше 600 px.

При подгонке писем под мобильные устройства обычно используют специальные @media-запросы, например:

@media only screen and (max-device-width: 480px) { ... }

Они позволяют указать разный набор правил вёрстки для разных размеров экранов. Например:

@media only screen and (max-device-width: 320px) { ... }

@media only screen and (max-device-width: 600px) { ... }

Стоит также учесть, что если вы задаёте "width: 600" без указания пикселей - это может вызвать проблемы с Outlook.

Картинки

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

На деле - отключить адаптивность картинок в нашем редакторе можно одной кнопкой

Зато ваше письмо будет выглядеть куда лучше на разных устройствах.

Скрыть отдельные блоки

Если у вас происходят чудеса с блоками, как в предыдущем примере, и некогда быстро искать решение - в нашем редакторе можно скрывать некоторые блоки, которые не будут показываться на мобильном, но суть письма от этого сильно не пострадает.

К примеру, есть у нас кусок текста, который на мобильном занимает почти весь экран, почему бы его не скрыть ?:)

Так письмо выглядит гораздо приятнее и оно становится чуть короче на мобильном. Таким способом можно скрывать не только текст, а и картинки или блоки с соц. сетями.

И ещё…

Разные устройства могут самостоятельно запускать запросы @media, даже если они не нужны - например, при просмотре почты на планшете. Или, как в рассылке на ukr.net, mobile версия показывается и на десктопе. Поэтому верстать письма нужно очень внимательно, ведь в обилии почтовиков/ устройств и ОС, так легко что-то упустить.

Если в вашем редакторе всё сложно и приходится адаптивность задавать вручную через код - доверьтесь профессионалам! Переходите в наш сервис eSputnik или используйте редакторы писем, вроде Stripo, которые максимально облегчат вам работу.

До новой встречи! :)