{"id":13836,"url":"\/distributions\/13836\/click?bit=1&hash=b61ea41d40ef5596d91409ad89303e69391b638d48696dedc08253272b41c2c3","title":"\u041a\u0430\u043a \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043d\u0430 \u0441\u0432\u043e\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u044b \u0430\u043d\u0430\u043b\u043e\u0433\u0438 Google Workspace \u0438 Slack","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"728ad728-b270-5f6e-aa5a-d8a9339fb1b2","isPaidAndBannersEnabled":false}

Почему mobile все-таки first, или как не налажать в адаптивном дизайне

Рассказывает Ольга Володина, старший контент-маркетолог агентства 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.

0
Комментарии
Читать все 0 комментариев
null