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

Хедер. Это шапка рассылки: логотип, ссылки на конверсионные страницы сайта, кнопка перехода в личный кабинет.

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

Главный баннер. Для красивой адаптивной верстки на главном баннере не пишут полотно текста. Картинка сожмется, а текст и кнопка исчезнут из поля зрения получателя рассылки.

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

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

Адаптивность верстки строится на свойстве display: inline-block;. Представляю 3 колонки в ряд в макете 660 px. Отступы по краям в макете — 30 px, контентная область — 600 px. То есть одна колонка — 200 px.

Максимальная ширина одного блока на мобильной версии — 300 и 375 px, а сумма двух колонок по 200 px — это 400 px. Получается, что колонки не влезут в область экрана и упадут друг под друга автоматически.

Рассмотрим нестандартный случай, когда блоки разных размеров и не делятся поровну. Допустим, слева у нас блок в 230 px, по центру пустое место в 120 px, а справа — блок 250 px (суммарно 600 px). Требуется, чтобы при адаптации для мобильной версии блоки были отцентрированы друг под другом.

Сумма двух первых колонок равна 230 px + 120 px = 350 px, в таком случае спада 2-й колонки не произойдет на разрешении для iPhone X (375 px), а значит, пустое место останется в строчке с первым блоком.

Что сделать: разместить колонки так, чтобы сумма двух колонок была 376 px (хотя бы на пиксель больше 375, можно взять значение еще больше). То есть 1-я + 2-я = 376 px, также 2-я + 3-я = 376 px.

Три способа проверить адаптивность письма

1. Не самый верный способ — предпросмотр в рассыльщике. Эта функция не гарантирует 100%-ного совпадения.

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

3. Ручное тестирование. Как показывает практика агентства, это самый верный способ устранить все возможные косяки. У наших технических специалистов созданы специальные тестовые адреса в самых популярных почтовиках. Верстку желательно проверять как на устройствах с IOS, так и на Android.