Рассказывает Ольга Володина, старший контент-маркетолог агентства Out of Cloud
Декабрь-2020. Мы с дизайнером рисуем новогоднюю механику для бренда косметики. Задача игрока — найти продукцию бренда в большой комнате: елка, подарки, мебель, животные, мелкие предметы.
Дизайнер сдает шикарный макет. Смотрю на него и понимаю: нам придется всё переделать, потому что в экран мобильного телефона красота макета не помещается.
Пришлось переделывать в авральном режиме, зато теперь в агентстве для рассылок, лендингов существует правило mobile first. Мы всегда начинаем с того, что думаем про мобильную верстку, а потом адаптируем ее для десктопа.
По статистике агентства, 70% пользователей открывают контент: рассылки, лендинги, игры, — на экране смартфона. Исключения — на проектах брендов, которые работают в b2b-секторе, или для специалистов вроде фотографов и дизайнеров.
Неадаптивная верстка выглядит по-дилетантски
Основная особенность адаптивной верстки — динамическая подстановка блоков под разрешения и ориентации экрана. Не важно, будет это десктоп, планшет или смартфон, — картинка от этого не пострадает.
Текст и иллюстрации в адаптивной верстке хорошо читаются, пользователю не нужно зумить, чтобы что-то рассмотреть. Точный признак неадаптивной верстки — уменьшенная копия страницы сайта или email-письма.
Про адаптивное отображение письма маркетолог думает на этапе техзадания
В 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.