Более 2000 бизнесменов, маркетологов, дизайнеров и разработчиков следят за новостями нашего блога.

Присоединяйтесь:

Подписаться
Отлично!

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

Все записи
Рассказывает Ольга Володина,
старший контент-маркетолог

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

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

Пример

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

По статистике агентства, 70% пользователей открывают контент: рассылки, лендинги, игры, — на экране смартфона. Исключения — на проектах брендов, которые работают в b2b-секторе, или для специалистов вроде фотографов и дизайнеров. 

Неадаптивная верстка выглядит по-дилетантски

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

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

ПримерНе является рекламой. Источник
ПримерНе является рекламой. Источник

Про адаптивное отображение письма маркетолог думает на этапе техзадания

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

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

il_adap4Пример адаптации хедера в мобильной версии

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

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

il_adap5

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

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

ПримерНе является рекламой. Источник

Верстать адаптивно помогают медиазапросы

il_adap8il_adap9Не является рекламой. Источник

Не поддерживает медиазапросы

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

il_adap11

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

il_adap12

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

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

il_adap13

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

il_adap14

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

  1. Не самый верный способ — предпросмотр в рассыльщике. Эта функция не гарантирует 100%-ного совпадения.
  2. Специальные сервисы, например Litmus, показывают, как письмо выглядит в разных браузерах, приложениях и устройствах. 
  3. Ручное тестирование. Как показывает практика агентства, это самый верный способ устранить все возможные косяки. У наших технических специалистов созданы специальные тестовые адреса в самых популярных почтовиках. Верстку желательно проверять как на устройствах с IOS, так и на Android.

 

Плюсануть
Поделиться
Класснуть