Дизайн Структура Шаблоны How-to
~ 9 мин читать
88230 просмотры
оценить
20 декабря 2021

Новая эра адаптивного дизайна

Stripo / Blog / Новая эра адаптивного дизайна

Адаптивный email-дизайн сегодня уже никого не удивляет: все мы знаем, что адаптивность, — то есть оптимизация писем для отображения на мобильных устройствах, — уже не модная фича, а необходимость. И мы придерживаемся золотого правила: обязательно убедиться, что рассылка адаптирована для экрана смартфона.

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

Как это сделать без навыков кодирования — об этом мы расскажем ниже.

1. Опция скрыть/активировать элементы писем на десктопных и мобильных устройствах

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

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

Как это сделать в Stripo:

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

  • на панели настроек вы найдете опцию «Скрыть элемент»;

  • кликните иконку «Мобильный» или «Десктоп».

Адаптивный макет почты_Скрытие и включение элементов на мобильных устройствах

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

Как создать адаптивный макет письма_настольная версия_с разделителями

(Десктопная версия, с разделителями)

Как создать адаптивный макет письма_Мобильная версия_без разделителей

(Мобильная версия, без разделителей)

Откройте для себя новую эру мобильной адаптации
Начать

2. Стили email-дизайна

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

Сделать это можно во вкладке «Адаптивность».

Адаптивный дизайн почты_Настройка мобильных стилей с помощью Stripo_Без кода

Во вкладке «Адаптивность» вы можете настроить размер шрифта для:

  • текста хедера;

  • текста контента;

  • текста футера;

  • текста информационной области;

  • вкладок меню;

  • заголовков 1-3.

Для последних вы также можете выбрать выравнивание текста: по правому/левому краю или по центру.

Почта, оптимизированная для мобильных устройств_Работа над стилями заголовков

Все эти стили будут применены только для мобильной версии вашего письма и не повлияют на настройки дизайна, которые вы установили в разделе «Общие настройки» вкладки «Оформление» для десктопной версии.

Чтобы показать вам, как это работает, мы создали короткое письмо с меню и заголовком.

Рабочий стол Размер шрифта меню составляет 12 пикселей

(Десктопная версия, шрифт меню 14 пикселей, шрифт заголовка 64 пикселя)

Мобильные устройства_Размер шрифта и заголовки меню

(Мобильная версия, шрифт меню 18 пикселей, шрифт заголовка 36 пикселей)

Оптимизируйте тексты своих писем, чтобы они были на 100% читабельными на всех устройствах
Начать

3. Стили дизайна для кнопок призыва к действию

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

Во вкладке «Адаптивность»:

  • установите для кнопок более крупный шрифт в элементе управления «Размер текста кнопки»;

  • активируйте опцию «Кнопки во всю ширину», чтобы размер кнопки соответствовал ширине экрана смартфона пользователя.

Почта, оптимизированная для мобильных устройств_Ширина кнопки

Таким образом вы обеспечите заметность и кликабельность кнопок на мобильных.

Чтобы показать вам, как это работает, мы создали короткое письмо с кнопкой CTA.

Адаптивный дизайн почты_кнопки на настольных компьютерах

(Десктопная версия, шрифт кнопки 18 пикселей)

Почта, оптимизированная для мобильных устройств_полноразмерная кнопка

(Мобильная версия, шрифт кнопки 22 пикселя)

Если вы активируете опцию «Кнопки во всю ширину», то также можете настроить верхние и нижние отступы, то есть внутреннее пространство между границей кнопки и текстом внутри нее.

Важно:

Прямо сейчас наша команда разработчиков готовит новую версию редактора. Обновленный Stripo позволит вам работать по отдельности над дизайном нужной версии вашего письма — десктопной или мобильной. Достаточно будет переключиться в соответствующий режим, чтобы приступить к совершенствованию письма.

Попробуйте новую версию редактора шаблонов Stripo прямо сейчас
Попробовать

4. Выравнивание элементов

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

Как это сделать в Stripo:

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

  • кликните нужный элемент письма в своем шаблоне;

  • на панели настроек вы увидите значок «Мобильный»;

Адаптивный макет почты_Настройка выравнивания для мобильных устройств

  • Нажмите на него, чтобы активировать настройки для выбранного элемента;

  • выберите нужный тип выравнивания.

