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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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