Как сделать письмо адаптивным

Адаптация писем под мобильные устройства, также известная как mobile-friendly design, уже перестала быть чем-то уникальным — теперь это одна из обязательных опций. Поэтому при создании адаптивного письма с помощью Stripo вы можете смело использовать нашу библиотеку готовых шаблонов — все они уже адаптивны. Соответственно, созданные на их основе сообщения будут корректно отображаться на всех устройствах.

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

1. Адаптивная картинка

Самая простая функция, которую вы можете использовать при создании адаптивного письма в формате HTML - “Адаптивная картинка”.

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

Важно отметить:

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

2. Скрытие элементов и модулей для мобильных устройств

Если вы хотите скрыть элемент для мобильных устройств, вам больше не нужно работать с HTML-кодом, чтобы создать адаптивный email – теперь есть простая опция “Скрыть на мобильных устройствах”.

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

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

Также вы можете скрывать не только целые строки и модули, но и отдельные пункты меню.

Опция “Скрыть на мобильном” была применена только к одному пункту меню. Остальные четыре отлично вписались в ширину мобильного экрана.

3. Скрытие модулей для десктопных устройств

Вы можете не только скрыть элементы для отображения на мобильных девайсах, но и спрятать другие элементы для десктопной версии. Иными словами, вы выбираете, какие элементы будут видны на мобильном экране, а какие — только на десктопных устройствах.

Например, вы скрываете GIF-анимацию для мобильных (как показано в примере выше, загрузка этого элемента может занимать время — а если получателям приходится долго ждать загрузки, это отрицательно влияет на показатели конверсии). И добавляете статическое изображение для пользователей мобильных устройств. Таким простым способом вы обеспечиваете всех получателей информацией в виде изображения, и это не повлияет на скорость загрузки для мобильных девайсов.

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

Еще одна причина – встроенные интерактивные элементы, например карусели изображений, работают только на десктопных устройствах, и если такой email открыть на мобильном, то получатель увидит только основное (первое) изображение. Это означает, что остальные 3-5 изображений останутся невидимыми. Итак, вот что вам нужно сделать:

• скрыть карусель изображений для мобильных;

• и создать новый модуль со всеми изображениями, которые вы использовали как элементы карусели изображений, скрыв этот модуль для десктопных устройств;

• вот и все.

Зарегистрироваться в Stripo

4. Настройка шрифтов и кнопок

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

Для этого вам нужно:

1. перейти во вкладку “Оформление”;

2. открыть раздел “Адаптивность”.

Создавая адаптивные письма с помощью Stripo, вы также можете настроить размер заголовков – то есть задать разные размеры шрифта для собственно текста и для заголовков H1, H2, H3.

Установите размер шрифта для кнопок: оптимальный вариант — 18 или крупнее, но не меньше.

Чтобы кнопки CTA были заметны на мобильных устройствах, нужно также поработать с их шириной. Включите опцию “Кнопки на всю ширину”, чтобы адаптировать кнопки к размеру мобильного экрана.

Важно отметить:

Размеры шрифта, заголовков и текста кнопки, которые вы настроили в “Общих настройках” в самом начале создания сообщения, применяются ко всем этим элементам, если сообщение открыто на десктопном устройстве. Те параметры, которые вы только что установили, будут применены только к мобильной версии.

Я тоже так хочу

5. Кастомная настройка шрифтов

 Иногда при создании адаптивного HTML-email стандартных настроек бывает недостаточно. Например, в вашем брендбуке указано, что для модулей меню и хедера в мобильной версии следует использовать исключительно Arial, 15px, но редакторы предлагают только стандартные размеры 14, а затем 16. Из-за этого приходится работать с HTML-кодом, чтобы обеспечить адаптивность. Но пусть эти мелочи вас не пугают.

Вам просто нужно понять, где именно в коде находится эта самая адаптивность. Сделать это несложно – откройте редактор кода и перейдите во вкладку CSS.

Здесь вы увидите всю таблицу стилей, но самая мякотка начинается после строки “@media only screen and (max-width: 600px) {“ - вот тут и начинается адаптивность.

Найдите необходимые разделы – в нашем случае “Меню” и “Хедер” - и замените “14px” на “15px”.

При необходимости сделайте то же самое с другими элементами письма.

Это важно!

Не удаляйте ничего из этого кода!

6. Инверсия элементов писем для мобильных

При создании модулей контента товаров мы можем инвертировать некоторые элементы этих модулей. Обычно мы это делаем, чтобы разнообразить email.

Но на мобильных экранах это будет выглядеть так себе. И может даже сбивать с толку: элемент, который в десктопной версии находится слева, на мобильном экране окажется над элементом, который на компьютерах отображается справа. Именно поэтому многие маркетологи просто придерживаются обычного порядка: изображение товара, описание, цена, кнопка CTA. 

Чтобы создать с помощью Stripo адаптивный шаблон и при этом разнообразить дизайн, вам нужно:

• перетащить в шаблон структуру с двумя колонками;

• создать модуль контента вашего товара;

• включить кнопку “Инверсия контейнеров на мобильном”.

Важно отметить:

Инверсия работает только для структур с двумя колонками.

В завершение

Вот шесть простых шагов для создания полностью адаптивного HTML-email.

Если у вас есть какие-либо вопросы или проблемы, пишите нам по адресу: contact@stripo.email или оставьте комментарий под статьей.

Зарегистрироваться в Stripo