Всё для адаптивности в редакторе

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

Настройки адаптивности писем в редакторе eSputnik

Вы можете посмотреть настройки адаптивности на вкладке “Оформление”, которая предназначена для создания общего стиля всего письма. Сейчас нам нужен последний пункт этой вкладки:
 

Адаптивность
 

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

1. Настройка шрифтов для всего письма

Находится во вкладке "Оформление" - "Адаптивность". Здесь можно задать настройки текста и заголовков для отображения на смартфонах.

Адаптивность шрифта

Для десктопной версии писем наиболее часто используется шрифт с размером 14 пикселей. Но на экране мобильного устройства он будет слишком мелким, поэтому лучше использовать шрифт размером не менее 16 пикселей.

Для заголовков слишком большой шрифт лучше не использовать, так как такой заголовок может занимать 3-4 строки. Заданный здесь размер шрифта будет приоритетнее, чем тот размер, который задан на вкладке “Контент” (это относится и к размеру ссылок).

 

2. Настройка текста на кнопке

Размер текста на кнопке и размещение кнопки в мобильной версии письма вы также можете задать отдельно. 

Размер текста на кнопке

 

3. Перестраивание блоков

Обратите внимание: чтобы карточка товара корректно перестроилось в адаптивной версии, все ее элементы должны быть расположены в одном контейнере:

пример

 

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


пример

Если карточка товаров расположена горизонтально:

 

пример

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

пример


Здесь также действует правило размещения всех элементов в одном контейнере.
 

3.1. Обратный порядок блоков

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

3.2. Отключение адаптивности

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

4. Адаптивность картинок

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

 

Вкладка Контент

 

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

пример
размер изображения

5. Центрирование текста

На вкладке “Контент” вы можете задать выравнивание текста на мобильной версии:

 

 

При включении этого параметра текст будет размещен по центру:

пример
 

6. Отключение/включение блоков для разных устройств

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

пример


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

 

Отключение элемента на мобильном

Если мы, например, выбрали отключить на мобильном - в самом письме будет пометка, что этот блок скрыт для некоторых устройств.

Скрытие блока на мобильных

 

7. Блок "Меню" на телефоне

Что немаловажно для удобства чтения письма, вы можете сократить отображение пунктов меню на телефоне:

 

пример

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