Структура Шаблоны How-to
~ 7 мин читать
38719 просмотры
оценить
28 мартa

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

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

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

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

Responsive Email Layout

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

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

Responsive Image Option

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

Stripo_Images Rendering Correctly and Incorrectly on Mobile Devices

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

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

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

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

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

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

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

Hiding Animation

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

Building Responsive Menu

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

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

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

Hiding Animation

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

Displaying Elements on Mobiles

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

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

Hide on Mobiles Button

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

Hiding Elements on Desktop Devices

  • вот и все.

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

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

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

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

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

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

Building Responsive Images for Emails

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

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

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

Full-width Button_Mobile View

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

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

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

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

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

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

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

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

Stripo_How-to-Create-a-Responsive-Email-Template_Working-with-HTML-Code

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

Это важно!

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

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

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

Stripo_Buidling-Responsive-Email-Template_Inversion-for-Mobile-Screens

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

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

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

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

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

Inversion of Elements on Mobile Devices

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

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

В завершение

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

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

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

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
7 дней назад · 8 мин читать
20 цепляющих тем и маркетинговых идей к Дню Отца

По исследованиям NRF, в 2019 году жители США потратили более 16 миллиардов долларов на День Отца. Вы можете запустить маркетинговую кампанию, если хотите получить свою долю этого пирога, так как (опять же согласно Statista) в Соединенных Штатах насчитывается около 248,7 миллионов пользователей электронной почты. Используя подготовленные емейл-шаблоны, вы можете создать соответствующую кампанию менее чем за 10 минут. Но как убедиться в том, что вы обратите на себя внимание потенциальных клиентов? Прежде всего самое главное – тема письма должна способствовать открываемости. В этой статье мы рассмотрим...

Дизайн Маркетинг Шаблоны
AMP_Ways to Use AMP_Stripo_Featured Image
12 дней назад · 10 мин читать
AMP-письма: 10 способов использования технологии AMP

Эффективность AMP — уже доказанный факт. В частности, конверсия повышается как минимум в ПЯТЬ раз. Все пользователи Gmail и Mail.ru теперь могут видеть AMP в своих входящих письмах. Скоро к ним присоединятся и пользователи Yahoo. Разве этого недостаточно, чтобы начать использовать AMP в рассылках?  Использовать Этот шаблон идеально подходит для любого бизнеса. Он дает вашим пользователям возможность организовывать и подтверждать встречи всего в несколько кликов прямо в письме. Хотите делать то же самое и многое другое? Тогда продолжаем читать —...

Дизайн Маркетинг Структура Шаблоны How-to
Будьте всегда в курсе последних новостей в области email-маркетинга!