Mobile-friendly дизайн писем в редакторе Stripo

В этом мануале объясняется, как создавать mobile-friendly письма в редакторе Stripo. Основное внимание уделяется практической настройке, управлению разметкой и распространенным проблемам с мобильными устройствами; приводятся четкие пошаговые инструкции и примеры, которые можно применять при работе в редакторе.

Ключевые выводы

1. Можно редактировать мобильную версию напрямую и не угадывать результат: в редакторе можно переключиться на мобильный вид, задать любые настройки и увидеть, как они будут выглядеть на телефонах.
2. Сначала можно задать глобальные мобильные стили, а затем при необходимости настроить каждый блок индивидуально: Stripo позволяет определять базовые правила для мобильных устройств в разделе «Общие стили», а затем при необходимости переопределять их для любой полосы, структуры или блока.
3. Можно контролировать не только вид мобильной версии, но и ее содержимое: в мобильной версии можно скрывать элементы, изменять порядок их расположения, настраивать интервалы и выбирать, какая компоновка будет в строке, а какая — в столбце.

Как Stripo обрабатывает мобильное отображение

Что означает «mobile-friendly» в Stripo

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

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

Какие изменения применяются только в мобильной версии

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

Когда мобильные настройки не работают

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

Адаптивный дизайн в настройках оформления

Используйте это при работе с настройками мобильного форматирования:

1. Перейдите в раздел «Глобальные стили и настройки».

2. Включите функцию «Адаптивный дизайн».

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

Начните с чистого листа, используя «Общие стили»

Смена настроек стиля между десктопным и мобильным режимами

Раздел «Общие стили» позволяет определять правила дизайна по умолчанию отдельно для десктопов и мобильных гаджетов. Используйте переключатель устройств на панели «Общие стили», чтобы выбрать режим «Десктоп» или «Мобильный». Каждый режим сохраняет свои значения, поэтому изменения, внесенные в режиме «Мобильный», влияют только на мобильный вид, а не на версию для десктопов.

Настройте общий формат разметки и базовые правила для всего письма

Используйте «Общие стили» → «Глобальные стили и настройки», чтобы определить, как будет выглядеть все письмо, прежде чем приступать к работе над отдельными полосами, структурами или блоками. Стоит отметить, что не все функции для десктопов применимы к мобильным устройствам.

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

Пошаговая инструкция: настройка глобальных стилей и разметки

Задайте общий фон:

1. Выберите общий цвет фона для области письма.

2. На экране десктопа цвет фона покрывает всю область сообщения.

3. На мобильных устройствах этот фон скрыт.

Добавьте фоновое изображение (только для десктопов):

4. Выберите фоновое изображение и определите его положение.

5. Включите опцию «Повторять изображение», если картинка должна занимать всю длину письма.

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

7. Некоторые почтовые клиенты, в том числе Outlook, могут вообще не отображать фоновые изображения, поэтому установите запасной цвет фона, близкий к цвету изображения.

Настройка ширины и выравнивания контента:

8. Настроить ширину и выравнивание возможно только в дизайне для десктопов.

9. Задайте ширину контента письма. Значение по умолчанию 600 пикселей.

10. Можно указать любое значение от 320 до 900 пикселей.

11. Выберите вариант выравнивания.

Контрол подчеркивания ссылок:

12. Активируйте или деактивируйте опцию «Подчеркивание ссылок» для всего шаблона письма.

Включите направление текста справа налево:

13. Включите опцию «Направление текста справа налево» для языков, требующих RTL-скриптов, таких как арабский или урду.

Включите опцию «Пользовательские стили списков»:

14. Определите стили маркированных списков, которые будут применяться во всем письме.

Задайте стандартные значения интервалов:

15. Настройте «Отступы структуры по умолчанию». Эти отступы автоматически применяются к новым структурам.

16. Настройте «Отступ вокруг сообщения» для управления расстоянием между контентом письма и краями области сообщения.

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

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

Глобальная типографика полос

Пошаговая инструкция: настройка типографики полос по типу и точная настройка полос

Задайте глобальную типографику полос:

1. Перейдите в «Общие стили» → «Стили полос».

2. Выберите тип полосы.

3. Задайте семейство шрифтов, высоту строки и межбуквенный интервал для текстовых блоков. Эти настройки не влияют на заголовки.

4. Кроме того, можно кликнуть на блок контейнера → «Полоса».

Задайте фон полос:

5. Определите цвет фона для полосы и контента в ней.

6. При необходимости добавьте фоновое изображение.

7. Задайте резервный цвет фона, так как некоторые клиенты, например Outlook, могут не отображать фоновые изображения.

Или, если вы открываете настройки полосы, кликнув на блок контейнера:

Определите размер шрифта для каждого типа полосы:

8. Задайте размер шрифта и высоту строки по умолчанию для каждого типа полосы.

9. Используйте меньший размер шрифта для «Футера», где это уместно.

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

10. Выберите конкретную полосу.

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

Скройте полосу на мобильном устройстве:

12. Включите «Скрыть для мобильного», если полоса не должна отображаться на маленьких экранах.

Типографика в полосах для разных областей письма

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

Типы полос: «Хедер», «Контент», «Футер» и «Инфообласть». Использование типов полос помогает применять различные размеры шрифта и правила интервалов, например меньший текст в футере.

Пошаговая инструкция: форматирование блока заголовков и их стилей

Настройте заголовок:

1. Выделите текст внутри текстового блока.

2. Выберите H1, H2 или H3 в меню форматирования текста.

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

Задайте кастомные стили заголовков в контейнере:

4. Откройте «Стили» и воспользуйтесь переключателем, чтобы выбрать режим «Десктоп» или «Мобильное устройство».

5. Выберите уровень заголовка, который хотите отредактировать.