* Опция выравнивания работает для видео и изображений, только если в контейнере остается место, например, внутренние отступы. Если изображение или видео занимает весь контейнер, опция выравнивания не будет активна.

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

Выровненные по центру изображения на настольных устройствах_Как создать отзывчивое письмо

(Десктопная версия, выравнивание изображений по центру)

Выровненные по левому краю изображения на мобильных устройствах

(Мобильная версия, выравнивание изображений по левому краю)

5. Отступы

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

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

Обратите внимание, что отступы работают с контейнерами и структурами.

Как это сделать в Stripo:

  • кликните на нужный элемент письма в своем шаблоне;

  • на панели настроек найдите значок «Мобильный»;

  • нажмите его, чтобы активировать настройки для смартфонов;

Настройка прокладок для мобильных устройств

  • установите нужное значение для ваших отступов.

Важно:

Если вам нужны равные отступы для всех четырех сторон элемента внутри структуры, просто настройте один отступ:

Прокладки для мобильных телефонов_Единая ценность для всех сторон

Это значение будет применено ко всем четырем сторонам элемента.

Если вам нужны разные значения для каждой стороны, нажмите кнопку «Больше».

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

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

Прокладки между элементами на мобильных устройствах

(Десктопная версия, отступы между двумя изображениями в ряду, а также между рядами)

Настройка заполнения для мобильных устройств_нулевое значение

(Мобильная версия, без отступов)

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

Довольно часто в письмах можно встретить такой порядок карточек товаров.

Адаптивный дизайн почты_порядок элементов почты на рабочем столе

Обычно email-маркетологи используют его, чтобы разнообразить свои промо.

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

Как это сделать в Stripo:

  • Кликните на значок «Структура» в нужном ряду;

Значок структуры

  • на панели настроек переключите кнопку «Инверсия контейнеров на мобильных».

Кнопка инверсии контейнеров

Готово.

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

Опция инверсии контейнеров отключена

(Мобильная версия, опция инверсии отключена)

Вариант инверсии_Удобный для мобильных устройств дизайн почты

(Мобильная версия, опция инверсии активна)

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

7. Адаптивные изображения

При разработке адаптивного HTML-письма самая простая функция, которую мы можем использовать, — «Адаптивное изображение».

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

Как это сделать в Stripo:

Обратите внимание, что по умолчанию эта опция всегда включена. Поэтому если вы просто хотите, чтобы ваше изображение соответствовало размеру мобильного экрана, вам не нужно ничего делать. А если что-то сделать нестерпимо хочется, можете проверить, действительно ли опция включена. Конечно, она включена ;).

Адаптивное изображение_Включена опция

Если вам нужно, чтобы ваше изображение оставалось маленьким на экранах мобильных (например, логотип или иконка), можно отключить эту опцию.

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

Чтобы показать вам, как это работает, мы активировали и отключили опцию «Адаптивное изображение» для одного и того же логотипа в письме.

Параметр адаптивного изображения Выключен_Мобильный дизайн

(Опция «Адаптивное изображение» активна)

Вариант адаптивного изображения Включен_Удобный для мобильных устройств дизайн

(Опция «Адаптивное изображение» отключена)

8. Включение/отключение адаптивного дизайна писем

Все шаблоны, которые предлагает Stripo, по умолчанию полностью адаптивны.

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

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

Как это сделать в Stripo:

Обратите внимание, что по умолчанию это свойство всегда включено.

  • на панели настроек перейдите во вкладку «Общие»;

  • переключите кнопку «Адаптивный дизайн», чтобы отключить это свойство.

Вариант адаптивного дизайна

Чтобы показать вам, как это работает, мы включили и отключили опцию «Адаптивный дизайн» для одного и того же письма.

Вариант адаптивного дизайна Выключен_Создание оптимизированной для мобильных устройств почты

(Мобильная версия, опция «Адаптивный дизайн» отключена)

Адаптивный дизайн_опция Вкл_Stripo

(Мобильная версия, опция «Адаптивный дизайн» активна)

В завершение

Как видим, для создания полностью адаптивного HTML-письма не понадобится никаких навыков программирования. Оцените сами и дайте оценить клиентам новую эру адаптивного email-дизайна.

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

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

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

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