6. Задайте семейство шрифтов, межбуквенный интервал, размер шрифта, высоту строки, стиль текста и цвет шрифта.

Создавайте mobile-friendly CTA, на которые легко нажимать

Настройки кнопок по умолчанию, действующие для всего шаблона

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

Задайте глобальные стили кнопок

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

Пошаговая инструкция: настройка глобальных стилей кнопок

Откройте «Стили кнопок»:

1. Перейдите в «Общие стили» → «Стили кнопок».

2. Выберите десктопную и мобильную версию с помощью переключателя.

Настройте типографику:

3. Выберите семейство шрифтов.

4. Установите размер шрифта и цвет текста.

5. Выберите стиль текста и межбуквенный интервал.

Определите форму и цвет кнопок:

6. Установите цвет фона кнопки.

7. Настройте границы: со всех сторон или по отдельности.

8. Установите цвет границ и закругление границ.

9. Добавьте внутренние отступы.

Настройте ширину кнопок:

10. Включить опцию «Растянуть по ширине», чтобы кнопки адаптировались к ширине контейнера (только для десктопов).

Оптимизация рендеринга в Outlook:

11. Включите опцию «Поддержка Outlook», чтобы использовать VML-рендеринг для лучшего отображения кнопок в клиентах Outlook.

Настройте стили hover-эффекта для десктопов:

12. Настройте цвета фона и текста при наведении курсора на десктопе.

13. Эти стили применяются, когда курсор наводится на кнопку.

Работайте прямо в мобильном режиме просмотра внутри редактора

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

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

Пошаговая инструкция: переключение между представлениями

1. Используйте переключатель устройств в верхней панели инструментов.

2. Выберите «Десктоп» или «Мобильное устройство», чтобы просмотреть и отредактировать соответствующую версию.

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

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

Адаптивная структура: стекинг или строка

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

Инверсия контейнеров: управление порядком контента

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

Пошаговая инструкция: включение инверсии контейнеров

1. Выберите структуру с двумя контейнерами (кликните на «Структуру» над контейнером).

2. Включите опцию «Инверсия контейнеров».

3. Просмотрите мобильную версию в превью для проверки правильности порядка.

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

Добавьте интервал между контейнерами

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

Пошаговая инструкция: использование опции «Отступ между контейнерами для мобильного»

1. Выберите структуру.

2. Установите параметр «Отступ между контейнерами для мобильного», чтобы добавить зазор между контейнерами.

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

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

Пошаговая инструкция: настройка отступов на мобильных устройствах для структуры

1. Переключитесь на мобильную версию.

2. Выберите структуру.

3. Задайте «Отступы для мобильного».

Эти настройки применяются только к мобильным устройствам и не влияют на отступы в десктопной версии.

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

Адаптивное изображение: когда его включать

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

Небольшие изображения (логотипы): предотвращение нежелательной деформации

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

Пошаговая инструкция: отключение функции адаптивного изображения для небольших картинок

1. Переключитесь на мобильную версию.

2. Выберите изображение.

3. Отключите опцию «Адаптивная картинка».

4. Задайте необходимый размер изображения вручную.

Стандарты изображений для шаблонов мобильной версии писем

Для стабильного рендеринга на всех устройствах и клиентах:

• используйте форматы JPEG, GIF, или PNG;
• ширина изображения должна быть 600-800 пикселей;
• проверьте изображения в мобильном превью и реальных почтовиках.

Фоновые изображения на мобильных устройствах: что возможно, а что нет?

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

Напоминание об ограничениях рендеринга:

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

При использовании фоновых изображений всегда настраивайте резервный цвет фона.

Очистка текста на уровне блоков для удобства чтения

Исправьте некрасивые разрывы строк в текстовых блоках

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

Пошаговая инструкция: исправление разрывов строк

Сократите размер шрифта на мобильном устройстве:

1. Переключитесь на мобильную версию.

2. Выберите блок «Текст».

3. В «Стилях» уменьшите размер шрифта для мобильных устройств, чтобы текст помещался в одну строку.

Настройте выравнивание и отступы:

4. Проверьте выравнивание текста.

5. Уменьшите отступы слева и справа, так как широкие отступы могут привести к нежелательным разрывам строк.

Отключите перенос строк для нужной строки:

6. Выберите строку текста.

7. Включите опцию «Убрать перенос строк».

8. Используйте эту опцию с умом. Длинные строки с запретом переноса могут не поместиться на экране мобильного устройства и вызвать горизонтальный скролл.

Устранение неполадок: когда у письма пропадает адаптивность после отправки

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

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

Пример с Gmail: медиазапросы удаляются после отправки из Gmail

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

Пошаговая инструкция: сохранение адаптивности для Gmail

1. Экспортируйте письмо в ESP, который поддерживает медиазапросы.

2. Отправьте письмо в Gmail с этого ESP.

В этом сценарии письмо сохраняет свою адаптивность в Gmail.

Пример с Outlook: адаптивность зависит от версии и приложения

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

Различия в тестировании:

• тестовые письма, отправленные из Stripo в Outlook.com, могут быть адаптивными на мобильных устройствах.

QA-чеклист для мобильной версии перед экспортом

Перед экспортом или отправкой письма просмотрите мобильную версию в редакторе.

Проверьте следующее в мобильном превью:

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

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

В завершение

Дизайн мобильной версии письма зависит как от настроек редактора, так и от поведения почтовика. Настроив базовые параметры в разделе «Общие стили», используя мобильное форматирование для быстрой настройки и точно корректируя структуру, изображения и текст непосредственно в мобильном представлении, можно контролировать поведение писем на небольших экранах. Перед отправкой всегда просматривайте мобильное превью и тестируйте письмо в разных почтовиках, особенно если в вашей работе используются Gmail или Outlook.